Нейросеть нарисовала веб-референсы в пяти стилях: от fintech до Web 1.0

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

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

Почему выбраны именно эти пять стилей

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

• Игровая. Тёмные фоны, неон или фэнтезийная фактура, агрессивные акценты, крупные герои-изображения.
• Финтех. Сдержанная палитра, много воздуха, карточки, графики, ощущение доверия и порядка.
• Web 1.0. Рамки, градиентные кнопки, тесные таблицы, дефолтные шрифты. Модели нужно имитировать эстетику, которую сегодня никто не проектирует всерьёз.
• Экология. Природные фактуры, мягкий зелёный и земляной цвет, органичные формы, фотографии вместо иллюстраций.
• Нейросервис. Градиенты, свечения, абстрактные «нейронные» мотивы. Здесь модель рискует выдать клише, которое мы уже видели сотни раз.

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

Где генеративные модели обычно спотыкаются

Веб-дизайн сложнее иллюстрации по трём причинам. Первая: текст. Заголовки, подписи кнопок и меню в сгенерированных картинках часто превращаются в псевдобуквы. Вторая: сетка. Модель рисует «похожее на сайт», но выравнивание, отступы и иерархия нередко ломаются при внимательном взгляде. Третья: связность. Из пяти картинок одного проекта трудно получить единый набор с общими цветами, скруглениями и иконками.

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

Как применить это в работе

Если хотите повторить эксперимент, начните с формулы промпта: тематика, тип страницы (лендинг, дашборд, каталог), настроение, палитра, референсная эпоха или жанр. Просите отдельные блоки, например hero-секцию или карточку тарифа, а не весь сайт целиком. Так проще контролировать детали.

Дальше фиксируйте удачные параметры и переиспользуйте их во всех вариантах: одинаковый формат, одинаковое описание освещения и палитры. Это даёт больше шансов на общий стиль.

И последнее. Оценивайте не красоту картинки, а время. Если за 20 минут вы получили десять направлений для обсуждения с заказчиком, инструмент оправдал себя, даже когда ни один макет не годится в продакшн. Полные результаты, использованные инструменты и промпты автора лучше смотреть в оригинале на Habr: именно там станет ясно, насколько убедительно получилось в каждой из пяти тематик.