Дизайнер и код: как я собрала интерфейс на AI за час и что из этого вышло

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

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

Как устроен ИИ-конструктор интерфейсов

Генератор сайтов или UI-макетов — это не единая «всемогущая нейросеть». Это веб-сервис с клиент-серверной архитектурой, где центральную роль играет оркестратор — управляющий код (бэкенд), который координирует работу специализированных моделей и конвертирует их ответы в визуальный интерфейс.

Когда вы вводите промпт и нажимаете кнопку отправки, ваш запрос идет не напрямую в нейросеть, а на бэкенд-оркестратор (обычно это API-шлюз на Node.js или Python). Оркестратор парсит текстовую задачу и распределяет роли, потому что генерация интерфейса — это всегда комбинированная работа нескольких систем.

Сначала оркестратор формирует системный промпт и отправляет запрос в кодовую языковую модель, например Claude Sonnet 5 или GPT-5.5. Ей передают правила: спецификацию дизайн-системы, список разрешенных UI-компонентов и формат итогового ответа. 

Модель отвечает за семантику, сетку, тексты и всю UX-логику. Если интерфейсу требуется растровая графика (аватарки пользователей, баннеры или фото товаров), оркестратор параллельно дергает API графических моделей вроде Flux, DALL-E, Midjourney или обращается к внешним фотостокам.

В результате языковая модель выдает не готовый холст и даже не HTML-код в чистом виде, а строго структурированное абстрактное синтаксическое дерево (AST) или массив в формате JSON. 

В нем построчно расписана вся иерархия будущего макета: свойства контейнеров (flexbox/grid), правила Auto Layout, отступы, шрифтовые токены и цветовые переменные. Сюда же оркестратор подставляет полученные ссылки на сгенерированные изображения и векторные иконки. Полученный JSON передается на клиент. 

Дальше сценарий зависит от платформы:

• если это плагин для Figma — клиентский скрипт пробегается по дереву JSON и пошагово вызывает нативные методы Figma API (например, figma.createFrame(), присваивая свойствам фрейма полученные параметры отступов и цветов);
• если это веб-сервис вроде v0 или Bolt.new — LLM обучена отдавать синтаксически корректный React-код на базе библиотек компонентов (например, Tailwind CSS и shadcn/ui). Этот код динамически скармливается виртуальному песочнику (WebContainer прямо в браузере или изолированному Node.js-контейнеру на сервере), который мгновенно компилирует и рендерит вам интерактивный компонент.

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

А на этапе переноса сгенерированного кода в реальный продакшен наружу вылезают дополнительные косяки автоматической генерации — от отсутствия нормальной обработки ошибок до «мусорных» стилей. К их проверке на практике мы и переходим.

Методология тестирования

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

• качество визуального результата — соблюдается ли структура компонентов, аккуратность отступов, читабельная типографика, отсутствие визуального шума;
• UX-логика — можно ли пройти пользовательский сценарий без ошибок, не конфликтуют ли блоки между собой, соответствует ли результат базовым UX-эвристикам, имеются ли состояния загрузки и ошибок;
• редактируемость — возможность менять тексты, кнопки, карточки, есть ли слои и группировка элементов в макете, экспорт результата в Figma;
• пригодность для разработки — можно ли передать результат разработчику;
• скорость — сколько времени занимает генерация и много ли нужно дорабатывать вручную.

Промпт:

Спроектируй веб-интерфейс (десктоп, ширина 1440px) для MVP сервиса генерации изображений по тексту (аналог Midjourney/DALL·E, но с собственным брендом). Нужны 2 связанных экрана: экран генерации и экран результата.

Контекст продукта

• Продукт: универсальный text-to-image генератор для широкой аудитории — дизайнеры, маркетологи, контент-мейкеры, любители.
• Цель MVP: пользователь быстро вводит промт, запускает генерацию и получает результат, который можно скачать, повторить или доработать.
• Тон интерфейса: современный, минималистичный, темная тема

