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

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

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

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

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

- «AI-SLOP» — модель заполняет пустоты сама
- «6 ШАГОВ» — компоненты, сетка, палитра, типографика; стрелка «от вкуса словами к системе правил»

Скрин 2-3 однотипных AI-лендингов из начала видео, цифры: не нужны; подпись «однотипные лендинги, сделанные AI»

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

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

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

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

врезка `// правило`: текст «Если чего-то нет в правилах, это не пустота. Это место, где модель начнет фантазировать.»

карточка 1 — метка «слова» / значение «стильно» / капшен «неоперационально»; карточка 2 — метка «правило» / значение «20 px» / капшен «модель может проверить»; карточка 3 — метка «ошибка» / значение «50 px» / капшен «когда правило не задано». Ключевая — #2

Скрин лендинга с ошибочным отступом 50 px и нормой 20 px, цифры: 50 px, 20 px; подпись «отступ 50 px вместо 20 px»

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

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

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

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

- «до AI → средний дизайн руками людей»
- «первые AI-лендинги → среднее стало массовым»
- «без правил → 10 теней и одинаковые блоки»
- «дизайн-система → модель сверяет результат»
- «сейчас → выше среднего уже возможно». Ключевая — #5

Примеры плохих ручных лендингов с Behance из видео, цифры: не нужны; подпись «ручной средний дизайн до AI»

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

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

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

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

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

строка 1 (приглушённо, перечёркнута) — «СДЕЛАЙ ЛУЧШЕ → ПОПРОБУЙ СТИЛЬНЕЕ → ЕЩЕ ВАРИАНТ»; строка 2 — «КОМПОНЕНТ → СЕТКА → ПАЛИТРА → ТИПОГРАФИКА». подпись строки 1 — «обычный путь»; подпись строки 2 — «наш путь»

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

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

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

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

врезка `// правило`: текст «Компонент без имени для модели не существует.»

«КНОПКА» → «PRIMARY BUTTON» → «ПРОВЕРКА». Ключевая — #2

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

Скрин Claude.md или правила проекта про поиск существующего компонента, цифры: не нужны; подпись «сначала ищи существующий компонент»

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

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

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

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

карточка 1 — метка «1» / значение «палитра» / капшен «какие цвета можно и нельзя»; карточка 2 — метка «2» / значение «типографика» / капшен «шрифты, жирность, размеры»; карточка 3 — метка «3» / значение «layout» / капшен «сетки, отступы, структура»; карточка 4 — метка «4» / значение «компоненты» / капшен «кнопки, карточки, навигация»; карточка 5 — метка «5» / значение «запреты» / капшен «что агент не должен изобретать». Ключевая — #5

Скрин UI-кита Yoolip с карточками, виджетами, skeleton/loading и alert-компонентами, цифры: не нужны; подпись «реальный UI-кит Yoolip»

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

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

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

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

Шаг 01. ошибка. 1 новый хаос. агент сделал компонент не по системе Шаг 02. диагноз. нет правила. значит, компонент не был описан Шаг 03. фиксация. 1 имя. добавить в UI-кит название и состояние Шаг 04. повтор. 0 фантазий. следующая задача ссылается на компонент

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

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

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

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

плашка-термин: «Система-тест» (проверяет вывод по правилам)

Шаг 01. Запрос. задача. дать задачу без вкусового тумана Шаг 02. Компоненты. система. собрать результат из кнопок, карточек и сетки Шаг 03. Сверка. проверка. сравнить вывод с палитрой, типографикой и отступами Шаг 04. Remix. правка. исправить ошибку до нормы Шаг 05. Без AI-slop. финал. результат проходит систему-тест

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

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

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

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

карточка 1 — метка «1» / значение «кодовая база» / капшен «компоненты уже есть»; карточка 2 — метка «2» / значение «прототипы» / капшен «скриншоты, Webflow, дизайн-файлы»; карточка 3 — метка «3» / значение «документация» / капшен «правила, брендбук, запреты»; карточка 4 — метка «4» / значение «ассеты» / капшен «логотипы, палитры, инфографика». Ключевая — #3

Скрин короткой цитаты или слайда про 4 источника дизайн-системы, цифры: 4 источника; подпись «4 источника дизайн-системы»

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

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

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

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

врезка `// правило`: текст «Референс без диагноза — это чужой вкус. Референс после диагноза — материал для системы.»

строка 1 (приглушённо, перечёркнута) — «ЧУЖАЯ КАРТИНКА → ЧУЖОЙ ВКУС → NIKE ДЛЯ ДЕТСКИХ ТОВАРОВ»; строка 2 — «ЗАДАЧА → ПОДХОДЯЩИЕ КЕЙСЫ → СВОИ АССЕТЫ → СИСТЕМА». подпись строки 1 — «ошибка»; подпись строки 2 — «нормальный путь»

Скрин создания новой Design System в Claude Design 3.0, цифры: не нужны; подпись «экран создания дизайн-системы»

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

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

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

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

врезка `// честно`: текст ««Оборот» тут не главный показатель. Главная метрика этого урока — сколько раз ты больше не объясняешь одно и то же.»

строки «Процесс → Метрика»: мастер-промпты → 22; старый процесс → полдня; новый процесс → примерно 10 минут; стиль в промпте → почти не нужен. Сноска: «цифры из речи Ромы в видео от 10.08.2026»

Скрин дизайн-системы «Система Райта» и пример презентации, собранной по ней, цифры: 22 мастер-промпта, 10 минут; подпись «презентация из одной дизайн-системы»

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

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

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

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

- «~~У меня нет UI-кита~~» → начни с кодовой базы и существующих экранов
- «~~У меня нет брендбука~~» → собери минимальные правила
- «~~Я не дизайнер~~» → тебе нужен протокол, а не диплом

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

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

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

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

карточка 1 — моно-метка «материалы видео», заголовок «чек-лист по дизайн-системе», описание «забери в Telegram-боте из описания видео», кнопка «Забрать чек-лист»; карточка 2 — моно-метка «бесплатные материалы», заголовок «улучшатель промптов и уроки», описание «в том же боте, после кнопки Start», кнопка «Открыть материалы»; карточка 3 — моно-метка «обучение», заголовок «создание продуктов», описание «путь от ниши до приложения, лендинга и дизайн-системы», кнопка «Перейти к обучению»

6 шагов · 4 источника · 22 мастер-промпта · 10 минут

Точная ссылка на Telegram-бота материалов из описания видео и ссылка на обучение, цифры: не нужны; подпись «ссылки для CTA-кнопок»

---

Источник: https://localhost:3000/m/6-shagov-chtoby-ubrat-ai-slop-iz-dizayna