К основному содержанию
скилл CX Codex

design-token-audit — скилл для Claude Code: аудит дизайн-токенов

Проверяет, где в проекте обходят дизайн-токены: находит захардкоженные значения, дубли и пробелы в наборе токенов.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Owl-Listener/designer-skills --skill design-token-audit -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/design-token-audit/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/design-token-audit/

По шагам, с командами для каждой платформы: Как установить скилл в 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

Похожие скиллы

Всё по теме «Дизайн» →
design-systems-frontend-architecture hueyexe Помогает агенту превратить решения по UI и бренду в переиспользуемые компоненты, токены и правила вёрстки. CX Codex +1 635установок token-build plugin87 Скилл превращает DTCG-токены из JSON в файлы тем для веба и мобильных платформ. Пригодится для настройки сборки токенов и её запуска в CI. CX Codex +1 480установок frontend-design julianoczkowski Скилл задаёт правила вёрстки интерфейсов по конкретным эстетическим стилям. Он сканирует проект на готовые токены и компоненты перед генерацией кода. CX Codex +1 5 500установок extract-design-system arvindrk Скилл находит базовые токены дизайна на веб-странице и создаёт начальные файлы tokens.json и tokens.css. Он полезен для быстрого старта стилизации в новом репозитории. CX Codex +1 130 700установок design-system claudekit Скилл собирает дизайн-токены, спецификации компонентов и презентационные слайды. Подойдёт, когда интерфейс и слайды должны следовать одной системе. CX Codex +1 42 700установок stitch::extract-design-md официальный google-labs-code Извлекает дизайн-систему в файл DESIGN.md прямо из исходников фронтенда без сборки проекта. Помогает перенести визуальные токены и правила вёрстки в формат Stitch. CX Codex +1 10 600установок

Из того же набора109

design-qa-checklist Генерирует систематический чек-лист для проверки вёрстки на соответствие дизайну. Пригодится дизайнерам и разработчикам на этапе приёмки интерфейса. CX Codex +1 2 200установок loading-states Проектирует состояния ожидания: скелетоны, индикаторы, постепенную загрузку и оптимистичные обновления. Нужен, когда контент или действие не завершаются сразу. CX Codex +1 2 200установок design-critique Скилл ведёт командный разбор макета: рамка сессии, правила обратной связи и список задач с ответственными. Нужен, когда работу обсуждают несколько человек. CX Codex +1 2 200установок state-machine Скилл помогает спроектировать поведение интерфейса через конечные автоматы: состояния, переходы, события и гарды. Пригодится, когда в компоненте слишком много флагов. CX Codex +1 2 200установок animation-principles Скилл для настройки одной конкретной анимации в интерфейсе: подбирает easing, длительность и порядок движения элементов. CX Codex +1 2 200установок wireframe-spec Составляет текстовые спецификации вайрфреймов с приоритетами контента и заметками о поведении элементов. Пригодится при проектировании структуры интерфейса до начала работы с визуалом. CX Codex +1 2 300установок micro-interaction-spec Описывает одну микромикровзаимодействие целиком: триггер, правила, отклик, циклы и режимы. Пригодится, когда пора передать её в разработку. CX Codex +1 2 300установок accessibility-test-plan Помогает спланировать тестирование доступности интерфейса с ассистивными технологиями и реальными пользователями. Пригодится перед релизом для покрытия критериев WCAG. CX Codex +1 2 100установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой