Попросите Claude Code сделать лендинг, и через пару минут получите рабочую страницу. Код чистый, адаптив на месте, кнопки нажимаются. А потом смотришь на неё и узнаёшь с первого взгляда: шрифт Inter, фиолетовый градиент, заголовок по центру, под ним три одинаковые карточки. Сайт сделан, но выглядит сделанным нейросетью.
Хорошая новость в том, что это лечится без дизайнерского образования. В Claude Code можно подключить скиллы, которые дают модели вкус: правила типографики, цвета, сетки и анимации, собранные людьми, которые годами делают интерфейсы. Ниже разбираем три самых известных и показываем, как ими пользоваться, если вы никогда не открывали Figma.
Каждый из трёх закрывает свой слой. Taste решает, как будет выглядеть сайт, набор Эмиля Ковальски отвечает за движение, Impeccable доводит типографику, цвет и отступы. Работают они поверх официального плагина Anthropic, поэтому начнём с него, а в конце соберём всё в одну последовательность и разберём, где возможности скиллов заканчиваются.
Если вы только знакомитесь с подходом, когда сайт собирают словами, а не руками, начните с нашего разбора что такое вайбкодинг и с чего его начинать. А если хочется разобраться в дизайне по-настоящему, посмотрите онлайн-курсы по веб-дизайну: скиллы ускоряют работу, но насмотренность сами не дают.
Рекомендуем курсы по Claude
SkillboxНейросети. Практический курс74 900 ₽3 месяца
БруноямClaude Code26 900 ₽2 месяца
PurpleSchoolClaude Code3 999 ₽2 месяца
ZerocoderПрактический курс по вайб-кодингу на Claude Code29 900 ₽4 недели
НетологияКонтент-маркетинг49 500 ₽3 месяца
SF EducationСпециалист по ценообразованию74 998 ₽4 месяца
Почему сайты от нейросети похожи друг на друга
Языковая модель учится на миллионах страниц и в итоге выдаёт среднее по всему вебу. А среднее по вебу выглядит так: крупный заголовок по центру, кнопка под ним, блок из трёх карточек с иконками, стандартные отступы Tailwind. Ни одно из этих решений не ошибка, просто все они уже тысячу раз встречались.
Авторы Taste Skill формулируют это прямо: большие модели скатываются к статистическому среднему своих данных. Поэтому промпт «сделай красиво» почти ничего не меняет. У модели нет мнения, что такое «красиво» для вашего проекта, и она выбирает самый безопасный вариант.
Наш вывод. Проблема не в слабом промпте. Нейросети не хватает вкуса, а вкус можно описать правилами и подключить к ней отдельным файлом.
Что такое скилл и почему он работает лучше длинного промпта
Скилл в Claude Code это папка с файлом SKILL.md, в котором записаны инструкции, примеры и запреты. Как объясняют в Anthropic, модель сначала видит только название и короткое описание каждого скилла, а целиком подгружает файл, когда задача подходит под описание. Подробно механику мы разбирали в статье как написать свой первый скилл для Claude Code.
По сравнению с промптом у скилла два преимущества. Он не забывается между сессиями: правила лежат в проекте и срабатывают каждый раз. И он написан тем, кто разбирается в предмете лучше вас. Вы не формулируете с нуля, почему серый текст на цветном фоне плохо читается, за вас это уже сделал дизайнер.
Все три скилла из статьи работают не только в Claude Code. Их понимают Cursor, Codex и другие агенты: с декабря 2025 года Anthropic открыла формат Agent Skills как общий стандарт для любых инструментов. Если вы ещё выбираете инструмент, сравнение есть в разборе Cursor, Windsurf и Claude Code.
Базовый уровень: официальный frontend-design от Anthropic
Начинать стоит с него, хотя в подборках дизайн-скиллов про него часто забывают. У Anthropic есть собственный плагин frontend-design. Он лежит в официальном каталоге плагинов и ставится одной командой прямо в Claude Code:
/plugin install frontend-design@claude-plugins-official
Дальше Claude сам включает его, когда видит задачу про интерфейс: лендинг, дашборд, страницу настроек.
Задача плагина простая: выбрать внятное эстетическое направление до того, как писать код. В статье Anthropic о плагине прямо перечислено, к чему модель скатывается без подсказки: шрифт Inter, фиолетовые градиенты на белом фоне, минимум анимации. Для первой версии сайта этого часто хватает.
В свежей версии плагина список примет ИИ-дизайна стал подробнее. В его SKILL.md описаны пять типовых наборов, к которым сейчас скатываются нейросети:
- кремовый фон, контрастная антиква и терракотовый акцент;
- почти чёрный фон с одним кислотно-зелёным или алым цветом;
- «газетная» вёрстка с тонкими линейками и плотными колонками;
- одинаковые скруглённые карточки с одной и той же серой тенью;
- шаблонные мелочи: капс над каждым заголовком, стрелка в каждой кнопке, нумерация 01, 02, 03 там, где нет никакой последовательности.
Плагин не запрещает эти решения, а требует выбирать их осознанно. И работает он в два прохода: сначала модель составляет короткий план из палитры, шрифтов и сетки, сверяет его с задачей и только потом пишет код, а по ходу проверяет себя по скриншотам, если среда это позволяет.
Но frontend-design даёт направление, а не систему. Он не следит за ритмом отступов на всех страницах и не проверяет анимации. Поэтому три скилла ниже ставят поверх него, а не вместо.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяTaste Skill: дать нейросети эстетическое мнение
Taste Skill от разработчика под ником Leonxlnx на момент написания статьи собрал больше 90 тысяч звёзд на GitHub и распространяется под лицензией MIT. Его называют скиллом, который чинит корень проблемы, и с этим трудно спорить: Taste меняет сами решения о макете, а не исправляет мелочи после.
Ставится одной командой из папки проекта:
npx skills add https://github.com/Leonxlnx/taste-skill
Для этого нужен установленный Node.js. Команда ставит весь набор, а отдельный скилл можно взять флагом --skill с его именем.
Три ползунка вместо слова «красиво»
Главная находка Taste в том, что стиль задаётся числами, а не прилагательными. В начале файла стоят три настройки по шкале от 1 до 10:
- DESIGN_VARIANCE отвечает за смелость макета. Низкие значения дают аккуратную центрированную вёрстку, высокие дают асимметрию и современную сетку.
- MOTION_INTENSITY регулирует количество движения: от простых эффектов при наведении до анимаций при прокрутке и «магнитных» кнопок.
- VISUAL_DENSITY определяет, сколько информации помещается на экран: от просторной витрины до плотного дашборда.
Слово «минималистично» каждая модель понимает по-своему, а число 3 из 10 понимает одинаково. Для промо-лендинга мы бы подняли первый ползунок повыше и опустили третий. Для личного кабинета или админки наоборот: вариативность снизить, плотность поднять, движение оставить минимальным. Людям, которые заходят в кабинет каждый день, эффектная вёрстка мешает работать.
Какой вариант выбрать
В наборе больше десяти скиллов. Основной называется design-taste-frontend, сейчас это вторая, экспериментальная версия. Остальные пригодятся, когда направление уже понятно:
- minimalist-ui для сдержанного редакционного стиля в духе Notion;
- high-end-visual-design для спокойного дорогого вида с мягким контрастом и воздухом;
- industrial-brutalist-ui для жёсткого механического языка;
- redesign-existing-projects для переделки готового сайта.
Важный нюанс. Если у вас уже есть сайт и вы хотите его освежить, ставьте именно redesign-existing-projects. Основной скилл рассчитан на проект с нуля. Он с радостью предложит новую вёрстку там, где хватило бы привести в порядок старую.
Taste решает, как будет выглядеть сайт, но не решает, зачем на нём каждый блок. Эту часть приходится думать самому, и здесь пригодятся наши разборы как сделать макет сайта самостоятельно и из чего состоит функциональный дизайн сайта. Если интересна именно логика экранов и сценариев, загляните в подборку курсов по UX/UI-дизайну.
CheckroiПодборка курсов по Claude75 курсов • 23 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Скиллы Эмиля Ковальски: анимация, которая не раздражает
Эмиль Ковальски работал над интерфейсами в Vercel и Linear и известен как автор библиотеки уведомлений Sonner. Свои принципы анимации он упаковал в набор emilkowalski/skills. Его часто представляют как способ «оживить» интерфейс одной командой. На деле там больше десятка скиллов, и большая их часть про то, как не переборщить.
npx skills@latest add emilkowalski/skills
Основной скилл называется emil-design-eng. Рядом лежат animate для анимации с нуля, review-animations для строгой проверки готовых анимаций, find-animation-opportunities для поиска мест, где движение действительно нужно, и mobile-native, который убирает мелкие раздражители на телефоне вроде подсветки при касании или прыгающей высоты экрана.
Конкретные правила, которые скилл навязывает модели
Ковальски в README объясняет, зачем всё это: у агентов нет хорошего вкуса. Модель ставит плавность ease-in на появление элемента, хотя нужна ease-out, или рисует сплошную рамку там, где лучше смотрится полупрозрачная тень. Каждая мелочь незаметна, а вместе они делают интерфейс дешёвым.
Часть правил он подробно расписал в статье «7 practical animation tips»:
- анимации интерфейса держать короче 300 миллисекунд: выпадающий список за 180 мс ощущается отзывчивее, чем за 400;
- для появления и исчезновения брать кривую типа ease-out, при которой движение стартует резко и плавно гаснет, причём лучше собственную через cubic-bezier, чем встроенную;
- при нажатии сжимать кнопку до scale(0.97), чтобы палец чувствовал отклик;
- не выращивать элементы из scale(0), начинать примерно с 0.9;
- раскрывать всплывающее окно от кнопки, которая его вызвала, а не от центра.
Что лучше не анимировать совсем
Самое полезное правило из этого набора звучит неожиданно: действия, которые человек делает десятки раз в день, анимировать не надо. Переключение вкладок в рабочем инструменте или открытие меню, к которому тянешься постоянно, должны срабатывать мгновенно. Красивая анимация в десятый раз за час уже раздражает.
Главная мысль раздела. Живой интерфейс быстро отвечает на действие, а не постоянно двигается. Если после прогона скилла на странице стало меньше анимаций, чем было, всё сработало как надо.
Нейросети в целом неплохо справляются с отдельными эффектами, но плохо понимают, когда их достаточно. Как с этим работают дизайнеры, мы разбирали в подборке нейросетей для дизайнеров по задачам.
Impeccable: дизайн-система и финальная полировка
Impeccable написал Пол Бакаус, бывший девелопер-адвокат Google и автор jQuery UI. Сейчас у проекта больше 70 тысяч звёзд и лицензия Apache 2.0. Из трёх скиллов этот самый большой: справочники по типографике, цвету, отступам, анимации, доступности и адаптиву плюс больше двадцати команд.
Ставится тоже из папки проекта, после чего в Claude Code нужно один раз запустить настройку:
npx impeccable install
Команда /impeccable init расспросит про продукт: кто аудитория, для чего сайт, какие ограничения, каким голосом говорить. Ответы она сохраняет в файл PRODUCT.md, и все следующие команды на него опираются. Если вопрос про аудиторию и голос ставит в тупик, загляните в наш разбор как писать текст для лендинга: там те же вопросы, только для текста. Не пропускайте этот шаг: без контекста Impeccable делает то же среднее, что и голая модель, только аккуратнее.
Какие команды нужны новичку
Все команды идут через /impeccable, и новичку из них хватит шести:
| Команда | Что делает | Когда запускать |
|---|---|---|
/impeccable init |
собирает контекст продукта в PRODUCT.md | один раз в начале |
/impeccable typeset |
чинит выбор шрифтов, иерархию и размеры | когда текст выглядит плоским |
/impeccable layout |
выравнивает отступы и визуальный ритм | когда блоки «гуляют» |
/impeccable colorize |
добавляет цвет со смыслом | когда всё серое и одинаковое |
/impeccable audit |
проверяет доступность, скорость и адаптив | перед показом людям |
/impeccable polish |
финальный проход по всему интерфейсу | перед запуском |
Короткое /polish до сих пор советуют во многих обзорах, например в минутном ролике InsiderForce про три дизайн-скилла. В текущей версии Impeccable команды собраны под одним префиксом, а короткое имя появится, только если закрепить его командой /impeccable pin polish. Если /polish не срабатывает, дело в этом.
Что Impeccable запрещает
Помимо команд в скилле есть список запретов, и он почти дословно описывает типичный сайт от нейросети:
- заезженные шрифты: Arial, Inter, системные по умолчанию;
- серый текст на цветном фоне;
- чистый чёрный и чистый серый без оттенка;
- карточки повсюду и карточки внутри карточек;
- пружинящие и «резиновые» анимации, которые выглядят устаревшими.
Проверьте по этому списку свой последний сайт, сделанный с ИИ. Скорее всего, пара пунктов найдётся. Если хочется копнуть глубже, на Checkroi собраны курсы по работе с Claude, а прикладные сценарии без разработчика мы разбирали в статье вайбкодинг для дизайнера.
CheckroiПодборка курсов по вайбкодингу24 курса • 10 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
UI/UX Pro Max: самый популярный дизайн-скилл
Если посмотреть, какие скиллы для дизайна в Claude Code ставят чаще всего, первым окажется не Taste. У UI/UX Pro Max больше 130 тысяч звёзд на GitHub и лицензия MIT. Устроен он иначе, чем три скилла выше: это не свод правил вкуса, а справочник, в котором модель ищет готовые решения под тип продукта.
По данным README, внутри 79 стилей интерфейса (активных из них 50), 192 палитры под разные типы продуктов, 74 пары шрифтов и 119 правил по UX и доступности. Ставится как плагин, двумя командами в Claude Code:
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
Когда его брать. UI/UX Pro Max выручает, если непонятно, с чего начать: он подберёт стиль, палитру и шрифты под нишу. Taste полезнее, когда направление уже выбрано и нужно, чтобы модель держала его смело и последовательно. Ставить оба сразу мы не советуем: два источника стиля тянут в разные стороны, и результат снова съезжает к среднему.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналКак поставить все три и в каком порядке запускать
Скиллы не конфликтуют, но если просто поставить их все и написать «сделай сайт», каждый потянет в свою сторону. Порядок, который работает у нас:
- Подготовьте бриф. Три-пять предложений: что за продукт, для кого, какое действие должен сделать посетитель. Приложите две-три ссылки на сайты, которые вам нравятся, а ещё лучше готовый файл DESIGN.md с палитрой, шрифтами и отступами. В библиотеке Refero Styles таких файлов больше двух тысяч, они собраны по сайтам известных продуктов. Без брифа ни один скилл не спасёт.
- Поставьте скиллы. Нужен Node.js, дальше три команды
npxиз разделов выше. Плагин frontend-design ставится командой/plugin install frontend-design@claude-plugins-officialи дальше включается сам. - Запустите
/impeccable initи ответьте на вопросы. Именно здесь пригодится бриф. - Соберите первую версию с Taste. Ползунки настройте под тип сайта: витрине больше вариативности, кабинету больше плотности.
- Пройдитесь по деталям: typeset, layout, colorize. По одной команде за раз, после каждой смотрите результат в браузере.
- Проверьте движение скиллом review-animations Ковальски и уберите лишнее.
- Закончите командами
/impeccable auditи/impeccable polish.
Если задача маленькая, например одна посадочная страница под рекламу, хватит frontend-design плюс Taste и одного прогона polish. Полную цепочку стоит запускать, когда сайт будет жить долго и обрастать страницами.
Практический совет. Давайте нейросети по одной команде и сразу смотрите результат. Попросите сразу «шрифты, цвета и отступы», и через десять минут уже не поймёте, какая правка что сломала.
Частые ошибки, из-за которых сайт снова выглядит сделанным ИИ
Даже со скиллами сайт легко вернуть к шаблонному виду. Чаще всего это происходит так:
- Расплывчатые правки. Фразу «выглядит не так» модель не исправит. Называйте блок, что именно не нравится и как должно быть: «заголовок первого экрана слишком мелкий, сделай его вдвое крупнее и выровняй по левому краю».
- Стиль живёт только в чате. После очистки контекста или новой сессии модель его забывает. Палитру, шрифты и правила держите файлом в проекте: PRODUCT.md от Impeccable или DESIGN.md.
- Основной Taste на готовом сайте. Для переделки существующего проекта есть redesign-existing-projects, иначе модель предложит перестроить всё с нуля.
- Не проверен телефон. Откройте страницу в режиме устройства в инструментах разработчика браузера до того, как показывать её людям.
- Выдуманный контент. Нейросеть охотно заполняет макет отзывами, цифрами и телефонами, которых не существует. Перед запуском всё это нужно заменить настоящим или убрать.
Claude Design и команда /design: когда скиллы не нужны
У Anthropic есть и отдельный инструмент для дизайна, Claude Design. Он работает в браузере на claude.ai/design: вы описываете задачу, а Claude рисует макеты на холсте, которые можно править чатом, комментариями или прямо на холсте. Подробно про него мы рассказали в обзоре что умеет Claude Design и как им пользоваться.
С августа 2026 года тот же подход есть и в терминале. Команда /design в Claude Code публикует холст с несколькими редактируемыми вариантами интерфейса, вы выбираете один, правите его и просите Claude реализовать. По описанию в документации Claude Code, команда пока в статусе research preview, требует версии 2.1.234 или новее и доступна на тарифах Pro, Max, Team и Enterprise. На Enterprise Claude Design сначала должен включить владелец организации.
Как выбирать. /design удобнее, когда вы ещё не знаете, как должен выглядеть сайт, и хотите сравнить варианты глазами. Скиллы нужны, когда направление выбрано и важно, чтобы каждая следующая страница держала тот же стиль. Хорошо работает связка: выбрать вариант через /design, а дальше доводить его командами Impeccable и проверять анимации скиллами Ковальски.
Чего скиллы не сделают за вас
Мы много лет смотрим на рынок онлайн-обучения и видим одну и ту же ошибку у тех, кто запускает свой первый продукт: красивая обёртка без внятного предложения не продаёт. Скиллы убирают ощущение «это сделала машина». Но они не знают, почему ваш курс, сервис или студия лучше соседних, и не напишут за вас текст, который это объяснит.
Вот что остаётся на вас:
- смысл и структура: какие блоки нужны и в каком порядке человек принимает решение;
- тексты: заголовок, который цепляет, и кнопка, которая говорит, что будет после клика;
- фотографии и иллюстрации: скилл подберёт сетку, но не снимет ваш продукт;
- проверка на живых людях: понимает ли посетитель, что делать, за первые пять секунд.
Сложный продукт с десятками сценариев, бренд с нуля или интерфейс, где ошибка стоит денег, по-прежнему делает дизайнер. Скиллы поднимают нижнюю планку: сайт, собранный без дизайнера, перестаёт выглядеть дёшево. Чем занимается веб-дизайнер, когда рутину забирают нейросети, мы разбирали в обзоре профессии веб-дизайнера.
Почему это важнее, чем кажется. Когда хороший вид доступен всем за три команды, он перестаёт выделять сайт среди других. Выделяют снова смысл, тексты и понимание аудитории, то есть то, чему учат дизайнеров и маркетологов.
Где научиться веб-дизайну, чтобы управлять нейросетью, а не угадывать
Тем, кто собирает сайты с ИИ, базовый курс веб-дизайна даёт словарь. Когда вы понимаете, что такое модульная сетка, контраст или визуальная иерархия, вы точнее ставите задачу модели и сразу видите, где она ошиблась. Если хочется сделать это профессией, посмотрите программы для будущих веб-дизайнеров. Если интереснее собирать продукты руками нейросети, есть подборка курсов по вайбкодингу.
Ниже курсы по веб-дизайну, подобранные по теме и рейтингу школ:
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Профессия «Веб-дизайнер» Перейти на сайт курса | Skillbox | 181 582 ₽ | 7387 ₽/мес. | 12 месяцев | Обзор курса |
| Профессия «UX/UI-дизайнер» Перейти на сайт курса |  GeekBrains | 131 709 ₽ | 5700 ₽/мес. | 12 месяцев | Обзор курса |
| Профессия «UX/UI-дизайнер с нуля до PRO» Перейти на сайт курса |  Contented | 197 568 ₽ | 5488 ₽/мес. | 15 месяцев | Обзор курса |
| Профессия «UI-дизайнер» Перейти на сайт курса | Нетология | 59 850 ₽ | 2493 ₽/мес. | 6 месяцев | Обзор курса |
| Дизайнер социальных сетей (веб-дизайнер) Перейти на сайт курса | Skillbox | 32 120 ₽ | 2677 ₽/мес. | 3 месяца | Обзор курса |
| Веб-дизайн 3.0 Перейти на сайт курса | Skillbox | 133 684 ₽ | 3904 ₽/мес. | 9 месяцев | Обзор курса |
| Веб-дизайн с нуля до middle Перейти на сайт курса | Нетология | 132 900 ₽ | 5783 ₽/мес. | 12 месяцев | Обзор курса |
| Профессия UX/UI-дизайнер Перейти на сайт курса | Contented | 130 500 ₽ | 3625 ₽/мес. | 9 месяцев | Обзор курса |
| ДО Профессия Веб-дизайнер 3.0 Перейти на сайт курса | GeekBrains | 171 831 ₽ | 3167 ₽/мес. | 16 месяцев | Обзор курса |
| UX/UI-дизайнер + ИИ Перейти на сайт курса |  Академия Синергия | 113 316 ₽ | 4722 ₽/мес. | 6 месяцев | Обзор курса |
Больше программ — в полном каталоге курсов по веб-дизайну
