What is the design-token-audit skill?
The design-token-audit skill is a SKILL.md in the designer-toolkit plugin of Owl-Listener's designer-skills repository. It has an AI coding agent audit token coverage, consistency and gaps across a product, flag hard-coded values and deliver a report that ends in a migration plan.
The design-token-audit skill lives in the designer-toolkit plugin of Owl-Listener's designer-skills pack. It casts the agent as an expert in auditing token adoption and consistency, and it focuses on how tokens are used, or bypassed, across a product.
Its description names the trigger: tokens exist and you suspect they are being bypassed. For defining tokens in the first place, it points to the design-token skill from design-systems, covered on its own page.
Audit scope
- Token coverage: what percentage of visual properties use tokens, which properties are commonly hard-coded, and whether the right tier is used (global, semantic or component).
- Token consistency: whether the same tokens serve the same purposes, whether redundant tokens exist with different names and the same value, and whether deprecated tokens are still in use.
- Token gaps: values that should be tokens, use cases the token set does not cover, and custom values that suggest missing scale steps.
Six step audit process
- Inventory: extract all visual values from code and design files.
- Categorize: group by color, spacing, typography and so on.
- 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.
The audit report
The report opens with an executive summary that gives the token adoption percentage and key findings. It then lists findings by category, a hard-coded value inventory with suggested token replacements, recommended new tokens, and a migration plan with priorities.
Who the design-token-audit skill is for
Best for
- Products that already have tokens and need to know how much of the interface actually uses them.
- Teams planning a migration off hard-coded values, using the report's migration plan and priorities.
- Design system owners who want findings ranked by frequency and impact. For scoring the system itself, see the design system audit skill.
Not for
- Defining tokens from scratch. Use the design-token skill or the DTCG design tokens skill to define them.
How to install Design Token Audit Skill: Find Hard-Coded Values and Drift
/plugin marketplace add Owl-Listener/designer-skillsAdd the marketplace
Enter the command above in your AI coding agent. It points the agent at the repository, and no plugin installs at this stage.
Install the plugin
Run
/plugin install designer-toolkit@designer-skills. designer-toolkit is the plugin that holds this skill, and the Discover tab under/pluginoffers the same choice.Gemini CLI route
Each plugin is also a Gemini CLI extension. Clone the repository to a temporary folder, create
.gemini/extensionsin your project root, and copy the repository's.gemini/extensionscontents into it.Point at the product
Give the agent the stylesheets, theme files or design files to audit and your token set. It inventories values and maps them to tokens.
Check that it loaded
Ask for a token audit of one stylesheet or screen. Expect findings grouped into coverage, consistency and gaps, plus a hard-coded value inventory with replacements.
Key features
- Token coverage checkMeasures what percentage of visual properties use tokens and which properties are commonly hard-coded.
- Tier checkAsks whether the right tier of token is used: global, semantic or component.
- Consistency checkLooks for the same tokens used for the same purposes, redundant tokens with different names and the same value, and deprecated tokens still in use.
- Gap detectionFinds visual values that should be tokens, use cases the token set misses and custom values that suggest missing scale steps.
- Six step processInventory, categorize, map, flag, prioritize and recommend, run in that order.
- Hard-coded value inventoryThe report lists each hard-coded value with a suggested token replacement.
- Adoption percentageThe executive summary reports the token adoption percentage next to the key findings.
- Migration planFindings end with recommended new tokens, a migration plan and priorities.
- Design and code togetherBest practices say to audit both design files and code, automate detection with lint rules where possible and track adoption over time.
Frequently asked questions
What is the design-token-audit skill?
It is a SKILL.md in the designer-toolkit plugin of Owl-Listener's designer-skills repository. It has an AI coding agent audit how design tokens are used across a product, identifying inconsistencies, gaps and hard-coded values, and it ends with a report that includes a migration plan.
How do I install design-token-audit?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install designer-toolkit@designer-skills. The skill is part of the designer-toolkit plugin. The Discover tab under /plugin offers the same choice, and Gemini CLI users can copy the repository's extensions folder. That plugin holds 7 skills and 4 commands.
What does a design token audit measure?
It measures token coverage, consistency and gaps. Coverage asks what percentage of visual properties use tokens and which are hard-coded. Consistency looks for redundant or deprecated tokens, and gaps look for values that should be tokens or custom values that suggest missing scale steps.
What steps does design-token-audit follow?
Six steps: inventory all visual values from code and design files, categorize them by type, map them to existing tokens, flag hard-coded values and mismatches, prioritize by frequency and impact, then recommend new tokens, migrations and cleanup. The audit covers both design files and code, per its best practices.
What does the design-token-audit report contain?
An executive summary with the token adoption percentage and key findings, detailed findings by category, an inventory of hard-coded values with suggested token replacements, recommended new tokens, and a migration plan with priorities. The skill says results should be actionable.
What license does design-token-audit use?
It is MIT licensed, as is the whole Owl-Listener/designer-skills repository. The pack holds 273 skills and 76 commands across 33 plugins, and design-token-audit is one of the skills in the designer-toolkit plugin. The nine design practice plugins, designer-toolkit among them, ship from this repository.
When should I use design-token-audit instead of design-token?
Use design-token-audit when tokens exist and you suspect they are being bypassed. For defining tokens in the first place, its description points to the design-token skill from design-systems. The audit itself covers token coverage, drift and hard-coded values. Its report ends with a migration plan and priorities.