Describe what you want to design — brand, screens, flows, platform — and Claude generates complete UI/UX designs autonomously using parallel AI agents, the Figma MCP, and a built-in QA gate.
You write a design brief → Claude breaks it into screen tasks → AI designers generate each screen → QA reviews every design → you get a complete, brand-consistent UI.
You have two options:
Option A: Upload a document
Drop any PDF, Word (.docx), or Markdown file into the docs/ folder. This can be a scope of work, brand guide, UX spec, or any design brief.
Then type in Claude Code chat:
import docs
Claude reads every file, extracts your screens, flows, brand colors, and requirements, then shows you a summary with any gaps. Review it, answer any questions, and confirm. Claude writes SCOPE.md and memory/brand-guidance.md automatically.
Option B: Fill in SCOPE.md manually
Open SCOPE.md and fill in:
- Project name and goals
- Visual style, tone, emotional direction
- Brand colors (hex values), typography, icon set
- Figma design system URL (if you have one)
- Target platform (web / iOS / Android / responsive)
- Screen inventory — every screen you need, grouped by flow
- Accessibility and responsive requirements
The more detail you provide, the better the designs.
Type in chat:
parse scope
Claude reads SCOPE.md and creates TASKS.md — one design task per screen group or flow. Each task includes the screens to design, required states (default, loading, error, empty), brand compliance checklist, acceptance criteria, and dependencies.
Claude shows you the full task list for review before saving. Adjust anything you want, then confirm.
If you have a Figma design system, component library, or reference screens, add the Figma URL to SCOPE.md (section 4) or directly to a task's MCP URL field in TASKS.md.
Then type:
figma ingest
Claude connects to Figma, pulls your design tokens, component library, and screen assets, and injects them into each task. Designers will use your actual tokens instead of inventing values.
Type in chat:
start design
Claude launches the full pipeline:
- Design system task runs first — establishes the token palette, typography scale, and base components
- Independent screen flows run in parallel — multiple Designer agents work simultaneously on different flows
- Each Designer generates screens using the Figma MCP, applies brand tokens, covers all required states, and self-reviews
- QA reviews every design — checks brand compliance, state coverage, visual consistency, and accessibility
- Failed designs go back to the Designer with specific fix notes; approved designs are marked
done
This loop runs automatically until every task is done or a blocker needs your attention.
Check the status at any time:
show status
This prints a summary: how many tasks are done, in review, in progress, blocked, and pending.
If you close Claude or the session ends, just type:
resume design
Claude picks up exactly where it left off — no rework, no lost progress.
If you need to add, remove, or change screens after tasks are already generated:
- Edit
SCOPE.mdwith the new requirements - Type:
delta scope
Claude shows you a diff — what's new, what changed, what became obsolete — and asks for your confirmation before touching TASKS.md. Completed designs are never overwritten.
| Command | What it does |
|---|---|
import docs |
Reads docs/ folder, extracts design brief, fills SCOPE.md + memory/brand-guidance.md |
parse scope |
Generates TASKS.md from SCOPE.md — one design task per screen group |
figma ingest |
Pulls design tokens, components, and assets from Figma into task context |
start design |
Launches the full design pipeline (Orchestrator → Designers → QA) |
resume design |
Picks up the pipeline from where it stopped |
show status |
Shows task counts: done / in-review / in-progress / blocked / pending |
qa only |
Runs QA review on all completed tasks without starting new design work |
delta scope |
Safely re-plans when SCOPE.md changes after tasks already exist |
refresh mcp |
Force-refetches Figma context, ignoring the cache |
reqops |
Generates detailed per-screen design requirements from your brief (optional deep-dive) |
Every command also works as a slash command — type / in the input box to see the full list.
You
└─ write SCOPE.md or drop docs
│
▼
Orchestrator
├─ reads TASKS.md
├─ fetches Figma context for tasks that need it
├─ identifies which screen flows are independent
└─ spawns one Designer per independent flow (parallel)
│
▼
Designer (one per flow, running in parallel)
├─ reads the task: screens, states, brand rules, Figma tokens
├─ generates screens using Figma MCP
├─ covers all required states (default, loading, error, empty)
├─ self-checks brand compliance and state coverage
└─ hands off to QA
│
▼
QA Agent (shared, reviews all flows)
├─ checks brand token usage (no hardcoded colors or fonts)
├─ checks all required states are designed
├─ checks visual consistency across screens
├─ checks accessibility (contrast ratios, touch targets)
├─ PASS → marks task done, updates design memory
└─ FAIL → sends specific fix notes back to Designer
Nothing is marked done until QA approves it.
SCOPE.md is the only file you write manually. Everything else is generated. The more detail you give, the better the output.
Most important fields:
| Field | Why it matters |
|---|---|
| Brand colors (hex values) | Designers use exact values — no guessing |
| Typography (font, sizes, weights) | Ensures consistent text across all screens |
| Target platform | Controls frame sizes and responsive rules |
| Screen inventory | Defines exactly which screens exist and what states each needs |
| Figma URL | Lets agents pull your actual design system instead of inventing one |
Tips:
- Be specific about colors:
#1A73E8 (primary blue)not just "blue" - List every screen state you need:
default, loading, error, empty - If a screen has a special layout rule, describe it in the flow description
- List what's out of scope to prevent agents from inventing extra screens
docs/ ← drop your design brief, SOW, or brand guide here
SCOPE.md ← the single source of truth — fill this in manually or via "import docs"
TASKS.md ← generated by "parse scope", updated by agents during design
AGENTS.md ← how the agents are structured (reference, not for editing)
CLAUDE.md ← session rules Claude reads at startup (not for editing)
memory/
brand-guidance.md ← generated brand style guide (colors, type, icons, platform rules)
design-system.md ← token and component inventory built up during design
design-patterns.md ← layout and interaction patterns discovered during design
decisions.md ← design decisions log
mcp-cache/ ← cached Figma context (auto-managed, do not edit)
.claude/
skills/ ← AI agent skills (import-docs, parse-scope, design-task, qa, etc.)
commands/ ← slash command definitions
.cursor/
skills/ ← mirror of .claude/skills/ for Cursor users
rules/ ← always-on rules for Cursor users
"A task is blocked"
Read the QA notes: field in TASKS.md for the blocked task. It will say exactly what's missing — usually a missing Figma node ID, an ambiguous spec sentence, or a brand value that wasn't defined. Fix the issue in SCOPE.md or the task, then type resume design.
"The designs don't match my brand"
Check memory/brand-guidance.md — if your hex values or font specs aren't there, run import docs again with a clearer brand guide, or manually add the values to SCOPE.md section 3 and re-run parse scope.
"I added new screens mid-design"
Edit SCOPE.md to add the new screens, then type delta scope. Claude shows you what's new and asks for confirmation before adding tasks. Your existing completed designs are untouched.
"Figma ingest keeps failing"
The most common cause is a wrong Figma node ID — the link points to a device frame wrapper instead of the actual content frame. In Figma, right-click the content frame itself (not the phone shell around it), copy the link, and paste it into the MCP URL field in TASKS.md. Then run figma ingest again.
"I want to restart from scratch"
Delete TASKS.md, edit SCOPE.md with your changes, and run parse scope again. Only do this if no tasks are done — if work has already been completed, use delta scope instead.