Как создать красивый дизайн с AI-агентом: пошаговый кейс

Как создать дизайн сайта с AI-агентом и не получить очередной AI-слоп?

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

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

Фиолетово-синий градиент. Inter. Огромный заголовок. Три карточки с иконками. Скругления. Glow-эффекты. Кнопка «Начать». На отдельные элементы сложно пожаловаться, но вместе они моментально выдают генерацию.

Проблема не столько в AI-агенте, сколько в постановке задачи.

Если сказать ему «сделай современный минималистичный сайт», он соберёт среднее представление о современном минимализме из своих данных.

Я решил проверить другой подход: не заставлять агента придумывать дизайн с нуля, а дать ему референсы, правила и отдельный этап критики.

Для работы с текстом, анализом референсов и генерацией визуальных материалов я использовал модели, доступные через единый интерфейс, который работает в России и без всяких обходов, где доступны GPT Image 2, Claude, ChatGPT, Nano Banana Pro и другие модели в одном месте. 

Воспользовался токенами для теста и так же пользовался через интерфейс бота с телефона.  

Ниже — мой рабочий процесс.

Почему AI-агент постоянно делает похожий дизайн

Представьте, что вы говорите дизайнеру:

«Сделай красивый современный сайт для IT-сервиса».

Человек сначала спросит про аудиторию, продукт, конкурентов, позиционирование, визуальный язык и референсы.

AI-агент чаще всего сразу начинает собирать интерфейс.

И поэтому появляется стандартный набор:

1. градиентный первый экран;
2. крупный белый текст;
3. фиолетовый или синий акцент;
4. карточки с одинаковыми иконками;
5. большие скругления;
6. одинаковые отступы;
7. анимации ради анимаций.

Каждый элемент сам по себе нормальный. Проблема возникает на уровне системы.

Агенту не хватает внешнего источника вкуса.

Я решил закрыть эту проблему тремя вещами:

1. показать агенту хорошие референсы;
2. записать визуальные правила проекта в отдельный файл;
3. заставить AI не только генерировать, но и критиковать результат.

Именно третий пункт оказался особенно важным.

Шаг 1. Не описывайте дизайн словами — покажите референсы

Самая частая ошибка — написать в промпте:

«Сделай современный минималистичный интерфейс».

Для AI это слишком расплывчатая задача.

Гораздо эффективнее дать ему 3–5 скриншотов понравившихся сайтов или отдельных экранов.

Я обычно собираю референсы по конкретным задачам:

1. первый экран;
2. карточки;
3. мобильная версия;
4. экран оплаты;
5. формы;
6. меню;
7. анимации.

Источники можно использовать разные. Например, Mobbin удобен для поиска реальных интерфейсов, Dribbble — для визуального направления, а CodePen — когда нужен конкретный HTML/CSS/JS-эффект.

Но здесь есть важный нюанс.

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

Референс нужен, чтобы показать:

1. какой должна быть сетка;
2. насколько плотным должен быть интерфейс;
3. какие используются отступы;
4. как устроена типографика;
5. сколько цветов реально нужно;
6. насколько заметными должны быть кнопки;
7. как используются фотографии и графика.

То есть мы копируем принцип решения, а не чужой дизайн.

Промпт для анализа референсов

Я использую такой запрос в Claude или другой языковой модели

Ты выступаешь как арт-директор цифрового продукта. Я прикреплю несколько скриншотов интерфейсов, которые мне нравятся. Проанализируй их не с точки зрения копирования, а с точки зрения визуальной системы. Определи:— типографику;— размер и иерархию заголовков;— ширину текстовых блоков;— систему отступов;— радиусы;— цвета;— принцип использования акцентного цвета;— характер изображений;— плотность интерфейса;— стиль кнопок;— характер анимаций;— правила композиции первого экрана. После анализа сформулируй единую дизайн-систему, которую можно передать AI-агенту для создания нового сайта. Не копируй конкретные элементы референсов. Выдели общие принципы и преврати их в правила для нового проекта.

