design-tokens · plugin87 — скилл для Claude Code: токены DTCG в три уровня
Собирает и проверяет дизайн-токены в формате DTCG: палитры, типошкала, отступы, тени, анимация. Пригодится, когда нужно завести единый набор значений для интерфейса.
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a claude-codeЧто делает design-tokens
Скилл ведёт токены по трёхуровневой схеме: примитивы хранят сырые значения, семантический слой даёт им смысл, компонентный слой привязывает к конкретным элементам. Примитивы напрямую не используются — так проект переживает смену палитры без правок в вёрстке.
Перед работой скилл читает правила проекта в .claude/rules/tokens-and-color.md и .claude/rules/typography-and-spacing.md, затем сверяется с уже существующими файлами в tokens/: colors.json, typography.json, spacing.json, shadows.json, borders.json, breakpoints.json, motion.json, gradients.json, opacity.json, blur.json, sizing.json, states.json, theming.json. Новая палитра генерируется в OKLCH из 11 оттенков, контраст проверяется скриптом scripts/contrast.py: 500 не ниже 4.5:1 на белом для текста, 600 не ниже 3:1 для элементов интерфейса. Мультибрендовость и плотность уезжают в theming.json.
В конце запускается python3 scripts/validate_tokens.py — проверка валидности JSON и разрешения ссылок между токенами. Учтите: если ставили через npx skills add, на диск попадают только папки скиллов, а файлы набора — нет. Скилл сам проверяет это командой ls и при отсутствии набора просит выполнить npx ux-ui-agent-skills init или поставить плагин. Без этого шага он не станет угадывать содержимое файлов, которых не видит.
Какие задачи решает
- завести палитру в OKLCH и проверить контраст оттенков
- разложить токены по уровням primitive, semantic и component
- добавить тёмную тему на семантическом слое
- собрать типошкалу и шкалу отступов от базы 4px
- проверить файлы токенов на валидность и битые ссылки
Примеры запросов агенту
- Сгенерируй палитру в OKLCH из 11 оттенков и проверь контраст 500 и 600
- Добавь в tokens/ токены тени, радиуса и анимации по трёхуровневой схеме
- Проверь tokens/colors.json скриптом validate_tokens.py и покажи битые ссылки
Как установить design-tokens
1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a claude-code2Вручную: положить файлы
~/.claude/skills/design-tokens/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-tokens/
1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a codex2Вручную: положить файлы
.agents/skills/design-tokens/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a cursor2Вручную: положить файлы
.cursor/skills/design-tokens/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install plugin87/ux-ui-agent-skills design-tokens2Вручную: положить файлы
.github/skills/design-tokens/SKILL.md1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a gemini-cli2Командой платформы
gemini skills install https://github.com/plugin87/ux-ui-agent-skills --path .claude/skills/design-tokensВручную: положить файлы
.devin/skills/design-tokens/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора16
Другие версии design-tokens
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о design-tokens
Как установить design-tokens в Claude?
Выполните npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a claude-code. После этого скилл лежит в ~/.claude/skills/design-tokens/SKILL.md.
Что делает design-tokens?
Генерирует, расширяет и проверяет дизайн-токены в формате DTCG с уровнями primitive, semantic и component. Покрывает цвета, типографику, отступы, тени, границы, брейкпоинты, анимацию, градиенты, прозрачность, размытие, размеры, состояния и темы.
Почему скилл не находит файлы набора?
npx skills add ставит только папки скиллов. Скилл проверяет наличие набора и при отсутствии просит выполнить npx ux-ui-agent-skills init либо поставить плагин.
Исходный текст
SKILL.md · MIT
---
name: design-tokens
description: Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.
---
# Skill: Design Tokens
> **Step 0: is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.
Produce and maintain DTCG (`$type`/`$value`) tokens following the project's 3-tier system.
## Steps
1. Read `${CLAUDE_SKILL_DIR}/../../../.claude/rules/tokens-and-color.md` → "Token System" + "Color Guidelines" and `${CLAUDE_SKILL_DIR}/../../../.claude/rules/typography-and-spacing.md` for the rules (4px base, Major Third scale, OKLCH palette generation, dark-mode-at-semantic-layer).
2. Read the relevant existing files in `${CLAUDE_SKILL_DIR}/../../../tokens/` to match structure: `colors.json`, `typography.json`, `spacing.json`, `shadows.json`, `borders.json`, `breakpoints.json`, `motion.json`, `gradients.json`, `opacity.json`, `blur.json`, `sizing.json`, `states.json`, `theming.json`.
3. Generate/extend tokens:
- Primitives = raw values (never used directly). Semantic = purpose aliases. Component = component-scoped.
- New palettes: generate 11 OKLCH shades; verify 500 ≥ 4.5:1 on white (text), 600 ≥ 3:1 (UI) using the `a11y-audit` skill / `${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py`.
- Multi-brand/density → `theming.json`.
4. **Validate**: run `python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py` (JSON validity + alias resolution).
## Output
DTCG JSON. Preserve `$description` on every token. Reference, never hardcode.
© plugin87 · MIT · plugin87/ux-ui-agent-skills
