design-workflow — скилл для Claude Code: дизайн интерфейсов
Скилл помогает проектировать и проверять интерфейсы с опорой на дизайн-систему проекта. Пригодится для прототипов, компонентов и адаптивных экранов.
npx skills add c0x12c/ai-toolkit --skill design-workflow -a claude-codeЧто делает design-workflow
Сначала скилл направляет к .planning/design-config.md, файлам темы и существующим компонентам. Затем предлагает собирать интерфейс по частям: от токенов и базовых элементов до экранов, состояний и адаптивной версии. Это помогает сверять новые решения с тем, что уже есть в проекте.
В рекомендациях есть проверки цветов, типографики, сетки, карточек и состояний загрузки, ошибки и пустого экрана. Для прототипа нужны реальные тексты и шрифты, а цвета следует брать из файлов темы. Если в проекте нет design-config.md, часть подсказок о фирменном стиле применить не получится.
При наличии визуальных референсов скилл советует ориентироваться на их качество, а не копировать макет. Для самопроверки и разбора расхождений между дизайном и реализацией он ссылается на checklists.md.
Какие задачи решает
- сверить новые компоненты с дизайн-системой проекта
- собрать экран из базовых и составных компонентов
- найти шаблонные решения в макете
- проверить состояния загрузки, ошибки и пустого экрана
- адаптировать интерфейс для разных размеров экрана
Примеры запросов агенту
- Создай прототип экрана по дизайн-системе проекта и используй существующие компоненты.
- Проверь этот макет на шаблонные решения и предложи изменения в рамках текущей темы.
- Собери страницу по частям и добавь состояния загрузки, ошибки и пустого экрана.
Как установить design-workflow
1Через Skills CLI (Vercel)
npx skills add c0x12c/ai-toolkit --skill design-workflow -a claude-code2Вручную: положить файлы
~/.claude/skills/design-workflow/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-workflow/
1Через Skills CLI (Vercel)
npx skills add c0x12c/ai-toolkit --skill design-workflow -a codex2Вручную: положить файлы
.agents/skills/design-workflow/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add c0x12c/ai-toolkit --skill design-workflow -a cursor2Вручную: положить файлы
.cursor/skills/design-workflow/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install c0x12c/ai-toolkit design-workflow2Вручную: положить файлы
.github/skills/design-workflow/SKILL.md1Через Skills CLI (Vercel)
npx skills add c0x12c/ai-toolkit --skill design-workflow -a gemini-cli2Командой платформы
gemini skills install https://github.com/c0x12c/ai-toolkit --path toolkit/skills/design-workflowВручную: положить файлы
.devin/skills/design-workflow/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add c0x12c/ai-toolkit --skill design-workflow -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о design-workflow
Как установить design-workflow в Claude Code?
Выполните npx skills add c0x12c/ai-toolkit --skill design-workflow -a claude-code. Файл скилла находится по пути ~/.claude/skills/design-workflow/SKILL.md.
Что делает design-workflow?
Он задаёт порядок работы над UI и помогает сверять цвета, шрифты, компоненты и состояния экранов с дизайн-системой проекта.
Какие файлы проекта скилл предлагает изучить сначала?
Начните с .planning/design-config.md, затем проверьте перечисленные в нём файлы темы и существующие компоненты.
