# design-tokens

Генерирует файл дизайн-токенов — CSS-переменные или конфиг Tailwind — по выбранной эстетике, со светлой и тёмной темами.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 5900 установок · ★ 592
- Автор: julianoczkowski
- Лицензия: Apache-2.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/julianoczkowski/designer-skills/tree/HEAD/design-tokens/SKILL.md
- Обновлён: 2026-07-06
- HTML: https://affpapa.org/nevibecode/skills/design-tokens

## Что делает

Скилл создаёт основу визуальной системы проекта: цветовые, типографические, spacing- и motion-токены. Запускать его стоит после дизайн-брифа и до того, как вы начнёте собирать компоненты — дальше они ссылаются на токены вместо захардкоженных значений.

Сначала скилл сканирует кодовую базу: ищет определения CSS-переменных, `tailwind.config.js`, файлы тем (Material UI `createTheme`, Chakra `extendTheme`, shadcn `globals.css`), JSON-токены в формате Style Dictionary и зависимости UI-фреймворков в `package.json`. Если токены уже есть, он их расширяет, а не затирает: находит пробелы вроде отсутствующей тёмной темы или неполной spacing-шкалы. Потом читает бриф в `.design/*/DESIGN_BRIEF.md` — если папок несколько, берёт изменённую последней или спрашивает, над какой фичей вы работаете. Формат вывода зависит от стека: Tailwind, `tokens.css` для CSS/HTML или `theme.ts` для CSS-in-JS. Если стек непонятен, скилл советует начать с CSS custom properties — они переносимы.

Тёмная тема генерируется всегда, через `[data-theme="dark"]` и `prefers-color-scheme`. Цвета там не инвертируются механически: контраст слегка снижается, тени становятся прозрачнее, акценты подстраиваются под нужный контраст. Это заметно, если вы привыкли к простому перевороту палитры — результат будет другим.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill design-tokens -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/design-tokens/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/design-tokens/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill design-tokens -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/design-tokens/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill design-tokens -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/design-tokens/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install julianoczkowski/designer-skills design-tokens
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/design-tokens/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill design-tokens -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/julianoczkowski/designer-skills --path design-tokens
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/design-tokens/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill design-tokens -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/julianoczkowski/designer-skills/tree/HEAD/design-tokens/SKILL.md

## Когда брать
- сгенерировать палитру и spacing-шкалу до сборки компонентов
- добавить тёмную тему к уже существующим токенам
- расширить `tailwind.config.js`, не ломая текущие значения
- перевести бриф по эстетике в конкретные значения токенов
- найти в проекте уже определённые CSS-переменные и темы

## Примеры запросов агенту
- Настрой дизайн-токены для этого проекта
- Сгенерируй систему токенов на основе Dieter Rams
- Мне нужна spacing-шкала и палитра до того, как я начну верстать

## Похожие
- [tailwindcss-advanced-design-systems](https://affpapa.org/nevibecode/skills/tailwindcss-advanced-design-systems.md) — скилл · 655 установок
- [tokens](https://affpapa.org/nevibecode/skills/tokens.md) — скилл · 853 установки
- [design-system](https://affpapa.org/nevibecode/skills/claudekit-design-system.md) — скилл · 42700 установок
- [stitch::extract-design-md](https://affpapa.org/nevibecode/skills/stitchextract-design-md.md) — скилл · 10600 установок
- [design-system-generator](https://affpapa.org/nevibecode/skills/design-system-generator.md) — скилл · 300 установок
- [color-mode-and-theme](https://affpapa.org/nevibecode/skills/color-mode-and-theme.md) — скилл · 926 установок

## Другие версии с тем же именем
- [design-tokens · plugin87](https://affpapa.org/nevibecode/skills/plugin87-design-tokens.md) — 538 установок

Из того же набора: [julianoczkowski/designer-skills](https://affpapa.org/nevibecode/by/julianoczkowski/designer-skills.md) — 8 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md