3 скилла Claude
для дизайна
Дефолтный Claude рисует одно и то же: фиолетовые градиенты, Inter, прыгающие анимации. Три скилла чинят это без переписывания промпта — у каждого свой репозиторий и одна команда на установку.
Почему Claude рисует одинаково
Открой десять интерфейсов, сделанных через AI. Восемь будут как близнецы: Inter в заголовках, фиолетово-синий градиент, карточки вложены в карточки, серый текст на цветном.
Дизайн-сообщество называет это AI-slop. Это не баг и не лень — модели обучались на одних и тех же скринах, поэтому без вмешательства они скатываются в усреднённый стиль 2024 года.
Переписывание промпта не помогает. Можно вылизать инструкцию до молекулярного уровня — Claude всё равно вернёт градиент. Потому что модель ловит «дизайн» как набор привычных приёмов, а не как решение.
Решение — не переписывать промпт, а дать Claude отдельную инструкцию-якорь. В Claude Code это называется скилл.
Что такое скилл
Скилл — это текстовый файл с инструкцией, который Claude Code читает перед тем, как взяться за задачу. Учит конкретному навыку: ловить дизайн-баги, аудитить анимации, держать визуальный стиль.
- Где живут
- В папке ~/.claude/skills/ — глобально, для всех проектов на компе.
- Как ставятся
- Одной командой git clone репозитория со скиллом.
- Как срабатывают
- Claude Code автоматически подхватывает скилл, когда задача попадает под его тему. Слаш-команды не нужны.
- Чем не являются
- Не плагин, не MCP-сервер, не магия. Просто SKILL.md с инструкцией для модели.
Без скилла Claude свободен и выбирает дефолты. Со скиллом — у Claude рамка: список того, что нельзя, и направление, куда идти.
Impeccable — аудит постфактум
Самый известный скилл против AI-slop. Сделал Paul Bakaus — бывший Google. Запущен в феврале 2026, к маю — 10 тысяч звёзд на GitHub.
Что делает
Сканирует код, который уже написал Claude. Ловит 24 типа дизайн-багов — от фиолетовых градиентов и шрифта Inter до bounce-easing на hover и сжатого padding.
Даёт Claude словарь команд: polish, audit, critique, distill, animate, bolder, quieter. Всего 23 команды.
- Анти-паттерны как отдельный каталог — список того, чего нельзя
- Браузерное расширение подсвечивает баги прямо на странице
- Срабатывает после написания кода — как линтер для дизайна
Как поставить
Motion Principles — аудит анимаций
Скилл для тех случаев, когда у тебя в коде «что-то двигается, но как-то дёрганно». Автор — Kyle Zantos. Обучен на работах трёх motion-дизайнеров.
Что делает
Аудитит анимации через три школы motion-дизайна. Перед аудитом сам решает, чья школа важнее для твоего конкретного проекта.
- Emil Kowalski — easing и timing. Когда анимация ощущается «правильно» по ритму
- Jakub Krehel — feel и snap. Когда интерфейс кажется отзывчивым, а не вялым
- Jhey Tompkins — motion-design в целом. Когда движение помогает понять интерфейс, а не отвлекает
Gap-анализ: ищет компоненты, которые должны быть анимированы по логике интерфейса, но статичны. Например, переход состояния кнопки или раскрытие меню без перехода.
Как поставить
Frontend-Design — направление до кода
Официальный скилл от Anthropic — той же команды, что собрала Claude. Заставляет модель выбрать визуальное направление перед тем, как написать первую строчку кода.
Что делает
Запрещает Claude использовать дефолтные шрифты: Inter, Roboto, Helvetica. Каждый раз модель обязана выбрать характерную типографику под смысл проекта.
Просит Claude сформулировать вкус словами до кода: что за продукт, какая эстетика, какой ритм. Только после этого — React и Tailwind.
- Срабатывает автоматически на любых frontend-задачах
- Хорошо отрабатывает на React + Tailwind
- Часть официального репозитория Anthropic — обновляется самой командой Claude
Как поставить
Они не дублируются — каждый ловит свой момент
Frontend-Design включается до кода. Impeccable — после. Motion Principles — отдельно, на анимации. Вместе они закрывают полный цикл.
Это и есть стек: направление → код → ревью. Без скиллов Claude делает только средний шаг — пишет код. С тремя скиллами у него есть рамка до и фильтр после.
Скопируй четыре команды
Если ещё нет Claude Code — поставь его с claude.com/code, это бесплатно для базового тарифа. Дальше — одна вставка в терминал.
~/.claude/skills/ и перезапусти Claude Code.Хочешь больше таких настроек?
Веду закрытый Telegram-клуб по вайбкоду. Внутри — мои настройки Claude Code, готовые скиллы, шаблоны проектов и кейсы из моих платформ.
Перейти в клуб OPUS.CLUB