искра/бот
Инструкция Промпт Все статьи Войти Регистрация

Как создать интерактивный прототип фичи с ИИ

От задачи и состояний до локального HTML, который можно открыть и проверить. В примере покупатель меняет адрес доставки до передачи заказа курьеру.

Иллюстрация интерфейса изменения адреса и заблокированного состояния

Учебный сценарий. Заказ, адреса и ожидаемые результаты вымышлены. Проверки реальных клиентов здесь нет.

Что получится

Шесть шагов от брифа до проверки

  1. Сформулируйте задачу и границы. Опишите, кто и когда меняет адрес. Укажите запрет после передачи курьеру. Отметьте неизвестные тарифы и правила доставки как вопросы, а не как придуманные условия.
  2. Разложите путь на состояния. Запишите исходный экран, форму с отдельным полем «Дом», ошибки, отмену, успех и запрет. Отдельно проверьте смену статуса во время ввода.
  3. Получите автономный HTML. Передайте бриф и полный промпт в Искру. Попросите один HTML-файл с локальными данными, управлением с клавиатуры и без сетевых запросов.
  4. Проверьте работающий файл. Откройте HTML в браузере. Пройдите все ветки, посмотрите ширины 320 и 390 px, фокус клавиатуры и тексты ошибок. Исправьте то, что не совпало с брифом.
  5. Проведите пользовательскую проверку. Дайте человеку задачи без подсказки кнопок. Записывайте наблюдаемое поведение и точные цитаты в пустые поля протокола. Редакционные ожидания не считайте отзывами участников.
  6. Передайте решения в разработку. Зафиксируйте спорные правила, результаты проверки и известные ограничения. Отдельно согласуйте реальные тарифы, поддержку и интеграцию с заказом.

Учебный пример: изменить адрес доставки

Вымышленный заказ Z-104 пока не передан курьеру. Покупателю нужно изменить адрес с «Москва, ул. Лесная, 10, кв. 5» на «Москва, ул. Тверская, 7». В форме город и улица, дом и необязательная квартира вводятся отдельно. Число в названии улицы или квартиры не заменяет номер дома. После передачи курьеру изменение запрещено. Тарификация, зона доставки и помощь после передачи неизвестны, поэтому прототип их не моделирует.

Скачать бриф TXT · Скачать работающий HTML · Скачать протокол DOCX · Скачать протокол TXT · Скачать промпт TXT

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

Состояния, которые должны работать

СостояниеДействиеОжидаемый результат
До передачиГород и улица: «Москва, ул. Тверская»; дом: «7»; квартира пустая.Адрес обновлён в текущей вкладке, виден успех.
Пустой город и улицаОчистить поле «Город и улица».Ошибка у этого поля, прежний адрес сохранён.
Цифра в названии улицыВвести «Москва, улица 8 Марта», очистить дом, оставить квартиру 5.Ошибка «Укажите номер дома» у поля «Дом». Прежний адрес сохранён.
Дом указан отдельноОставить «Москва, улица 8 Марта», ввести дом 7, квартиру очистить.Адрес сохраняется как «Москва, улица 8 Марта, 7».
Цифра только в квартиреУказать «Москва, ул. Лесная», очистить дом, оставить квартиру 5.Ошибка у поля «Дом». Квартира 5 не считается номером дома.
ОтменаОткрыть форму и нажать «Отмена».Прежний адрес сохранён.
После передачиПереключить статус.Редактирование скрыто, показан запрет.
Статус сменился при вводеОткрыть форму, затем переключить статус.Форма закрыта, ввод не сохранён.
СбросНажать «Сбросить пример».Исходный адрес и статус восстановлены.

Как проводить проверку с человеком

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

Полный промпт для Искры

Скопируйте запрос и приложите учебный бриф. Для собственной фичи замените бриф на подтверждённые правила и обезличенные примеры. Перед созданием HTML убедитесь, что в вашем профиле доступен инструмент работы с файлами или кодом; текстовый ответ сам по себе не создаёт файл.

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

Затем создай один автономный файл feature-prototype.html с HTML, CSS и JavaScript внутри. Используй только вымышленные данные из брифа, без авторизации, API, аналитики, внешних библиотек, localStorage и настоящего сохранения. Дай переключатель статуса заказа для проверки, отдельные поля «Город и улица», «Дом» и необязательную «Квартиру», доступные подписи и ошибки рядом с нужным полем, клавиатурную навигацию и явное сообщение об успешном учебном изменении. Если среда умеет создавать файлы, выдай настоящий скачиваемый HTML. Если не умеет, верни полный исходный код и честно перечисли несозданные файлы. Не заявляй о визуальной проверке, если не открывал страницу.

Составь отдельный протокол пользовательской проверки: задачи без подсказки решения, начальное состояние, наблюдаемый результат, вопросы после попытки и пустые поля для фактических наблюдений. Отдели редакционные ожидаемые результаты от ответов реальных участников. Если доступен инструмент создания DOCX, создай test-scenarios.docx; иначе дай текст протокола и отметь, что DOCX не создан.

Перед завершением проверь, что «Москва, улица 8 Марта» с пустым домом и квартирой 5 не сохраняется, а та же улица с домом 7 сохраняется. Не ищи номер дома как любую цифру в общей строке адреса. Пройди все состояния, проверь работу на ширинах 320 и 390 px, с клавиатуры, скачивание файла и отсутствие сетевых запросов. Для каждого пункта сообщи, что действительно проверено, что не проверено и какие решения остаются за владельцем продукта. Рабочий HTML не подключай к продукту и не публикуй как production-приложение.

Как принять результат

Частые вопросы

Можно ли сразу подключить этот HTML к магазину?

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

Что делать, если заказ уже передан курьеру?

В прототипе изменение блокируется. Дальнейший реальный процесс поддержки и тарификацию нужно уточнить у владельца продукта.

Откуда взять ответы для пользовательского теста?

Проведите сессии и запишите наблюдения и цитаты. Таблица в статье содержит только задания и редакционные ожидаемые результаты.

Связанные материалы

Начните с одного сценария

Откройте Искру, приложите бриф и вставьте промпт. Проверьте созданный файл в браузере до того, как показывать его участникам теста.

Открыть Искру →