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

“Build a working prototype of a feature that helps remote teams feel more connected. You have 45 minutes.”

Я работаю продакт менеджером в банках, темой вайбкодинга занялся из шкурного интереса. Можете почитать про кейс из Google на Medium. Мысль в том, что для тех же продакт менеджеров умение работать с AI-коробкой для решения продуктовых задач скоро станет таким же обычным требованием к вакансии, как знание SQL-запросов для аналитики или базовое понимание, как работать в Figma.

На рынке уже много софта для самостоятельной разработки продукта, у меня на слуху следующие: Replit, Cursor, Lovable. Чтобы не попасть под бан (так случилось с первой версией материала; редакторы посчитали, что я рекламирую продукт), в этой статье я не буду писать, каким конкретно софтом я пользовался. Но сразу отмечу, что я искал разработку под ключ. До этого уже был опыт относительно успешной "разработки" телеграм-чат бота с ChatGPT4, поэтому +- я представлял, на какие костыли я могу наткнуться.

Как формулировать требования

Обычно софт для вайбкодинга стоит $20-30 в месяц, но фишка в том, что вы очень быстро потратите внутренние токены и вам придется доплачивать за разработку сверх подписки. Обычное такое случается, когда вы начинаете работать с программой в "творческом" режиме: сделай мне это, а теперь сделай мне то. С таким подходом далеко пойти не получится, и придется много платить.

Чтобы софт начал отрабатывать свои деньги, нужно в буквальном смысле проработать с ним бизнес требования: подавать ему на вход ТЗ и архитектуру приложения. Очень похоже на то, как во времена системной аналитики я продумывал требования для разработчиков. В случае с AI рекомендую связку ChatGPT - коробку от OpenAI нужно просить:

Расписать требования и постановку для back-end и в целом серверной части. Чем больше вы засунете деталей в GPT про ваши хотелки (в идеале - User Story Mapping, USM), тем лучше GPT справится с задачей проработки архитектуры приложения и, в частности, базы данных. Это сэкономит вам минимум несколько десятков $ в будущем.
Расписать требования по accesability и нефункциональные требования.
Расписать требования к дизайну, сгенерировать макеты (картинки) и на базе этих артефактов поставить технические требования для front-end. Если вайбкодирг-программы, которые вроде как хорошо работают с макетами в Figma, но я не пробовал.

Все результаты можно засовывать в софт в режиме планирования, чтобы AI сформировал свой план работ и, что важно, сформулировал вопросы по реализации. Зачастую вопросы от AI бывают очень правильные, глобально влияющие на дизайн или архитектуру, поэтому не стоит безумно жать условную кнопку "Исполняй".

Перед тем, как начинать старт разработки, попросите AI сформулировать вопросы к постановке

Получили вопросы от платформы - ответили сами или переслали их в ChatGPT - переслали ответ в платформу для дальнейшего анализа. Такими итерациями вы постепенно выйдете на реализацию.

Вместе с тем из Youtube я стащил противоположный совет: сначала сгенерировать с AI UI/UX, который работает на данных-заглушках: нет никакого сервера, нет никаких реальных данных. Только экранные формы и ui-элемененты. Затем, когда целевой внешний вид будет готов, уже просить AI сгененировать архитектуру под него.

В целом, это тоже похоже на проработку продукта в реальной жизни: сначала вы работаете с дизайном над макетами, а потом приходите к разработке и шокируете ее своими хотелками. Однако в случае с вайбкодингом мне больше нравится подход из пункта 2, базирующийся на USM. В таком случае процесс разработки легче разбить на итерации и контролировать сроки/цену разработки.

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

Если видите пользу в этой статье, подписывайтесь на канал автора в ТГ — «Сделай удобно», чтобы не пропустить другие материалы по теме.

Сколько это стоит

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

Оформляя подписку за $25, будьте готовы, что за эти деньги вы внедрите в апп +- 3 фичи, которые будут неплохо работать.

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

При этом будьте готовы к галлюцинациям и багам: может пройти 4-5 итераций разработки, прежде чем вы получите результат. А за каждую итерацию, напомню, вы платите.

AI-платформы бывают скупы на дизайн, поэтому со временем точно придется подключить дизайнера

Например, я убил ~10$ просто на то, чтобы правильно работала кнопка Sign Out, которая должна убивать текущую сессию пользователя и обновлять экран.

На самом деле, это относительно неплохой результат работы для помощника, который доступен вам 24/7. Но важно сразу понять, что такой вайбкодинг - удовольствие недешевое.

Более-менее рабочий апп, который не просто прототип, а продукт с серверной частью, готовый к выкладке в стор и первой пачке юзеров, обойдется от 300$.

В целом такого рода платформы для разработки под ключ - очень не user friendly для нетехнических специалистов. Вам придется работать с консолью разработчика в вашем браузере, чтобы читать логи (Console и Network вкладки) и разбираться в ошибках.

В Console и Network придется сидеть постоянно

Например:

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

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

Вам надо будет подключать аутентификацию и авторизацию и проверять, что у юзера_1 нет доступа к персональным данным юзера_2. В моем случае нашлась большая дырыща в безопасности.
Если хотите, чтобы ваш пользователь загружал файлы/картинки в апп, придется самому поковыряться с так называемыми "бакетами". Но это не проблема, благо есть Chat GPT и Google-платформа для настроек.
Вам надо будет тщательно провалидировать весь код на "информационно-безопасные" дыры. Делать это можно в связке с Chat GPT, запрашивая у того требования.

Исправляя баг с навигационном баром, AI сделал ситуацию хуже, продублировав баг

Чтобы сэкономить деньги, внедряя фичу, сразу просите логировать все клики / действия на экране. Это сэкономит вам время во время тестирования: если увидите ошибку или, напротив, не увидите никакого действия, у вас будет строчка в Console, объясняющая AI-разрабу, что произошло на фронте во время клика.

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

Кому подойдет вайбкодинг под ключ

Вы готовы выделить на свой MVP/рабочий прототип от 300$. При этом вы понимаете, что код, написанный AI, придется рефакторить после релиза и при масштабировании. Реального разработчика эта AI-штука не заменит.
У вас есть какие-то тех. навыки или вы очень хотите их приобрести.
Вы не кодер и вы хотите разработку под ключ и готовы пострадать.

Если статья оказалась для вас полезной — подписывайтесь на канал автора в ТГ — «Сделай удобно», чтобы не пропустить другие материалы по теме.

Разработка приложения в софте для вайбкодинга: сколько стоит и кому подходит