Навыки 3 навыка Claude Code для дизайна
0 / 8
Скачать PDF
Дизайн интерфейсов · Claude Code · август 2026

3 навыка, после которых
интерфейс перестаёт выглядеть как ИИ

Ты просишь агента сделать лендинг и получаешь одно и то же: фиолетовый градиент, скруглённые карточки, шрифт по умолчанию. Проблема не в модели, а в том, что ей никто не объяснил правила дизайна. Эти три навыка объясняют. Ставятся за две минуты и стоят ноль.

3навыка
0 ₽стоят все три
2 минутына установку
7справочников внутри
!

Почему ИИ-интерфейс видно за секунду

И почему промптами вроде «сделай красиво» это не лечится

Модель училась на миллионах страниц и выдаёт то, что встречалось чаще всего. Чаще всего встречался средний бутстрап-лендинг. Поэтому по умолчанию ты и получаешь среднее: одинаковые отступы, одинаковый градиент, текст, который никто не редактировал.

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

Без навыков

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

С навыками

Агент сам выбирает направление и держит его на всех экранах. Движение появляется там, где помогает понять интерфейс. Перед сдачей проходит по своей же работе с проверкой и чинит то, что ты бы заметил только через неделю.
Что такое навык. Это папка с инструкциями, которую Claude Code подхватывает сам, когда задача подходит под описание. Не плагин и не программа: агент просто начинает знать то, чего не знал. Ставится одной командой, удаляется удалением папки.
1

Навык 01 · Вкус

Лечит корень: агент перестаёт выдавать шаблон с одинаковыми градиентами и шрифтами
Навык 01 исходник: tasteskill.dev

Taste

Навык читает задачу, сам выбирает визуальное направление и собирает интерфейс, который не выглядит собранным из конструктора.
Чинит: «выглядит как ИИ-шаблон»

Главное отличие от обычного промпта: ты не задаёшь стиль вручную. Агент сначала решает, каким этот продукт должен быть по характеру, и только потом верстает. Один раз выбранное направление он держит на всех экранах, а не изобретает новое на каждой странице.

Вызывать отдельно не нужно, он включается сам на просьбах вроде «сделай лендинг красивее» или «это выглядит как ИИ-шаблон, почини». То есть ровно на тех фразах, которые ты и так пишешь.

Установка · прямо в Claude Code
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
Проверка за минуту: покажи агенту любую свою старую страницу и напиши «это выглядит как ИИ-шаблон, почини». Если навык встал, он не начнёт менять цвет кнопок, а сначала объяснит, какое направление выбирает и почему.
2

Навык 02 · Движение

Статичный интерфейс кажется плоским. Этот набор учит агента добавлять движение со смыслом
Навык 02 Emil Kowalski · github.com/emilkowalski/skills

Motion

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

Автор – дизайн-инженер Emil Kowalski, автор Sonner и Vaul: это компоненты, которые стоят в тысячах продуктов. Внутри его собственные рабочие правила, а не пересказ статей про анимацию.

Самое ценное здесь – вторая и третья команды. Одно дело добавить движение, другое – проверить то, что уже сделано, и получить список правок по приоритету. Обычно именно после проверки интерфейс перестаёт выглядеть самодельным.

КомандаЧто делает
animateСобирает анимацию с нуля и сам выбирает кривую, длительность и свойства
review-animationsСтрого проверяет то, что уже сделано, по своим правилам
improve-animationsПроходит по проекту и выдаёт план правок по приоритету

В наборе есть ещё find-animation-opportunities, emil-design-eng, animation-vocabulary, apple-design, pick-ui-library и prototype. Отдельно их вызывать не обязательно, агент берёт нужное сам.

Установка
npx skills@latest add emilkowalski/skills
Так это выглядит в работе: «прогони review-animations по проекту и покажи, что здесь анимировано зря». Агент вернёт список с причинами. Половина пунктов обычно про то, что движения слишком много.
3

Навык 03 · Система

Целая дизайн-система, которую агент держит в голове: шрифты, отступы, вёрстка, цвет
Навык 03 Paul Bakaus · impeccable.style

