Design Tokens
Extract design tokens from a stylesheet, a Tailwind or theme config, or a screenshot, then create or update design/tokens.json and report every added, changed, and removed token.
/design-tokens[stylesheet, config, or image path]A Claude Code slash command that reads the stylesheet, theme config, or screenshot you pass, extracts tokens as W3C DTCG-style JSON, and writes design/tokens.json. When that file already exists it diffs against it first and prints every added, changed, and removed token, so re-running it is reviewable rather than destructive.
%20skill%20over%20the%20source%20you%20name%2C%20then%20writes%20or%20updates%20%60design%2Ftokens.json%60.%20The%20second%20run%20matters%20more%20than%20the%20first%3A%20it%20diffs%20the%20new%20extraction%20against%20the%20file%20already%20on%20disk%20and%20shows%20you%20what%20changed%20before%20anything%20is%20written.%0A%0A%23%23%20Scope%0A%0AInterpret%20%60%24ARGUMENTS%60%20in%20this%20order%3A%0A%0A1.%20**A%20stylesheet%20or%20config%20path**%20(%60.css%60%2C%20%60.scss%60%2C%20%60tailwind.config.*%60%2C%20%60theme.ts%60%2C%20%60tokens.css%60)%3A%20%60Read%60%20it.%20Values%20from%20a%20file%20are%20exact%3B%20use%20them%20as%20given.%0A2.%20**An%20image%20path**%20(%60.png%60%2C%20%60.jpg%60%2C%20%60.webp%60)%3A%20%60Read%60%20it.%20Values%20from%20an%20image%20are%20estimates%20and%20every%20one%20is%20labeled%20as%20such%20in%20the%20notes.%0A3.%20**Several%20paths**%3A%20read%20all%20of%20them%2C%20extract%20once%20across%20the%20set%2C%20and%20record%20which%20file%20each%20token%20came%20from.%20Where%20two%20files%20disagree%20on%20a%20value%2C%20both%20are%20reported%20and%20neither%20is%20silently%20preferred.%0A4.%20**A%20directory**%3A%20%60Glob%60%20inside%20it%20for%20stylesheets%20and%20configs%2C%20list%20what%20you%20found%2C%20and%20proceed%20with%20those.%0A5.%20**Empty**%3A%20%60Glob%60%20for%20%60tailwind.config.*%60%2C%20%60**%2Ftheme.%7Bts%2Cjs%7D%60%2C%20%60src%2F**%2F*.css%60%2C%20and%20%60styles%2F**%2F*.css%60%2C%20list%20what%20you%20found%2C%20ask%20which%20to%20use%2C%20and%20stop.%0A%0AIf%20a%20path%20cannot%20be%20read%2C%20say%20so%20and%20continue%20with%20the%20rest.%0A%0A%3E%20%5B!NOTE%5D%0A%3E%20The%20output%20is%20DTCG-*style*%3A%20it%20uses%20the%20%5BW3C%20Design%20Tokens%20Community%20Group%5D(https%3A%2F%2Ftr.designtokens.org%2Fformat%2F)%20format's%20%60%24value%60%2C%20%60%24type%60%2C%20and%20%60%24description%60%20keys%20so%20token%20tooling%20can%20consume%20it%2C%20but%20this%20command%20does%20not%20validate%20against%20the%20specification%20and%20makes%20no%20conformance%20claim.%0A%0A%23%23%20Step%201%20%E2%80%94%20Read%20the%20source%20and%20collect%20raw%20values%0A%0ARead%20each%20source%20in%20full.%20For%20a%20stylesheet%20or%20config%2C%20use%20%60Grep%60%20to%20count%20how%20often%20each%20color%2C%20size%2C%20spacing%20value%2C%20radius%2C%20and%20shadow%20appears%20across%20the%20project%2C%20not%20just%20in%20the%20file%20you%20were%20given%3B%20frequency%20is%20what%20separates%20a%20token%20from%20a%20one-off.%20For%20an%20image%2C%20list%20only%20what%20you%20can%20distinguish%20and%20say%20where%20in%20the%20screen%20you%20looked.%0A%0A%23%23%20Step%202%20%E2%80%94%20Cluster%2C%20scale%2C%20and%20name%0A%0ACluster%20near-identical%20colors%20into%20one%20token%20and%20say%20which%20values%20were%20merged.%20Sort%20font%20sizes%20and%20report%20the%20ratio%20between%20steps%20and%20how%20well%20it%20holds.%20Test%20spacing%20values%20against%20a%204px%20or%208px%20base%20and%20list%20the%20ones%20that%20do%20not%20fit%20rather%20than%20rounding%20them%20in.%20Name%20by%20role%20where%20usage%20makes%20the%20role%20clear%20(%60color.action.primary%60%2C%20%60font.size.body%60)%2C%20by%20ramp%20step%20where%20it%20does%20not%20(%60color.neutral.700%60).%20Semantic%20tokens%20alias%20ramp%20tokens%20(%60%22%24value%22%3A%20%22%7Bcolor.neutral.900%7D%22%60)%20so%20the%20ramp%20stays%20the%20single%20source.%0A%0A%23%23%20Step%203%20%E2%80%94%20Diff%20against%20the%20existing%20file%0A%0A%60Glob%60%20for%20%60design%2Ftokens.json%60.%20If%20it%20exists%2C%20read%20it%20and%20compare%2C%20then%20print%20three%20lists%20before%20writing%20anything%3A%0A%0A-%20**Added**%20%E2%80%94%20tokens%20in%20the%20new%20extraction%20that%20the%20file%20does%20not%20have.%0A-%20**Changed**%20%E2%80%94%20same%20token%20name%2C%20different%20%60%24value%60%2C%20with%20both%20values%20shown.%0A-%20**Removed**%20%E2%80%94%20tokens%20in%20the%20file%20that%20the%20source%20no%20longer%20contains%2C%20listed%20as%20candidates%20only.%0A%0ANever%20delete%20a%20token%20because%20the%20source%20you%20were%20given%20this%20run%20does%20not%20include%20it%3B%20that%20source%20may%20be%20one%20stylesheet%20out%20of%20five.%20Removals%20are%20reported%20and%20left%20in%20the%20file%2C%20marked%20with%20a%20%60%24description%60%20note%2C%20unless%20the%20user%20says%20to%20drop%20them.%0A%0A%23%23%20Step%204%20%E2%80%94%20Write%20the%20file%0A%0AWrite%20%60design%2Ftokens.json%60%20with%20groups%20in%20the%20order%20%60color%60%2C%20%60font%60%2C%20%60space%60%2C%20%60radius%60%2C%20%60shadow%60%2C%20creating%20%60design%2F%60%20if%20needed.%20Preserve%20any%20%60%24description%60%20a%20human%20wrote%20in%20the%20existing%20file%3B%20do%20not%20overwrite%20a%20curated%20description%20with%20a%20generated%20one.%20On%20a%20first%20run%2C%20write%20the%20file%20and%20say%20it%20is%20a%20starting%20point%20that%20needs%20a%20human%20pass%20over%20the%20names.%0A%0A%23%23%20Output%0A%0AThe%20three%20diff%20lists%20(or%20%22new%20file%22%20on%20the%20first%20run)%2C%20the%20path%20written%2C%20the%20token%20count%20by%20group%2C%20and%20the%20ambiguities%20list%3A%20values%20estimated%20from%20an%20image%2C%20colors%20merged%2C%20values%20that%20missed%20the%20scale%2C%20and%20names%20that%20were%20guessed.%20Then%20a%20next-step%20line%3A%20run%20the%20%5Bdesign-systems-librarian%5D(%2Fagents%2Fdesign%2Fdesign-systems-librarian)%20agent%20to%20find%20where%20the%20codebase%20still%20hardcodes%20values%20this%20file%20now%20names%2C%20and%20use%20the%20token%20names%20in%20%5B%2Fnew-component%5D(%2Fcommands%2Fscaffold%2Fnew-component)%20so%20new%20work%20starts%20on%20the%20system.%20Keeping%20the%20file%20current%20is%20covered%20in%20%5BMaintain%20a%20design%20system%20with%20Claude%20Code%5D(%2Fguides%2Fdesign%2Fmaintain-a-design-system-with-claude-code)%2C%20the%20rest%20of%20the%20designer%20set%20in%20%5BClaude%20skills%20for%20designers%5D(%2Fguides%2Fdesign%2Fclaude-skills-for-designers)%2C%20and%20the%20term%20itself%20in%20%5Bdesign%20tokens%5D(%2Fglossary%2Fdesign-tokens).){kind=link}
Install to ~/.claude/commands/design-tokens.md
npx agentscamp add commands/design-tokensTurn whatever holds your visual values right now into a token file, and keep that file honest as the design changes. This command runs the design-token-extractor skill over the source you name, then writes or updates design/tokens.json. The second run matters more than the first: it diffs the new extraction against the file already on disk and shows you what changed before anything is written.
Scope
Interpret $ARGUMENTS in this order:
- A stylesheet or config path (
.css,.scss,tailwind.config.*,theme.ts,tokens.css):Readit. Values from a file are exact; use them as given. - An image path (
.png,.jpg,.webp):Readit. Values from an image are estimates and every one is labeled as such in the notes. - Several paths: read all of them, extract once across the set, and record which file each token came from. Where two files disagree on a value, both are reported and neither is silently preferred.
- A directory:
Globinside it for stylesheets and configs, list what you found, and proceed with those. - Empty:
Globfortailwind.config.*,**/theme.{ts,js},src/**/*.css, andstyles/**/*.css, list what you found, ask which to use, and stop.
If a path cannot be read, say so and continue with the rest.
NOTE
The output is DTCG-style: it uses the W3C Design Tokens Community Group format's $value, $type, and $description keys so token tooling can consume it, but this command does not validate against the specification and makes no conformance claim.
Step 1 — Read the source and collect raw values
Read each source in full. For a stylesheet or config, use Grep to count how often each color, size, spacing value, radius, and shadow appears across the project, not just in the file you were given; frequency is what separates a token from a one-off. For an image, list only what you can distinguish and say where in the screen you looked.
Step 2 — Cluster, scale, and name
Cluster near-identical colors into one token and say which values were merged. Sort font sizes and report the ratio between steps and how well it holds. Test spacing values against a 4px or 8px base and list the ones that do not fit rather than rounding them in. Name by role where usage makes the role clear (color.action.primary, font.size.body), by ramp step where it does not (color.neutral.700). Semantic tokens alias ramp tokens ("$value": "{color.neutral.900}") so the ramp stays the single source.
Step 3 — Diff against the existing file
Glob for design/tokens.json. If it exists, read it and compare, then print three lists before writing anything:
- Added — tokens in the new extraction that the file does not have.
- Changed — same token name, different
$value, with both values shown. - Removed — tokens in the file that the source no longer contains, listed as candidates only.
Never delete a token because the source you were given this run does not include it; that source may be one stylesheet out of five. Removals are reported and left in the file, marked with a $description note, unless the user says to drop them.
Step 4 — Write the file
Write design/tokens.json with groups in the order color, font, space, radius, shadow, creating design/ if needed. Preserve any $description a human wrote in the existing file; do not overwrite a curated description with a generated one. On a first run, write the file and say it is a starting point that needs a human pass over the names.
Output
The three diff lists (or "new file" on the first run), the path written, the token count by group, and the ambiguities list: values estimated from an image, colors merged, values that missed the scale, and names that were guessed. Then a next-step line: run the design-systems-librarian agent to find where the codebase still hardcodes values this file now names, and use the token names in /new-component so new work starts on the system. Keeping the file current is covered in Maintain a design system with Claude Code, the rest of the designer set in Claude skills for designers, and the term itself in design tokens.
Related
- Design Systems LibrarianUse this agent to keep a design system's tokens, components, and documentation consistent with each other — finding hardcoded colors, spacing, and radii that should be tokens, components with no docs and docs describing variants that no longer exist, naming drift between token names, component names, and design-tool variables, and stale documentation — then reporting the drift with severity and a prioritized fix list. Examples — 'audit our design system for hardcoded values', 'which components are undocumented or documented wrong?', 'our token names and the Figma variables have diverged, show me where'.
- Design Token ExtractorRead a screenshot, a pasted stylesheet, or a written component description and produce a design token set as W3C DTCG-style JSON, with colors, a type scale, spacing, radii, and shadows grouped and named, followed by a notes list saying which values were read exactly, snapped to a scale, or estimated by eye. Use when a design exists only as pixels or ad-hoc CSS and you need a named token set to start from.
- Maintaining a Design System with Claude CodeTokens, components, docs, and the Figma file drift apart within weeks. A repo layout, CLAUDE.md rules, and three Claude Code jobs that catch it every week.
- Design TokensDesign tokens are named values for a design system's decisions — color, spacing, type, radius — stored once and referenced everywhere instead of hardcoded.
- New ComponentScaffold a new UI component matching the project conventions.