6 шагов, чтобы убрать AI-слоп из дизайна

AI-слопубирается не вкусом, а системой

Открой 10 лендингов, которые за последний год сделаны с помощью AI. Ты не отличишь один от другого. Не потому что все авторы без вкуса. Потому что модель строит по среднему канону, на котором ее кормили: баннеры, лонгриды, презентации, блоки, карточки, кнопки.

AI-slop сам по себе не «плохой дизайн». Раньше это называлось просто средним дизайном. Проблема началась, когда среднее стало одинаковым. Одни и те же отступы, 10 теней, одинаковые кнопки, одинаковые секции. Вроде сайт есть. Но он пахнет шаблоном.

В этом чек-листе 6 шагов: как собрать дизайн-систему, как загрузить ее в Claude Design 3.0 или OpenDesign, как связать ее с Claude Code или Codex и как перестать писать модели «сделай стильно».

Модель не понимает «премиально», зато понимает 20 px

Слова «стильно», «современно», «премиально», «чисто» работают для человека. Для модели это туман. Она не может подчинить дизайн твоему вкусу, если ты не дал ей, из чего этот вкус состоит.

Поэтому нормальная инструкция звучит не «сделай лучше». Нормальная инструкция задает имена компонентов, сетку, палитру, типографику и правила исправления. Это скучнее. Зато работает.

На лендинге Ромы модель сделала отступ 50 px там, где должен быть 20 px. Не потому что «Claude тупит». Потому что правило не было закреплено. Пустое поле модель заполнила сама.

AI-slop появился не из-за нейросетей

До Claude Design и Codex тоже были лендинги «вырви глаз». На Behance хватает работ, сделанных руками людей, где блоки, цвета и типографика спорят друг с другом. Поэтому не надо делать вид, что проблема началась вчера.

Новое только в масштабе. Раньше средний дизайн делали отдельные люди. Сейчас средний дизайн можно клепать десятками за вечер. И когда все запускают один и тот же средний канон, глаз начинает чесаться уже на первой секции.

Точка ноль такая: у модели нет вкуса. У нее есть статистика. Твоя задача не уговорить статистику стать дизайнером, а дать ей систему, по которой она будет себя проверять.

«Сделай лучше» почти всегда делает хуже

Когда модель сделала плохо, обычная реакция: «блин, надо сделать лучше». И ты пишешь это в чат. Для человека в команде такая фраза иногда сработает, потому что он считывает контекст, вкус, бизнес и прошлые правки.

Для AI это просьба без адреса. Лучше где? В отступах? В композиции? В цветах? В кнопке? В контрасте? В плотности текста? Если ты не назвал поле правки, модель выбирает его сама.

Поэтому замени вкус на протокол: компонент, сетка, палитра, типографика. Смотри не на то, красивее ли стало с первого раза. Смотри, может ли модель объяснить, по какому правилу она это поправила.

Без имени кнопки у тебя будет новая кнопка каждый раз

В справке Anthropic есть простой совет: ссылайся на компоненты дизайн-системы по имени. Это звучит банально, пока ты не видишь, как агент каждый раз заново придумывает кнопку, карточку, навигацию и виджет.

Имя компонента — это якорь. Не «сделай кнопку нормальной», а «используй primary button из UI-кита». Не «добавь карточку», а «возьми card/product-summary». Когда у компонента нет имени, модель не ищет его в системе. Она строит новый.

У Ромы в Claude.md это можно описать буквально в несколько строк: если тебе нужна кнопка, сначала проверь, есть ли такой дизайн-компонент. Только если его нет, создавай новый.

имя компонента превращает дизайн из вкуса в ссылку

Для сайта тебе не нужен музей UI-китов

В большом webcode-проекте UI-кит может быть большой: карточки, виджеты, скелетоны, аллерты, экраны загрузки, навигация. У Yoolip это реальная отдельная страница, из которой агент понимает, где брать дизайн.

Но для обычного сайта достаточно нескольких вещей. Палитра, чтобы модель не нагородила лишних цветов. Типографика, потому что без нее все разваливается. Layout: отступы, сетки, структура страницы. Компоненты: кнопки, карточки, навигация, плашки.

На отступах палится большинство vibe-coded приложений. Два блока одного цвета не требуют двойного отступа между собой. Но если это не прописано, модель спокойно сделает отступ и у первого блока, и у второго. Получится «почти нормально». То есть плохо.

UI-кит пополняется после ошибки, а не ради красоты

UI-кит Yoolip Рома сделал еще на стадии разработки. Потом он не обновлялся просто потому, что «и так все нормально делается». Это важнее, чем кажется. Дизайн-система не должна превращаться в бесконечный ремонт ради ремонта.

