Claude Design System Architect
A design system is the difference between a site that looks bespoke and one that looks like every other AI-generated landing page. This skill builds the token layer and component language that makes everything downstream look intentional — then exports it in the formats your stack actually uses.
Pairs with claude-landing-composer (which consumes these tokens to build pages) and claude-design-critic (which audits against them).
Step 1 — Establish the brand inputs
From a brief, an existing site (WebFetch / screenshots), or a few reference sites the user likes:
- Personality — 3–5 adjectives (e.g. "warm, editorial, confident, calm"). These drive every later decision.
- Audience & context — who uses it, on what device, in what mood.
- Existing equity — logo, locked colors, fonts already in use.
- Anti-references — what it must NOT look like.
Defaults & house rules
Unless the brand explicitly overrides:
- No purple anywhere in the palette.
- No emoji in UI — use an icon set (Lucide / Heroicons) and specify it as a token.
- Lean toward warm / earth tones (sand, terracotta, clay) and consider a dark surface option.
- Motion is part of the system, not an afterthought.
Step 2 — Build the tokens
Design each layer deliberately and document the why:
- Color — a real ramp (50–900) per hue, semantic tokens (
surface, text, muted, accent, border, success/warn/danger), and verified contrast (WCAG AA min for body text). Include a dark mode set. No arbitrary hexes scattered later — everything maps to a token.
- Type — a font pairing with rationale, a modular scale (not random px), line-heights and tracking per size, and weights. Prefer characterful, legible pairings over the default system stack that screams "AI made this."
- Space & layout — a spacing scale, container widths, grid, breakpoints. Generous, asymmetric whitespace reads premium; cramped uniform padding reads generated.
- Radius / border / elevation — a small, consistent set. Shadows that match the brand's weight (soft for warm brands, crisp for technical ones).
- Motion — duration + easing tokens, named patterns (entrance, emphasis, transition), and a reduced-motion stance. This is what makes it feel alive.
Step 3 — Specify components
For the core set (button, input, card, nav, section, badge, modal), specify variants, states (hover/focus/active/disabled), sizing, and accessibility notes — all expressed in the tokens above, never one-off values.
Step 4 — Export
Produce real files, not prose:
tailwind.config extension (or @theme for Tailwind v4) wiring every token.tokens.css — CSS custom properties (light + dark).design-system.md — the usage doc: palette with hexes + contrast, type scale, spacing, motion, component specs, and do/don't examples that call out the AI-tell patterns to avoid.
Step 5 — Hand off
End with a one-screen summary and the next move: claude-landing-composer to build pages on these tokens, or claude-design-critic to retrofit an existing UI onto them.
What separates premium from generated (bake this in)
- Intentional, restrained palette — not 6 competing accent colors.
- A real type scale and characterful fonts — not default sans at 3 sizes.
- Asymmetric, generous whitespace — not uniform padding everywhere.
- Motion with personality — not the same fade-up on every element.
- One confident accent — not rainbow gradients (and never purple-by-default).
Guardrails recap
Every value is a token, nothing arbitrary · contrast meets AA · dark mode + reduced-motion included · no purple / no emoji unless the brand demands it · export real config files, not descriptions.
1---2name: claude-design-system-architect3description: Generate a complete, premium design system from a brand brief or an existing site — color tokens, type scale, spacing/radius/elevation, motion language, and component specs — exported as Tailwind config, CSS variables, and a usage doc. Built to look editorial and human-crafted, not template-generated. Use when starting a new product/site, unifying an inconsistent UI, or codifying a brand into reusable tokens.4---56# Claude Design System Architect78A design system is the difference between a site that looks bespoke and one that looks like every other AI-generated landing page. This skill builds the token layer and component language that makes everything downstream look intentional — then exports it in the formats your stack actually uses.910Pairs with `claude-landing-composer` (which consumes these tokens to build pages) and `claude-design-critic` (which audits against them).1112## Step 1 — Establish the brand inputs1314From a brief, an existing site (WebFetch / screenshots), or a few reference sites the user likes:15- **Personality** — 3–5 adjectives (e.g. "warm, editorial, confident, calm"). These drive every later decision.16- **Audience & context** — who uses it, on what device, in what mood.17- **Existing equity** — logo, locked colors, fonts already in use.18- **Anti-references** — what it must NOT look like.1920### Defaults & house rules21Unless the brand explicitly overrides:22- **No purple** anywhere in the palette.23- **No emoji** in UI — use an icon set (Lucide / Heroicons) and specify it as a token.24- Lean toward **warm / earth tones** (sand, terracotta, clay) and consider a **dark surface** option.25- Motion is part of the system, not an afterthought.2627## Step 2 — Build the tokens2829Design each layer deliberately and document the *why*:30- **Color** — a real ramp (50–900) per hue, semantic tokens (`surface`, `text`, `muted`, `accent`, `border`, `success`/`warn`/`danger`), and verified contrast (WCAG AA min for body text). Include a dark mode set. No arbitrary hexes scattered later — everything maps to a token.31- **Type** — a font pairing with rationale, a modular scale (not random px), line-heights and tracking per size, and weights. Prefer characterful, legible pairings over the default system stack that screams "AI made this."32- **Space & layout** — a spacing scale, container widths, grid, breakpoints. Generous, asymmetric whitespace reads premium; cramped uniform padding reads generated.33- **Radius / border / elevation** — a small, consistent set. Shadows that match the brand's weight (soft for warm brands, crisp for technical ones).34- **Motion** — duration + easing tokens, named patterns (entrance, emphasis, transition), and a reduced-motion stance. This is what makes it feel alive.3536## Step 3 — Specify components3738For the core set (button, input, card, nav, section, badge, modal), specify variants, states (hover/focus/active/disabled), sizing, and accessibility notes — all expressed in the tokens above, never one-off values.3940## Step 4 — Export4142Produce real files, not prose:43- `tailwind.config` extension (or `@theme` for Tailwind v4) wiring every token.44- `tokens.css` — CSS custom properties (light + dark).45- `design-system.md` — the usage doc: palette with hexes + contrast, type scale, spacing, motion, component specs, and **do/don't** examples that call out the AI-tell patterns to avoid.4647## Step 5 — Hand off48End with a one-screen summary and the next move: `claude-landing-composer` to build pages on these tokens, or `claude-design-critic` to retrofit an existing UI onto them.4950## What separates premium from generated (bake this in)51- Intentional, restrained palette — not 6 competing accent colors.52- A real type scale and characterful fonts — not default sans at 3 sizes.53- Asymmetric, generous whitespace — not uniform padding everywhere.54- Motion with personality — not the same fade-up on every element.55- One confident accent — not rainbow gradients (and never purple-by-default).5657## Guardrails recap58Every value is a token, nothing arbitrary · contrast meets AA · dark mode + reduced-motion included · no purple / no emoji unless the brand demands it · export real config files, not descriptions.
gked2121