Two ways to use the kit
Paste chain.md into Claude Code once. The orchestrator collects all decisions upfront (archetype, BYOC, fonts, scope), runs prompts sequentially, saves every output automatically, and pauses for your review at each checkpoint.
Paste one prompt at a time from prompts/ into any Claude session. Each prompt is self-contained — meta-header checks prerequisites, asks branching questions (BYOC, fonts), generates output, and announces what to run next.
Chain Mode setup
Extract kit.zip into the root of the project you're building a design system for. Or clone the kit folder directly.
Open the project in Claude Code (recommended — enables auto-save of generated files). Claude.ai also works; each save point will give you copy-paste instructions instead.
chain.mdOpen kit/chain.md and paste its contents into your Claude session. The orchestrator scans your output/ folder (creates it if needed), detects where you are in the chain, and asks the six upfront questions before running anything.
Archetype · BYOC brand colors · brand fonts · framework · component scope · domain components. Answer once — answers carry forward through every prompt automatically.
Each step produces a checkpoint: "Saved output/tokens.css. Continue?" You can review, preview, skip, or stop. Progress is saved in output/chain-state.md — resume any time.
Path entry points
| Path | When to use | Start with | Chain |
|---|---|---|---|
| A · Quick | Greenfield — no Figma file, starting from adjectives | chain.md → choose scope A–D |
Chain 9 — Greenfield end-to-end |
| B · Standard | Existing Figma file — extract tokens via Dev Mode MCP | 01-tokens-from-spec.md (MCP mode) |
Chain 2 — Figma MCP extract |
| C · Deep | Audit existing work against the archetype spec | 11-drift-audit.md + 12-a11y-audit.md |
Chains 4 + 5 |
The two-paste workflow
Every prompt that generates tokens or components requires two pastes before running: 1. Paste governance.spec.md (HTML preview) first — universal gates, non-negotiable. 2. Paste your chosen archetype spec second — HTML preview and .md download on each card in the Archetype specs section below. Two pastes, every prompt.
Prompt sequence (Path A)
| # | Prompt | What it produces | Output file |
|---|---|---|---|
| 00 | Archetype from adjectives | Archetype recommendation + per-dimension reasoning | (decision only) |
| 01 | Token generation | Color, spacing, radii, motion tokens. BYOC built in. | output/tokens.css |
| 02 | Typography scale | Font families + full type scale. Brand fonts applied here. | output/tokens.css (updated) |
| 03 | Foundation components | Button, Input, Badge, Card, Alert, Dialog, Table, Form, Empty state | output/foundation.css |
| 04 | Composite components | Modal, Drawer, Tabs, Combobox, Accordion, Popover | output/composite.css |
| 05 | Pattern components | Archetype-aware page patterns | output/patterns.css |
| 06 | Chrome | Nav, Header, Footer, Sidebar, Modal Sheet, Drawer | output/chrome.css |
| 07 | Domain components | Product-specific components from 2-sentence descriptions | output/domain.css |
| 08 | Spec page | Self-contained design-system-spec.html (live rendered) | output/design-system-spec.html |
| 09 | Section templates | Archetype section template library | output/section-templates.css |
| 10 | Layer 3 extraction | Component-level tokens discovered from repeated values | output/tokens-layer-3.css |
| 11 | Drift audit | Severity-ranked drift report | (report) |
| 12 | A11y audit | WCAG 2.1 AA findings | (report) |
| 13 | Framework wrappers | CSS → React / Vue / Svelte component files | output/*.tsx / *.vue / *.svelte |
BYOC — Bring Your Own Colors
BYOC is built into Prompt 01. When Prompt 01's meta-header asks "Do you have brand colors to honour?" — answer yes and supply your primary hex (and optionally accent). The prompt activates ramp derivation and WCAG validation inline. No separate prompt needed.
Archetype specs
Paste the governance spec FIRST, then your chosen archetype spec. Both live in specs/. Each card opens the rendered HTML preview in a new tab; the download button retrieves the raw .md for pasting into Claude.