Дизайн сайта с нейросетью без нейрослопа: что решить до промпта

Дизайн сайта с помощью нейросети превращается в нейрослоп, когда решения за вас принимает модель. Она берёт самое частое из того, на чём училась: фиолетовый градиент на белом, шрифт Inter, три карточки с иконками. Чтобы сайт выглядел как ваш, примите пять решений до первого промпта (референс, шрифт, палитра, плотность и одна своя деталь) и запишите их в файл, который агент читает перед каждой правкой.

Что такое нейрослоп в дизайне

Слоп (от английского slop, «помои») это контент, который нейросеть сделала без спроса и без старания. Слово разошлось в 2024 году, а в 2025-м стало словом года: «AI slop» у австралийского словаря Macquarie, просто «slop» у Merriam-Webster.

В апреле 2026 года разработчик Адриан Кребс прогнал через автоматическую проверку больше тысячи проектов с Hacker News, по 16 признакам такого дизайна. Четыре признака и больше нашлись у 22% сайтов, то есть примерно у каждого пятого. Сам автор пишет, что проверка ошибается примерно в одном случае из десяти-двадцати, так что цифра грубая, но порядок понятен. Сломанного на таких сайтах обычно ничего нет, просто видно, что за них решала модель.

Почему нейросеть рисует одно и то же

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

Отсюда вывод про дизайн сайта с ИИ, который новички не любят. Фраза «сделай красиво и современно» не даёт модели ни одного решения. Она честно заполняет пустоту средним, и среднее выглядит как у всех.

И ещё один момент. Запрет на фиолетовый сам по себе не спасает: модель просто переходит к следующему шаблону. В скилле frontend-design от той же Anthropic среди дефолтов, которых надо избегать, уже стоят кремовый фон с терракотой и одинаковые SaaS-карточки. Вчерашний «стильный» вариант сегодня тоже слоп. Поэтому работает не список запретов, а ваши собственные решения.

Как узнать нейрослоп на своём сайте

Откройте свой сайт и пройдитесь по списку. Это признаки, которые повторяются в разборах на Hacker News и в гайдах Anthropic и OpenAI:

• фиолетовый или сине-фиолетовый градиент на кнопках и фоне;
• шрифт Inter или Roboto везде, от заголовка до подписи;
• блок «три карточки с иконкой, заголовком и двумя строчками текста»;
• одинаковые скругления и мягкие тени на всём подряд;
• полупрозрачное «стекло» под текстом;
• каждая секция одинаково выплывает снизу при прокрутке.

От себя добавлю заголовок вроде «Раскройте потенциал вашего бизнеса», который подходит любому сайту. Один признак ничего не значит. Три-четыре вместе дают тот самый узнаваемый шаблон.

Недавно ученица показала мне лендинг своей мастерской керамики. Собран за вечер, всё работает, но выглядел он как сервис для стартапов: градиент, карточки «Качество», «Скорость», «Надёжность». Про глину и печь там не было ни одной детали. Мы поменяли не код, а задание, и об этом ниже.

Дизайн сайта с помощью нейросети: пять решений до промпта

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

1. Референс вместо прилагательных

«Минималистично и стильно» каждая модель понимает по-своему. Скриншот понимают все одинаково. Найдите два-три сайта, которые вам нравятся, и приложите скриншоты к заданию. OpenAI в своём гайде по фронтенду советует ровно это: мудборд или скриншоты до начала работы.

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

2. Шрифт

Шрифт меняет сайт сильнее, чем цвет. Выберите его сами на Google Fonts и проверьте, что у него есть кириллица. Для заголовков можно взять что-то с характером: широкий Unbounded или антикву вроде PT Serif и Lora. Для текста спокойный и читаемый: Manrope, Golos Text. Назовите оба в задании по имени.

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

3. Палитра из четырёх-шести цветов

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

Смешно, но первым делом я сам предложил ей кремовый фон с терракотой: керамика же. А это ровно тот дефолт, который скилл называет приметой ИИ-дизайна. Так что проверяйте и свои «очевидные» идеи.

Один цвет акцентный, для кнопок. Остальные для фона, текста и линий. Запишите их кодами, вида #2f3a2e, а не словами «тёплый зелёный».

4. Плотность и карточки

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

5. Одна деталь, которая про вас

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

Промпт для дизайна сайта: шаблон

Решения из пяти шагов складываются в короткий блок, который идёт в начало задания:

Дизайн. Следуй этим решениям, не заменяй их своими.

Референсы: скриншоты 1 и 2. С первого берём крупные фото во всю ширину,
со второго много воздуха между блоками.
Шрифты: заголовки [название с Google Fonts], текст [название]. Оба с кириллицей.
Цвета: фон [#код], текст [#код], акцент для кнопок [#код],
линии [#код]. Других цветов не добавляй.
Без градиентов, без стекла, без теней на карточках.
Карточки только там, где на них нажимают.
Анимация появления только у первого экрана.
Первый экран: [ваше фото из папки images], заголовок «[ваш заголовок]».

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

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

У ученицы с керамикой блок выглядел так: цвета #eef1ee, #1f2a2c, #c9d3d1 и бирюзовый акцент #2f6f73 с той самой глазури, антиква в заголовках, на первом экране печь и заголовок «Посуда, которую обжигают руками».

Если вы работаете с агентом в редакторе, сохраните этот блок в файл в корне проекта, например design.md, и добавьте в постоянные инструкции агента строчку «перед любой правкой вёрстки читай design.md». Как агент подхватывает такие файлы с правилами, видно на примере скиллов для Claude Code. Иначе через десять правок агент забудет про ваши цвета и вернётся к среднему.

Если сайт уже собран

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

Если сайт собран на компонентах shadcn/ui, цвета и скругления там лежат в CSS-переменных, и тему можно подобрать глазами в редакторе tweakcn.

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

Частые ошибки

«Не нравится, переделай» без объяснения. Агент не знает, что именно не так, и перекрашивает всё подряд. Сделайте скриншот, обведите место и напишите одной фразой, что с ним не так: «кнопка теряется на фоне», «заголовок кричит».

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

Своя деталь утонула в декоре. Добавили фото, рукописную подпись, узор и анимацию, и всё это спорит между собой. Скилл frontend-design советует тратить смелость в одном месте, а вокруг держать спокойно. Одна яркая вещь на экран.

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

Вывод

Нейросеть рисует средний сайт ровно тогда, когда вы оставляете ей пустоту. Пять своих решений, записанных в один файл, весят больше любого «сделай красиво».