Нейросеть для дизайна: эскиз экрана в Gemini
Как получить концепцию интерфейса по продуктовому брифу, сравнить варианты и передать дизайнеру проверяемое решение.
Нейросеть для дизайна полезна, когда нужно обсудить компоновку экрана до разработки. В Gemini можно попросить изображение интерфейса и затем уточнять его. Получится визуальная концепция: кнопки на картинке не работают, а удачный внешний вид ещё не доказывает удобство сценария.
Здесь подготовим эскиз экрана заявок для руководителя поддержки. Цель — увидеть просроченные обращения и назначить ответственного, а не собрать красивый дашборд со случайными показателями.
1. Опиши решение, которое должен поддерживать экран
Учебный бриф: в очереди 12 заявок, из них 3 просрочены и 2 пока без ответственного. Эти множества могут пересекаться: не складывай их в 5 разных проблемных заявок без исходных данных. Руководитель открывает экран утром, выбирает обращение и назначает владельца.
До генерации запиши четыре ограничения: основной экран — настольный; главный объект — список заявок; основное действие — назначение ответственного; вторичные графики не нужны. Прикладывай только собственный набросок или материал, который разрешено передавать в сервис. Для упражнения достаточно текстового брифа.
2. Открой генерацию изображений в Gemini
В веб-версии Gemini войди в аккаунт и найди раздел Images / Изображения. Названия и доступность могут различаться в зависимости от аккаунта и языка. Официальная справка Google описывает создание изображений, их изменение в чате и скачивание. Если функция недоступна, не оформляй подписку только ради этого упражнения: сначала проверь ограничения своего аккаунта.
Вставь готовый запрос:
Создай изображение низкодетализированного интерфейса веб-сервиса
для руководителя поддержки. Это учебный эскиз, не готовый продукт.
Задача: найти просроченную заявку и назначить ответственного.
На экране: заголовок «Заявки», фильтры «Все», «Просрочены»,
«Без ответственного», таблица и панель выбранной заявки справа.
Сводка: всего 12, просрочено 3, без ответственного 2.
Не складывай эти группы: они могут пересекаться.
Колонки: номер, тема, срок, ответственный.
Главная кнопка в панели: «Назначить ответственного».
Используй серые блоки, читаемые подписи и один акцентный цвет.
Не добавляй графики, выручку, логотипы и вымышленные обещания.Низкая детализация означает, что мы обсуждаем расположение и смысл блоков. Она уменьшает соблазн выбирать вариант только из-за цвета и декоративных эффектов.
3. Сделай вторую версию с одним отличием
Сначала выпиши, что в первом изображении соответствует брифу. Затем попроси изменить только способ размещения деталей:
Сохрани данные, подписи, фильтры и главное действие.
Измени только компоновку: убери правую панель,
а сведения о выбранной заявке покажи под её строкой.
Не добавляй новые функции и не меняй числа.Gemini допускает редактирование созданного изображения через продолжение диалога. При этом сохранность остальных деталей нужно проверить самому: в новой версии могут измениться подписи или количество строк. Если произошло лишнее изменение, перечисли его явно и попроси восстановить исходное условие.
Сравни два варианта по одной задаче: где руководитель заметит просрочку, как выберет заявку и где назначит владельца. Не проси нейросеть объявить один вариант «конверсионнее» — без исследования это необоснованный вывод.
4. Отдели визуальную проверку от проверки поведения
| Вопрос | Как проверить |
|---|---|
| Видно ли главное действие? | Найти кнопку без чтения всего экрана |
| Сохранились ли числа и подписи? | Сопоставить картинку с брифом строка за строкой |
| Что при нуле заявок? | Описать пустое состояние отдельно |
| Что при ошибке назначения? | Указать сообщение и возможность повторить |
| Доступно ли управление с клавиатуры? | Проверять в работающем прототипе, не на изображении |
Картинка не проверяет фокус, экранный диктор, загрузку данных или реальные клики. Даже хороший текст на изображении стоит переписать в редактируемый документ: так дизайнер и разработчик не будут угадывать буквы по пикселям.
Моя рекомендация: показать коллегам две спокойные компоновки с одинаковым содержанием. Если варианты различаются одновременно цветом, данными и функциями, трудно понять, что именно понравилось.
5. Передай дизайнеру решение и открытые вопросы
Скачай выбранную концепцию и приложи короткую записку: задача пользователя, обязательные элементы, предпочтённая компоновка и причина выбора. Отдельно перечисли неопределённости — массовое назначение, права доступа, пустое состояние, ошибка сохранения. Не называй этот пакет готовым дизайн-макетом с компонентами.
Можно использовать такой формат передачи:
Выбрали боковую панель, чтобы сохранять список при просмотре заявки.
Это гипотеза для проверки, а не результат пользовательского теста.
В прототипе нужно проверить выбор заявки и назначение владельца.
Числа и данные учебные. Перед разработкой нужны состояния ошибки,
пустого списка и недостаточных прав.Для перехода к работающему интерфейсу подготовь бриф сайта или приложения. Продуктовую работу с ИИ разбираем на курсе AI Product Club. В этой статье показан авторский процесс и оригинальная схема проверки; генерация в Gemini и пользовательский тест не проводились.
Преврати ИИ-инструменты в рабочую систему
«Быстрый старт в AI»: практические воркшопы по AI-инструментам, прототипам и автоматизации. Собираем результат, который можно применить в работе.
21 практических воркшопов · записи · вопросы автору в чате
Посмотреть программу курса ↗