Найти в Дзене
Cyber Artes

Как сделать быстрый прототип интерфейса с помощью Nano Banana и Gemini

Ранее я рассказывал, как приобрети годовую подписку (к сожалению, уже на полгода) на Google Pro за тысячу рублей. А сегодня хочу поделиться вариантом быстрого прототипирования пользовательских интерфейсов с помощью AI сервисов от Google. Кстати, это можно делать и без подписки, но с меньшими лимитами. Первый шаг - найти интерфейс референс - который нам нравится, но мы хотим его изменить под свой проект. Ну или вы можете попробовать сгенерировать интерфейс по промпту, что будет сложнее. Создаем новый проект в Google Flow по ссылке (не забываем "переехать" в другую страну). Выбираем Create Image, загружаем наш референс и пишем что мы хотим сделать в нашем интерфейсе, например - "поменяй цвет интерфейса на розовый, сделай кнопки в нижнем тулбаре минималистичными одноцветными" Далее смотрим что у нас получилось, при необходимости переделать полностью - повторяем действие, а если необходимо изменить нюанс или создать следующий экран приложения то пишем промпт в "Edit Image" А для тех кто хо

Ранее я рассказывал, как приобрети годовую подписку (к сожалению, уже на полгода) на Google Pro за тысячу рублей.

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

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

Создаем новый проект в Google Flow по ссылке (не забываем "переехать" в другую страну).

Выбираем Create Image, загружаем наш референс и пишем что мы хотим сделать в нашем интерфейсе, например - "поменяй цвет интерфейса на розовый, сделай кнопки в нижнем тулбаре минималистичными одноцветными"

Пишем промпт в Google Flow
Пишем промпт в Google Flow

Далее смотрим что у нас получилось, при необходимости переделать полностью - повторяем действие, а если необходимо изменить нюанс или создать следующий экран приложения то пишем промпт в "Edit Image"

Создаем новый экран приложения
Создаем новый экран приложения

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

Генерируем подробное описание интерфейса
Генерируем подробное описание интерфейса

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

Пишем промпт в Antigravity
Пишем промпт в Antigravity

Вот так можно получить работающий прототип приложения за несколько минут.

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