Prompt Flow

Connected prompt nodes in three reading paths. Follow the arrows left to right. Prompts shared across paths appear in multiple lanes.

Start here
Start with chain.md
Paste chain.md into Claude Code once. It asks 6 questions — archetype, BYOC, fonts, framework, scope, domain — determines your path (A, B, or C), then runs the prompts below automatically with checkpoints at each stage. Ad-hoc mode: run any prompt directly from the nodes below.
Download chain.md
Stage 0 · Choose
Stage 1 · Tokens
Stage 2 · Components
Stage 3 · Publish
Stage 4 · Maintain
Path A · Quick / Greenfield
Path B · Standard / Figma MCP
Path C · Deep / Quality gate
Path A
Quick · Greenfield
prompt 00
Archetype from adjectives
→ archetype rec
prompt 01
Tokens from spec
→ tokens.css · BYOC Q1
prompt 02
Typography scale
→ all font tokens
03
Foundation components
04
Composite components
05
Pattern components
06
Chrome
07
Domain components
08
Spec page
09
Section templates
10
Layer 3 extraction
11
Drift audit
12
A11y audit
13
Framework wrappers
14
Storybook stories
Path B
Standard · Figma MCP
prompt 19 · opt
MCP diagnostic
→ verify connection
MCP read
Figma Dev Mode
→ variable extraction
prompt 01 · Path B
Tokens from Figma
→ tokens.css · font detection
03
Foundation
04
Composite
05
Patterns
prompt 08
Spec page
→ design-system-spec.html
14
Storybook stories
15
Figma write-back
27
Mapping report
Chain 10
Three-Phase Path B
prompt 16
Phase 1 — STUDY
→ design spec (no code)
prompt 17
Phase 2 — GENERATE
→ code from spec
prompt 18
Phase 3 — REFINE
→ surgical corrections
chain 8 · opt
Figma write-back
→ close round-trip
Path C
Deep · Quality gate
Figma critique
Audit vs spec
→ deviation list
Designer
Revise in Figma
→ corrected file
prompt 01 · Path C
Tokens from corrected file
→ tokens.css
03
Foundation
04–05
Composite + Patterns
11
Drift audit
12
A11y audit
23
Cross-screen audit
Ad-hoc
Standalone tools
20
Project setup
21
Artifact mockup
22
Extended Thinking
24
Pixel-perfect clone
25
Framework migration
26
Legacy refactor
Two pastes before every generation prompt
Governance + archetype spec
Every generation node (01–09, 13) expects governance.spec.md and <archetype>.spec.md pasted before running. Download both from kit/README.html.
Download everything
kit.zip — all prompts + specs
Download kit.zip for every prompt, chain, and spec file. Open kit/README.html as your getting-started guide.