В результате вместо фразы «хочу красиво» появляется конкретное техническое задание.

Шаг 2. Создайте DESIGN.md

Следующий шаг — превратить визуальные решения в файл.

Я называю его DESIGN.md и кладу в корень проекта.

Например:

# DESIGN SYSTEM ## Colors Background: #1A1A1A Card: #F7F5F0 Text: #1A1A1A Accent: #EFFF3E Accent is used only for important actions. Accent should occupy no more than 5% of the interface. ## Typography Headings: - weight 600 - compact - no unnecessary line breaks Body: - 16px - line-height 1.7 - maximum readable text width Labels: - 13px - muted gray ## Spacing 8px 16px 24px 48px 96px ## Radius Cards: 24px Buttons: 12px ## Animation 250ms Only for meaningful interactions. No decorative animation without purpose. ## Forbidden - no background gradients - no purple - no emoji in UI - no three identical cards in a row - no hard-edged shadows - no excessive glow - no random decorative elements

Здесь есть важный принцип:

раздел с запретами иногда полезнее раздела с разрешениями.

Если написать агенту «используй современный визуальный стиль», он будет выбирать из огромного количества вариантов.

Если написать:

«Не использовать градиенты, фиолетовый, эмодзи и три одинаковые карточки»

пространство решений резко сужается.

Агент начинает работать гораздо предсказуемее.

Как быстро создать такой файл с помощью AI

Не обязательно писать DESIGN.md вручную.

Можно загрузить несколько референсов в Claude через Syntx и дать ему задачу:

Проанализируй прикреплённые изображения как UI/UX-дизайнер и создай DESIGN.md для нового проекта. Файл должен содержать:

1. цветовую систему;
2. типографику;
3. сетку;
4. отступы;
5. радиусы;
6. кнопки;
7. карточки;
8. изображения;
9. анимации;
10. список запрещённых визуальных решений.

Не копируй конкретный сайт.Выдели общие визуальные принципы из всех референсов.Все значения указывай конкретно. Не используй формулировки «современный», «красивый», «стильный» без расшифровки.

После этого файл можно проверить и вручную изменить.

Например, AI предложил пять цветов, а вам нужен один акцентный. Просто удаляете лишние.

Шаг 3. Используйте сборник как «дизайн-лабораторию»

Здесь мне нравится сама идея агрегатора.

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

Например, задача:

Придумай визуальную концепцию лендинга для сервиса автоматизации контента.

Аудитория — владельцы малого бизнеса и маркетологи.

Не используй типичную AI-эстетику:— фиолетовые градиенты;— роботов;— мозги;— светящиеся сферы;— абстрактные нейросетевые изображения.

Интерфейс должен выглядеть как продукт, который уже существует и которым пользуются каждый день.

Предложи:— концепцию первого экрана;— визуальную метафору;— цветовую систему;— типографику;— стиль иллюстраций;— композицию;— 3 варианта hero-блока.

После этого я бы не выбирал первый ответ.

Я бы сравнил несколько вариантов, выбрал направление и только потом отдавал его агенту.

Это важное изменение процесса:

AI не принимает финальное дизайнерское решение за вас. Он предлагает варианты, а вы выбираете систему.

Шаг 4. Генерируйте визуальные референсы до верстки

Ещё одна ошибка — сначала написать код, а потом пытаться придумать, как сайт должен выглядеть.

Я делаю наоборот.

Сначала создаю несколько визуальных концепций.

Например, через Nano Banana можно проверить:

1. композицию первого экрана;
2. стиль иллюстраций;
3. предметную фотографию;
4. рекламный баннер;
5. обложку;
6. визуальную метафору продукта.

Для первого теста достаточно такого промпта:

