design-intelligence — скилл для Claude Code: дизайн-токены и Tailwind
Собирает дизайн-систему с нуля: палитра, типографика, отступы, радиусы и инвентарь компонентов в трёх форматах.
npx skills add c0x12c/ai-toolkit --skill design-intelligence -a claude-codeЧто делает design-intelligence
Скилл запускает бутстрап дизайн-системы. Вы даёте контекст проекта — что за продукт, кто им пользуется, какая у него должна быть подача, светлая тема или тёмная, есть ли уже фирменные цвета, — а на выходе получаете готовый набор токенов. Работает через Read, Write, Edit, Glob, Grep, Bash и WebSearch.
Генерация идёт по шагам: сначала вопросы о контексте, потом палитра, шкала типографики, отступы и радиусы. Палитра привязана к характеру продукта: для профессионального и корпоративного берётся синий диапазон, для смелого и креативного — фиолетовый или розовый, для премиального — глубокий синий с золотом. Шкала кеглей строится от базы 16px, отступы — от шага 8px.
Результат выдаётся в трёх форматах: справочный документ с токенами в .planning/design/system/tokens.md, фрагмент для tailwind.config.ts и файл CSS-переменных. Плюс список компонентов под тип проекта — боковая навигация и таблицы для дашборда, карточки товаров и фильтры для маркетплейса. Токены вроде --color-primary и --radius-card потом подставляются вручную, поэтому значения стоит просмотреть перед коммитом.
Какие задачи решает
- задать палитру и типографику на старте нового проекта
- подобрать цвета под характер бренда и отрасль
- собрать шкалу кеглей и систему отступов от одной базы
- выгрузить токены сразу в Tailwind и CSS-переменные
- наметить список компонентов под конкретный тип продукта
Примеры запросов агенту
- Настрой дизайн-систему для дашборда аналитики, тёмная тема, характер — минимальный и технический
- Сгенерируй палитру и типографику для маркетплейса, светлая тема, фирменный цвет уже есть
- Собери токены и инвентарь компонентов для мобильного приложения, характер — тёплый и дружелюбный
Как установить design-intelligence
1Через Skills CLI (Vercel)
npx skills add c0x12c/ai-toolkit --skill design-intelligence -a claude-code2Вручную: положить файлы
~/.claude/skills/design-intelligence/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-intelligence/
1Через Skills CLI (Vercel)
npx skills add c0x12c/ai-toolkit --skill design-intelligence -a codex2Вручную: положить файлы
.agents/skills/design-intelligence/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add c0x12c/ai-toolkit --skill design-intelligence -a cursor2Вручную: положить файлы
.cursor/skills/design-intelligence/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install c0x12c/ai-toolkit design-intelligence2Вручную: положить файлы
.github/skills/design-intelligence/SKILL.md1Через Skills CLI (Vercel)
npx skills add c0x12c/ai-toolkit --skill design-intelligence -a gemini-cli2Командой платформы
gemini skills install https://github.com/c0x12c/ai-toolkit --path toolkit/skills/design-intelligenceВручную: положить файлы
.devin/skills/design-intelligence/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add c0x12c/ai-toolkit --skill design-intelligence -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о design-intelligence
Как установить design-intelligence в Claude Code?
Выполните npx skills add c0x12c/ai-toolkit --skill design-intelligence -a claude-code. После этого файл скилла лежит в ~/.claude/skills/design-intelligence/SKILL.md.
Что делает design-intelligence?
Принимает контекст проекта и выдаёт набор дизайн-токенов: палитру, шкалу типографики, отступы, радиусы и тени. Дополнительно формирует фрагмент конфига Tailwind, файл CSS-переменных и список нужных компонентов.
В каком виде выдаются токены?
В трёх форматах: справочный markdown-документ в .planning/design/system/tokens.md, фрагмент для tailwind.config.ts и CSS-переменные в :root.