Экран 1 — Генерация (Generation screen)

Обязательные элементы:

• Поле ввода промта: крупное текстовое поле (textarea), placeholder с примером промта, счетчик символов.
• Кнопка “Сгенерировать” (Generate) — primary CTA, всегда доступна снизу или сбоку от поля ввода.
• Панель параметров генерации (справа или под полем ввода):
  • Соотношение сторон (aspect ratio): квадрат / портрет / альбом — визуальный селектор иконками.
  • Стиль изображения: набор из 6–8 пресетов стилей (chips/карточки с превью-миниатюрой).
  • Количество вариантов на генерацию: селектор 1 / 2 / 4.
• Область истории/последних генераций: горизонтальная или вертикальная лента миниатюр последних результатов пользователя (для MVP — просто визуальный список, без сложной фильтрации).
• Индикатор состояния: пустое состояние (empty state) с подсказкой “введите промт, чтобы начать”, и состояние загрузки (skeleton/прогресс с анимацией) во время генерации.

Экран 2 — Результат (Result screen)

Обязательные элементы:

• Сетка сгенерированных изображений (1, 2 или 4 варианта в зависимости от выбора на экране генерации).
• При наведении/выборе изображения — панель действий: Скачать, Повторить с этим промтом (Regenerate), Улучшить/Upscale (кнопка, можно как заглушка), Удалить.
• Промт, по которому сгенерировано изображение, отображается над результатом с возможностью быстро отредактировать и перегенерировать.
• Кнопка “Сгенерировать еще” — возврат к экрану генерации с сохраненным промтом и параметрами.
• Полноэкранный просмотр при клике на изображение.

Общие UI-требования

Состояния для каждого ключевого элемента: default, hover, loading, error (например, “не удалось сгенерировать изображение, попробовать снова”).

Темная тема, акцентный цвет один (например, фиолетовый/электрик-синий), нейтральная типографика без засечек.

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

Адаптивность в рамках десктопа — фиксированная сетка, без мобильной версии в этом MVP.

Первый инструмент: UX Pilot

UX Pilot — это AI-инструмент для быстрого проектирования интерфейсных решений. Он обещает легкую синхронизацию с Figma, что упрощает работу над доработкой концептов. 

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

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

Результат

Вот, что у нас получилось. Теперь оценим генерацию по ранее заданным критериям.

Качество визуального результата

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

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

Ну и только посмотрите на эту прелесть:

UX-логика

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

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

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

Последнее, на что обращу внимание на первом экране: настройка CFG scale почему-то находится под окном для генерации изображения. Логичнее этот блок расположить там же, где пользователь описывает свой запрос.

На втором экране поле с написанным промтом обрезано. Отсутствуют контролы для основных действий (копирование или скачивание изображения)

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

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

Редактируемость

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

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

Я попробовала импортировать макет в Figma — получилось хорошо, слои имеют четкую структуру. Некоторые компоненты перенеслись не идеально, но это можно быстро поправить.

Пригодность для разработки и скорость

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

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

Второй инструмент: Google Stitch 

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

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

Результат

Качество визуального результата

Начну с того, что сервис спроектировал небольшой UI-Kit с цветами, типографикой и парой компонентов. Сначала это меня обрадовало, однако почему-то не везде использовались шрифты или визуальные элементы из кита, что немного подпортило впечатление.

Сама верстка экранов выполнена достаточно аккуратно, практически везде выдержаны отступы. Почему-то чипсы для Aspect ratio и Variants разного размера, хотя они находятся в одной строке. При этом в Variants внутри компонента содержится лишь простое число — можно было сделать эти элементы и акцентную кнопку меньше.

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

UX-логика

Как я уже писала, сервис спроектировал первый экран близко к задумке, но, как и в UX Pilot, выдал два отдельных экрана. Начинаю подозревать, что дело в промте, а не в «дурацких нейронках». Хорошо, что на втором экране есть кнопка, позволяющая вернуться к новой генерации. 

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

