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.