Fix one element without regenerating the page.
The difference between iterating and rerolling.
The usual failure of prompt-driven design is that asking for a smaller heading returns a different page, so every correction costs you the parts you had already accepted. Design mode addresses this at the mechanism level: selecting an element and describing a change rewrites only that fragment, leaving everything else unchanged. Iteration converges on what you want instead of wandering around it.
Why whole-page regeneration fails
A language model asked to regenerate a page with one change will change other things, because it is producing the whole artefact again rather than editing it. On the third correction you are usually further from what you wanted than you were on the first. This is not a prompting problem and better instructions do not fix it, because the failure is in what is being asked for.
What selection actually changes
The canvas renders the page in a frame with an editing overlay that lets you pick a specific element. The change request is scoped to that element's fragment, so the rest of the document is untouched rather than regenerated and coincidentally similar.
There is a properties panel too
Not everything needs a sentence. An inspector exposes direct manipulation for the changes that are faster to make than to describe, and pages are organised as tabs so a multi-page project stays navigable while you work through it.
The cost of a bad edit loop compounds
This matters more than it sounds because design iteration is not two or three steps, it is twenty. If each one has a small chance of disturbing something you had already settled, the expected number of things broken by the end is high enough that people stop iterating and accept whatever the third attempt produced. Making edits local is what keeps the twentieth change as cheap as the first.
What is preserved across a refinement
Section identifiers survive an element refinement, which is what lets the rest of the document stay stable and lets a later full-fidelity upgrade know which region is which. It is the same property that makes the wireframe to high-fidelity step safe, applied at a smaller scale.
One file, no build step
Output is one self-contained HTML document with every style inside a single style tag. No build step, no bundler, no external stylesheet and no framework. That is a real constraint and it is also why the result is portable: it opens in a browser, drops into a pull request, attaches to a brief and deploys to a static host without carrying a toolchain behind it.
Which engine runs it
Design runs on the Claude Code CLI or the Codex CLI installed on your machine, signed in as you. There is no separate design subscription and no API key for the design engine. Cursor CLI and OpenCode can drive coding tabs but not this one, because the design canvas has no provider implemented behind them.
Questions
Related
- Design With Your Claude Code or Codex LoginNo second subscription for the design tool, because it is running the one you already pay for.
- Design to CodeNot generated components you then have to rewrite. A reference, and an agent that knows your codebase.
- Responsive Preview at Mobile WidthStated plainly because the buttons imply more than they do: these are viewport widths, not platforms.
- AI Landing Page DesignA real page you can open and click, not a picture of one.
Last updated