Skip to main content
skill CX Codex

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a claude-code
Open on GitHub

What 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-code

2Manually: put the files in place

~/.claude/skills/design-token-audit/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/design-token-audit/

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

Similar skills

Everything for Design →

From the same set111

design-qa-checklist Builds a systematic QA checklist to verify that an implementation matches design specs. Use it during review to catch visual, layout, and accessibility bugs. CX Codex +1 2,200installs loading-states Designs waiting states with skeletons, progress indicators, progressive loading and optimistic updates. Use it when content or actions take time to complete. CX Codex +1 2,200installs design-critique The skill runs a team design critique: session framing, feedback rules, and action items with owners. Built for sessions with people in the room. CX Codex +1 2,200installs state-machine Models UI component behavior as explicit states, events, and transitions. Useful when a component has multiple interacting states that must remain predictable. CX Codex +1 2,200installs animation-principles A skill that tunes one specific UI animation: picks easing, duration and the order in which related elements move. CX Codex +1 2,200installs wireframe-spec Defines wireframe layout specifications, content priorities, and interaction notes. Useful when structuring an interface before moving into visual UI design. CX Codex +1 2,300installs micro-interaction-spec Specifies one micro-interaction end to end: trigger, rules, feedback, loops and modes. Useful when a single interaction goes to engineering. CX Codex +1 2,300installs accessibility-test-plan Plans accessibility testing sessions with assistive technology and real users. Useful when preparing user flows for WCAG compliance. CX Codex +1 2,100installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor