Создание приложений с помощью ИИ для продактов и фаундеров

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

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

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

Сначала склонируем UX Spotify. Для этого:

• Сделайте скрин любого экрана Spotify (для теста можно использовать мой ниже, или сделать свой, или нагуглить «spotify UI image»)
• Зарегистрируйтесь в Replit, ниже объясняется, почему именно в нем. Бесплатный тариф подойдет для первых промптов.
• В пером же окошке приложи скриншот и скажи системе следующее:

Если бесплатная версия Replit отказывается принимать скриншоты, то просто замени первую строчку на «Сделай точную UI-копию Spotify». С известными продуктами такое сработает!

На картинке выше - склонированный результат. Неплохо для 5 минут, да?

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

На картинке выше — фича в действии, а вот тут ее можно «потрогать». Конечно, прототип можно допиливать, но он точно позволит мне сказать директору / команде / коллегам: «Это — главная нашего плеера, а это фича, которую я хочу добавить. Кликните вот тут, что думаете?».

Сразу предупреждаю, что AI может натупить и сделать красную кнопку, вместо брендового зеленого, или же прозрачный поп-ап, который не будет виден на фоне. Нужно просто знать, чего ожидать и как это пофиксить простыми промтами. Кстати, все, как с настоящей командой, только вместо ожидания спринта (пока дизайнер освободится), ожидание AI в течение пары минут (пока он пишет за вас код).

Вы наверное уже слышали разные названия: Loveable, Bolt, v0, Cursor... Почему же я выбал для обучения именно Replit?

Длинный ответ - в табличке-сравнении ниже, а основная причина в том, что в отличие от только лишь имитации продукта (только интерфейс, фронтенд), Replit может AI-генерировать полноценное full-stack приложение с "мозгом" на сервисе и даже "запоминать" с помощью настоящих баз данных. К другим инструментам это можно прикрутить, но зачем нам мучаться, если можно использовать все прямо из коробки? Инструменты активно развиваются и, возможно, скоро вся табличка "позеленеет", а может некоторые из них просто исчезнут. Будем следить за прогрессом!

По поводу прайсинга: полноценное приложение можно построить, потратив 10$-30$. В любом случае я советую инвестировать в такие тесты и купить подписку на пару месяцев - это стоит того, да и ценник будет только уменьшаться. AI-прототипирование здесь надолго и они с большой вероятностью повлияют на процесс разработки и создания продукта. Так что, если не можешь остановить вечеринку - возглавь вечеринку!

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

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

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

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

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

• Я взял лист бумаги и за 5 минут набросал UI, который я хотел, ручкой (не Figma или Canva, просто ручкой). Он был кривой, но его было достаточно, чтобы объяснить нейросети, какую композицию я хочу.

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

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

Расстояние между идеей и ее реализацией никогда не было таким коротким - спасибо нейросетям, которые программируют и даже помогают создавать полноценные приложения.

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

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

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