ui-design · starchild-ai-agent — скилл для Claude Code: что делает и как установить
Скилл задаёт процесс создания визуальных интерфейсов: от выбора стека до проверки доступности, адаптивности и анимаций.
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a claude-codeЧто делает ui-design
ui-design служит основной точкой входа для пользовательского HTML/CSS/JS: лендингов, дашбордов, веб-приложений, портфолио и внутренних инструментов. Перед разработкой он предлагает выбрать Track A с vanilla HTML/CSS/JS или Track B с React/Vite/Next и библиотекой компонентов. В процессе учитываются доступность, адаптивность, темы, производительность и способ доставки превью.
Для стилевых решений скилл подключает taste-skill: тот задаёт Brief Inference, Design Dials и финальную Anti-slop-проверку. Для визуального проекта его нужно использовать вместе с project-builder. Интерактивным страницам обязательны тактильная реакция и обратная связь при смене состояния, иначе интерфейс считается незавершённым. Инженерные правила читаются из файлов references/ и из репозитория https://github.com/Leonxlnx/taste-skill.
Какие задачи решает
- выбрать между vanilla HTML/CSS/JS и библиотекой компонентов
- спланировать анимации для интерактивной страницы
- проверить доступность и адаптивность интерфейса
- подготовить визуальный проект к показу через превью
- согласовать стилевые правила с инженерными ограничениями
Примеры запросов агенту
- Используй скилл
ui-designи выбери трек для лендинга на HTML/CSS/JS. - Спроектируй интерактивный дашборд: сначала задай план анимаций, затем проверь доступность и адаптивность.
- Собери интерфейс вместе с
project-builder, подключивtaste-skillдля стилевых решений.
Как установить ui-design
1Через Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a claude-code2Вручную: положить файлы
~/.claude/skills/ui-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/ui-design/
1Через Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a codex2Вручную: положить файлы
.agents/skills/ui-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a cursor2Вручную: положить файлы
.cursor/skills/ui-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Starchild-ai-agent/official-skills ui-design2Вручную: положить файлы
.github/skills/ui-design/SKILL.md1Через Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a gemini-cli2Командой платформы
gemini skills install https://github.com/Starchild-ai-agent/official-skills --path ui-designВручную: положить файлы
.devin/skills/ui-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о ui-design
Как установить ui-design в Claude Code?
Выполните npx skills add Starchild-ai-agent/official-skills --skill ui-design -a claude-code, затем проверьте файл ~/.claude/skills/ui-design/SKILL.md.
Что делает ui-design?
Скилл помогает выбрать способ сборки визуального интерфейса и провести его через проверки доступности, адаптивности, тем, производительности и интерактивных состояний.
Нужно ли использовать taste-skill вместе с ui-design?
Да. taste-skill вызывается внутри процесса для Brief Inference, Design Dials и Anti-slop-проверки, а ui-design сохраняет контроль над инженерной частью.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — ui-design от других авторов.
