What Designer does
Designer reads your vision statement and generates a complete, runnable UI mock 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.
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 .spec4/design/mock.html inside your project directory. 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, Cursor, 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?
You can skip Designer — no UI to mock means no mock needed.
