Дизайн от Claude больше не похож на шаблон: гайд по 3 навыкам от Anthropic

Что изменится после установки

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

Это не «магия дизайна из коробки». Это три узких инструмента с ясной зоной ответственности. Сами по себе они дают +20% качества; вместе — сравнимо с парой дизайн-ревью от живого человека.

Когда это пригодится

• Вы делаете лендинги, дашборды или внутренние тулзы с помощью Claude — и устали удалять одни и те же фиолетовые градиенты.
• У вас нет дизайнера, но клиент или босс ждёт «нормально», а не «AI-сгенерировано».
• Вы пишете промпт на 3 страницы про «брутализм без брутализма» — и всё равно получаете Material Design.
• Вам нужно ревьюить дизайн чужого вайб-кода — и не тратить на это полдня глазами.

Если вы дизайнер с десятилетним стажем — навыки сэкономят вам 20 минут на проект. Если вы фронтенд без дизайнерского глаза — это разница между «стыдно показать» и «можно публиковать».

Что нужно и сколько стоит

• Claude Code или Claude.ai — навыки работают в обоих, но в CLI удобнее.
• Подписка Pro/Max у Anthropic — навыки требуют доступа к Sonnet или Opus.
• Node.js 20+ — нужен только для Impeccable, который запускается отдельным CLI.
• Git — клонировать репозиторий навыков с GitHub.

Итого: 0 долларов сверху, если у вас уже есть Claude Pro. Все три навыка опубликованы Anthropic под открытой лицензией.

Impeccable: ловит ИИ-почерк до прода

Impeccable — это CLI, который сканирует исходники и подсвечивает 24 паттерна, выдающих «нейросетевой» дизайн: одинаковые градиенты, Inter без альтернатив, bounce-easing, фиолетовый на белом, паддинги по 8 пикселей. Бьёт по выходу — не переписывает ваш промпт, а правит то, что Claude поставил.

1. Поставить навык

   Клонируем общий репозиторий навыков Anthropic в каталог Claude Code:

   bash Copy

   git clone https://github.com/anthropics/skills.git ~/.claude/skills
   cd ~/.claude/skills/impeccable
   npm install
   npm link

2. Первый скан

   В корне проекта запускаем:

   bash Copy

   impeccable scan ./src

   Получаем список вида:

   output Copy

   → hero.tsx:14  — purple gradient on white
   → button.tsx:32 — Inter font detected
   → card.tsx:29  — bounce easing on hover
   → footer.tsx:5  — cramped padding (8px)

3. Автофиксы

   Запускаем impeccable fix ./src — навык подменяет очевидные паттерны на варианты с интенцией. Не агрессивно: всё, в чём он не уверен, остаётся в отчёте на ручной разбор. Изменения коммитятся в отдельный бранч — откатить можно одним git reset.

Часто полезные команды: impeccable check fonts — только типографика; impeccable check colors — палитра; impeccable report — отчёт в Markdown для PR-описания.

Motion Principles: делает анимации авторскими

Motion Principles собирает три моушн-философии — Rauno, Emil Kowalski, Pasquale — в одного аудитора. Проверяет длительности, easing, стаггер дочерних элементов и говорит, что и где зашумлено.

1. Активация

   Навык не требует отдельной установки, если вы клонировали общий репозиторий. В Claude Code открываем проект и в чате пишем /motion audit — навык активируется автоматически и читает CSS/Framer Motion/GSAP-код.

2. Что увидите в отчёте

   output Copy

   RAUNO:    cubic-bezier overshoot → smooth
   EMIL:     duration 60ms → 240ms (snappier)
   PASQUALE: stagger children by 60ms
   
   Fixes applied. Ship it.

   Три строки отчёта — три разные оптики. Rauno говорит про геометрию кривой, Emil — про скорость восприятия, Pasquale — про ритм между элементами. Аудитор не выбирает «правильную» — он показывает, где вы отклоняетесь от каждой.

3. Применить

   В чате говорим apply — фиксы попадают в код. Опционально можно сказать apply rauno only, если хочется выровнять проект только по одной школе. Я обычно беру связку Emil + Pasquale: быстрее и ритмичнее.

Design Skills: учит думать о дизайне до кода

Это официальный навык от Anthropic, опубликованный как frontend-design. Меняет порядок мышления Claude: вместо «сгенерировать компоненты и потом стилизовать» — «сначала задать систему, потом из неё собрать компоненты».

1. Установка

   bash Copy

   npx @anthropic-ai/skills install frontend-design

   Если у вас уже клонирован общий репозиторий, навык подхватится сам — отдельная команда не нужна.

2. Активация

   Навык триггерится автоматически, когда вы просите Claude сделать новый UI или переделать существующий. Можно вызвать явно: /skill frontend-design — тогда Claude задаст три уточняющих вопроса:

   output Copy

   → Какое настроение?  (минимализм / брутализм / премиум)
   → Целевая аудитория? (B2B / consumer / dev-tools)
   → Опорные референсы? (Linear, Vercel, Stripe…)

3. Что меняется на практике

   • Шрифтовые пары вместо одного Inter — на гарнитуру дисплея и body отдельные шрифты.
   • Палитра с акцентом, а не из пяти оттенков серого с фиолетовой кнопкой.
   • Реальная иерархия размеров — h1/h2/h3 различаются по модульной шкале, не по 4 px.
   • Спейсинг по сетке (4/8/16/24/32), а не по «на глаз красиво».
   • Тени и градиенты с интенцией — там, где они нужны для визуальной иерархии, а не везде.
   • Состояния hover/focus/active — продуманы, а не «дефолтный hover от Tailwind».

Как они работают вместе

Конвейер выглядит так: Design Skills думает о системе на входе → Claude генерирует код → Motion Principles аудитит анимации → Impeccable ловит остатки ИИ-почерка перед коммитом. Три прохода, каждый закрывает свою зону.

Я держу это как git-хук: impeccable scan запускается на pre-commit, motion audit — по запросу при заметных изменениях анимаций. frontend-design активируется сам, когда я начинаю новый компонент.

На что я наступил

Куда расти

Очевидное направление — добавить навык про accessibility. Anthropic его не выпустил, но в репозитории есть community-вариант a11y-skill, который проверяет контрасты, фокус-стейты и semantic HTML. Я попробую на следующем проекте.

Менее очевидное — собрать собственный навык под визуальный стиль компании. Формат простой: папка с инструкциями и примерами в ~/.claude/skills/your-brand/. Claude её прочитает и будет использовать как контекст.

Альтернативы, которые я смотрел: ручные дизайн-ревью через ChatGPT (медленнее, без интеграции с кодом), Galileo (платно, генерирует с нуля, а не правит), v0 (хорошо для прототипа, плохо для довода до прода).