Design Token Audit
Run a structured design-token audit to find hard-coded styles, inconsistent usage, and gaps before scaling UI work.
Overview
design-token-audit is an agent skill most often used in Build (also Ship review, Grow content refreshes) that audits token coverage, consistency, and gaps across a product.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill design-token-auditWhat is this skill?
- 6-step audit process: inventory, categorize, map, flag, prioritize, recommend
- Coverage checks across global, semantic, and component token tiers
- Consistency review for redundant names, deprecated tokens, and mismatched usage
- Gap analysis for missing scale steps and uncaptured custom values
- Report format with adoption percentage, category findings, and migration suggestions
Adoption & trust: 577 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your product mixes design tokens with hard-coded colors and spacing, so the UI looks inconsistent and rebrands are painful.
Who is it for?
Solo builders or tiny teams with a growing design system who need an objective pass over code and design files before a major UI push.
Skip if: Projects with no visual UI, or when you only need net-new token definitions without assessing existing usage.
When should I use this skill?
Design system drift, rebrands, or pre-release UI consistency reviews when token coverage and hard-coded values are unknown.
What do I get? / Deliverables
You get a prioritized audit report with adoption metrics, flagged hard-coded values, suggested token replacements, and recommendations for new or deprecated tokens.
- Executive summary with token adoption percentage
- Category findings with hard-coded value inventory and migration recommendations
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Token audits most often start in Build while implementing or extending a design system on the frontend shelf. Frontend is where color, spacing, and typography tokens are applied in code and design files—the audit maps values there first.
Where it fits
Inventory component CSS and map hex/spacing literals to semantic tokens before shipping a new dashboard.
Produce an adoption summary and prioritized fixes for inconsistent token usage ahead of a release checklist.
Verify landing and in-app marketing blocks use the same typography and color tokens as the core product.
How it compares
Use a systematic token audit instead of eyeballing Figma and CSS for one-off hex and spacing drift.
Common Questions / FAQ
Who is design-token-audit for?
Indie builders and designers pairing with AI agents who own product UI and need consistent design-token adoption across implementation files.
When should I use design-token-audit?
In Build while standardizing components; in Ship before release review; in Grow when updating marketing or in-app content surfaces that must match the token system.
Is design-token-audit safe to install?
It guides read-and-analyze workflows on your repo—check the Security Audits panel on this Prism page for the skill package before broad agent access.
SKILL.md
READMESKILL.md - Design Token Audit
# 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