frontend-design-ui-ux — скилл для Claude Code: дизайн и установка
Скилл создаёт зафиксированный язык дизайна и UX/UI-спецификацию для фичи или экрана. Он нужен перед передачей задачи инженеру.
npx skills add ulpi-io/skills --skill frontend-design-ui-ux -a claude-codeЧто делает frontend-design-ui-ux
Скилл разбирает фичу, экран или UX-проблему и оформляет пакет дизайна в .ulpi/design/. Он задаёт визуальную идентичность, палитру, типографику, масштаб, фирменный приём и правила голоса. Отдельная спецификация описывает пользовательские потоки, состояния, компоненты, адаптивность и требования доступности.
Результат рассчитан на передачу инженерному агенту: скилл формирует спецификацию и handoff, но не пишет production UI code. Он также может обработать ссылки на референсы через browse skill. Для проекта нужны права на чтение и запись файлов, а при работе со ссылками — доступный browse skill.
Какие задачи решает
- сформировать визуальный язык для новой фичи
- описать UX-поток со всеми состояниями
- зафиксировать компоненты и правила взаимодействия
- подготовить handoff для инженерного агента
Примеры запросов агенту
- Спроектируй onboarding flow и запиши спецификацию в
.ulpi/design/. - Создай визуальную идентичность для dashboard и опиши состояния компонентов.
- Сравни эти референсы через
browseskill и подготовь дизайн-спецификацию для новой фичи.
Как установить frontend-design-ui-ux
1Через Skills CLI (Vercel)
npx skills add ulpi-io/skills --skill frontend-design-ui-ux -a claude-code2Вручную: положить файлы
~/.claude/skills/frontend-design-ui-ux/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/frontend-design-ui-ux/
1Через Skills CLI (Vercel)
npx skills add ulpi-io/skills --skill frontend-design-ui-ux -a codex2Вручную: положить файлы
.agents/skills/frontend-design-ui-ux/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add ulpi-io/skills --skill frontend-design-ui-ux -a cursor2Вручную: положить файлы
.cursor/skills/frontend-design-ui-ux/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install ulpi-io/skills frontend-design-ui-ux2Вручную: положить файлы
.github/skills/frontend-design-ui-ux/SKILL.md1Через Skills CLI (Vercel)
npx skills add ulpi-io/skills --skill frontend-design-ui-ux -a gemini-cli2Командой платформы
gemini skills install https://github.com/ulpi-io/skills --path frontend-design-ui-uxВручную: положить файлы
.devin/skills/frontend-design-ui-ux/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add ulpi-io/skills --skill frontend-design-ui-ux -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о frontend-design-ui-ux
Как установить frontend-design-ui-ux в Claude Code?
Выполните npx skills add ulpi-io/skills --skill frontend-design-ui-ux -a claude-code, затем проверьте файл ~/.claude/skills/frontend-design-ui-ux/SKILL.md.
Что делает frontend-design-ui-ux?
Он создаёт зафиксированный язык дизайна и спецификацию UX/UI в .ulpi/design/: от палитры и типографики до потоков, состояний, компонентов и доступности. Production UI code скилл не пишет.
Какие платформы поддерживает скилл?
Скилл доступен для Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode.
