3 дизайн-скилла для Claude Code, чтобы UI не выглядел generic

Интерфейсы, которые Claude Code рисует по умолчанию, выглядят одинаково: центрированный hero, дежурные фиолетово-синие градиенты, системный шрифт, ноль анимаций. И дело не в промптах — дело в том, что у модели нет дизайн-контекста. Она берёт самый вероятный вариант, а самый вероятный — это самый средний.

Скилл — это файл с инструкциями, который ставится один раз и дальше работает всегда (что это такое и как ставить — разбирал в отдельном гайде). Эти три дизайн-скилла загружают в Claude именно дизайн-контекст — моушн, вёрстку и насмотренность. Ниже — что делает каждый, чем отличаются и с чего начать.

Почему Claude Code выдаёт generic-интерфейсы

Модель училась на том, чтобы код работал и не падал, а не на том, чтобы он выглядел дорого. Без явных правил по типографике, отступам и анимациям она каждый раз воспроизводит усреднённый паттерн. Эти скиллы дают недостающие правила: один отвечает за движение, второй — за вёрстку и типографику, третий — за насмотренность и небанальный визуал.

Скилл 1. Emil Design Eng — моушн и easing

Что делает. Кодирует подход к анимации интерфейса от Emil Kowalski — дизайн-инженера, автора библиотек Sonner и Vaul и курса animations.dev. Какие элементы анимировать, с какой длительностью и какой кривой.

«Taste is trained, not innate» — вкус тренируется, а не врождён. На этой идее построен скилл: он переносит в Claude насмотренность Emil Kowalski, а не абстрактные «сделай красиво».

Почему важно. Большинство «оживляжа» в AI-интерфейсах сделано неправильно: ease-in вместо ease-out, анимация частых действий, дёрганые переходы. Скилл уводит модель от этих ошибок и приносит конкретику — длительности под тип взаимодействия (кнопка 100–160 мс, дропдаун 150–250, модалка 200–500), GPU-friendly свойства (transform/opacity), press-фидбек у кнопок, уважение к prefers-reduced-motion.

Результат. Интерфейс перестаёт быть статичным и начинает ощущаться живым — без тормозов и «прыгающих» элементов.

Когда использовать:

• Добавляешь анимации и переходы в интерфейс
• Делаешь модалки, дропдауны, тосты, свайпы
• Хочешь, чтобы микровзаимодействия ощущались «дорого»

Установка:

npx skills add https://github.com/emilkowalski/skill --skill emil-design-eng

Подробнее: карточка на nakodil.site · репозиторий. Автор — Emil Kowalski. Открытый исходник, ставится напрямую из репозитория автора.

Скилл 2. Impeccable — вёрстка, отступы, типографика

Что делает. Приводит фронтенд в порядок «одним комментарием»: вёрстка, отступы, визуальная иерархия, типографика, цвет, контраст, адаптив. Самый популярный дизайн-скилл в экосистеме Claude Code (33K+ звёзд) от Paul Bakaus — экс-Google Developer Advocate, создателя jQuery UI.

Почему важно. Чаще всего интерфейс выглядит «не так» именно из-за вёрстки: случайные отступы, монотонные сетки карточек, сломанная иерархия. Внутри скилла — 20+ команд (audit, polish, critique и др.), 7 справочников и набор правил против типичных «AI-тэлзов» вроде дежурных градиентов и переиспользованных шрифтов. Подхватывает контекст из PRODUCT.md и DESIGN.md, чтобы держать единый стиль.

Результат. Интерфейс выглядит так, будто над ним работал дизайнер, а не сгенерировала модель.

Когда использовать:

• Вёрстка «почти ок», но что-то неуловимо не так
• Нужно навести порядок в отступах, сетке и типографике
• Делаешь лендинг, дашборд или продуктовый UI с нуля

Установка:

npx skills add https://github.com/pbakaus/impeccable --skill impeccable

Подробнее: карточка на nakodil.site · impeccable.style · репозиторий. Лицензия — Apache-2.0.

Скилл 3. Design Taste Frontend — референсы и анти-слоп

Что делает. Флагманский скилл из набора Taste (tasteskill.dev, 100K+ установок). Убирает «AI-шаблонность»: вместо центрированного hero и дежурных клише собирает небанальный, продуманный интерфейс.

