Replit Agent: как продакту собрать прототип без программирования
Создаём в Replit Agent прототип доски обратной связи: готовое задание, учебные данные, проверка фильтров и сценарий демонстрации команде.
Replit Agent помогает превратить описание в приложение, с которым можно взаимодействовать. Для продакта удобный первый кейс — доска обратной связи: посмотреть обращения, отфильтровать их и обсудить с командой следующий шаг. Создадим учебный прототип без входа пользователей, платежей и реальных клиентских данных.
Мой подход. Я бы начинал с одного экрана и одного вопроса к будущему пользователю. Чем больше функций агент добавит до первой демонстрации, тем сложнее понять, что именно помогло человеку решить задачу.
1. Ограничь задачу прототипа
Наш вопрос: сможет ли продакт быстро найти обращения про экспорт и понять, какие ещё не рассмотрены? Для проверки достаточно списка, фильтров по теме и статусу и карточки с полным текстом. Автоматическую приоритизацию пока не добавляем: она потребовала бы отдельного обсуждения критериев.
Replit описывает Agent как инструмент создания приложений по запросам на обычном языке. В Plan mode можно сначала обсудить план, а затем перейти к сборке. Начни новый проект для веб-приложения, открой чат агента и выбери Plan. Официальное руководство Replit.
Перед запуском посмотри режим агента и расход в аккаунте: доступные возможности и оплата зависят от текущего плана. В этом упражнении не нужны внешние подключения. Если агент предлагает базу, авторизацию или платный сервис, попроси объяснить, зачем это необходимо именно для демонстрации.
2. Передай задание агенту
Скопируй готовый запрос. Все обращения вымышленные:
Сначала составь план прототипа доски обратной связи для продакта.
Один экран на русском: список обращений, фильтры по теме и статусу,
кнопка сброса фильтров, количество найденных обращений.
При открытии карточки показывай полный текст и номер обращения.
Не добавляй логин, платежи, внешние API и автоматический рейтинг.
Данные учебные, только для демонстрации. Ничего не отправлять наружу.
Обращения:
1. Экспорт. Новое. Хочу скачать список заявок в CSV.
2. Навигация. Рассмотрено. Не могу найти архив завершённых задач.
3. Экспорт. Рассмотрено. В выгрузке не хватает даты создания.
4. Уведомления. Новое. Получаю слишком много писем.
5. Навигация. Новое. Нужен поиск по названию проекта.
Покажи план и критерии проверки, прежде чем начинать сборку.Прочитай план как постановку задачи коллеге. Если появились графики, ИИ-чат и система ролей, убери их из первой версии. Когда план соответствует заданию, разреши сборку и открой предпросмотр приложения.
Не оценивай результат только по скриншоту. Красивые карточки ещё не показывают, что фильтры действительно связаны с данными. Сначала пройди сценарии ниже, затем обсуждай цвета и отступы.
3. Проверь поведение
| Действие | Ожидаемый результат |
|---|---|
| Открыть экран без фильтров | Пять обращений |
| Выбрать тему «Экспорт» | Обращения 1 и 3 |
| Добавить статус «Новое» | Только обращение 1 |
| Выбрать «Уведомления» и «Рассмотрено» | Понятное сообщение об отсутствии результатов |
| Сбросить фильтры | Снова пять обращений |
| Открыть обращение 3 | Текст о дате создания, без подмены другой карточкой |
Это ожидаемые результаты на заданных данных, а не отчёт о запуске Replit в рамках статьи. Выполни проверки самостоятельно. Если что-то не совпадает, отправь одно конкретное замечание:
При фильтрах «Экспорт» и «Новое» вижу обращения 1 и 3.
Ожидаю только 1: у обращения 3 статус «Рассмотрено».
Исправь совместную работу фильтров, остальное не меняй.
После правки перечисли, что проверил, а что осталось непроверенным.Повтори весь короткий набор после исправления. Затем проверь экран на узком окне: длинный текст не должен перекрывать фильтры. Сообщение агента об успешной проверке полезно, но собственный проход по сценарию остаётся частью приёмки.
4. Проведи демонстрацию
Покажи прототип коллеге через демонстрацию экрана и дай задание: «Найди новое обращение про экспорт». Не подсказывай, какой фильтр нажать. Отметь, где человек остановился и как понял названия статусов. Затем спроси, какой информации не хватило для следующего решения.
Для самостоятельного доступа по ссылке сначала отдельно проверь параметры публикации и видимость проекта. Предпросмотр и опубликованное приложение — разные этапы. Не заменяй учебные записи реальными обращениями до решения вопросов доступа и хранения данных.
После встречи зафиксируй три пункта: что удалось проверить, где возникло затруднение и какую одну правку стоит сделать следующей. Если пока трудно сформулировать задачу агенту, начни с основ вайбкодинга. Для содержательной группировки самих обращений пригодится разбор отзывов с ИИ.
Преврати ИИ-инструменты в рабочую систему
«Быстрый старт в AI»: практические воркшопы по AI-инструментам, прототипам и автоматизации. Собираем результат, который можно применить в работе.
21 практических воркшопов · записи · вопросы автору в чате
Посмотреть программу курса ↗