A skill that makes Claude work like a design systems lead on your brand. It reads your brand guide, logo files or site, lists every colour with its code and where it came from, and builds even 11-step colour ramps around your exact brand values. It then sets a type scale, spacing, corner radius, shadows and motion timings. It maps every colour to a job in light and dark, checks every text and control pair against WCAG 2.2 AA with code, and writes a starter spec for the button, input, card, link, badge and focus ring. Last, it exports the lot as W3C design tokens JSON, CSS variables and Figma import files.
Inside are five reference files. One holds the token format and the rules of each tool (Figma variables, Tokens Studio, Style Dictionary, Tailwind), with sources and the date checked. The others cover naming and tiers, the WCAG figures and contrast maths, the component spec, and a full worked example for an invented paper brand with real computed values. Claude works one stage at a time and ends each with one question. It never alters a brand colour, never guesses a hex from a picture, and never states a contrast ratio it has not calculated. Colours always pass through a semantic layer, so dark mode switches properly.
It cannot create variables inside your Figma file. It writes the files and you import them in a few clicks. Light and dark in one Figma collection needs a paid Figma plan, and typography and shadows become text and effect styles because variables cannot hold them. Tokens that pass contrast do not make a product accessible, and the skill will not claim they do. Switch on code execution before you start, since the ramps, the ratios, the two-mode preview and the files all depend on it. Bring SVG logos or the colour codes from your guide rather than screenshots, and have your font licences to hand.
Claude skill · version 1.0
Design system tokens
Checking your access.
In the download · 7 files
- SKILL.mdThe method Claude follows: six stages from brand inputs to primitives, semantic tokens in light and dark, a starter component spec, exported files and a final check.
- README.mdHow to install it in claude.ai or Claude Code, how to start, and the licence.
- references/worked-example.mdA full run for an invented paper brand, with ramps, contrast ratios, a button spec and file excerpts, every value computed.
- references/formats-and-tools.mdThe DTCG 2025.10 token format and resolver, Figma variables import rules and plan limits, Tokens Studio, Style Dictionary, Tailwind v4 and CSS rules, with sources, checked 17 October 2026.
- references/token-architecture.mdThe three tiers, the naming grammar, OKLCH colour ramps with tested code, type, spacing, radius, elevation and motion scales, the starter semantic set and dark mode rules.
- references/accessibility-checks.mdWCAG 2.2 figures with sources, the US legal picture in brief, contrast maths with code, the pairs to test and the final checklist.
Install it and begin
01Install it in Claude CodeTerminal mkdir -p ~/.claude/skillsunzip ~/Downloads/design-system-tokens.zip -d ~/.claude/skills/# Start it with /design-system-tokens. If this is your first skill, type /reload-skills once.On claude.ai there is nothing to unzip: upload the zip as it is. Every step is on Install and use a Claude skill.
02Your first message to ClaudeText Use the design system tokens skill. Our brand is [BRAND NAME] and the tokens are for [OUR SITE, APP OR FIGMA LIBRARY]. Our colours are [HEX CODES FROM THE BRAND GUIDE] and our fonts are [FONT NAMES]. We design in [FIGMA PLAN OR TOOL] and need [LIGHT AND DARK] modes. Start with the inputs and tell me what is missing.Attach your brand guide PDF or an SVG of your logo, and switch on code execution first. Rough inputs are fine, because the first stage lists what is missing.
Side by side
Primitive, semantic and component tokens, side by side
| Primitive | Semantic | Component | |
|---|---|---|---|
| What it names | A raw value, by what it is | A job, by where it is used | One property of one component |
| Example | color.green.700 = #1F5C45 | color.action.primary.bg = {color.green.700} | button.primary.bg = {color.action.primary.bg} |
| Changes in dark mode | Never | Yes, it points at a lighter or darker step | Only through the semantic token it uses |
| Who picks it in Figma | Nobody. Hide it from publishing | Designers, for fills, strokes and text | Nobody directly. It lives inside the component |
| Typical count in a starter set | 120 to 200 | 50 to 90 per mode | 30 to 60 |
| Add a new one when | A brand colour or a scale step is added | The interface needs a job no token covers | A component must differ from the semantic default |
| The rule it never breaks | Its value never changes once shipped | It never holds a raw value | Its colours never skip the semantic tier |
Colour always passes through the semantic tier, because that is where dark mode lives. Sizes such as a button height may point straight at a primitive.
What to do it with
- ClaudeFree tier, paid above it
A language model that writes, edits, reads long documents and runs tools, including agents that work inside a codebase.
Bad at It is agreeable by default, so it will improve a bad idea instead of telling you it is bad. Ask it to argue against you and the quality of the answer changes.
- Claude CodeSubscription
An agent that reads a whole repository, edits files, runs the tests and explains what it changed.
Bad at It is fast enough to make a large mistake quickly. Work on a branch, read the diff, and never let it push. Watch the starting mode: on Pro, Max and Team plans it opens in auto mode, which Anthropic's own list says may read a .env file and send the key in it to the API that key belongs to. Switch it off.
- FigmaFree tier, paid above it
The shared file where interface design happens: components, variables, prototypes and the handoff to code.
Bad at Its generative features make plausible screens rather than considered ones, and a plausible screen is the hardest kind to argue with in a review.
- Tokens StudioFree tier, paid above it
Manages design tokens inside Figma and exports them in a form code can consume.
Bad at Token naming is where most systems rot, and no plugin decides that for you.
Tells you whether two colours are legible together, against the published standard.
Bad at The ratio is a floor and not a design. Passing text can still be unpleasant to read.
Picks colour in a space where equal steps look equal, which is what makes a tonal scale behave.
Bad at Needs a little theory before it is useful, and older browsers want a fallback.
- Tailwind CSSOpen weights or open source
Styling by composing small classes, which makes a design system enforceable in the markup.
Bad at It pulls teams towards its default scale, and its defaults are now visible on a great many sites.
Why it matters
Ask a chat for design tokens and you tend to get hex codes called primary, secondary and grey-500, with a dark mode that simply inverts them. The muted grey usually fails on a cream or tinted background, and nobody notices until a developer runs a checker. This skill makes Claude build the tiers properly, keep your brand values exact, compute every contrast pair in both modes, and write files that Figma and Tokens Studio will import, because their quirks (pixels only, seconds only, hex strings) are written down.
- Type
- technique
- Period
- ongoing