В этой статье
ChatGPT полезен дизайнеру, когда из просьбы заказчика ещё нельзя рисовать экран. «Сделайте форму записи в мастерскую» — начало разговора. Какие данные нужны мастеру? Что посетитель получит после нажатия кнопки? Кто подтвердит время?
С моделью можно разобрать бриф, сравнить направления, подготовить тексты интерфейса, проверить сценарий и собрать задание на макет. Пройдём этот путь на одном экране: от просьбы о записи до формы, которую следующий человек сможет нарисовать и проверить.
Сначала отделите факты от вопросов
Для разбора я беру условный проект веломастерской. Исходный бриф короткий:
Посетитель отправляет заявку на ремонт велосипеда. Мастер позже связывается с ним и согласует время. Телефон и описание проблемы обязательны, имя необязательно. Отправка заявки не означает подтверждённую запись.
Это известные условия. Цены, свободные слоты, наличие деталей и гарантированный срок ответа в брифе не заданы. Добавлять их в интерфейс пока не из чего.
До макета у заказчика стоит уточнить:
- какие виды ремонта принимает мастерская;
- нужен ли мастеру снимок неисправности и должна ли форма принимать фотографии;
- какой срок ответа можно обещать посетителю;
- что происходит, если мастер не дозвонился.
Вопрос про фотографию может изменить состав формы, вопрос про срок — её пояснение. Ответ «обычно быстро» для текста недостаточен: заказчику придётся решить, какое обещание он готов выполнять.
Такой бриф можно разбирать в бесплатном текстовом чате ChatGPT; у инструментов есть отдельные ограничения. Если для регулярной работы с брифами и вариантами текстов вам понадобится именно Plus, из России можно оформить месячный ChatGPT Plus на своём аккаунте с оплатой через СБП через Amber Market — сервис оплаты зарубежных сервисов. Менеджер оформляет подписку на аккаунте покупателя на 30 дней. До активации на аккаунте должен быть Free без активной подписки; продление оформляют после окончания текущей.
Если заказчик пока не определился даже с сообщением кампании и тем, что знает о клиентах, сначала пригодится разбор маркетингового брифа. Для нашего экрана цель уже ясна: получить обращение и канал связи.
Выберите направление по работе посетителя
У этого брифа есть два разумных решения.
Короткая заявка. Посетитель описывает симптомы своими словами и оставляет телефон. Мастеру придётся уточнить детали при разговоре, зато человеку достаточно написать: «Скрипит заднее колесо».
Подробная анкета диагностики. До звонка можно собрать тип, марку и модель велосипеда, предполагаемый неисправный узел и подробности поломки. Мастер получит больше сведений, но часть людей будет выбирать технические ответы наугад.
Для этого примера я выбираю короткую заявку: клиент может не знать причину неисправности. Требовать от него готовый диагноз — лишняя работа с сомнительным результатом. Это аргумент проектного решения; рост конверсии он не доказывает.
Чтобы получить от ChatGPT материал для такого выбора и следующего шага, вставьте исходный бриф и отправьте запрос:
Разбери бриф ниже. Отдели факты от предположений и вопросов к заказчику. Сравни короткую заявку с уточнением мастера и подробную анкету диагностики: что получает мастер, что должен знать посетитель, где возможна ошибка. Затем предложи структуру одного экрана, точные тексты и пять состояний: пустая форма, ошибки обязательных полей, отправка, успех и ошибка отправки. Не добавляй неизвестные условия услуги. Тон — спокойный и понятный. Результат — текстовое задание на макет.
Бриф: [вставьте описание проекта].
Здесь заданы контекст, результат и тон. OpenAI рекомендует формулировать конкретную задачу и уточнять запрос после просмотра ответа. При чтении ответа проверяйте последствия предложений: если модель добавила расчёт стоимости, кто будет его выполнять и на каких данных?
Соберите один согласованный экран
Вот мой вариант текстов для выбранной короткой заявки:
| Элемент | Текст |
|---|---|
| Заголовок | Запись на ремонт велосипеда |
| Пояснение | Опишите неисправность и оставьте телефон. Мастер свяжется с вами и согласует время. |
| Обязательное поле | Что случилось с велосипедом? |
| Подсказка под полем | Например: скрипит заднее колесо, не переключаются передачи |
| Обязательное поле | Телефон |
| Необязательное поле | Имя (необязательно) |
| Кнопка | Отправить заявку |
Главный акцент — на заголовке, затем на пояснении о следующем шаге. В этом варианте я ставлю описание проблемы перед телефоном: сначала человек формулирует обращение, затем оставляет контакт. Это порядок для данного экрана; в другом сценарии его нужно обосновать заново.
Пояснение рядом с заголовком особенно важно: слово «запись» может создать ожидание выбранного времени, поэтому сразу объясняем, что его согласуют позже. Кнопка описывает доступное сейчас действие.
Передавать в макет пять равноправных вариантов кнопки — значит оставлять решение следующему человеку. После обсуждения у экрана должен остаться один согласованный комплект текстов.
Опишите пять состояний формы
Ниже — требования к будущему макету и разработке. Они задают поведение, которое затем нужно проверить в работающей форме.
| Состояние | Что показать и проверить |
|---|---|
| Пустая форма | Все поля пустые, кнопка «Отправить заявку» доступна. Описание проблемы и телефон отмечены как обязательные, имя — как необязательное. |
| Ошибки обязательных полей | После попытки отправить пустую форму показать рядом с полями «Укажите, что случилось с велосипедом» и «Введите номер телефона». Отправка не продолжается, пока обязательные данные не заполнены. Допустимый формат телефона отдельно согласовать с разработчиком. |
| Отправка | На кнопке — «Отправляем…». На время запроса предусмотреть защиту от повторного нажатия. |
| Успех | После подтверждения приёма заявки сервером показать: «Заявка отправлена. Мастер свяжется с вами, чтобы согласовать время». |
| Ошибка отправки | Если приём заявки не подтверждён: «Не удалось отправить заявку. Попробуйте ещё раз». Предусмотреть сохранение введённых значений для повторной попытки. |
Успешное состояние нельзя привязать просто к нажатию кнопки. Вместе с разработчиком определите, какой ответ сервера подтверждает приём заявки и как она попадает к мастеру. Фактическую доставку, сохранение данных при ошибке и защиту от повторной отправки проверяют в реализации.
Для дизайнера эти состояния — отдельные фреймы или варианты компонента с понятными переходами. Одного изображения заполненной формы здесь мало.
Исправьте обещание, не трогая весь экран
Представим ошибку в ответе модели: кнопка «Забронировать время», после отправки — «Вы записаны на завтра». В нашем брифе нет календаря и подтверждения времени. Такие тексты обещают услугу, которой экран не оказывает.
Адресная правка:
Исправь только кнопку «Забронировать время» и сообщение успеха «Вы записаны на завтра». Остальные утверждённые тексты формы сохрани дословно. Посетитель отправляет заявку; мастер позже связывается с ним и согласует время. Верни два исправленных текста без других изменений.
Ожидаемый результат: кнопка «Отправить заявку» и сообщение «Заявка отправлена. Мастер свяжется с вами, чтобы согласовать время». После ответа сверьте эти два элемента и убедитесь, что остальные тексты сохранились.
Передайте задание на макет
В пакет для дизайнера входят выбранное направление, таблица текстов с их иерархией, пять состояний и открытые вопросы заказчику. Вопросы оставьте рядом с тем элементом, на который повлияет ответ: срок связи — у пояснения, фотографии — у состава полей.
Критерии приёмки короткие: обязательные поля понятны; для каждого действия и сбоя есть состояние; тексты нигде не выдают заявку за подтверждённый визит. Требования к поведению формы передайте разработчику вместе с макетом.
ChatGPT может сверить логику по текстовому описанию. Конкретный цветовой контраст и ширину кликабельной области без реального макета он не проверит — их смотрят уже в макете и реализации. Результат этой работы с моделью — проверяемое задание на экран. Автоматически созданного Figma-файла или готовой страницы в нём пока нет.