Написания технических требований с помощью ChatGPT: как заставить нейросети работать за вас не привлекая внимания руководства.

Как я уже писала, я обожаю нейросети и искренне жду они они полностью заменят всех нас на наших рабочих местах а на людях останется только уход за животными и генерация злых постов в твиттере (тут я считаю нейросети заменить нас не смогут).

Поэтому решила для себя провести небольшой эксперимент, как нейросеть справится с такой работой как написание функциональных требований для разработчиков. Я знаю, что многие PM уже используют тот же GPT для помощи при создании документации, но мне было интересно насколько нейросетка хорошо работает с прототипами и как сильно ей надо помогать в промтах.

Для эксперимента я взяла свой старый прототип для продукта “Поиск помогаторов для людей в миграции”. Грубо говоря такой профи.ру только для экспатов. Интерфейс сайта я делала самостоятельно, поэтому он получился достаточно кривой и не проработанный - отчего даже интереснее как его поймет наш нейросетевой помощник.

Берем главную страницу. Пишем самый ленивый и поверхностный промт.

“Ты бизнес аналитик. Твоя задача описать технические требования для разработчика основываясь на скриншоте главной страницы сайта”.

Как видите никакой дополнительный информации. Вот какой ответ выдала сеть:

1. Общие требования

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

2. Навигация и элементы интерфейса

Верхнее меню:
Логотип сайта ("GARANT") расположен слева.Справа от логотипа находится строка поиска.В правом углу расположен иконка пользователя (предположительно для входа/регистрации).Иконка гамбургера (слева от логотипа) для вызова бокового меню или других опций навигации.
Основной блок:
Заголовок: "GARANT" с подзаголовком "Ваш надежный помощник".Текст под заголовком: "Ищите, находите и выбирайте поставщика услуг в рекордно короткие сроки. Читайте проверенные отзывы от пользователей, таких же, как и вы."
Поле поиска:
Расположено по центру страницы, содержит следующие элементы:Поле для ввода запроса (placeholder: "Поиск").Два выпадающих списка:Первый выпадающий список: Выбор города.Второй выпадающий список: Выбор вида услуги.
Секция "Лучшие услуги":
Содержит список карточек услуг (по 4 карточки в строку).Карточка услуги содержит:Название услуги.Оценку в виде звезд.Кнопку "Подробнее" (должна вести на страницу с подробным описанием услуги).
Баннер справа от карточек услуг:
Изображение с текстом: "Только надежные помощники. С нами вы застрахованы от мошенников."Баннер должен быть кликабельным и вести на страницу с дополнительной информацией.
Кнопка "Ещё":
Расположена под секцией с карточками услуг.При нажатии подгружает дополнительные карточки услуг (может быть реализовано с помощью AJAX).

3. Функциональные требования

Поиск:
Реализовать интеллектуальный поиск с автодополнением, который будет предлагать пользователю популярные запросы.Фильтрация результатов поиска по городу и типу услуги.
Карточки услуг:
Подгрузка данных по карточкам должна происходить асинхронно.При нажатии на "Подробнее" открывается страница услуги с полным описанием.
Баннер:
Должен быть адаптивным и корректно отображаться на всех устройствах.Клик по баннеру ведет на другую страницу.
Кнопка "Ещё":
Загружает дополнительный контент без перезагрузки страницы.

Чтобы не загружать текстом добавлю что было еще 5 доп.пунктов: Адоптивность, Безопасность, Интеграции, Производительность, Тестирование. Достаточно стандартные требования прикрутить аналитику, позаботиться о безопасности, сделать адаптивным под разные устройства. Грубо говоря: пусть работает хорошо а плохо не работает. Полезная вещь для тех, кто описывает требования впервые и нужно понять на что вообще стоит обратить внимание, но не более.

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

Для достоверности и более глубокой проработки тех задания я попросила описать user story пользователей по этой странице (не давая при этом никакой дополнительной информации). Вот что он выдал:

1. Поиск услуг

Как пользователь,
Я хочу иметь возможность найти нужную мне услугу,
Чтобы быстро найти поставщика, который сможет выполнить необходимую работу.
Критерии приемки:
Пользователь вводит запрос в поле поиска и выбирает город и тип услуги.Система отображает результаты, соответствующие запросу, с возможностью фильтрации по рейтингу или другим критериям.

2. Просмотр подробной информации о услуге

Как пользователь,
Я хочу иметь возможность просмотреть детальную информацию о выбранной услуге,
Чтобы принять обоснованное решение о выборе поставщика.
Критерии приемки:
Пользователь нажимает на кнопку "Подробнее" на карточке услуги.Система отображает страницу с подробным описанием услуги, включая отзывы других пользователей и контактные данные поставщика.

И так далее далее. Всего он прописал их 7.

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

На этот раз было важно, чтобы наш друг определил тип пользователей, которым видна эта страница и описал действия, которые может совершать пользователь на данной странице. Вот ответ:

1. Тип пользователя

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

2. Структура страницы

Шапка страницы
Фото профиля: отображает аватар подрядчика (заглушка, если фото отсутствует).Название подрядчика: имя или название компании подрядчика.Логотип "GARANT": указывает на принадлежность платформе.
Секция "Ваши услуги"
Карточки услуг:Подрядчик может просматривать услуги, которые он предлагает, и добавлять новые.Кнопка "Добавить услугу": открывает форму для создания новой услуги.Кнопка "Посмотреть описание": позволяет просмотреть и редактировать детали существующей услуги.
Секция "История сделок"
Таблица сделок:Столбцы:Имя Заказчика: отображает имена заказчиков, с которыми были проведены сделки.Услуга: название услуги, по которой была заключена сделка.Статус: текущий статус сделки (например, "Active", "Completed").Actions: действия, которые подрядчик может выполнить для каждой сделки.Доступные действия (выпадающий список):Открыть диалог: открывает чат с заказчиком для обсуждения деталей.Подробнее: показывает более детальную информацию о сделке, включая даты, суммы и другие важные детали.Завершить сделку: позволяет отметить сделку как завершенную, что фиксирует ее статус.

Аналогичная задача была дана для это страницы. Спойлер - нейросетка справилась. Я расчитывала что она может споткнуться на Гарельтах, но нет, было определено что это секция галерея с фотографиями услуг.

В данный момент я вижу что это действительно эффективный инструмент для помощи в работе с документацией. Ключевое - для помощи. Очевидно нужно самостоятельно понимать все алгоритмы работы с продуктом и понимать, как описать их. И отдавать себе отчет что более сложные алгоритмы наш дорогой друг так лихо не опишет. Но при этом точно избавит от “страха белого листа” и значительно ускорит процесс - редактировать и корректировать всегда проще чем писать с нуля.

Конечно куда хуже дела обстоят с UI. Да, визуальные нейросети агрессивно наступают на пятки иллюстраторам, но при этом нарисовать нормальный элементы интерфейса всё еще не в состоянии. Для примера - вот что создал Midjorney когда я попросила нарисовать его кнопку. И это я еще референсы ему показывала!!

Так что вывод простой: UX дизайнеры могут спать спокойно остальным соболезную.

Написания технических требований с помощью ChatGPT: как заставить нейросети работать за вас не привлекая внимания руководства.

Этап 1.

Этап 2.

Этап 3.