design-system
Installation
SKILL.md
Design System
Turn a brief into a validated design system, recorded in DESIGN.md at the project root — the identity file every later design session reads first. This skill also scopes the page set into a PAGES.md skeleton, which the greyboxing skill owns from then on.
Stack-agnostic: express the tokens through the project's own theming mechanism (CSS variables, Tailwind theme, component library — whatever the stack offers).
Prerequisites
| Skill | For |
|---|---|
grilling |
the mandatory grill gate before validation |
prototype |
rendering the token showcase |
extract-theme |
replicating a reference site's tokens (that branch only) |
When one is missing, tell the user before the step that needs it.
1 — Design read
Read the brief's signals before touching a token: project kind, vibe words, linked references, audience, existing brand assets, and quiet constraints (accessibility-first, regulated, trust-first — these override aesthetic preference).