Почему AI-сайт выглядит дёшево и как получить премиум-дизайн от ИИ-агента

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

Если Вы тоже собираете сайт через ИИ-агента и результат выглядит на ноль рублей, дело не в модели. Дело в том, что фраза "сделай красиво" не значит для агента ничего конкретного.

Почему агент по умолчанию делает сайт, который выглядит дёшево?

Агент не халтурит. Он выполняет запрос буквально. Просьба "сделай красиво" не содержит ни одного конкретного правила, поэтому агент берёт средний шаблон из тысяч примеров, на которых обучался: карточки в ряд, кнопка в каждом блоке, градиент на фон, потому что так выглядит "современный сайт" в массе обучающих данных.

Это не значит, что агент не способен на большее. Он способен, но только когда ему называют критерии, по которым нужно решать, а не общее пожелание. Разница между шаблоном и премиум-дизайном лежит не в инструменте, а в четырёх конкретных правилах, которые агенту нужно назвать вслух.

Правило 1: один акцент на блок

Дёшево выглядит экран, где всё одинаково важное. Заголовок того же размера, что подзаголовок, три кнопки в одном блоке, все элементы кричат одновременно. Глаз не понимает, куда смотреть, и считывает это как шум.

Просите у агента одну мысль и одно действие на экран, всё остальное тише. Формулировка агенту: на каждом блоке сайта оставь ровно один смысловой акцент и одну кнопку-действие, остальное визуально тише, меньше размер и контраст. Если на блоке уже есть кнопка, вторую не добавляй.

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

Правило 2: не больше двух шрифтов

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

Формулировка агенту: используй ровно два шрифта на весь сайт, один для заголовков и один для текста. Заголовки сделай минимум в 2,5 раза крупнее основного текста, а текст абзацев оставь спокойного размера, без попытки увеличить его для солидности.

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

Почему сайту нужен воздух?

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

Формулировка агенту: задай единую систему отступов на весь сайт, шаг 8 пикселей (8, 16, 24, 32, 48, 64), и используй только эти значения. Увеличь отступы блоков минимум в полтора раза от обычного значения, между секциями оставь заметный воздух и не экономь пространство ради количества текста на экране.

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

Как навести порядок в цвете и сетке?

Дёшево выглядит сайт с радужным градиентом на кнопках, разноцветными иконками и рваным выравниванием, где один блок шире экрана, а другой уже. Дорогой сайт держится на одном акцентном цвете и на невидимой сетке, по которой всё выровнено.

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

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

Какие ошибки агент повторяет чаще всего при доработке?

Даже после того, как правила заданы, агент иногда возвращается к старым привычкам на следующем шаге правок. Три частых случая на практике.

Первый: агент добавляет вторую кнопку "на всякий случай" рядом с первой. Фраза для правки: убери вторую кнопку с этого блока, оставь только основное действие.

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

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

Как проверить сайт перед тем, как показать его клиентам?

Соберите короткий чек-лист из девяти вопросов "да/нет": понятно ли за секунду, куда смотреть на каждом экране; не больше ли одной кнопки на блок; не больше ли двух шрифтов; заметно ли крупнее заголовок, чем текст; не касается ли текст края экрана; одинаковые ли отступы между секциями; не больше ли одной акцентной цветовой пары; нет ли градиентов на кнопках; выровнены ли блоки по одной ширине.

Если ответов "да" меньше семи из девяти, возвращайте сайт агенту с конкретной фразой из правил выше, а не с общим "переделай". Общая фраза заставляет агента гадать заново. Конкретная фраза чинит именно то, что сломано.

Что ещё влияет на ощущение "дорого", кроме этих четырёх правил?

Четыре правила выше закрывают основную часть разрыва между шаблоном и премиум-дизайном, но не всю. По моему опыту сборки сайтов агентами, есть ещё три вещи, которые агент почти никогда не делает сам, если их не назвать отдельно.

Первое: фотографии и иллюстрации. Агент по умолчанию тянет случайные картинки из стоков или рисует общие иконки, и это сразу выдаёт шаблон. Формулировка агенту: используй только одно изображение или иллюстрацию на блок, в едином стиле по всему сайту, без разностильных иконок из разных наборов.

Второе: текст на кнопках и заголовках. Агент любит общие фразы вроде "узнать больше" или "начать сейчас". Дорогой сайт называет конкретное действие: не "узнать больше", а "посмотреть 3 примера работ" или "записаться на разбор". Формулировка агенту: замени общие фразы на кнопках на конкретное действие с результатом, без слов "узнать" и "подробнее".

Третье: анимация и движение. Дёшево выглядит сайт, где всё появляется одновременно рывком, или наоборот, где анимации нет вовсе и страница статична, как документ. Дорого выглядит лёгкое движение при прокрутке: элементы плавно проявляются, ничего не мигает и не прыгает. Формулировка агенту: добавь плавное появление блоков при прокрутке, без резких рывков и без анимации дольше половины секунды.

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

Сколько стоит "дорогой" дизайн на самом деле?

По моим наблюдениям в практике, у агентств такой лендинг обычно стоит от 150 000 ₽. Это ориентир по рынку РФ из моей практики, не проверенная внешняя статистика и не выдуманная цифра для эффекта. Разница между этим ценником и результатом ИИ-агента за один вечер часто не в инструменте, а в четырёх правилах выше.

Я не говорю, что агент заменяет дизайнера в каждой задаче. Я говорю, что для сайта-визитки или посадочной страницы под один оффер эти четыре формулировки почти всегда закрывают разрыв между "выглядит как конструктор" и "выглядит как заказали у студии".

Что дальше?

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

А если пока просто интересно смотреть, как это устроено на практике, заходите в канал в Telegram «Растём с ИИ».