design-token-audit
owl-listener/designer-skills
Audit design token adoption and identify hard-coded values, gaps, and drift across your product.
What is design-token-audit?
Analyzes how design tokens are used (or bypassed) in your codebase and design files, measuring coverage and consistency. Use this when tokens exist but you suspect they're being inconsistently applied or hard-coded values are creeping in.
- Inventory all visual values in code and design files and categorize by type (color, spacing, typography, etc.)
- Map existing values to your token set and identify hard-coded values that should use tokens
- Detect token consistency issues like redundant tokens with different names or deprecated tokens still in use
- Measure token adoption percentage and identify which properties are commonly hard-coded
- Flag gaps where visual values exist but no corresponding token is defined
- Prioritize findings by frequency and impact, with actionable recommendations for new tokens and migrations
How to install design-token-audit
npx skills add https://github.com/owl-listener/designer-skills --skill design-token-auditHow to use design-token-audit
- 1.Provide access to your codebase and design files (Figma, code repositories, etc.)
- 2.Define your current token set and structure (global, semantic, component tiers)
- 3.Run the audit to extract and categorize all visual values
- 4.Review the generated audit report with coverage percentage and key findings
- 5.Prioritize recommendations based on impact and effort
- 6.Create a migration plan for hard-coded values and missing tokens
Use cases
- Audit a mature design system to measure token adoption and identify where hard-coded values have crept in
- Detect inconsistent token usage across a large codebase before enforcing stricter design system compliance
- Identify missing tokens in your scale (e.g., spacing or color steps) based on custom values developers are using
- Track token adoption metrics over time to measure design system maturity
- Plan a token migration by finding all instances of deprecated tokens still in active use
- Design systems leads and maintainers
- Product designers implementing design systems
- Frontend engineers enforcing design token compliance
- Engineering leads auditing design system adoption across teams
design-token-audit FAQ
design-token helps you define and structure tokens from scratch. design-token-audit analyzes how well existing tokens are being used and identifies gaps, hard-coded values, and inconsistencies.
Yes, the audit process covers both code (where tokens are applied) and design files (like Figma) to get a complete picture of token usage.
Most mature design systems aim for 80%+ token adoption in high-impact categories like color and spacing. The audit report will show your current percentage and flag the most impactful hard-coded values to address first.
Yes, the audit process can be automated with lint rules and scripts to detect hard-coded values and track adoption metrics over time.
Use the prioritized recommendations to create a migration plan. Start with high-impact categories and frequently-used hard-coded values, then work toward full token adoption.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
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
- Inventory — Extract all visual values from code/design files
- Categorize — Group by type (color, spacing, typography, etc.)
- Map — Match values to existing tokens
- Flag — Identify hard-coded values, mismatches, and gaps
- Prioritize — Rank issues by frequency and impact
- 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
Related skills
More from owl-listener/designer-skills and the wider catalog.
diary-study-plan
Design longitudinal diary studies to capture user behavior over days or weeks.
documentation-template
Generate standardized documentation templates for design system components, patterns, and guidelines.
doherty-threshold
Keep system response under 400ms to preserve user flow and productivity.
empathy-map
Build Says, Thinks, Does, Feels maps to align teams around user understanding from research data.
error-handling-ux
Design error prevention, detection, and recovery across multi-flow products.
experience-map
Map the full ecosystem of touchpoints, channels, and relationships across a multi-channel service.