# design-intelligence

Собирает дизайн-систему с нуля: палитра, типографика, отступы, радиусы и инвентарь компонентов в трёх форматах.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 109
- Автор: c0x12c
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/c0x12c/ai-toolkit/tree/HEAD/toolkit/skills/design-intelligence/SKILL.md
- Обновлён: 2026-06-18
- HTML: https://affpapa.org/nevibecode/skills/design-intelligence

## Что делает

Скилл запускает бутстрап дизайн-системы. Вы даёте контекст проекта — что за продукт, кто им пользуется, какая у него должна быть подача, светлая тема или тёмная, есть ли уже фирменные цвета, — а на выходе получаете готовый набор токенов. Работает через `Read`, `Write`, `Edit`, `Glob`, `Grep`, `Bash` и `WebSearch`.

Генерация идёт по шагам: сначала вопросы о контексте, потом палитра, шкала типографики, отступы и радиусы. Палитра привязана к характеру продукта: для профессионального и корпоративного берётся синий диапазон, для смелого и креативного — фиолетовый или розовый, для премиального — глубокий синий с золотом. Шкала кеглей строится от базы 16px, отступы — от шага 8px.

Результат выдаётся в трёх форматах: справочный документ с токенами в `.planning/design/system/tokens.md`, фрагмент для `tailwind.config.ts` и файл CSS-переменных. Плюс список компонентов под тип проекта — боковая навигация и таблицы для дашборда, карточки товаров и фильтры для маркетплейса. Токены вроде `--color-primary` и `--radius-card` потом подставляются вручную, поэтому значения стоит просмотреть перед коммитом.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill design-intelligence -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill design-intelligence -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill design-intelligence -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install c0x12c/ai-toolkit design-intelligence
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill design-intelligence -a gemini-cli
```

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill design-intelligence -a opencode
```

### Claude.ai

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

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

## Когда брать
- задать палитру и типографику на старте нового проекта
- подобрать цвета под характер бренда и отрасль
- собрать шкалу кеглей и систему отступов от одной базы
- выгрузить токены сразу в Tailwind и CSS-переменные
- наметить список компонентов под конкретный тип продукта

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

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

Из того же набора: [c0x12c/ai-toolkit](https://affpapa.org/nevibecode/by/c0x12c/ai-toolkit.md) — 11 карточек

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