Create a high-end website hero visual for a modern SaaS product. The visual language should feel editorial, premium and restrained. Avoid generic AI aesthetics, purple gradients, glowing brains, robots, floating spheres and excessive glassmorphism. Use strong composition, realistic lighting, subtle contrast and one distinctive visual idea. The image should support the headline rather than compete with it. No text, no logo, no interface elements. 16:9 composition.

Затем можно попросить модель сделать ещё несколько вариантов, но менять один параметр за раз.

Например:

Keep the same visual direction, but make the composition more editorial and reduce decorative elements by 40%.

Так проще понять, какое именно изменение улучшило результат.

Шаг 5. Дайте агенту не только дизайн, но и ограничения

Когда референсы и DESIGN.md готовы, только тогда я отдаю задачу кодинг-агенту.

Причём промпт лучше писать не в стиле:

«Сделай красивый лендинг».

А так:

Изучи DESIGN.md перед началом работы. Используй его как главный источник визуальных правил проекта. Также изучи прикреплённые референсы. Не копируй их напрямую. Используй их как источник композиционных и типографических решений.

Перед написанием кода:

1. опиши структуру страницы;
2. определи визуальную иерархию;
3. перечисли основные компоненты;
4. объясни, где будет использоваться акцентный цвет;
5. перечисли решения, которые ты сознательно НЕ будешь использовать.

После этого создай страницу. Критерии:— мобильная версия от 375px;— единая система отступов;— единые радиусы;— понятная иерархия;— минимум декоративных элементов;— никаких случайных градиентов;— никаких дополнительных цветов без необходимости;— кнопки должны иметь понятный текст;— каждый визуальный элемент должен выполнять функцию. После создания страницы самостоятельно проведи визуальную ревизию и перечисли минимум 10 возможных проблем.

Последняя строка особенно важна.

Она заставляет агента переключиться из режима «создать» в режим «проверить».

Шаг 6. Пусть AI сначала критикует, а потом исправляет

Я заметил простую вещь: AI намного полезнее работает, когда ему запрещаешь сразу бросаться исправлять всё подряд.

Например:

Проведи визуальный аудит готовой страницы. Ничего пока не исправляй. Проверь:— визуальную иерархию;— контраст;— типографику;— отступы;— единообразие компонентов;— мобильную версию;— состояния кнопок;— формы;— перегруженность;— соответствие DESIGN.md;— наличие типичных AI-паттернов. Для каждой проблемы укажи:

1. что не так;
2. почему это проблема;
3. насколько она критична;
4. что конкретно предлагаешь изменить.

И только после получения отчёта: Исправь проблемы с высоким и средним приоритетом. Не меняй элементы, которые уже соответствуют DESIGN.md. Перед изменением каждого блока проверь, не нарушит ли исправление общую визуальную систему.

Так AI перестаёт бесконечно переделывать страницу.

Что делать, если агент продолжает делать «нейросетевой» дизайн

У меня есть отдельный промпт для такого случая:

Проведи анти-AI аудит интерфейса. Представь, что пользователь увидел этот сайт среди 20 других сайтов, созданных с помощью AI. Найди элементы, по которым интерфейс можно узнать как типичный AI-generated design. Особое внимание:— градиентам;— glassmorphism;— glow;— одинаковым карточкам;— чрезмерным скруглениям;— декоративным иконкам;— чрезмерно крупным заголовкам;— абстрактным AI-изображениям;— повторяющимся паттернам;— лишней анимации. Для каждого найденного элемента предложи более характерную альтернативу. Не делай дизайн сложнее. Наоборот, ищи способы сделать его более узнаваемым при меньшем количестве элементов.

Последняя фраза здесь тоже важна.

Хороший дизайн не обязательно сложнее.

Очень часто наоборот: после удаления половины декоративных элементов сайт начинает выглядеть дороже.

Шаг 7. Отдельно проверяйте мобильную версию

AI-агент может прекрасно собрать desktop и при этом случайно уничтожить мобильную версию.

Поэтому я всегда проверяю страницу на ширине 375px.

