design-token — скилл для Claude Code: токены дизайн-системы
Помогает описать токены цвета, отступов, типографики и теней: категории, уровни и правила именования. Пригодится, когда закладываете слой токенов с нуля.
npx skills add Owl-Listener/designer-skills --skill design-token -a claude-codeЧто делает design-token
Скилл ведёт агента как эксперта по архитектуре дизайн-токенов. Он разбирает категории: цвет (глобальная палитра, алиасы вроде surface и text, токены компонентов), отступы (базовая единица, шкала от xs до 3xl, контекстные inset и stack), типографику, тени и z-index, радиусы и толщины границ, длительности и функции плавности.
Уровней три. Глобальные токены хранят сырые значения, алиасы дают семантическую ссылку вроде color-action-primary, токены компонентов привязаны к конкретному месту. Именование строится по шаблону {category}-{property}-{variant}-{state}. Скилл советует начинать с глобальных значений, а семантические алиасы делать поверх, и не ссылаться на сырые значения внутри компонентов.
Для аудита уже существующих токенов нужен другой скилл — design-token-audit из designer-toolkit, а для маппинга между несколькими брендами — theming-system. Этот скилл берут на этапе, когда слой токенов только закладывается.
Какие задачи решает
- разложить палитру на глобальные значения и семантические алиасы
- задать шкалу отступов от базовой единицы
- описать уровни теней и шкалу z-index
- придумать схему имён для токенов состояний
- зафиксировать правила использования токенов в документации
Примеры запросов агенту
- помоги описать токены цвета и отступов для нового проекта
- предложи схему именования токенов по шаблону category-property-variant-state
- раздели текущие значения на глобальные токены и алиасы
Как установить design-token
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token -a claude-code2Вручную: положить файлы
~/.claude/skills/design-token/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-token/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token -a codex2Вручную: положить файлы
.agents/skills/design-token/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token -a cursor2Вручную: положить файлы
.cursor/skills/design-token/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills design-token2Вручную: положить файлы
.github/skills/design-token/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-systems/skills/design-tokenВручную: положить файлы
.devin/skills/design-token/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о design-token
Как установить design-token в Claude?
Выполните npx skills add Owl-Listener/designer-skills --skill design-token -a claude-code. Скилл появится в ~/.claude/skills/design-token/SKILL.md.
Что делает design-token?
Помогает определить и организовать токены цвета, отступов, типографики, теней, границ и анимации, а также задать правила именования и использования.
Чем design-token отличается от design-token-audit?
design-token закладывает слой токенов с нуля, а design-token-audit из designer-toolkit проверяет уже существующее использование. Для маппинга между брендами есть theming-system.
Исходный текст
SKILL.md · MIT
---
name: design-token
description: Define and organise tokens for colour, spacing, type, and elevation with naming and usage rules. Use when establishing the token layer. For auditing existing usage use `design-token-audit` (designer-toolkit); for multi-brand mapping use `theming-system`.
---
# Design Token
You are an expert in design token architecture and systematic design foundations.
## What You Do
You help define, organize, and document design tokens — the atomic values that drive visual consistency. You understand token taxonomies, naming hierarchies, and cross-platform mapping.
## Token Categories
- **Color**: Global palette, alias tokens (surface, text, border), component tokens
- **Spacing**: Base unit (4px/8px), scale (xs through 3xl), contextual (inset, stack, inline)
- **Typography**: Font families, size scale, weights, line heights
- **Elevation**: Shadow levels, z-index scale
- **Border**: Radius scale, width scale, style options
- **Motion**: Duration scale, easing functions
## Token Tiers
1. **Global tokens** — Raw values (e.g., blue-500: #3B82F6)
2. **Alias tokens** — Semantic references (e.g., color-action-primary)
3. **Component tokens** — Scoped usage (e.g., button-color-primary)
## Naming Convention
Pattern: {category}-{property}-{variant}-{state}
## Best Practices
- Start with global tokens, then create semantic aliases
- Never reference raw values in components
- Document each token with usage context
- Version tokens alongside your design system
- Support theming by keeping alias tokens abstract
© Owl-Listener · MIT · Owl-Listener/designer-skills