Однако есть пара моментов, которые меня смущают. На первом экране есть большая акцентная кнопка Сгенерировать и отдельная кнопка с иконкой, обозначающая то же самое. Интересно, активна ли будет кнопка, если выбраны настройки, но не написан промт с инструкцией. Так или иначе, нет большой необходимости в дублировании элементов, особенно если они расположены так близко (буквально друг над другом).

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

Редактируемость

В режим редактирования встроен ии-агент, который вносит нужные правки. В самом сервисе нет привычных слоев и точечных настроек как в Figma, поэтому мне захотелось сразу импортировать результат туда, чтобы продолжить редактирование. Однако при нажатии на элемент сервис предлагает замену текста или контента — кому-то такой формат может подойти. Экспорт в Figma работает без проблем, слои и отступы сохраняются. 

Пригодность для разработки и скорость

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

Первые экраны с небольшим UI-kit сервис спроектировал за 10 минут. Перегенерация одного из экранов заняла еще пару минут. Дольше, чем UX Pilot, но в целом тоже достаточно быстро. 

Третий инструмент: Framer

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

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

Можно также выбрать скорость генерации и модель. В бесплатной версии после отправки промта ИИ-агент задавал мне уточняющие вопросы, как в Claude.

Результат 

Сервис сразу попытался сгенерировать кликабельный прототип, но хватило его только на кнопки и одно текстовое поле. Остальное не работает и требует доработки. 

Качество визуального результата

На первый взгляд визуальный стиль и отступы выглядят аккуратно. Мне что в контролах используются иконки — это делает интерфейс менее блеклым. Без ИИ-слопа не обошлось: в некоторых местах есть лишние детали.

В первой итерации сразу на одном экране модель попыталась изобразить пустое состояние, состояние загрузки и ошибки. Конечно, состояния компонентов лучше оставлять вне экранов, однако то, что модель об этом подумала — это большой плюс. В общем и целом, расположение элементов на экране предсказуемое, хотя текстовое поле находится выше поля генерации (привычнее видеть его внизу).

UX-логика

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

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

Хорошо, что на втором экране есть дополнительные действия с картинками. Однако текст в кнопках неконсистентный: часть на русском, часть на английском. Слоган «Опишите идею — LumaForge превратит ее в четыре визуальных направления» тоже вызывает вопросы: непонятно, о каких направлениях речь. Впрочем, это можно быстро отредактировать. 

Редактируемость

Сервис раскладывает генерацию по понятным слоям и дает возможность редактировать цвета, типографику, расположение, отступы и поведение компонентов. К сожалению, не разобралась как импортировать в Figma. В Framer можно копировать элементы и стили, но напрямую вставить их в Figma, как из UX Pilot или Google Stitch не получается. 

Пригодность для разработки и скорость

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

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

Генерация заняла примерно две минуты, что очень быстро. 

Итоги сравнения

По итогам трех тестов получилась такая табличка:

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

Главный критерий, на который я советую смотреть при выборе такого сервиса — возможности редактирования макетов. Именно они превращают нейросеть из генератора красивых картинок в рабочий инструмент, который ускоряет путь от концепта до визуализации прототипов. Если бы на выходе мы получали обычный JPEG, его пришлось бы перерисовывать вручную. Здесь же результат конвертируется в удобный формат: у UX Pilot и Stitch есть экспорт в Figma, а у Framer — настройка внутри сервиса.

Вывод

Если у вас уже готова дизайн-система (или хотя бы UI-kit) и спроектированы пользовательские сценарии, за час вполне реально собрать пару простых рабочих прототипов. Мне как дизайнеру это и понравилось: можно быстро сгенерировать идеи концепции, перевести их в удобную среду (Figma или код) и дорабатывать привычными инструментами.

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

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