ui-ux-pro-max-skill — скилл для Claude Code: дизайн интерфейсов
Скилл подбирает структуру страницы, визуальный стиль, цвета и шрифты по описанию продукта. Пригодится, когда нужно задать направление дизайна до реализации интерфейса.
npx skills add reason-machines/trending-skills --skill ui-ux-pro-max-skill -a claude-codeЧто делает ui-ux-pro-max-skill
Опишите продукт — скилл сформирует дизайн-систему: предложит структуру страницы, стиль, палитру, сочетание шрифтов и эффекты. В результат также входят список решений, которых стоит избегать, и чек-лист доступности и UX перед сдачей. Это конкретные ориентиры для работы агента, а не готовая реализация интерфейса.
Скилл умеет искать правила по типу продукта и подбирать стили по ключевым словам. Через CLI можно генерировать результат для указанного стека и сохранять его в JSON или Markdown; Python API даёт доступ к генератору, правилам, стилям, цветам и типографике. Для установки CLI нужны Node.js и npm: команда ставит uipro-cli глобально, затем добавляет скилл в проект. Если нужен Python API, в инструкции также предусмотрена установка зависимостей через pip install -r requirements.txt.
Какие задачи решает
- подобрать структуру страницы для продукта
- выбрать визуальный стиль по описанию интерфейса
- сформировать палитру и сочетание шрифтов
- найти правила дизайна для типа продукта
- проверить интерфейс по чек-листу доступности и UX
Примеры запросов агенту
- Подбери дизайн-систему для панели аналитики на React: укажи структуру страницы, стиль, цвета и шрифты.
- Найди подходящие правила и стили для приложения клиники.
- Составь дизайн-систему для сайта портфолио и выведи результат в Markdown.
Как установить ui-ux-pro-max-skill
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill ui-ux-pro-max-skill -a claude-code2Вручную: положить файлы
~/.claude/skills/ui-ux-pro-max-skill/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/ui-ux-pro-max-skill/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill ui-ux-pro-max-skill -a codex2Вручную: положить файлы
.agents/skills/ui-ux-pro-max-skill/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill ui-ux-pro-max-skill -a cursor2Вручную: положить файлы
.cursor/skills/ui-ux-pro-max-skill/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills ui-ux-pro-max-skill2Вручную: положить файлы
.github/skills/ui-ux-pro-max-skill/SKILL.md1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill ui-ux-pro-max-skill -a gemini-cli2Командой платформы
gemini skills install https://github.com/reason-machines/trending-skills --path skills/ui-ux-pro-max-skillВручную: положить файлы
.devin/skills/ui-ux-pro-max-skill/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill ui-ux-pro-max-skill -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о ui-ux-pro-max-skill
Как установить ui-ux-pro-max-skill в Claude Code?
Выполните npx skills add reason-machines/trending-skills --skill ui-ux-pro-max-skill -a claude-code. Файл скилла будет доступен по пути ~/.claude/skills/ui-ux-pro-max-skill/SKILL.md.
Что делает ui-ux-pro-max-skill?
По описанию продукта скилл подбирает структуру страницы, визуальный стиль, палитру, шрифты и эффекты. Также он формирует список антипаттернов и чек-лист доступности и UX.
Можно ли получить дизайн-систему в JSON?
Да. CLI умеет выводить результат в JSON; например, для продукта можно запустить npx uipro-cli generate --product "restaurant booking" --output json.
