ui-refactor — скилл для Claude Code: что делает и как установить
Скилл обучает ассистента правилам интерфейсного дизайна: выстраивать иерархию, задавать сетки отступов и подбирать шрифтовые пары вместо случайных правок стилей.
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a claude-codeЧто делает ui-refactor
Скилл превращает абстрактные просьбы вроде «сделай покрасивее» в чёткий инженерный процесс. Помощник начинает работу с конкретной функции интерфейса, не пытаясь сразу нарисовать сложную навигацию. Макет сначала прорабатывается в серых тонах без теней и декоративных шрифтов, чтобы выверить базовую сетку и свободное пространство.
Внутри заложены справочники по типографике, палитрам в формате HSL с доступным контрастом, масштабам отступов и визуальной глубине со светотенями. Скилл запрещает случайные значения пикселей в стилях. Хаотичные размеры ломают вёрстку при первом же расширении экрана, поэтому инструмент сразу вводит строгие ограничивающие шкалы для текста, полей и цветов.
Инструкции делят стилистику на архетипы: от строгой классики с засечками и прямыми углами до неформального интерфейса с крупным скруглением границ. Сложные сценарии и краевые случаи скилл откладывает на второй этап, требуя сначала отладить главный пользовательский путь.
Какие задачи решает
- упорядочить хаотичные отступы и размеры шрифтов через фиксированную шкалу
- переделать перегруженный интерфейс, начав с базового сценария
- подобрать цветовую гамму в HSL с учётом требований контрастности
- выстроить визуальную иерархию элементов формы или карточки
Примеры запросов агенту
- Сделай карточку профиля аккуратнее и подбери нормальные отступы
- Помоги собрать строгую цветовую палитру и шкалу шрифтов для админки
- Этот экран перегружен деталями, упрости раскладку по правилам ui-refactor
Как установить ui-refactor
1Через Skills CLI (Vercel)
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a claude-code2Вручную: положить файлы
~/.claude/skills/ui-refactor/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/ui-refactor/
1Через Skills CLI (Vercel)
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a codex2Вручную: положить файлы
.agents/skills/ui-refactor/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a cursor2Вручную: положить файлы
.cursor/skills/ui-refactor/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install LovroPodobnik/refactoring-ui-skill ui-refactor2Вручную: положить файлы
.github/skills/ui-refactor/SKILL.md1Через Skills CLI (Vercel)
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a gemini-cli2Командой платформы
gemini skills install https://github.com/LovroPodobnik/refactoring-ui-skill --path .claude/skills/ui-refactorВручную: положить файлы
.devin/skills/ui-refactor/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о ui-refactor
Как установить ui-refactor в Claude Code?
Выполните команду npx skills add LovroPodobnik/refactoring-ui-skill --skill ui-refactor -a claude-code в терминале проекта.
Что делает скилл ui-refactor?
Он направляет модель по практическим правилам вёрстки. Ассистент перестаёт наугад менять CSS и опирается на строгие дизайн-системы, шкалы размеров и проверку контраста.
С чего начинается работа над интерфейсом по этому скиллу?
Модель начинает с одного функционального блока и собирает прототип в оттенках серого. Оформление цветом, шрифтами и тенями добавляется только после выравнивания сетки.
