Design-tokens
The problem
Creating coherent design tokens is slow and error-prone. Going from a brand color to valid JSON with perceptually uniform scales, WCAG/APCA accessibility values, and HSL/OKLCH formats can take hours. And doing it right — following the W3C Design Tokens Community Group specification — is specialist territory.
The solution
A Claude Code skill that acts as an interactive W3C token generator. With three inputs (brand color, base gray, and typography) it generates a complete system: color palettes with a canonical OKLCH scale, modular typography, spacing, elevations, grid, motion, accessible focus, and the new Liquid Glass material from iOS 26.
Two modes:
- Quick (3 inputs → complete file).
- Guided (12 steps for full control).
The creation process
The skill is defined in a single Markdown file at .claude/commands/design-tokens.md. The main challenge was specifying the behavior: how to calculate perceptually uniform color ramps, how to structure the JSON per the W3C spec, what to ask and in what order, and how to generate the HTML showcase with no external dependencies.
Several iterations to refine: the canonical OKLCH scale, the cross-token reference system ({spacing.gap.4}), the structure of composite typography tokens, and accessibility extensions for each literal color.
The execution process
When "/design-tokens" is invoked, Claude follows the skill flow:
- Asks for the mode (quick or guided).
- Collects the required inputs.
- Runs a Python script internally for color calculations (OKLCH → sRGB, WCAG, APCA) with mathematical precision.
- Writes "{name}.tokens.json" and "{name}.showcase.html".
- Opens the showcase in the browser with "open".
The showcase is self-contained HTML that reads the JSON via "fetch" and renders the tokens live.
Results
- 339 tokens generated from 4 inputs in quick mode.
- Color palettes with a canonical OKLCH scale guaranteeing consistent contrast across hues.
- WCAG AA/AAA badges and APCA values for each color.
- Navigable showcase with 11 sections: colors, typography, spacing, elevations, grid, motion, Liquid Glass…
- JSON file ready to import into Figma, Style Dictionary, or Theo.
Learning and Conclusion
Claude Code skills are surprisingly powerful when the instruction is well specified. The Markdown file is the product: it defines the behavior, the calculations, the output format, and the tone of the conversation.
The biggest takeaway: precision in the skill prompt matters more than in any conversational prompt . Every ambiguity becomes a poorly generated token or an unnecessary question to the user. Investing time in the specification saves time on every subsequent run.
Showcase
For a quick-mode input of:
- Name: Luis DS
- Primary color: #870E46
- Accent color: #41F6AB
- Neutral color: #869095
- Typography:Afacad (Google Fonts)
The following result was obtained:
- Color: 100 tokens
- Typography: 38 tokens
- Spacing: 70 tokens
- Aspect ratio: 6 tokens
- Elevations (shadows): 7 tokens
- Borders (width & radius): 12 tokens
- Grid and breakpoints: 30 tokens
- Focus: 6 tokens
- Motion: 16 tokens
- Shader: 54 tokens
- TOTAL: 339 tokens
Assumptions:
- Secondary #008AA7 derived automatically (primary hue +210° → teal)
- Accent #41F6AB used as-is (user-provided)
- Spacing base: 4px, Tailwind-style scale (35 steps)
- Border radius base: 8px (sm=4px, lg=12px, xl=16px…)
- Shadow base: #101828
- Motion: subtle style (slightly longer durations)
- Semantic colors: defaults (most used)
- Focus: WCAG 2.2 §2.4.11 (ring 2px, offset 2px)
- Liquid Glass: 3 variants (default/thick/ultra-thin), iOS 26