Impeccable

Один скилл-файл, набор команд и семь справочников: типографика, цвет, пространство, движение, взаимодействие, адаптив и текст в интерфейсе.
Чинит: «каждый экран живёт своей жизнью»

Ключевое: он работает внутри твоего проекта. Подхватывает твои же токены и компоненты, а не строит рядом вторую систему со своими цветами. Поэтому его безопасно ставить на то, что уже написано.

ГруппаКомандыЗачем
Оценить/audit · /critiqueНайти проблемы и получить разбор с оценкой
Довести/typeset · /layout · /colorize · /animateТипографика, отступы, цвет, движение
Усилить/bolder · /overdrive · /delight · /quieterПрибавить или убавить громкости
Упростить/adapt · /clarify · /distillАдаптив и снятие лишнего
Закрыть/polish · /harden · /optimize · /onboardФинальный проход перед сдачей
Система/init · /document · /extract · /liveНастройка, фиксация и правка вживую
Установка · вариант 1
npx impeccable install
Установка · вариант 2, прямо в Claude Code
/plugin marketplace add pbakaus/impeccable
Одна команда, которую стоит запомнить: /polish. Прогоняй её перед тем, как показать работу клиенту или выложить страницу. Она подтягивает детали, которые ты уже не видишь замыленным глазом.

С чего начать

Порядок имеет значение: каждый следующий навык работает поверх предыдущего
  1. Сначала Taste. Чтобы агент перестал выдавать шаблон. Без этого остальные два будут доводить до ума средний макет.
  2. Потом Motion. Чтобы интерфейс ожил, а движение появилось там, где помогает, а не везде подряд.
  3. Impeccable последним. Это финальный проход: система, проверка и полировка перед сдачей.
Занимает две минуты. Три команды подряд в Claude Code, перезапуск не нужен. Дальше агент сам решает, какой навык подключить под задачу, ты продолжаешь писать обычными словами.

Чек-лист: поставил и проверил

?

Частые вопросы

То, обо что спотыкаются на первой установке
Нужно ли уметь дизайнить, чтобы это работало
Нет. Смысл навыков ровно в том, что правила знает агент, а не ты. Твоя роль – сказать, что не нравится, обычными словами. Чем конкретнее фраза, тем меньше кругов правок: «заголовок теряется на фоне» работает лучше, чем «как-то не то».
Это платно
Все три навыка бесплатные и с открытым исходником. Платишь только за саму подписку Claude Code, которая у тебя и так есть.
Команда установки не срабатывает
Чаще всего дело в Node.js: npx идёт вместе с ним. Проверь node -v, нужна версия 18 и выше. Если ставишь второй и третий вариант через /plugin, обнови Claude Code до последней версии, команда появилась не сразу.
Навык встал, но агент им не пользуется
Навык подключается по описанию задачи, а не по расписанию. Если задача сформулирована как «поменяй цвет кнопки», дизайн-навык и не нужен. Скажи прямо: «примени design-taste-frontend к этой странице» или «прогони review-animations» – дальше он подхватит сам.
Не сломает ли это существующий проект
Impeccable специально работает поверх твоих токенов и компонентов. Но правило то же, что и всегда: сначала коммит, потом прогон. Скажи агенту «покажи план правок до того, как менять файлы» – получишь список и решишь сам.
Три сразу или можно один
Можно один. Если брать что-то одно – бери Taste, он меняет результат сильнее всего. Motion и Impeccable добавляют качество там, где база уже нормальная.

А что ещё пора отдать агенту?

Дизайн – одна задача из десятка, которые у тебя сейчас делаются руками или наёмными людьми. Заполни короткую форму: я посмотрю, что у тебя происходит, и отвечу, какую задачу стоит автоматизировать первой и как к ней подойти.

Получить разбор по своей задаче

Сохрани себе в PDF

Все три навыка, команды установки, таблица команд Impeccable, порядок и чек-лист. Одна страница на каждый навык, всегда под рукой.

Скачать PDF
Ярослав Буймов · автоматизация на Claude Code
t.me/buimov_it