Оговорка
У креативности есть цена. Такой инструмент выполняет запрос примерно на 90%, остальное додумывает сам, и иногда именно эти 10% оказываются критичными. Чем меньше рамок, тем больше он выдумывает, поэтому вторая ступень обязательна.
Гайд · Даниил Шишко
Как убрать
AI-слоп
из дизайна
Метод из пяти ступеней и скилл, который чистит сгенерированный интерфейс
- Метод
- 5 ступеней
- Каталог
- 26 признаков
- Режимы
- Аудит и правки
- Скилл
- Бесплатно
О гайде
Дизайн, собранный нейросетью, узнаётся с первого взгляда
Кнопки цвета индиго, эмодзи на месте иконок, серые подписи капсом, одинаковые карточки в ряд. У всех выходит одно и то же, и это видно за версту.
У этого есть конкретные причины, и на каждую есть приём. В гайде покажу, на чём именно палится ИИ-дизайн и почему модель выдаёт всем одинаковое. Дальше разберу метод из пяти ступеней, которым я довожу сгенерированный интерфейс до вида, в котором нейросеть уже не угадывается.
Внутри лежит мой анти-слоп скилл: каталог из 26 признаков сгенерированного дизайна и два режима работы, аудит и правки. Ставишь его в свой проект и прогоняешь по своим экранам.
Основа гайда: прямой эфир, где весь метод показан вживую на одном продукте.
До и после
Что даёт метод на практике
Один продукт, сервис аренды видеокарт под нейросети. Оба экрана собрала одна и та же модель, менялась только постановка задачи.
До
Запрос в одну строку: «сделай красиво».
После
Тот же экран, пройденный по пяти ступеням.
Изменился и внешний вид, и логика. Появились поиск, фильтры и сортировка. Действия в строке зависят от состояния сервера: остановленный можно только запустить, у работающего открываются данные для подключения. Остановка и удаление убраны за троеточие. В карточках наверху видно динамику расхода и прогноз, на сколько дней хватит баланса.
Признаки
На чём палится ИИ-дизайн
Это экран «до» с разметкой. Каждый номер отмечает приём, который модель ставит по умолчанию, когда ей не задали рамок.
Выбери метку на экране, чтобы разобрать приём.
Чего нет на этом экране, но встречается постоянно
- Цветная кромка с одного края карточки или уведомления при скруглённых углах
- Акцентный цвет на декоративных иконках, которые никуда не ведут
- Элементы разной высоты в одном ряду
- Флаги стран рядом с регионами
- Простые CSS-градиенты и градиентный текст
- Резкие анимации на всём подряд и глассморфизм, сделанный одним сильным блюром
Данные
На что жалуются люди
Есть открытое исследование: 3033 комментария о сгенерированном дизайне из 47 сообществ Reddit. По нему видно, что раздражает чаще всего.
Сильнее всего раздражает одинаковость, отдельные приёмы идут далеко позади.
6,1%
«Всё выглядит одинаково»
2,5%
Нетронутый shadcn-кит
Доля комментариев, в которых названа жалоба
С большим отрывом лидирует общая жалоба «всё выглядит одинаково»: 6,1% против 2,5% у самого частого конкретного приёма. В постах на эту тему про одинаковость пишут ещё чаще, примерно в 13% случаев. Отсюда практический вывод: вычистить приёмы из списка мало, экрану нужен ещё и свой характер. К этому вернёмся на пятой ступени.
Остальные жалобы
- Фиолетовая палитра
- 2,3%
- Градиенты и градиентный текст
- 2,0%
- Анимации на всём подряд
- 1,1%
- Глассморфизм и бенто
- 0,2% и 0,1%
Источник данных: открытый набор vibecoded-design-tells
Причина
Почему так выходит
Модель всегда выбирает самый вероятный вариант. На запрос «сделай красиво» самый вероятный вариант это усреднённый дизайн из всего, на чём она училась.
Когда в задаче нет рамок, модель не знает, что значит «красиво» именно для тебя, и собирает экран из самых частых решений. Те же решения она выдаёт всем остальным, поэтому и визуал у всех один. От выбора модели это почти не зависит: без вводных Claude, GPT и остальные приходят к похожему результату.
Весь метод ниже построен на одном принципе: с каждой ступенью у модели больше рамок и меньше свободы выбрать среднее.
Метод
Метод из пяти ступеней
01
Креативный инструмент
Для визуала берём инструмент, который рисует смелее
02
Чёткие вводные
Дизайн-система, референсы или файл DESIGN.md
03
UX-паттерны
Сверяем логику экрана с живыми продуктами через Mobbin
04
Чистка скиллом
Аудит по каталогу признаков, потом правки
05
Свой проход
Финальное слово за дизайнером
Первые две ступени сильнее всего влияют на результат. Третья чинит логику экрана, четвёртая снимает типовые приёмы, пятая остаётся за тобой.
У инструментов на одной и той же модели разный характер. Claude Code точный: делает ровно то, что сказано, с ним удобно вести проект, но дизайн у него выходит средним.
Claude Design работает на той же модели и добавляет к твоему запросу большой набор собственных вводных: какие бывают паттерны, как должен выглядеть интерфейс, какие решения считать удачными. Поэтому визуал у него с первого раза получается сильнее.
Сравнение
Claude Codeточный инструмент
Claude Designкреативный инструмент
Дизайн с первого раза
средний
сильнее
Следует запросу
точно
примерно на 90%
Когда брать
готовый продукт, своя система компонентов
первые итерации, когда важнее визуал
Модель внутри одна и та же, разница в том, что инструмент добавляет к твоему запросу.
С генерацией картинок то же самое. Midjourney рисует красиво и плохо слушается. Nano Banana слушается и делает точно, а вау от неё добиться трудно.
- Работаешь с готовым продуктом, где нельзя отступать от компонентов и паттернов: бери точный инструмент.
- Собираешь первые итерации и важнее визуал: бери креативный.
Размытый запрос даёт размытый результат. Чем конкретнее вводные, тем меньше модель решает за тебя. Вариантов три:
- своя дизайн-система с подробным описанием;
- скриншоты референсов, даже простая подборка заметно поднимает результат;
- готовый файл DESIGN.md.
Что такое DESIGN.md
DESIGN.md это текстовый файл с описанием дизайн-системы, который агент читает до генерации. Внутри токены (палитра, типографика, отступы, радиусы), правила оформления (как выглядят тени и где они уместны, какой фон, как устроены карточки) и запреты на дефолтные приёмы.
Писать такой файл с нуля не обязательно, есть открытые библиотеки готовых:
- DesignMD: каталог файлов по известным продуктам, от Airbnb до Apple.
- Refero Styles: стили смелее, но взяты они в основном с лендингов, а не с живых продуктов.
Шаги
Выбери файл
Открой каталог и возьми файл с близким тебе стилем.
Положи файл в проект
Скачай DESIGN.md и положи в папку проекта рядом с остальными файлами.
Поправь под себя
Замени палитру и пару шрифтов на свои и допиши запреты. Например: никакого индиго, никаких эмодзи в интерфейсе, капс только в одной роли.
Запусти тот же запрос
В запросе прямо сошлись на файл. Сравни результат с первой версией.
Запрос для агента
«Собери экран по правилам из DESIGN.md.»
Чудес от одного файла не жди, но результат с ним стабильно лучше. У меня на том же запросе появилось боковое меню, данные сгруппировались по смыслу, пропали эмодзи. Остались кромки со скруглением и акцентный цвет на декоративных иконках.
Один продукт, четыре режима
Инструмент
Без вводныхзапрос в одну строку
С файлом DESIGN.mdстрогие вводные
Claude Code
Режим 1
Слоп по полной
эмодзи, капс, пилюли, индиго
Слоп по полной
эмодзи, капс, пилюли, индиго
Режим 2
Уже не стыдно
структура лучше, акценты хромают
Уже не стыдно
структура лучше, акценты хромают
Claude Design
Режим 3
Красивее, но палится
флаги, пульсирующие точки
Красивее, но палится
флаги, пульсирующие точки
Режим 4
Лучший результат
остаётся только доработать
Лучший результат
остаётся только доработать
Вводные влияют на результат сильнее, чем выбор инструмента, лучше всего работает связка.
Точный инструмент со строгими вводными делает уже неплохо. Креативный без вводных тоже неплохо, но всё ещё палится и многое не учитывает. Лучший результат даёт связка креативного инструмента и строгих вводных, и его остаётся только доработать.
После второй ступени экран выглядит аккуратно, а работает по-прежнему шаблонно. UX-паттерны описывают, чего пользователь ожидает от экрана: где лежит корзина, как выглядят ветки комментариев, куда убраны опасные действия.
Таких ожиданий тысячи. У нас они все в голове, а модель собирает что-то правдоподобное и половину не учитывает. Загрузить ей это знание одним файлом не выйдет: объём слишком большой, она его растеряет.
Что такое Mobbin
Mobbin это библиотека скриншотов реальных приложений и сайтов, разобранных на экраны, элементы и сценарии: больше 600 тысяч экранов и 140 тысяч сценариев. Через MCP агент сам ищет там, как твою задачу уже решили другие продукты.
Шаги
Подключи Mobbin
Заведи аккаунт с платным тарифом, на бесплатном подключение не работает. Агент выдаст ссылку для авторизации. После авторизации закрой и снова открой редактор, чтобы подключение подхватилось.
Запрос для агента
«Подключи Mobbin MCP.»
Перенеси проект в Claude Code
Если собирал экран в Claude Design, передай проект через Export: скопируй готовый запрос и вставь его в Claude Code или скачай архив и открой его папкой. Дальше правки идут точечно, и точный инструмент для них удобнее.
Поставь задачу
Проси оценивать именно UX. Как источник визуальных референсов Mobbin тоже годится, но с этим агент справляется хуже.
Запрос для агента
«Прогони экран через Mobbin MCP. Посмотри, какие паттерны используют конкуренты, как это выглядит у них и что мы можем переиспользовать.»
Что изменилось у меня после этого шага
- Появились поиск, фильтры и сортировка: серверов много, в них надо ориентироваться.
- Действия в строке стали зависеть от состояния: остановленный сервер можно только запустить, у работающего открываются и копируются данные для подключения.
- Остановка и удаление ушли за троеточие. Агент сверился с паттернами и увидел, что конкуренты не выкладывают все возможные действия в одну строку.
- При создании сервера появились уведомление и состояние «запускается».
- При выборе нескольких строк появляется панель массовых действий.
Тем же способом удобно искать дыры в логике уже готового интерфейса.
Скилл это папка с инструкцией, которую агент подхватывает сам, когда задача подходит. Мой анти-слоп скилл прогоняет экран по каталогу из 26 признаков сгенерированного дизайна. У каждого признака описано, как найти его в коде и чем заменить.
Что в архиве
design-anti-slopПапка скилла, кладётся целиком
SKILL.mdПорядок работы и два режима
references/catalog.mdКаталог из 26 признаков
.claude/skillsКуда класть: в папке проекта
Три этапа работы скилла
01
АудитСписок находок с точными местами, без правок.
02
ПравкиТолько согласованные, к токенам твоей системы.
03
ХарактерПредложения, где добавить одно смелое решение.
Шаги
Скачай и распакуй архив
Внутри папка design-anti-slop: файл SKILL.md с порядком работы и references/catalog.md с каталогом признаков.
Положи папку к скиллам
В Claude Code это папка .claude/skills внутри проекта. В Claude Design нажми плюс, выбери Skills и перетащи папку целиком.
Прочитай каталог
Он написан обычным текстом. Ты должен понимать, что именно скилл считает слопом, и быть с этим согласен. С чем не согласен, убери.
Запусти аудит
Агент вернёт список находок: что не так, в каком месте, какое правило нарушено. Отдельно отметит, что критично, а что полировка. Правок на этом шаге он не делает.
Запрос для агента
«Проведи аудит этого экрана на AI-слоп.»
Реши, что чинить
Назови находки, которые нужно исправить. Если приём задуман осознанно, скажи об этом, и скилл перестанет его отмечать. Правки идут к токенам твоей системы, и каждая объясняется одной строкой.
Дообучай каталог
Заметил, что скилл что-то пропустил, скажи агенту. Через несколько проектов каталог станет твоим.
Запрос для агента
«Здесь ты не дотянул. Запиши это новым правилом в каталог.»
Про готовые скиллы
Готовые скиллы с GitHub я ставить не советую. Они раздуты и написаны под чужие задачи, их авторы часто сидят на самом дорогом тарифе и токенов не считают. И ты не знаешь, что в них заложено. Этот скилл я отдаю как основу: каталог открыт, его можно прочитать целиком до установки, убрать лишнее и дописать своё.
Снимает типовые приёмы из каталога
Не заменяет вкус
Держит систему: следит, например, чтобы у кнопок не появилось десять разных размеров
Не придумывает за тебя бренд
Ускоряет чистку в разы
Не принимает смелых решений, они остаются твоими
Скилл снимает типовое, вкус и смелые решения остаются за тобой.
Последняя ступень самая важная. Нейросеть закрывает белый лист, рутину, наполнение прототипа и первые итерации. Оценить, хорош ли экран, может только дизайнер.
Мы не зря получаем свои зарплаты: экспертный взгляд стоит на первом месте, без него ничего путного не выйдет.
На что смотреть
Лишние элементыУ меня агент упорно выводил чекбокс выбора в каждой строке. Теперь он появляется при наведении.
ВыравниваниеТекст в таблице стоит по одной левой линии, соседние блоки сидят на одной базовой.
СостоянияЧто видит пользователь, когда сервер остановлен, запускается, работает. Остановленному серверу данные для подключения не нужны, у работающего идёт счётчик расхода.
Иерархия действийОдно главное действие на экран, опасные убраны подальше.
ХарактерВычищенный экран часто выходит стерильным. Добавь одно смелое решение: в типографике, цвете или пропорциях. Скилл в конце отчёта сам предлагает, где это уместно.
У меня на этот проход ушло несколько коротких итераций.
Неполадки
Если что-то не работает
01Агент не видит скилл
Проверь, что папка design-anti-slop лежит внутри .claude/skills в папке проекта, и начни новую сессию.
02Агент сразу начал править
Останови его и попроси сначала показать аудит. Порядок всегда один: список находок, твоё решение, правки.
03Mobbin не подключается
Проверь, что на аккаунте платный тариф, и перезапусти редактор после авторизации.
04Файл с вводными почти ничего не изменил
Убедись, что DESIGN.md лежит в папке проекта, и прямо сошлись на него в запросе.
05Экран стал чистым, но скучным
Так и должно быть: скилл снимает типовое и характера не добавляет. Попроси у него предложения, где добавить смелое решение, и выбери одно.
06Нужно почистить макет в Figma
Скилл работает по коду и по скриншоту. По коду он находит и правит, по скриншоту только оценивает. Сделай скриншот макета, попроси аудит, а правки внеси сам.
Вопросы
Частые вопросы
Вопросы задавали зрители эфира. Там, где инструменты с тех пор обновились, ответы поправлены.
01Можно ли получить ту же креативность в другом инструменте, без Claude Design?
Да. Ближайшая замена это Open Design: он бесплатный, с открытым кодом, подключается к твоему Claude и опирается на свои дизайн-скиллы, их там больше ста шестидесяти. Экраны у него с первого раза получаются аккуратные. Минус в правках: руками ничего не подвинешь, всё идёт через чат с агентом. Claude Design выигрывает редактором и тем, что работает сразу, без настройки.
02Что выбирать в настройках Claude Design, чтобы дизайн был креативнее?
Креативность там не настраивается, настраивается усилие модели. Я обычно ставлю максимум.
03Mobbin MCP работает на бесплатном аккаунте?
Нет, для подключения нужна подписка.
04У меня уже есть прототип с рабочим кодом. Как показать его агенту: кодом или скриншотом?
Кодом. В коде агент разберётся лучше и сможет продолжить его, вместо того чтобы собирать заново.
05Как добиться от Claude Design сильных графиков и диаграмм?
От проекта к проекту он почти не обучается, поэтому каждый раз давай референсы. Удачный результат попроси собрать в дизайн-систему и дальше работай от неё: у меня так получился набор графиков, который я переиспользую.
06Можно ли связать Claude Code и Claude Design в обе стороны?
Да. Из Claude Design готовый макет уходит в Claude Code через Export: передаются компоненты, токены и состояния, и агент продолжает с того же места. В обратную сторону работают две команды в Claude Code: /design-sync затягивает дизайн-систему из твоего кода в Claude Design, /design создаёт и правит макеты прямо из Claude Code.
По теме
Ресурсы
- Даниил Шишко x Pixel Perfect
Разборы инструментов и процессов AI-дизайна на живых проектах.
- Даниил Шишко | AI в дизайне
Авторские скиллы, анонсы эфиров, кухня работы с агентами.
- Эфир, по которому собран гайд
Весь метод вживую на одном продукте.
После гайда
Что дальше
Этого хватит, чтобы сгенерированный экран перестал выдавать нейросеть: инструмент выбран, вводные заданы, паттерны сверены, типовое вычищено.
Дальше начинаются вопросы, которые метод не закрывает
- Откуда взять вводные, если дизайн-системы ещё нет?
- Как передать агенту большую систему компании, чтобы он собирал экраны из её компонентов?
- На чём держатся решения на экране: на исследовании аудитории или на догадках модели?
- Как собрать свои скиллы под каждый этап работы и перестать зависеть от чужих?
В своих проектах я не начинаю с просьбы «нарисуй экран». До дизайна идут исследования, и каждое решение опирается на задачи и боли конкретной аудитории. Чистка от слопа стоит в самом конце этого процесса.
Курс
Зачем идти на курс AI Native Designer
Это моя полная программа. В ней весь дизайн-процесс с агентом: от задачи в три строчки до работающего прототипа, который открывается по ссылке и собирает метрики.
01
AI Strategist
Исследования до дизайна: конкурентный анализ, синтетические персоны, аудит экранов. Проектную документацию собирает агент.
02
System Architect
Своя дизайн-система с агентом в Figma: токены, компоненты, состояния. И отдельно про то, как подключить готовую систему компании, чтобы агент брал компоненты с нужных полок.
03
Visual Engineer
Как устроены генеративные модели и как собрать пайплайн, который выдаёт визуал в твоей стилистике.
04
AI Prototyper & Agents
Живые прототипы на стеке твоих разработчиков, дашборд с метриками и проверкой гипотез, свои скиллы и среда.
ФорматУроки в записи, нагрузка 5–7 часов в неделю, доступ к материалам и обновлениям 12 месяцев. Практика на своих рабочих задачах, в конце каждого модуля курсовая.
ПоддержкаБот в Telegram с прямым каналом ко мне и менторам, после каждого модуля живой эфир с разбором вопросов.
Промокод
FROMGUIDE39
Тем, кто дочитал до конца, дарю промокод на скидку 39%. Смотри программу и бронируй место.