Skill

design-token-audit

Audits design token usage in code and design files for consistency, coverage, gaps, and hard-coded values. Generates reports with prioritized recommendations.

Css

Figma

design

code-quality

From designer-toolkit

Install

Run in your terminal

npx claudepluginhub owl-listener/designer-skills --plugin designer-toolkit

Tool Access

This skill uses the workspace's default tool permissions.

Skill Content

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.6k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

evaluation-methodology

1 file

Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.

plugin-eval

32.9k

Stats

Parent Repo Stars356

Parent Repo Forks68

Last CommitMar 7, 2026

Actions

View Source View Plugin View on GitHub View README

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