Designer

Reads

vision.json and, when they exist, ai_features.json and feature_specs.json — every AI surface is drawn as a real interaction, with its inputs as controls and its output as a result. In a brownfield project, up to twenty of your existing UI source files, 8,000 characters of each, so the mock captures the look you already have. Reference images you upload, with a note on each about what to take or avoid. In a revision round, the previous implemented round's approved mock.

Reference images and screenshots need a model that accepts images; on one that doesn't, upload is off and Designer draws from text alone.

Asks

Seven steps:

1. No-UI check. If the vision has no user interface — a CLI, an API — Designer says so and offers to be skipped.
2. Start / Resume. Create new design; or, when a prior mock exists, Carry forward or Start over. Skipping is always available.
3. Vision. One text box. Describe the look you want in your own words — theme, colours, layout, mood, typography, or anything else; there is no form to fill in, and nothing is required. Specific beats vague: dark navy background, orange accent, card-based layout produces a better mock than modern.
4. Screenshots. Optional. Images of designs you like or don't like, each with a note on what to take from it or avoid.
5. Generate. One call, streamed, with a progress bar and the run's cost. While the model reasons before its first output, the counter reads Thinking — N chars; after 15 seconds mid-draw with nothing arriving, it says so, with the thinking count and how long the pause has lasted. Cancel is available.
6. Preview. The mock in a frame, with full-screen, and the result of the check below. Continue to StackAdvisor approves it; Refine takes a description of changes and optional images and regenerates; Start over discards it.
7. Refine. The same call with the current mock and your note and optional additional images; the model is told to change only what you asked and preserve everything else.

The mock is checked before you approve it, in two deterministic layers. On the server, the extracted document is checked for truncation, a document that doesn't close, unbalanced <script> or <style> tags, and an unterminated template literal. In the browser, the preview runs the mock with a one-line error reporter that catches thrown errors, unhandled promise rejections, and failed resource loads; it is injected into the preview only, so line numbers are unchanged and the saved design/mock.html is untouched. A status line above the frame then reads Rendered cleanly, or counts the errors with a Fix errors button that starts a refine quoting them back to the model. Nothing runs without your click, and nothing new is installed: the checking browser is your own.

The preview frame is sandboxed, which takes away localStorage, sessionStorage, cookies, IndexedDB, and history writes, and a drawn mock often keeps its state in exactly those. Before the mock's first script runs, Spec4 puts in-memory stand-ins in their place, so a mock that works in a browser tab doesn't report errors in the preview that only the sandbox causes. Nothing of the mock's own is hidden.

Modify existing is the brownfield path: Designer reads your UI source and produces a baseline that matches the current colour scheme, typography, spacing, and component shapes — a reference, not a redesign — which you then refine toward what you're planning. Screenshots, if you add them, take precedence over the source.

Writes

design/mock.html — one complete HTML document: CSS in a <style> block, JavaScript in a <script> block, no frameworks, no external assets, no CDN links. One screen per target audience, with in-page navigation between them, and realistic content drawn from the vision rather than placeholder text. It opens in any browser, and the coding agent is pointed at it by path.

design/manifest.json — the plan the mock was drawn from. Designer writes the manifest first, then renders the HTML to match it: entities, the conceptual data the UI presents and edits, with fields; screens, one per audience, each with a purpose and the surfaces placed on it; and surfaces, one per interactive region, with what it reads and writes, its states, the features it implements, and an advisory ordering hint. Feature ids are pinned by Spec4 from the vision, so downstream agents can join a surface to its feature however the model named it.

Every draw produces the manifest — the first, and each refinement after it. A refinement re-states the whole manifest for the mock as it now is: screens, surfaces, and entities the change didn't touch carry through, and anything it adds or removes is added or removed. The file is rewritten only when that differs from what's on disk, so a purely visual refinement leaves it untouched. Start over clears both. Approving a carried-forward mock without redrawing it copies in the established manifest when the round has none, so StackAdvisor always has one to read; a manifest already there is left as it is. StackAdvisor reads the manifest and not the mock: a purely visual change can't invalidate a stack choice. Artifacts

Designer also keeps design/session.json — the step, your description, and the current mock — so a closed wizard resumes where it was. No agent reads it.

An example mock is on this site.

Buttons

Designer can run any time after Brainstormer; it doesn't wait for Agentifier. Skipping it is allowed: Phaser plans without a mock and the coding agent chooses the look.

Across rounds

In a revision round, Carry forward loads the approved mock from the newest implemented round that has one as the baseline and prefills the refine note from this round's delta — the features added, changed, and removed, named by Brainstormer, with an instruction to preserve everything the changes don't touch. The established look carries forward; the mock changes only where the round does. The draw produces this round's manifest for the revised mock. A round implemented without Designer doesn't break the chain: Carry forward reaches back past it to the last approved mock. Rounds

In Spec4's own rounds

Two calls, about 56k tokens, and $1.64 in v0; one call, 55k, and $1.97 in v1, both on claude-fable-5-1; one call, 63k, and $0.93 in v2 on claude-opus-5. In v1 Designer was the round's largest line: a single call that is the whole mock. The v2 mock — step 3 of this very wizard, in the developer-tool look — is the one whose manifest is excerpted on the Artifacts page.