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

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

Визуальный стиль лучше задать до первой генерации

Google советует начинать с референса. К первому запросу можно приложить один или несколько скриншотов интерфейсов, на которые вы хотите ориентироваться. Gemini использует изображение как контекст и учитывает композицию, палитру, типографику и общую плотность элементов. В гайде для этого сценария Google отдельно упоминает Gemini 3.8 Flash и 3.7 Flash.

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

Промпт из гайда:

Analyze this website screenshot and describe its visual design system
in 5-6 concise sentences.

Return your answer as a prompt that I can directly put into
an AI coding tool like AI Studio.

Include specific details on its color palette (with hex approximations),
typography hierarchy, card border treatments, spacing density,
and overall aesthetic mood
(e.g., editorial minimalist, dark glassmorphism, or neo-brutalist).

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

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

Изображения тоже лучше описать сразу

Отдельный пункт Google посвящает изображениям. Если приложению нужны обложка, фотографии товаров или другие визуальные материалы, их предлагают описать уже в первом запросе. Build умеет вызывать генерацию изображений через Nano Banana и подставлять результат в приложение.

В гайде приведён пример для сервиса заказа кофе:

Build a modern artisanal coffee ordering app
with an earthy, warm editorial aesthetic.

Use your generate image tool to create:
(1) a wide cinematic hero banner featuring steamed latte art
with morning sunlight on a rustic wooden table, and

(2) clean, isolated product photos with soft natural shadows
for each coffee drink card
(espresso, pour-over, iced matcha latte, and cold brew).

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

По стоимости: генерация изображений через модели Nano Banana может быть платной. В текущем Gemini API у моделей генерации изображений нет бесплатного API-тарифа, поэтому перед запуском лучше проверить Usage и подключённый способ оплаты.

После генерации часть правок можно делать прямо в интерфейсе

Для мелких изменений Google предлагает не переписывать длинные промпты. В Build есть Edit и режим аннотаций: можно выделить нужный участок интерфейса, показать модели конкретный элемент и описать, что с ним сделать.

Например, если модель добавила лишние чипы, бейджи или другие декоративные элементы, их можно отметить прямо в предпросмотре и дать короткую команду Remove all circled elements.

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

Там же можно работать с визуальными материалами. Google показывает Edit tool как способ менять компоненты, рисовать поверх предпросмотра и генерировать новые изображения, не выходя из процесса сборки приложения.

Для более крупного изменения внешнего вида есть Design Variations. Вместо очередного запроса в духе «сделай интерфейс менее скучным» AI Studio создаёт несколько визуальных вариантов текущего проекта. Можно задать направление, сравнить результаты и применить тот, который подходит лучше.

Здесь мне нравится сама логика. Модель не обязана с первого раза угадать единственный правильный дизайн. Гораздо полезнее быстро получить несколько направлений и уже потом выбрать одно.

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

Это особенно удобно, когда словами трудно описать нужную композицию. Вместо длинного объяснения можно начать с уже существующего проекта и попросить сохранить общий характер интерфейса, поменяв саму задачу приложения.

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

Что здесь действительно полезно

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

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

Это не превращает AI Studio в полноценную замену дизайнеру. И красивый интерфейс сам по себе не делает приложение готовым к запуску. Но для прототипа разница заметная: меньше попыток объяснить внешний вид словами и больше возможностей показать модели, что именно нужно изменить.

Ссылки

Ссылки

По теме

По теме