What Designer does
Designer plans before it draws. It first writes a structured design manifest — design/manifest.json — tying every screen element back to your features, including AI features rendered as real in-context interactions. Then it generates the mock from that plan: a complete, runnable UI as a single HTML file. No frameworks, no external dependencies, no CDN links — just a self-contained file you can open in any browser, share with anyone, and hand directly to your AI coding agent. Designer runs in parallel with the rest of the pipeline — start it any time after Brainstormer.
Create from scratch
Reads your vision statement — project name, purpose, target audience, and key features — and generates a UI mock that fits. You provide style preferences and an optional reference screenshot to guide the look and feel.
Modify existing
Analyzes up to 20 of your existing UI source files and creates a mock that preserves your established look and feel, while reflecting the new features or changes you're planning.
Iterative refinement
Not quite right? Describe the changes you want — in plain language, with an optional reference image — and Designer regenerates. Repeat until you're satisfied.
Stays out of your stack
The output is pure HTML, CSS, and JavaScript in a single file. No React, no Tailwind, no build step. All CSS lives in a <style> block; all JS at the end of <body>. Zero external dependencies.
How to use the mock
Designer saves the mock to design/mock.html in the current planning round, alongside its manifest. Once you have it:
Share before you build
Open it in any browser. Share the file with teammates or clients for alignment before any code is written.
Inform StackAdvisor
StackAdvisor can reference the mock when recommending UI libraries — matching framework choices to what the design actually needs.
Ground your phases
Phaser references the mock when writing phase instructions, so your coding agent knows exactly what it's building toward.
Visual spec for your agent
Hand the mock to Claude Code, Hermes, Kiro, Antigravity, or your tool of choice as a concrete visual target — not just a text description.
When to use Designer
✓
You're building a web or mobile app and want a visual target before development starts
✓
You want to align with teammates or stakeholders before writing code
✓
You want to give your AI coding agent something concrete to build toward
✓
You have an existing UI and want a mock of the new version before changing production code
Building a CLI, batch processor, or API-only project?
Designer is skipped automatically — no UI to mock means no mock needed.
