design-token-audit — Claude Code skill: audit design token usage
Finds where a product bypasses its design tokens: hard-coded values, duplicate names, missing scale steps.
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a claude-codeWhat design-token-audit does
This skill audits how design tokens are used across a product. It looks at coverage (what share of visual properties goes through tokens), consistency (same tokens for the same jobs, no duplicates with different names and identical values, no deprecated tokens still in use) and gaps — values that should be tokens and scale steps the set is missing.
The process runs in six steps: inventory every visual value from code and design files, group by type (color, spacing, typography), map values to existing tokens, flag hard-coded values and mismatches, rank issues by frequency and impact, then recommend new tokens, migrations and cleanup. The report opens with an executive summary and a token adoption percentage, followed by findings per category, a hard-coded value inventory with suggested replacements, and a migration plan ordered by priority.
Reach for it when tokens already exist and you suspect they are being bypassed. Defining tokens from scratch is a different job — that is design-token from design-systems. The author suggests auditing design files and code together and automating detection with lint rules where you can.
What it helps with
- track down hard-coded colors and spacing in the codebase
- measure what share of visual properties actually use tokens
- collapse duplicate tokens that share a value under different names
- catch deprecated tokens still sitting in markup
- build a priority-ordered migration plan
Example prompts for the agent
- Audit design token usage in this project and list every hard-coded value
- Give me a token coverage report: how many visual properties go through tokens and how many don't
- Find duplicate and deprecated tokens and tell me what to clean up
How to install design-token-audit
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a claude-code2Manually: put the files in place
~/.claude/skills/design-token-audit/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/design-token-audit/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a codex2Manually: put the files in place
.agents/skills/design-token-audit/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a cursor2Manually: put the files in place
.cursor/skills/design-token-audit/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills design-token-audit2Manually: put the files in place
.github/skills/design-token-audit/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path designer-toolkit/skills/design-token-auditManually: put the files in place
.devin/skills/design-token-audit/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about design-token-audit
How do I install design-token-audit in Claude?
Run npx skills add Owl-Listener/designer-skills --skill design-token-audit -a claude-code. The skill lands at ~/.claude/skills/design-token-audit/SKILL.md.
What does design-token-audit do?
It checks token coverage, consistency and gaps across a product, then returns a report with hard-coded values, suggested replacements and a migration plan.
How is it different from design-token?
design-token from design-systems is for defining tokens in the first place. Use design-token-audit once tokens exist and you want to know where they get skipped.
Source text
SKILL.md · MIT
--- name: design-token-audit description: Audit token usage across a product for coverage, drift, and hard-coded values. Use when tokens exist and you suspect they are being bypassed. For defining tokens in the first place, use `design-token` (design-systems). --- # Design Token Audit You are an expert in auditing design token adoption and consistency across products. ## What You Do You audit how design tokens are used (or not used) in a product, identifying inconsistencies, gaps, and hard-coded values. ## Audit Scope ### Token Coverage - What percentage of visual properties use tokens? - Which properties are commonly hard-coded? - Are the right tier of tokens used (global vs semantic vs component)? ### Token Consistency - Are the same tokens used for the same purposes? - Are there redundant tokens (different names, same value)? - Are deprecated tokens still in use? ### Token Gaps - Are there visual values that should be tokens but are not? - Are there use cases not covered by the existing token set? - Do custom values suggest missing token scale steps? ## Audit Process 1. **Inventory** — Extract all visual values from code/design files 2. **Categorize** — Group by type (color, spacing, typography, etc.) 3. **Map** — Match values to existing tokens 4. **Flag** — Identify hard-coded values, mismatches, and gaps 5. **Prioritize** — Rank issues by frequency and impact 6. **Recommend** — Suggest new tokens, migrations, and cleanup ## Audit Report Format - Executive summary (token adoption percentage, key findings) - Detailed findings by category - Hard-coded value inventory with suggested token replacements - Recommended new tokens - Migration plan and priority ## Best Practices - Audit both design files and code - Automate detection where possible (lint rules) - Focus on high-impact categories first (color, spacing) - Track adoption over time - Make the audit results actionable, not just informational
© Owl-Listener · MIT · Owl-Listener/designer-skills