frontend-design · aladicf — скилл для Claude Code: вёрстка без AI-шаблонности
Ведёт агента по порядку решений: сначала задача и иерархия, потом системы, и только затем цвет и декор. Пригодится при сборке или переделке интерфейсов.
npx skills add aladicf/better-web-ui --skill frontend-design -a claude-codeЧто делает frontend-design
Скилл задаёт агенту рабочий порядок при вёрстке. Сначала разбирается конкретная пользовательская задача, а не оболочка вокруг неё. Потом иерархия проверяется в оттенках серого: если интерфейс не читается без цвета, цвет его не спасёт. Дальше идут ограниченные шкалы для отступов, типографики, радиусов и теней, и лишь в конце — цвет, глубина, движение и отделка.
Отдельный блок — сбор контекста. Скилл требует знать аудиторию, сценарии использования и тон бренда, и прямо говорит, что вычитать это из кода нельзя: код показывает, что построено, но не для кого. Если контекста нет ни в загруженных инструкциях, ни в .better-web-ui.md, ни в старых .better-ui.md и .impeccable.md, агент обязан сначала запустить $setup. Это стоит учесть: на новом проекте без такого файла работа начнётся с настройки, а не с вёрстки.
Библиотека сознательно не привязана к фреймворку. Приоритет такой: сначала подстроиться под стек проекта, затем под явный выбор пользователя, и только для нового проекта без указаний — под матрицу по умолчанию. Для Next.js скилл советует читать локальные доки из node_modules/next/dist/docs/, чтобы не опираться на устаревшую память о версии. Есть справочники по анатомии компонентов, акселераторам на shadcn/ui и отдельным паттернам вроде аккордеонов, каруселей и сложных таблиц.
Какие задачи решает
- собрать интерфейс, который не выглядит как типовой вывод нейросети
- навести иерархию на экране до того, как добавлять цвет
- зафиксировать шкалы отступов и типографики вместо разовой подгонки
- выбрать компонентную стратегию под уже существующий стек
- переделать готовую страницу или поток без переписывания с нуля
Примеры запросов агенту
- Собери страницу тарифов: сначала иерархия в сером, потом цвет
- Переделай форму регистрации — сейчас она выглядит шаблонно
- Прогони $setup и зафиксируй контекст проекта перед вёрсткой
Как установить frontend-design
1Через Skills CLI (Vercel)
npx skills add aladicf/better-web-ui --skill frontend-design -a claude-code2Вручную: положить файлы
~/.claude/skills/frontend-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/frontend-design/
1Через Skills CLI (Vercel)
npx skills add aladicf/better-web-ui --skill frontend-design -a codex2Вручную: положить файлы
.agents/skills/frontend-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add aladicf/better-web-ui --skill frontend-design -a cursor2Вручную: положить файлы
.cursor/skills/frontend-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install aladicf/better-web-ui frontend-design2Вручную: положить файлы
.github/skills/frontend-design/SKILL.md1Через Skills CLI (Vercel)
npx skills add aladicf/better-web-ui --skill frontend-design -a gemini-cli2Командой платформы
gemini skills install https://github.com/aladicf/better-web-ui --path skills/frontend-designВручную: положить файлы
.devin/skills/frontend-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add aladicf/better-web-ui --skill frontend-design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о frontend-design
Как установить frontend-design в Claude?
Выполните npx skills add aladicf/better-web-ui --skill frontend-design -a claude-code. После этого файл скилла лежит в ~/.claude/skills/frontend-design/SKILL.md.
Что делает frontend-design?
Задаёт агенту порядок работы над интерфейсом: задача вместо оболочки, иерархия в оттенках серого, ограниченные шкалы и отделка в самом конце. Плюс требует подтверждённый контекст — аудиторию, сценарии и тон бренда.
Что нужно, чтобы скилл заработал?
Контекст проекта: он берётся из загруженных инструкций, файла .better-web-ui.md в корне или старых .better-ui.md и .impeccable.md. Если ничего из этого нет, агент сначала запускает $setup.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — frontend-design от других авторов.
