design-token-audit — скилл для Claude Code: аудит дизайн-токенов
Проверяет, где в проекте обходят дизайн-токены: находит захардкоженные значения, дубли и пробелы в наборе токенов.
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a claude-codeЧто делает design-token-audit
Скилл проводит аудит того, как в продукте используются дизайн-токены. Он смотрит на покрытие (какая доля визуальных свойств вообще идёт через токены), на согласованность (одни и те же токены для одних и тех же задач, нет ли дублей с разными именами и одинаковым значением, не остались ли устаревшие) и на пробелы — значения, которым токена не хватает, и шкалы, где не хватает ступеней.
Работа идёт по шагам: сначала инвентаризация всех визуальных значений из кода и дизайн-файлов, потом группировка по типу (цвет, отступы, типографика), сопоставление с существующими токенами, отметка захардкоженного и расхождений, ранжирование по частоте и влиянию. На выходе — отчёт: сводка с процентом внедрения токенов, находки по категориям, список захардкоженных значений с предложенной заменой, новые токены и план миграции по приоритету.
Скилл имеет смысл запускать, когда токены уже есть, но вы подозреваете, что их обходят стороной. Для первичного описания токенов он не подходит — там нужен design-token из design-systems. Автор советует проверять и дизайн-файлы, и код, а детект по возможности автоматизировать линт-правилами.
Какие задачи решает
- найти захардкоженные цвета и отступы в коде
- посчитать долю визуальных свойств, которые идут через токены
- вычистить дублирующиеся токены с разными именами
- отловить устаревшие токены, оставшиеся в разметке
- составить план миграции на токены по приоритету
Примеры запросов агенту
- Проведи аудит дизайн-токенов в этом проекте и покажи, где значения захардкожены
- Собери отчёт по покрытию токенов: сколько визуальных свойств идёт через токены, а сколько нет
- Найди дублирующиеся и устаревшие токены и предложи, что почистить
Как установить design-token-audit
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a claude-code2Вручную: положить файлы
~/.claude/skills/design-token-audit/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-token-audit/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a codex2Вручную: положить файлы
.agents/skills/design-token-audit/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a cursor2Вручную: положить файлы
.cursor/skills/design-token-audit/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills design-token-audit2Вручную: положить файлы
.github/skills/design-token-audit/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path designer-toolkit/skills/design-token-auditВручную: положить файлы
.devin/skills/design-token-audit/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о design-token-audit
Как установить design-token-audit в Claude?
Выполните npx skills add Owl-Listener/designer-skills --skill design-token-audit -a claude-code. Скилл встанет в ~/.claude/skills/design-token-audit/SKILL.md.
Что делает design-token-audit?
Проверяет, как в продукте используются дизайн-токены: покрытие, согласованность и пробелы. На выходе — отчёт с захардкоженными значениями, предложенными заменами и планом миграции.
Чем он отличается от design-token?
design-token из design-systems нужен, чтобы описать токены с нуля. design-token-audit берётся, когда токены уже есть, а вы хотите узнать, где их обходят.
Исходный текст
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