Логика другая: агент ошибся, значит у него не было правила. Виджет на странице товаров получился одним, на планировании поставок другим, в юнит-экономике третьим. После этого ты фиксируешь компонент в UI-ките, и следующая генерация уже не начинает с нуля.

Система растет из факапов. Нашел дыру, закрыл правилом. Нашел повтор, дал имя. Нашел странный компонент, решил: оставить как стандарт или запретить. Вот и вся магия, без бубна.

Дизайн-система работает не как подсказка, а как тест

Вот главная смена мышления. Ты не просто прикладываешь красивую картинку и надеешься, что модель «поймет стиль». Ты даешь запрос, модель строит результат по твоим компонентам, потом сверяет вывод с системой.

Сделана кнопка. Окей. А как она сделана? Сделаны отступы. Окей. А соответствуют ли они сетке? Если неверно, модель должна еще раз свериться с системой и править до того момента, пока результат не начнет нормально работать.

Поэтому дизайн-система — это не папка «референсы». Это тест, который модель проходит перед тем, как ты увидишь результат. Чем четче тест, тем меньше AI-slop.

Система собирается из 4 источников

Первый источник — кодовая база. Даже если отдельной страницы UI-кита нет, компоненты уже разбросаны по файлам: кнопки, карточки, формы, навигация, состояния.

Второй — прототипы, скриншоты, Webflow, готовые дизайн-файлы. Например, для новой функции генератора инфографики в Yoolip сначала готовятся дизайн-макеты. Это еще не часть приложения, но агент уже может понять направление.

Третий — документация и брендбуки: как надо, как не надо, какие ошибки не повторять. Четвертый — ассеты: логотипы, палитры, образцы инфографики. Не кидай в модель разрозненные картинки «мне нравится». Сначала спроси, какой дизайн подходит твоему бизнесу, а уже потом собирай систему.

Не копируй чужой Nike на детские товары

В Claude Design 3.0 дизайн-система создается просто: плюсик, Design System, создать новую, загрузить скриншоты, брендбук, описание правил, потом минимально выправить. В OpenDesign логика похожая.

Но слабый путь — взять чужую картинку, извлечь чужой вкус и натянуть его на свой продукт. Так появляются детские товары в стиле Nike: наклонный шрифт, агрессия, движение, а товар вообще про другое.

Начинай не с картинки, а с вопроса: какой дизайн здесь подойдет? Попроси Claude подобрать хорошие кейсы на Behance и Dribbble, объяснить, почему они подходят, и только после этого бери свои ассеты и собирай систему.

Один кит режет полдня до 10 минут

У «Системы Райта» дизайн-система появилась не из воздуха. Сначала дизайнер сделал сайт, продумал стиль, а потом Рома загрузил этот дизайн в систему. Теперь из нее делаются презентации, посты для Telegram-каналов, сайт и визуалы в Nano Banana или Claude.

Сегодня у Ромы 22 мастер-промпта презентации через один кит и почти ни слова про стиль дальше. Раньше презентация занимала полдня и все равно могла выглядеть уродливо. Сейчас такая презентация пилится примерно за 10 минут.

Вот где деньги и время. Не в том, чтобы каждый раз заново объяснять вкус дизайнеру, модели или агенту. А в том, чтобы один раз собрать систему и дальше ссылаться на нее.

«У меня нет дизайнера» — это не блокер

«У меня нет UI-кита». Значит, начни с кодовой базы и существующих экранов. Компоненты уже где-то есть, просто они не собраны на одной странице.

«У меня нет брендбука». Тогда собери минимальный набор: палитра, типографика, layout, компоненты, запреты. Этого достаточно, чтобы убрать большую часть AI-slop.

«Я не дизайнер». Нормально. Твоя задача не стать дизайнером, а перестать давать модели пустые поля. Система закрывает не вкус, а повторяемые ошибки: отступы, цвета, кнопки, карточки, навигацию.

Возьми чек-лист и проверь свой проект сегодня

Если разложить все по полочкам, путь простой. Первое: найди материал. Если у тебя уже есть vibe-coded продукт, материал у тебя есть. Второе: собери систему через /design-sync или вручную в Claude Design. Третье: прочитай и поправь баги. Четвертое: правь через Remix. Пятое: опубликуй или выгрузи. Шестое: сделай отдельную страницу системы и ссылайся на нее в задачах.

После этого вы с Claude Code или Codex начинаете понимать друг друга с полуслова. Не потому что агент стал умнее. Потому что ты перестал просить вкус и начал давать проверяемые правила.

Один вопрос: какой компонент в твоем проекте модель каждый раз придумывает заново? Ответь одним предложением и открой чек-лист. Я читаю.