Editable-Design: AI-Generated Designs You Can Edit, Layer by Layer

01: The Dilemma — Pretty but Uneditable vs Editable but Ugly

Traditional AI image generation delivers flat pixels. Models decide composition, color, and texture in one shot but do not expose titles, prices, illustrations, or background textures as manipulable objects. This makes post-generation edits — changing a price, moving a logo, fixing a typo — painful: text baked into pixels leads to misspellings, garbled characters, and font inconsistencies; local changes require inpainting, redrawing, or full regeneration, often altering previously satisfactory composition.

Direct code generation (HTML/CSS) offers structure: text is selectable, elements movable, styles adjustable. However, structure alone does not guarantee design quality. Complex posters involve visual hierarchy, whitespace, typographic scale, materiality, and spatial relationships; a single coding pass often yields functionally correct but aesthetically flat results.

Editable Visual Design bridges this gap: visual models handle artistic direction, code handles structured representation, and a persistent agent connects the two.

02: Workflow — Not Embedding Images, but Rebuilding Design

The visual model first proposes composition, hierarchy, color, and spatial relationships, acting like an art director that guides the agent on what the design should look like. Crucially, the reference pixels never enter the final deliverable.

The agent then regenerates clean, independent visual assets and rebuilds text and layout with semantic HTML. Headings remain real text; illustrations, backgrounds, and decorative elements sit on separate layers. The output is not an image embedded in a webpage but an editable design file.

The process comprises six steps:

Understand requirements, define canvas, information hierarchy, and visual direction.

Invoke visual model to explore compositions, not to deliver final images.

Generate independent, clean visual assets.

Rebuild layout and real text with semantic HTML.

Render, observe issues, and iterate fixes.

After validation, deliver together with editor and process recording.

The key shift: generation does not stop at "output an image." The same agent owns the loop from requirement understanding through rendering, inspection, and repair. It makes design decisions and confronts actual browser-rendered results. If a title overflows, a font fails to load, or a layer misaligns, the agent continues adjusting rather than accepting the first version.

03: Editable Output & Design Replay

Opening the final file lets users double-click to edit text and individually select/drag illustration, background, decoration, and text layers. Because semantic structure is preserved, local edits avoid full regeneration.

The project includes an Agent Design Replay. It records not just chat logs but the full path: requirement understanding, composition planning, asset generation, HTML implementation, rendering observation, and local repair. Users see not only the result but why the agent laid out elements a certain way, what problems it discovered, and how it corrected them.

Most generative design tools today are black boxes between input and output. When generated results enter real production pipelines, traceability and editability matter as much as first-look visual quality.

To prevent "looks about right" deliveries, Editable Visual Design enforces deterministic checks: canvas dimensions, fonts, layer conventions, actual rendering, and editor round-trips. Editing capability is part of the delivery format, not a demo gimmick.

04: 14 Case Studies Across 6 Design Categories

The repository showcases 14 cases covering six visual design tasks: marketing campaigns, information design, typographic design, posters, academic posters, and artistic design. Examples include bubble-tea product posters, e-commerce skincare promos, red-panda encyclopedia pages, NYC three-day itineraries, ab-workout plans, full-text "Preface to the Pavilion of Prince Teng" posters, academic research posters, and artistic visual works.

These cases deliberately target scenarios where AI image generation struggles most: dense Chinese copy, high information density, price numerals, tabular modules, and strict hierarchical long-form text. Structured delivery shifts the problem from "require the model to draw every character correctly in one shot" to "keep text as text from the start."

Each case provides final rendering, editable demo, and agent design replay. Developers can reproduce the flow via the Editable Design Codex Skill; where source structure permits, a companion tool exports to PowerPoint with independently selectable elements.

05: The Next Step for AI Design — Beyond Bigger Images

For two years, image models have competed on resolution, realism, and instruction following. Editable Visual Design asks a different question: after an image is generated, can it naturally flow into the next work stage?

Real design workflows rarely end at first render. Copy changes, assets swap, aspect ratios adapt to channels, and one visual system spawns multiple variants. Delivering only pixels means the model finishes the creative front half but leaves the back half to humans.

Structured, editable generative design pushes that chain further. Visual models contribute aesthetic priors; code carries structure; the agent continuously observes and corrects between them until producing a design file that can genuinely be used onward.

It may not replace professional design software, nor turn every designer into a frontend engineer. The practical significance: when AI participates in design, the deliverable no longer has to be just a PNG. Moving from "draw me a picture" to "give me a design I can keep editing" may be the true start of AI design entering production.

Project repository: https://github.com/yejy53/Editable-Design Paper:

https://huggingface.co/papers/2609.04034