frontend-design · mager — скилл для Claude Code: вкус к интерфейсам
Скилл задаёт агенту конкретную дизайнерскую оптику: типографика, палитра, тактильные состояния. Пригодится, когда UI собирают с нуля или переделывают чужой.
npx skills add mager/frontend-design --skill frontend-design -a claude-code
npx skills add mager/frontend-design --skill mager-frontend-design -a claude-codeЧто делает frontend-design
Скилл описывает философию, по которой агент выбирает визуальный язык проекта. Сначала определяется настроение продукта: редакционная теплота, светлый современный продукт, неоновый контраст. Дальше выстраивается типографика, потом палитра и ритм отступов, и только затем атмосферные слои вроде градиентов и зерна.
Внутри — набор принципов, а не готовые компоненты. Есть список шрифтов под каждую задачу: литературные серифы для редакционных проектов, моноширинные для системных интерфейсов, геометрические гротески для продуктовых. Цветовые схемы тоже разложены по настроению, а состояния наведения и нажатия расписаны с длительностью переходов от 150 до 300 мс. Контейнеры советует держать в диапазоне 1100px-1280px, для крупных шагов типографики — clamp().
Скилл работает поверх любого фреймворка, но при старте с нуля предпочитает Astro, SvelteKit или Next.js. Bootstrap и тяжёлые UI-библиотеки он не советует — они спорят с авторским стилем. Если проект уже на чужом фреймворке, скилл встраивается в него и меняет сначала шрифты, потом цвет, потом отступы, сохраняя рабочую логику.
Какие задачи решает
- собрать интерфейс с внятной типографической иерархией, а не дефолтными стилями
- переодеть существующий UI, не ломая его функциональность
- подобрать палитру и шрифты под настроение продукта
- оживить мёртвые состояния наведения и нажатия
- разложить сетку так, чтобы контент не терялся в пустоте
Примеры запросов агенту
- Собери лендинг для медиа о ремесле: редакционная типографика, тёплая бумажная палитра, тонкие линейки между секциями
- Переделай стили этого дашборда — сейчас он выглядит как дефолтный Bootstrap, нужен светлый продуктовый вид с акцентным цветом
- Добавь тактильные состояния наведения на карточки и плавное появление списка с задержкой
Как установить frontend-design
1Через Skills CLI (Vercel)
npx skills add mager/frontend-design --skill frontend-design -a claude-codenpx skills add mager/frontend-design --skill mager-frontend-design -a claude-code2Вручную: положить файлы
~/.claude/skills/mager-frontend-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/mager-frontend-design/
1Через Skills CLI (Vercel)
npx skills add mager/frontend-design --skill mager-frontend-design -a codex2Вручную: положить файлы
.agents/skills/mager-frontend-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add mager/frontend-design --skill mager-frontend-design -a cursor2Вручную: положить файлы
.cursor/skills/mager-frontend-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install mager/frontend-design mager-frontend-design2Вручную: положить файлы
.github/skills/mager-frontend-design/SKILL.md1Через Skills CLI (Vercel)
npx skills add mager/frontend-design --skill mager-frontend-design -a gemini-cli2Командой платформы
gemini skills install https://github.com/mager/frontend-designВручную: положить файлы
.devin/skills/mager-frontend-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add mager/frontend-design --skill mager-frontend-design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о frontend-design
Как установить frontend-design в Claude?
Выполните npx skills add mager/frontend-design --skill frontend-design -a claude-code. Скилл встанет в ~/.claude/skills/mager-frontend-design/SKILL.md.
Что делает скилл frontend-design?
Задаёт агенту дизайнерскую позицию: как выбрать настроение продукта, шрифты, палитру и состояния взаимодействия. Работает и при генерации нового UI, и при переделке существующего.
С какими фреймворками он совместим?
Скилл адаптируется под текущий фреймворк проекта. При старте с нуля советует Astro, SvelteKit или Next.js, а Bootstrap и тяжёлые UI-библиотеки не рекомендует.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — frontend-design от других авторов.
