гаражЕсли попросить нейросеть сделать сайт, почти наверняка получится фиолетовый градиент, три карточки с иконками в ряд, шрифт Inter и кнопка «Начать». Дизайнеры узнают такой «ИИ-шаблон» с первого экрана. Рисовать Claude умеет, ему не хватает правил, по которым одно решение лучше другого. Скиллы Claude для дизайна дают ему эти правила.
Ниже только то, что относится к дизайну. Если нужен полный список скиллов Claude Code на любую работу, он собран отдельно. А если вы ещё не ставили ни одного, начните с инструкции, как установить скиллы Claude.
Frontend Design: официальный скилл Claude для дизайна сайтов
С него стоит начать. Frontend Design от Anthropic заставляет Claude сначала выбрать направление (строгое, редакционное, тёплое, техническое) и только потом подбирать под него шрифты, цвета и композицию. Сайт после этого перестаёт выглядеть как тысяча других. В каталоге skills.sh у него больше 900 тысяч установок.
Установка: /plugin install frontend-design@claude-plugins-official
UI UX Pro Max: подбор стиля, палитры и шрифтов
UI UX Pro Max — справочник, по которому Claude подбирает дизайн под ваш продукт. В нём 79 стилей, почти 200 палитр для разных ниш, 74 пары шрифтов и больше сотни правил удобства интерфейса. На просьбу «подбери стиль для сайта стоматологии» Claude выберет из проверенных вариантов и объяснит выбор.
Установка через плагин: /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill, затем /plugin install ui-ux-pro-max@ui-ux-pro-max-skill.
Или через утилиту самого набора: npm install -g ui-ux-pro-max-cli и uipro init --ai claude в папке проекта.
Taste Skill: редизайн готового сайта
Taste Skill — набор из десятка скиллов о вкусе в интерфейсах. У нас из него стоят два.
redesign-existing-projects работает с готовыми сайтами. Сначала проводит аудит: где шаблонные приёмы, где сбит ритм отступов, где путается иерархия. Потом улучшает дизайн и не ломает то, что уже работает. Полезен, когда сайт есть, но выглядит как у всех.
full-output-enforcement к дизайну прямого отношения не имеет, зато сильно помогает в вёрстке. Он запрещает Claude сокращать код заглушками вроде «здесь остальные стили». Если правите большую страницу, этот скилл не даст вёрстке молча потерять половину блоков.
Ещё в наборе есть скиллы под конкретные стили: минимализм, брутализм, мягкий «дорогой» дизайн, генерация макетов картинками, фирменный стиль.
Установка всего набора: npx skills add https://github.com/Leonxlnx/taste-skill
Одного скилла: npx skills add https://github.com/Leonxlnx/taste-skill --skill "redesign-existing-projects"
Скиллы Claude для дизайна графики, презентаций и фирменного стиля
В официальном репозитории скиллов Anthropic лежат canvas-design для постеров и обложек в PNG и PDF, theme-factory с готовыми темами цветов и шрифтов для документов и слайдов, brand-guidelines с примером упаковки фирменного стиля в скилл и algorithmic-art для генеративной графики. Ставятся вместе: /plugin marketplace add anthropics/skills, затем /plugin install example-skills@anthropic-agent-skills.
Frontend Slides делает презентации в виде веб-страниц, с нуля или из готового PPTX. Сначала показывает несколько вариантов стиля, и вы выбираете глазами, дизайнерские знания для этого не нужны. Установка: /plugin marketplace add https://github.com/zarazhangrui/frontend-slides, затем /plugin install frontend-slides@frontend-slides.
Hallmark тоже борется с «ИИ-шаблоном». Он выбирает раскладку и тему, а потом прогоняет результат по 57 проверкам на шаблонность. Установка: npx skills add nutlope/hallmark.
Web Design Guidelines от Vercel проверяет готовую вёрстку по сотне с лишним правил доступности, скорости и удобства. Его удобно запускать последним перед публикацией. Установка: npx skills add vercel-labs/agent-skills.
Figma и Canva в Claude Code
Если дизайн хранится в Figma или Canva, поставьте официальные плагины, они подключают Claude к вашим файлам.
- Figma: Claude читает макеты, компоненты и дизайн-токены и переводит их в код. Установка:
/plugin install figma@claude-plugins-official. - Canva: Claude создаёт и правит дизайны в вашем аккаунте и подгоняет их под нужные размеры. Установка:
/plugin install canva@claude-plugins-official.
Как мы делаем дизайн сайта с Claude
К такому порядку мы пришли на собственном сайте:
- Frontend Design, а если нужна палитра под нишу, то и UI UX Pro Max. Направление выбираем до первой строки кода.
- Эскиз «до и после». Клиент смотрит варианты и выбирает, вёрстка начинается только после этого.
- Redesign Existing Projects, если дорабатываем существующий сайт.
- Проверка на телефоне. Экран шириной 390 пикселей смотрим своими глазами, скиллы этого не заменяют.
Сайт с блогом можно держать и без ежемесячной платы за конструктор. Как это устроено у нас, рассказали в статье про сайт с блогом и CMS. Тексты для такого сайта помогут написать скиллы Claude для маркетинга.
Нужен не сайт, а работник? Мы делаем ИИ-агентов для бизнеса под ключ, от $450.
Частые вопросы
Заменит ли Claude дизайнера? Для лендинга, внутреннего интерфейса или презентации со скиллами часто хватает: результат на уровне аккуратного начинающего дизайнера. Фирменный стиль с нуля и сложные продукты по-прежнему лучше делать с дизайнером. Скилл задаёт правила, идею бренда он не придумает.
Какой из скиллов Claude для дизайна поставить первым? Frontend Design. Он официальный, бесплатный, и после него результат меняется сильнее всего.
Не будут ли дизайн-скиллы мешать друг другу? Могут, если поставить три набора с похожими описаниями. Начните с одного-двух и добавляйте новые, когда станет понятно, чего не хватает.
Можно ли упаковать в скилл наш фирменный стиль? Да. Цвета, шрифты, отступы и запреты вроде «не центрировать блоки» или «текст не мельче 12 пикселей» записываются в свой скилл, и Claude соблюдает их на каждом новом экране. Как это делается, пошагово разобрали в инструкции, как установить скиллы Claude и собрать свой.
Шаблонность лечится дизайн-системой: нейросеть следует ей и перестаёт выдавать типовые решения. Такие системы собираем под проект, эскиз присылаем до начала работы — покажите задачу. Чтобы на сайт приходили посетители из поиска, загляните в скиллы Claude для SEO.