design-system

Builds a provided design system into named tokens, a UI library in the target stack's idiom, a verifiable preview page, and three registrations (doc, AGENTS.md reference, project UI skill) — so every later UI change reuses the library instead of inlining one-off markup. Run once per UI project after /agents-md → /setup-matt-pocock-skills → placeholder fill; re-run extend when a trigger fires.

Not this skill. One page matching its design pixel-for-pixel is /pixel-audit; cosmetic QA tails are /polish-batch; porting UI from a reference stack is /port-feature; tracing existing UI is /feature-discovery.

Inputs

Infer from the request and cheap repo evidence; interview only for gaps:

• TARGET PROJECT-CODE — the full Project Matrix code; it determines the output idiom. Project Matrix missing → stop and route to /agents-md first. Read the target's stack from the matrix / AGENTS.md, never guess it.
• DESIGN-SYSTEM SOURCE (required) — a Figma file/URL (via the Figma MCP companion — not installed → say so and ask for exported frames/tokens or a written spec); a written design spec / brand guide; reference screens or a reference app; or, when none exists, a guided-definition session — walk the user through colours, neutrals, typography, type scale, spacing, radius, shadow, and base components; build only after explicit user approval. Never fabricate a whole design system silently. No source and no approved guided session → stop and ask.

Rules