Editable Visual Design splits poster generation between a VLM that plans and writes HTML/CSS and an image model called only for aesthetic references and standalone assets, so the final deliverable is a layered DOM with real text instead of a flattened bitmap.
You’re building a feature that turns a marketing brief into a poster or infographic. You have two off-the-shelf options today, and both hurt. Route A: call an image model like GPT-image-2 or Nano Banana 2. You get gorgeous composition, but the text is misspelled, and your designer can’t move the headline because everything is baked into one raster. Route B: ask a strong coding model like GPT-5.6-sol to emit HTML/CSS directly. Layers are clean, text is real, but the output looks like a Bootstrap template from 2015: big headline, card, rounded shadow, no atmosphere.
This paper’s pitch is that neither route alone gives you a production design artifact, and you shouldn’t have to pick. Prior code-first work like Design2Code optimizes for layout fidelity to a screenshot, not aesthetic quality; prior image-first work like COLE tries to decompose graphic design into layers but still returns rasterized pieces.
The system treats the coding model as the “brain” and the image model as a callable simulator, loosely inspired by the World Action Model idea of separating a planner from a world simulator. Five stages run in a loop.
First, the agent reads the brief and calls the image model for an imagined visual: not a wireframe, but a picture of what the finished piece could plausibly look like. This is used as a mood board, not copied. The VLM then parses it for color palette, composition, and style, and those become the aesthetic prior for coding.
Second, the agent plans the layout and calls the image model again, this time for isolated assets: a text-free background, a cut-out subject. Two routes here. If the image model supports transparent output, request an alpha channel directly. Otherwise, generate the subject on a flat green background and run a matting script to lift it out. Crucially, no pixels from the imagined visual reach the deliverable. Assets are always regenerated standalone so layers stay clean.
Third, the agent writes native HTML/CSS with a fixed pixel canvas (not viewport-relative, so coordinates a user drags are stable) and tags each movable element as its own layer. Fourth, a headless browser runs deterministic checks (overflow, missing resources, malformed DOM) and a VLM reviewer looks at the rendered screenshot for alignment and readability issues, closing the loop with targeted code patches.
plan = vlm.plan(brief)
mood = image_model.generate(plan.style_prompt) # imagined visual
style_prior = vlm.parse_style(mood)
assets = [image_model.generate(a, alpha=True) for a in plan.asset_prompts]
html = vlm.write_layout(plan, style_prior, assets)
for _ in range(max_rounds):
screenshot = headless_render(html)
issues = deterministic_checks(html) + vlm.review(screenshot, plan)
if not issues: break
html = vlm.patch(html, issues)
return html, agent_design_replay_trace
Fifth, the full trajectory (plan, prompts, code diffs, review notes) is serialized as an Agent Design Replay that a user can inspect and intervene in.
The common assumption in agentic image generation is that the model should produce the final artifact end-to-end, whether as pixels or as code. This paper argues the opposite. The image model is most useful as an upstream aesthetic oracle and an asset renderer, never as the deliverable itself; code is the only substrate that preserves editability. The evidence is qualitative: side-by-side cases where the pixel route produces distorted text and welded layers, the pure-code route produces clean but flat layouts, and the split routing produces both atmosphere and separable layers.
This is a system paper with case studies, not a benchmark paper. There are no accuracy numbers, no scored comparisons.
•
In the head-to-head figure, GPT-image-2 alone returns a locked bitmap with garbled Chinese text. GPT-5.6-sol alone (via Codex) returns valid code but with large blank areas and chaotic layout. The combined system produces clean typography with separable layers.
•
The Agent Design Replay on a red panda infographic yields 120 editable layers in 13 groups, with the VLM reviewer catching and patching real layout defects across the render-repair rounds.
•
A simpler travel poster comes out at 6 layers in 1 group, and the reviewer passes it with no repair rounds. Layer count tracks brief density rather than being fixed.
•
Scenarios shown include event posters, infographics, marketing materials, and long-text layout. All deliver as native DOM where text, background, and illustration are independently selectable.
Reach for this pattern when you’re building a design-generation feature and your users are designers who need to open the file and adjust things. The concrete recipe: use your strongest coding model as the planner and HTML/CSS author, call your best image model only for (a) one mood-board image to extract palette and composition, and (b) individual transparent assets. Render in a headless browser, run deterministic layout checks first (cheap), then a VLM review on the screenshot (expensive), and cap repair at one or two rounds.
The paper releases no code, no dataset, and no model weights. It’s a design pattern and a set of case studies. The specific stack the authors used is Codex driven by GPT-5.6-sol as the brain and GPT-image-2 as the visual simulator, but nothing in the pipeline is tied to those specific models.
Use the image model as a mood board and an asset factory, not as the final canvas. Code is what stays editable.
•
No quantitative evaluation. The paper explicitly says aesthetic quality is hard to score and reports cases instead. You cannot compare this system’s output to a baseline on any number, and the VLM reviewer that gates the repair loop is judging itself.
•
Everything shown is single-page. Multi-page decks or full websites need consistency (same type scale, same palette, thematic continuity across pages) that this loop does not address, and the authors flag this as unsolved.
•
The system is bounded by both models. If the image model has weak composition sense, the aesthetic prior it provides is worthless. If the coding model writes weak layouts, no amount of good mood-boarding fixes it. Also, the alpha-channel-or-green-screen asset trick fails when the subject itself contains the chroma color.