← back to the book

Full Prompt Catalog

How the book's prompts compose into chains across Path A · Quick, Path B · Standard, and Path C · Deep. Click any prompt or chain to open its file in /build/kit/. Stub status indicates the verbatim prompt body lands when the corresponding chapter ships.

Chain Mode — recommended entry point
chain.md — the orchestrator

Paste kit/chain.md into Claude Code once. It collects archetype, BYOC, fonts, and scope upfront, then runs any path below sequentially — saving every output, asking for review at each checkpoint, resuming if you stop. Individual prompts still work ad-hoc; each now includes meta-header Q&A and meta-footer save/handoff.

Open chain.md →

Three paths · one substrate

Path A · Quick
Greenfield
Chain 9
1
00 · archetype-from-adjectives
3 adjectives → archetype rec + reasoning. Confirm or override before running Prompt 01.
2
01 — BYOC built in
Generate output/tokens.css. Asks about brand colors + fonts before generating. BYOC activates via Q&A — no separate 01b paste.
3
02 typography
Type scale + (optional) brand fonts.
4
03 → 04 → 05
Foundation → composite → pattern components.
5
chrome · 07 domain · 09 sections
Nav / header / footer + product-specific components + section templates.
6
08 spec page
Self-contained design-system-spec.html. Append publishing-footer credit row.
7
layer-3 (after stabilize)
Discover repeated values, lift to component-level tokens.
8
13 framework · 14 Storybook
Framework wrappers (TSX / Vue / Svelte) + Storybook stories per component.
Path B · Standard
Mature system
Chains 2 + 3 + 7 + 10
0
19 MCP diagnostic (optional)
Verify Figma MCP connection before any extract step. Lists tools, reports state.
1
Figma Dev Mode MCP read
Existing Figma file is the artifact. AI consumes it directly.
2
01 (Path B mode)
tokens.css extracted from Figma artifact, validated against archetype spec.
3
03 → 04 → 05
Components from extracted tokens + spec.
4
08 spec page
Published reference page for engineering handoff.
5
27 mapping report → Chain 8 write-back
Plan with mapping report; execute via Chain 8 (Prompt 15) when code ships ahead of Figma.
6
Alternative: Chain 10 — Three-Phase workflow
16 STUDY → 17 GENERATE → 18 REFINE. Use when production code must match Figma byte-for-byte.
Path C · Deep
Quality gate
Chains 4 + 5
1
Figma + spec critique
Audit existing Figma against the archetype spec. Flag deviations.
2
Revise → MCP read
Designer corrects Figma. AI re-reads via MCP.
3
01 + 03–05
Tokens + components from corrected artifact.
4
11 drift · 12 a11y · 23 cross-screen audit
Continuous gates against the canonical spec. Cross-screen audit is the multi-image variant — catches inter-screen drift that single-screen audits miss.

Standalone & ad-hoc tools

Seven prompts that don't compose into chains — pick à la carte for specific situations. The Ch21 catalog table groups them with their use cases.

Ad-hoc
Standalone tools
No chain — pick when needed
·
20 Project setup (Claude Design)
One-time configuration of a Claude Project for design system work. Spec + tokens loaded once; persists across sessions.
·
21 Rendered Artifact mockup
Generate a rendered HTML/CSS Artifact in claude.ai for design exploration. Screenshot → Figma reference handoff.
·
22 Extended Thinking layout
Multi-constraint layout problems where reasoning chain matters. Use deliberately — costs more tokens than standard mode.
·
24 Pixel-perfect clone (Path B variant)
Token-enforced byte-for-byte clone of a Figma frame. Divergence list for designer review.
·
25 Framework migration via Figma source
Migrate a component between frameworks (Tailwind ↔ vanilla CSS, etc.) using Figma as canonical reference, not the existing code.
·
26 Legacy refactor to spec
Bring an existing component into archetype-spec compliance. Behavior preserved, prop API unchanged. Validates via Chain 4 + Chain 5.

Stages · what runs when

Same prompts, grouped by lifecycle stage instead of path. Useful when you're locating a prompt by purpose.

Stage 0 · choose

Archetype selection from adjectives

Path A only. Maps adjectives → archetype recommendation with per-dimension reasoning.

00 · archetype-from-adjectives
Stage 1 · tokens

tokens.css generation + typography

From specs (Path A) or from Figma via MCP (Path B/C). Optional BYOC variant for brand colors. Optional font substitution via Prompt 2.

01 — BYOC built in 02 · typography
Stage 2 · components

Foundation → composite → pattern → chrome → domain

Five distinct prompts cover the full component lifecycle. Each builds on the previous; each consumes the same tokens.css + spec pair.

03 · foundation 04 · composite 05 · pattern chrome 07 · domain
Stage 3 · publish

Section templates + spec page + framework wrappers

Output for handoff and framework consumption.

09 · sections 08 · spec page framework wrappers
Stage 4 · audit · maintain

Drift, accessibility, Layer 3 emergence

Run continuously after Stage 3. Layer 3 extraction discovers tokens; drift + a11y audits keep the system honest.

11 · drift 12 · a11y layer-3

Catalog · all prompts

Every prompt with its frontmatter at a glance. Click any card to open the prompt file.

prompt 01
Token generation from archetype spec
inputs governance + archetype spec
outputs tokens.css
chains 1, 9
prompt 02
Typography scale + brand fonts
inputs tokens.css + (optional) font names
outputs tokens.css updated
chains 1, 9
prompt 11stub
Drift audit
inputs canonical tokens.css + target
outputs drift report
chains 4
prompt 12stub
Accessibility audit (WCAG 2.1 AA)
inputs rendered HTML / components
outputs a11y report
chains 5
prompt 03stub
Foundation components
inputs tokens.css + specs
outputs component.css (foundation)
chains 3, 9
prompt 04stub
Composite components
inputs foundation + specs
outputs component.css (composite)
chains 3, 9
prompt 05stub
Pattern components (archetype-aware)
inputs composite + specs
outputs component.css (patterns)
chains 3, 9
prompt 07stub
Domain components
inputs spec + 2-sentence descriptions
outputs domain.css
chains 3, 9
prompt 08stub
Spec page assembly
inputs tokens + components + specs
outputs design-system-spec.html
chains 7, 9
prompt 09stub
Section template library
inputs component.css + spec
outputs section-templates.css + sections.html
chains 9
prompt 00
Archetype selection from adjectives
inputs 3 brand adjectives
outputs archetype rec + reasoning
chains 9
frameworkstub
CSS → React / Vue / Svelte wrappers
inputs component.css + framework
outputs *.tsx / *.vue / *.svelte
chains 3
layer-3stub
Layer 3 token extraction
inputs locked tokens + components
outputs tokens-layer-3.css
chains 1, 9
chromestub
Nav · Header · Footer · Sidebar · Modal · Drawer
inputs tokens + components + specs
outputs chrome.css
chains 3, 9

Chains · the 9 workflows

chain 1
Token cascade
Path A · 01/01b · 02 · layer-3
chain 2
Figma → MCP → tokens
Path B · MCP read · 01
chain 3
Component generation
A/B/C · 03–05 · chrome · 07 · framework
chain 4
Drift audit
Path C · 21
chain 5
A11y audit
A/B/C · 35
chain 6
Storybook generation
A/B/C · forthcoming prompt
chain 7
Spec page publish
A/B/C · 08 + post-render
chain 8
Figma write-back (Code → Figma)
Path B · forthcoming prompt
chain 9
Greenfield end-to-end
Path A · 11 prompts in sequence