Почему Claude рисует одинаково?
Открой десять интерфейсов, сделанных через AI. Восемь будут как близнецы: Inter в заголовках, фиолетово-синий градиент, карточки вложены в карточки, серый текст на цветном.
Дизайн-сообщество называет это AI-slop. Это не баг и не лень: модели обучались на одних и тех же скринах, поэтому без вмешательства они скатываются в усреднённый стиль.
Переписывание промпта не спасает. Можно вылизать инструкцию до молекулярного уровня: Claude всё равно вернёт градиент. Потому что модель ловит «дизайн» как набор привычных приёмов, а не как решение.
- Inter везде
- Фиолетовые градиенты
- Карточки в карточках
- Bounce-анимации
- Серый на цветном
- Дефолтный padding 8px
- Italic-сериф в hero
- Тёмный glow на белом
Решение: не переписывать промпт, а дать Claude отдельную инструкцию-якорь. В Claude Code это называется скилл.
Что такое скилл в Claude Code?
Скилл: это текстовый файл с инструкцией, который Claude Code читает перед тем, как взяться за задачу. Учит конкретному навыку: ловить дизайн-баги, аудитить анимации, держать визуальный стиль.
- Где живут: В папке ~/.claude/skills/: глобально, для всех проектов на компе. Каждый скилл лежит в своей папке с файлом SKILL.md.
- Как ставятся: Копированием папки скилла в
~/.claude/skills/или как плагин через/plugin. Точную команду даёт репозиторий скилла. - Как срабатывают: Claude Code автоматически подхватывает скилл, когда задача попадает под его тему. Можно вызвать и вручную:
/имя-скилла. - Чем не являются: Не MCP-сервер и не программа. Это SKILL.md с инструкцией для модели, а плагин лишь способ его доставить.
Без скилла Claude свободен и выбирает дефолты. Со скиллом: у Claude рамка: список того, что нельзя, и направление, куда идти.
Как Impeccable проверяет дизайн после написания кода?
Самый известный скилл против AI-slop. Автор: Paul Bakaus. На 12.11.2026 у репозитория около 108 тысяч звёзд на GitHub.
Скилл 1: impeccable
Что делает
Сканирует код, который уже написал Claude. Детектор проверяет по 62 правилам типичные признаки AI-дизайна и проблемы качества (на 12.11.2026).
Даёт Claude словарь команд: polish, audit, critique, distill, animate, bolder, quieter. Всего 23 команды на 12.11.2026.
- Анти-паттерны как отдельный каталог: список того, чего нельзя
- Браузерное расширение подсвечивает баги прямо на странице
- Срабатывает после написания кода, как линтер для дизайна
- 23 команды
- 62 правила детектора
- около 108 тысяч звёзд
Как поставить
# в терминале: установщик спросит, для какого агента ставить
npx impeccable install
# или в Claude Code: через плагины
/plugin marketplace add pbakaus/impeccable
# дальше открой /plugin и установи Impeccable
# готово: попроси impeccable audit
# на любом frontend-файлеКак Motion Principles проверяет анимации?
Скилл для тех случаев, когда у тебя в коде «что-то двигается, но как-то дёрганно». Автор: kylezantos. Скилл собран по опубликованным работам трёх дизайнеров. Они не участвовали в проекте и его не одобряли.
Скилл 2: design-motion-principles
Что делает
Работает в двух режимах: Create собирает интерактивные компоненты с анимацией, Audit проверяет уже написанные анимации через три линзы (по одному дизайнеру на каждую). На 12.11.2026 у репозитория 1,6 тысячи звёзд.
- Emil Kowalski: сдержанность и скорость. Анимации без лишнего
- Jakub Krehel: отделка для продакшена. Интерфейс выглядит аккуратно и законченно
- Jhey Tompkins: творческие эксперименты. Движение с характером
Gap-анализ: ищет компоненты, которые должны быть анимированы по логике интерфейса, но статичны. Например, элемент, который появляется условно и без анимации.
Как поставить
# установка через npx
npx skills add kylezantos/design-motion-principles
# или вручную: скопировать папку скилла
git clone https://github.com/kylezantos/design-motion-principles.git
cp -r design-motion-principles/skills/design-motion-principles ~/.claude/skills/
# Claude подхватит скилл, когда попросишь
# проверить анимации (audit motion)github.com/kylezantos/design-motion-principles
Что делает Frontend-Design до написания кода?
Скилл из репозитория anthropics/skills, который публикует Anthropic. Заставляет модель выбрать визуальное направление перед тем, как написать первую строчку кода.
Скилл 3: frontend-design
Что делает
Просит Claude выбирать шрифты осознанно, а не брать те, что идут по умолчанию. Типографика должна подходить смыслу проекта.
Работает в два прохода: сначала Claude составляет короткий план дизайна по брифу. Только после этого он пишет код.
- Срабатывает, когда ты просишь собрать или переделать интерфейс
- Подходит и для новых интерфейсов, и для переделки готовых
- Лежит в репозитории anthropics/skills, который публикует Anthropic
Как поставить
# в Claude Code: подключить каталог скиллов Anthropic
/plugin marketplace add anthropics/skills
# установить набор, в котором лежит frontend-design
/plugin install example-skills@anthropic-agent-skills
# Claude подхватит скилл при любой задаче
# вроде «сделай лендинг для X»Как три скилла работают вместе?
Frontend-Design включается до кода. Impeccable: после. Motion Principles: отдельно, на анимации. Вместе они закрывают полный цикл.
- Шаг 1: Frontend-Design задаёт направление: типографику, цвет, ритм
- Шаг 2: Claude пишет код по выбранному направлению
- Шаг 3: Impeccable + Motion аудитят результат и чинят остатки slop'а
Это и есть стек: направление → код → ревью. Без скиллов Claude делает только средний шаг, пишет код. С тремя скиллами у него есть рамка до и фильтр после.
Хочешь собирать сайты и интерфейсы с ИИ-агентом и получать результат лучше среднего? В Vibe Coding PRO 10 модулей онлайн, доступ к урокам 6 месяцев после старта.
Смотреть обучениеКак поставить все три скилла?
Если ещё нет Claude Code, поставь его по гайду: он входит в платные тарифы Claude, начиная с Pro. Дальше установка в два шага. Установщики могут спросить, для какого агента ставить скилл: выбирай Claude Code.
# 1. в терминале
npx impeccable install
npx skills add kylezantos/design-motion-principles
# 2. в Claude Code
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
# готово. На задаче по интерфейсу Claude сам
# подтянет нужный скиллПроверка: попроси Claude сделать любой лендинг и сравни с тем, что он рисовал раньше. Inter и фиолетовый градиент должны появляться реже, типографика станет осмысленнее. Если ничего не изменилось, проверь, что скиллы установились, и перезапусти Claude Code.