В первую очередь ломаются:

1. длинные заголовки;
2. таблицы;
3. горизонтальные блоки;
4. большие изображения;
5. кнопки;
6. меню;
7. карточки;
8. сложные анимации.

Промпт:

Проверь страницу на ширине 375px. Не меняй desktop-версию без необходимости. Найди:— горизонтальный overflow;— элементы, которые становятся слишком узкими;— длинные заголовки;— слишком большие отступы;— кнопки, которые неудобно нажимать;— изображения, нарушающие композицию;— компоненты, которые требуют отдельной мобильной логики. Сначала составь список проблем.После моего подтверждения внеси исправления.

Шаг 8. Правки делайте прямо по странице

Есть ещё одна проблема.

Страница уже готова, вы видите:

«Вот эта кнопка справа, чуть ниже заголовка, она какая-то не такая».

Для человека это очевидно.

Для агента — нет.

Если проект позволяет работать с инструментами визуальной разметки, удобнее указывать конкретный элемент прямо на странице и передавать агенту замечание вместе с контекстом.

Но даже без специального инструмента можно сделать проще.

Сделайте скриншот, обведите проблемный элемент и отправьте его модели через агрегатор:

На скриншоте красным отмечен элемент, который нужно изменить. Проанализируй только этот элемент. Не меняй соседние блоки Сначала объясни, что именно нарушает визуальную систему. Затем предложи 3 варианта исправления.Выбери один вариант, который лучше всего соответствует DESIGN.md.

Работа по принципу «вот конкретный элемент» намного эффективнее, чем бесконечные сообщения:

«Сделай чуть современнее».

Мой итоговый процесс

После нескольких таких итераций схема у меня выглядит довольно просто.

Сначала я собираю референсы.

Потом через AI анализирую их и создаю DESIGN.md.

Дальше дизайн-система и референсы передаются агенту, который пишет интерфейс.

После первой версии начинается самое важное:

не просить AI «сделать красивее», а заставлять его проводить ревизию по конкретным критериям.

И уже после ревизии принимать решения, что исправлять.

Получается цикл:

референсы → DESIGN.md → концепция → код → аудит → точечные правки → повторный аудит.

Причём первые два этапа обычно делаются один раз для проекта.

Чек-лист перед публикацией

Перед тем как показывать сайт клиенту или отправлять на него трафик, я бы проверил семь вещей.

1. Первый экран. Понятно ли за несколько секунд, что это за продукт и зачем он нужен?

2. Иерархия. Есть ли один главный элемент, который пользователь должен заметить первым?

3. Цвет. Не используется ли акцентный цвет везде подряд?

4. Типографика. Есть ли понятная разница между заголовками, текстом и второстепенными элементами?

5. Единообразие. Одинаковые ли радиусы, отступы, кнопки и карточки используются по всему проекту?

6. Мобильная версия. Откройте страницу на 375px и просто прокрутите её. Если что-то хочется «потянуть пальцем вправо» — уже есть проблема.

7. AI-слоп. Если убрать логотип и название компании, будет ли понятно, чем этот сайт отличается от сотен других AI-сайтов?

Последний вопрос я считаю самым полезным.

Что в итоге изменилось

AI-агент сам по себе не стал дизайнером.

И не должен им становиться.

Он всё ещё машина, которая очень хорошо умеет быстро реализовывать решения.

Но качество результата резко меняется, когда вместо одного сообщения:

«Сделай красивый сайт»

у него появляется система:

референсы + конкретные правила + запреты + визуальные материалы + проверка результата.

Именно поэтому я сейчас воспринимаю AI-агента не как человека, которому можно полностью делегировать дизайн, а как очень быстрого исполнителя, которому нужно дать хороший бриф.

Главное — не пытаться заставить одну нейросеть делать всё.

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

Тогда AI-агент перестаёт собирать «ещё один красивый сайт» и начинает собирать конкретный продукт с собственным визуальным языком.