Создаём веб-дизайн-референсы с помощью ИИ: тест трёх генераторов на 15 макетах

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

Эксперимент опубликован в авторском Telegram-канале. Тестировались три генератора: Nano Banana Pro, Grok Image 2 и Flux 2 Pro. Каждому давали одинаковый промпт на английском языке, а затем сравнивали результаты по пяти тематическим блокам: игровой интерфейс, финтех, стилизация под Web 1.0 (ранний интернет конца 1990-х), экологический дизайн и интерфейсы для нейросервисов.

Какие задачи решали нейросети?

• Игровые интерфейсы. HUD-панель (элементы поверх экрана: здоровье, боеприпасы, миникарта) для шутера, инвентарь RPG в стиле dark fantasy, кнопки для мобильной головоломки. Промпты описывали конкретные элементы вплоть до сетки слотов 6 на 4 и цветовой кодировки редкости предметов.

• Финтех. Дашборд криптобиржи с графиком свечей и книгой ордеров, карточка банковского перевода в стиле neumorphic (мягкий объёмный дизайн без резких теней), онбординг (экраны первого знакомства с приложением) для инвестиционного сервиса.

• Web 1.0. Баннеры 468 на 60 пикселей в стиле 2000-х с мигающими надписями и шрифтами Comic Sans, а также спрайт-лист (набор кадров анимации на одном изображении) кнопок в духе GeoCities и Windows 95.

• Экология. Дашборд углеродного следа с круговыми индикаторами, карточки эко-товаров для маркетплейса, мобильный трекер переработки с геймификацией (игровыми механиками для мотивации).

• Нейросервисы. Чат-интерфейс ИИ-ассистента с анимацией набора текста, панель мониторинга ML-модели (машинного обучения) с графиками потерь и точности, онбординг для генератора изображений.

Кто справился, а кто споткнулся на надписях?

Grok Image 2 и Nano Banana Pro по итогам эксперимента показали стабильные результаты в большинстве задач.

Flux 2 Pro, работающий на принципе согласования потоков (flow matching, метод генерации, где модель учится превращать шум в изображение по заданной траектории), неожиданно провалился на задаче с кнопками Web 1.0. Модель нарисовала визуально точные кнопки с ностальгическим дизайном, но надписи на них оказались на несуществующем языке, автор пошутил, что, «возможно, на клингонском». Это типичная проблема генеративных моделей: текст на изображениях часто превращается в бессмыслицу, потому что модель воспроизводит форму букв, а не их значение.

Примечательно, что Flux справлялся с остальными задачами, но именно на спрайт-листе кнопок с конкретными надписями («Submit», «Home», «Click Here», «Download») сбоил многократно, даже после нескольких попыток.

Как попробовать самому?

1. Выберите генератор. Nano Banana Pro и Grok Image 2 доступны через свои платформы. Flux 2 Pro доступен через API и сторонние сервисы.

2. Составьте промпт на английском. Промпт-инжиниринг (искусство формулировать запрос к нейросети) здесь решает: опишите стиль, палитру, конкретные элементы интерфейса, формат файла (PNG, прозрачный фон) и эстетический ориентир (например, «Stripe-inspired minimalism»).

3. Укажите формат и назначение. Добавьте в конце промпта фразу «Make it a usable PNG asset», чтобы модель старалась выдать результат, пригодный для вставки в макет.

4. Проверьте текст на картинке. Если на макете есть надписи, внимательно прочитайте каждую: галлюцинация (когда ИИ уверенно выдумывает то, чего не было) распространяется и на буквы.

Есть ли аналоги для российских пользователей?

Для тех, кто работает из России, прямой доступ к Grok Image 2 и Flux 2 Pro может требовать обходных решений. Из доступных в РФ генераторов изображений стоит посмотреть на Kandinsky от Сбера и генератор внутри YandexGPT. Оба понимают промпты на русском языке, что снижает порог входа.

Однако ни Kandinsky, ни YandexGPT пока не заявляли о специализации на генерации UI-ассетов (элементов интерфейса). Для создания веб-дизайн-референсов с помощью ИИ на русскоязычных инструментах придётся экспериментировать с промптами и проверять, насколько модель понимает специфику интерфейсного дизайна.

Что делать с этим прямо сейчас, по ролям?

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

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

Предпринимателю в РФ. Попробуйте Kandinsky для быстрых макетов. Если качество недостаточно, эксперимент показывает, что Nano Banana Pro и Grok Image 2 дают стабильный результат, но проверьте доступность из вашего региона.

Частые вопросы

Нужно ли знать английский, чтобы писать такие промпты?

Для лучших результатов, да. Все три генератора в эксперименте получали промпты на английском. Российские аналоги (Kandinsky, YandexGPT) принимают русский, но специфическая терминология интерфейсного дизайна (glassmorphism, neumorphic, beveled 3D borders) пока лучше распознаётся на английском. Можно перевести промпт через любой переводчик и затем скормить генератору.

Можно ли использовать сгенерированные макеты в коммерческих проектах?

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

Почему ИИ путает буквы на картинках?

Генеративные модели изображений не «читают» текст, они воспроизводят визуальные паттерны. Буквы для них те же пиксели, что и текстура дерева или облака. Поэтому надпись «Submit» может превратиться в «Subnnit» или нечто совсем нечитаемое. Это одно из известных ограничений технологии, и пока ни один генератор не решил проблему полностью.

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