Технические знания ДЛЯ пРОДАКТА

AI знания ДЛЯ пРОДАКТА

Вводный гайд по AI-прототипированию для продактов и фаундеров

Хайп-хайпом, но будущее и правда уже здесь: продакты могут создавать кликабельные прототипы своих идей без разработчиков. А с помощью AI-инструментов (таких, как Replit), можно даже запустить полноценное приложение для первых пользователей. Давайте разбираться.

Если вы — продакт
Как и 90% из нас, вы - "обычный "продакт (или AI-продакт), работающий в компании и отвечающий за какой-то UX (например, страницу поиска, всю воронку онбординга, все iOS приложение и т. д.) и в рамках своей работы вы придумываете новые фичи. Вы объясняете их в текстовых документах (например, PRD-шках), презентациях, и используете либо "слова и пальцы" (так себе), либо самодельные диаграммы (лучше), либо Figma (еще лучше, но чаще всего требует дизайнера).

Теперь представьте, что вы продакт в музыкальном сервисе Spotify и у вас идея - добавить фичу "Концерты этой группы рядом". Фича понятная и явно бьет в боль пользователей: вместо подписки на 100500 непонятных рассылок, ваше приложение музыки сразу и говорит: "Твой любимый исполнитель выступает в соседнем городе 15 мая". Красота!

Одно дело объяснять это все словами, а другое дело... показать остальным, как это будет выглядеть. К счастью, с современными инструментами AI-кодинга это займет 10 минут и потребует ровно 0 строчек кода от продакта. Магия? Нет, наука.

Сначала склонируем UX Spotify. Для этого:
  • Сделайте скрин любого экрана Spotify (для теста можно использовать мой ниже, или сделать свой, или нагуглить "spotify UI image")
  • Зарегистрируйтесь в Replit (бесплатный тариф подойдет для первых промптов)
  • В пером же окошке приложи скриншот и скажи системе следующее:
Если бесплатная версия Replit отказывается принимать скриншоты, то просто замени первую строчку на "Сделай точную UI-копию Spotify"). С известными продуктами такое сработает!
  • Сделай точную копию UI с этого скриншота.
  • Полностью копируй цвета, шрифты, расположение элементов и надписи.
  • Не создавать никакого бэкенда, сделай только UI.
На картинке выше - склонированный результат. Неплохо для 5 минут, да?

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

  • Добавь небольшую зеленую кнопку "Concerts nearby" на 2 карточки в ряду "Recently played".
  • При нажатии должно открыться всплывающее окно с тремя полями: дата, город, местоположение (заполни их рандомными данными) и кнопкой "Book tickets" (которая никуда не ведет).
  • Не делай никакой бэкенд, только UI.
На картинке выше - фича в действии, а вот тут ее можно "потрогать". Конечно, прототип можно допиливать, но он точно позволит мне сказать директору / команде / коллегам: «Это - главная нашего плеера, а это фича, которую я хочу добавить. Кликните вот тут, что думаете?».

Сразу предупреждаю, что AI может натупить и сделать красную кнопку, вместо брендового зеленого, или же прозрачный поп-ап, который не будет виден на фоне. Нужно просто знать, чего ожидать и как это пофиксить простыми промтами. Кстати, все, как с настоящей командой, только вместо ожидания спринта (пока дизайнер освободится), ожидание AI в течение пары минут (пока он пишет за вас код).
Если вы — фаундер или думаете про свой проект
Оставшиеся 10% продактов что-то уже пилят: они либо работают над сайд-проектом, либо уже вовсю развивают MVP для своего стартапа. Раньше для того, чтобы сделать первые шаги, вам нужен был технический ко-фаундер или разработчик, но теперь это вполне возможно сделать самостоятельно. И это - не хайп, это - наука!

Сначала вы можете создать «пустую оболочку» UI, объяснив AI, чего вы хотите, затем добавить бэкенд и базы данных, внешние интеграции (статья по API) и так далее. Потом вы нажмете «В продакшн!», и вуаля — ваш MVP открыт всему инету и готов обслуживать по крайней мере первые 100–1000 пользователей.

После этого вам нужно нанять разработчика, чтобы он почистил или переписал AI-код, и это нормально; сначала получите эти 1000 пользователей, а потом беспокойтесь о будущем.
Пример полноценного приложения
Смотрите на пример ниже не как конкретное приложение, которое вы должны создать, и даже не как пример того, что вы можете создать, а как подход, который позволяет вам сделать что-то, что вы задумали. AI помогает реализовывать идеи, главное, чтобы эти идеи были :)

Недавно я в очередной раз поймал себя на мысли: «Так раздражает отслеживать групповые расходы, особенно гемор, когда они неравные (например, человек A заплатил не за всех, а только за B и C). Разве не было бы здорово, если бы у меня было свое собственное приложение типа SplitWise для управления кто, кому и сколько в итоге должен?». А дальше произошло следующее:

  • Я взял лист бумаги и за 5 минут набросал UI, который я хотел, ручкой (не Figma или Canva, просто ручкой). Он был кривой, но его было достаточно, чтобы объяснить AI, какую композицию я хочу.
  • Через 3 минуты ожидания у меня уже был нормальный UI и еще через 10 минут я сделал его красивым
  • Через 30 минут я добавил базу данных, чтобы приложение могло хранить транзакции
  • Еще 20 ушло на алгоритм функциональности подсчета кто кому сколько должен (я объяснил AI, что я хотел увидеть, тестировал и ловил баги)
  • На следующий день я проснулся с идеей добавить анализ OpenAI распределения расходов по категориям (например, еда, транспорт и т. д.). 20 минут, и он на странице.
  • Затем я адоптировал UI под мобильные экраны и добавил свайп для удаления записей, ПРОСТО ПОТОМУ ЧТО ЭТО КРУТО :)
  • Затем я задеплоил его, и вы можете увидеть результат здесь. В нем нет аутентификации, поэтому вам не нужно входить в систему, и вы можете сразу же играть с ним, но если я добавлю регистрацию, то внезапно его смогут использовать тысячи пользователей, потому что у каждого будут свои списки расходов

Завтра у меня могут появиться новые идеи. Возможно, мне следует ввести неравные разделения (например, Вася съел в два раза больше, поэтому он заплатит в два раза больше за ужин)? Или как насчет использования OpenAI для анализа изображений чеков, чтобы вместо того, чтобы вводить поля вручную, я мог загрузить фотку, и название, цена и дата просто будут с нее считаны? А что бы добавили вы?
Что это все значит?
Расстояние между идеей и ее реализацией никогда не было таким коротким. Если вы хотите повторить то же, что и я выше, вам не обязательно быть технарем или бывшим разработчиком.

Но я также не хочу приукрашивать — вы не можете просто прочитать одну статью и стать AI-билдером: это как выучить одно предложение на иностранном языке, не понимая его базовой структуры — пользы мало. У вас вполне получится сделать 1 или 2 шага, но на третьем приложение начнет усложняться и AI потонет в своих собственных багах.

Если вы хотите научится структурному подходу, то приходите на симулятор "Full-stack AI-прототипирования для продактов и фаудеров". Там мы строим 3 кейса, добавляем 10+ фичей и делаем это все, начиная с самых основ, продолжая введением в технологии и заканчивая вполне себе про-промптами и сложными интеграциями.

Надеюсь, было полезно и давайте строить 🚀🤖