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. Cancel is available.
6. Preview. The mock in a frame, with full-screen. 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.

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. 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 previous implemented round's approved mock 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. 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.