Почему важно. Это тот самый скилл, который «подтягивает реальные дизайн-референсы и скармливает их Claude». Ключевая механика — image-first: находит и анализирует реальные референсы и верстает под них, а не выдаёт усреднённый вариант. Банит типичные клише (эмодзи, неоновые свечения, фейковые «99.99% uptime»), толкает к асимметричным макетам и нормальной типографике (Geist, Cabinet Grotesk вместо дефолтов).

Результат. Лендинги и интерфейсы выглядят осмысленно и «не как у всех».

Когда использовать:

• Нужен небанальный визуал, а не дефолтный шаблон
• Делаешь лендинг или портфолио, которое должно цеплять
• Claude выдаёт «правильный», но скучный дизайн

Установка:

npx skills add https://github.com/leonxlnx/taste-skill --skill design-taste-frontend

Подробнее: карточка на nakodil.site · tasteskill.dev · репозиторий. Лицензия — MIT. Это часть набора из 14 под-скиллов — рядом есть image-to-code и генераторы референсов.

Чем отличаются

Скилл	Что чинит	Лицензия	GitHub ★
Emil Design Eng	Моушн, easing, микроанимации	—	2K
Impeccable	Вёрстка, отступы, типографика, цвет	Apache-2.0	33K
Design Taste Frontend	Насмотренность, референсы, анти-слоп	MIT	32K

С чего начать

Если ставишь не все сразу — порядок такой:

• Impeccable — базовый порядок в вёрстке и типографике, нужен почти всегда.
• Design Taste Frontend — когда нужен небанальный визуал и характер.
• Emil Design Eng — когда дошёл до анимаций и микровзаимодействий.

Они не конфликтуют — вёрстка, насмотренность и движение закрывают разные слои. После установки перезапусти Claude Code.

Бонус: ещё 3 дизайн-скилла из каталога

Эти уже лежат в каталоге nakodil.site и докручивают тройку выше — каждый про своё. Установка и детали — на карточках.

ui-ux-pro-max — библиотека стилей, палитр и шрифтов

Насмотренность в виде меню: 67 стилей (глассморфизм, брутализм, бенто-грид и др.), 96 палитр, 57 пар шрифтов, поддержка React, Vue, Svelte, SwiftUI, Flutter. Когда нужно быстро задать дизайн-направление. 70K+ звёзд. Карточка →

Design Extract — вытащить дизайн-систему с любого сайта

Скармливаешь Claude любой сайт — на выходе токены, motion language и brand voice (17+ файлов: Tailwind, shadcn/ui, Figma variables, WCAG-аудит). Когда нравится чужой дизайн и хочешь системно его разобрать. Карточка →

design-advisor — авто-ревью UI по скриншоту

После каждого UI-изменения сам делает скриншот через Playwright и выдаёт 5–7 рекомендаций по UX, типографике, контрасту и отступам. Замыкает цикл: сверстал → получил фидбек. От Anthropic. Карточка →

Можно ли просто попросить Claude «сделай красиво»?

Можно, но результат будет тем же средним вариантом. «Сделай красиво» — не инструкция: у модели нет общих с тобой критериев красоты. Скилл работает иначе — даёт конкретику: какие отступы и типографику использовать, какие длительности у анимаций, на какие референсы ориентироваться. Поэтому три файла со скиллами стабильно поднимают качество там, где общие просьбы не помогают.

Безопасно ли это ставить

Да. Все три — открытые, ставятся напрямую из официальных репозиториев авторов. Impeccable под Apache-2.0, Design Taste Frontend под MIT — это разрешительные лицензии. У репозитория Emil лицензия не указана, но скилл ставится из его же репозитория, так что файлы тянутся от автора, а не откуда-то на стороне. Платить за сами скиллы не нужно — нужна только подписка на Claude (Pro, $20/мес) для самого Claude Code.

Источники

1. GitHub — emilkowalski/skill (Emil Design Eng)
2. emilkowal.ski — сайт Emil Kowalski
3. GitHub — pbakaus/impeccable
4. impeccable.style — официальный сайт
5. GitHub — Leonxlnx/taste-skill
6. tasteskill.dev — официальный сайт
7. skills.sh — каталог скиллов и команды установки

Читать дальше

• Лучшие skills для Claude Code: рейтинг по задачам
• Красивый дизайн сайта за 2 минуты: готовые промпты
• Как сделать красивый UI с помощью Claude Code за две команды
• Структура .claude/: пять папок, которые делают Claude Code умнее
• Каталог skills и MCP для Claude Code
• Всё про Claude Code — гайды и каталог