ui-design · frappe — скилл для Claude Code: правила UI/UX и установка
Скилл задаёт агенту дизайнерские правила: сетка, типографика, цвет, отступы. Пригодится, когда нет своего дизайн-системного скилла.
npx skills add frappe/skills --skill ui-design -a claude-codeЧто делает ui-design
Скилл описывает, как агенту вести себя при вёрстке интерфейсов. Он требует минимализма: меньше элементов, больше воздуха, никаких рамок вокруг каждого блока. Одно главное действие на странице. Стиль и ясность разводятся по регистрам — для лендинга одно, для рабочей панели другое.
Внутри — разделы про типографику, цвет и механику раскладки. Шрифт мельче 12px не приветствуется, кроме плотных рабочих интерфейсов и подписей капсом. Цвет советуют тратить экономно: индикаторы, бейджи, второстепенные данные. Раскладка строится на flexbox с padding и gap, а не на margin. Для повторяющихся строк нужны слоты фиксированной ширины с flex-shrink: 0, иначе иконки и действия разъезжаются по колонкам. Иконки — SVG, эмодзи вместо иконок не годятся.
Отдельный пункт — плавающая панель настроек в правом нижнем углу: переключатели вариаций вроде плотности отступов или подачи контента. Набор переключателей выбирается под задачу, фиксированного списка нет. Ещё есть чек-лист проверки: отступы, типографика, контраст, выравнивание, обрезка контента, однообразие сетки. Агент проходит его на каждой контрольной точке и выносит вердикт одной строкой. Для Frappe UI скилл отсылает к frappe-app-dev и готовым паттернам frappe-ui — то есть на проектах Frappe он уступает место профильным скиллам.
Какие задачи решает
- выстроить визуальную иерархию на странице без дизайнера
- убрать лишние рамки и коробки вокруг блоков
- выровнять иконки и действия по вертикальным линиям в списках
- подобрать размеры шрифта и межстрочный интервал для читаемости
- проверить макет по чек-листу перед сдачей
Примеры запросов агенту
- свёрстай страницу настроек профиля по правилам ui-design
- проверь этот список по чек-листу скилла ui-design и исправь замечания
- добавь панель настроек в правом нижнем углу с переключателями плотности
Как установить ui-design
1Через Skills CLI (Vercel)
npx skills add frappe/skills --skill ui-design -a claude-code2Вручную: положить файлы
~/.claude/skills/ui-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/ui-design/
1Через Skills CLI (Vercel)
npx skills add frappe/skills --skill ui-design -a codex2Вручную: положить файлы
.agents/skills/ui-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add frappe/skills --skill ui-design -a cursor2Вручную: положить файлы
.cursor/skills/ui-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install frappe/skills ui-design2Вручную: положить файлы
.github/skills/ui-design/SKILL.md1Через Skills CLI (Vercel)
npx skills add frappe/skills --skill ui-design -a gemini-cli2Командой платформы
gemini skills install https://github.com/frappe/skills --path skills/ui-designВручную: положить файлы
.devin/skills/ui-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add frappe/skills --skill ui-design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора5
Другие версии ui-design
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о ui-design
Как установить ui-design в Claude?
Выполните npx skills add frappe/skills --skill ui-design -a claude-code. Скилл окажется в ~/.claude/skills/ui-design/SKILL.md.
Что делает ui-design?
Даёт агенту общие правила UI/UX: иерархия, отступы, типографика, цвет, доступность. Агент применяет их при вёрстке и проверяет результат по чек-листу.
Когда этот скилл не нужен?
Когда в проекте есть свой дизайн-системный скилл. Для Frappe UI он сам отсылает к frappe-app-dev и паттернам frappe-ui.
