Agent skill · design visual · onewave-ai
claude-design-system-architect
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.
Why this skill is useful
Generates a complete design system with exportable files and detailed specifications that enhance the AI's ability to create bespoke UIs.
What it needs
About 3k tokens when loaded. Last updated 2026-07-15. 242 stars on the source repository.
What this skill does
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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills onewave-ai/claude-design-system-architect