claude-design-system-architect

# 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 cont...