Сравнение инструментов ИИ-прототипирования для продакт-менеджеров

Для начала важно прояснить мой юз-кейс и запросы, это поможет понять, как я оценивал инструменты в таблице ниже. У меня есть три основных требования.

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

• Как и многим другим ИТ-специалистам, мне интересно исследовать, изучать AI прототипирование, а еще создавать инструменты для собственного использования. Инструменты не могут работать на одном только UI; им нужны бэкэнд/базы данных, поэтому моим вторым требованием было то, чтобы ИИ инструмент поддерживал разработку полного стека, и мне бы не приходилось лезть в код.

• У меня не так много свободного времени (увы), поэтому последнее условие - я хочу получить максимум из коробки. Все что угодно (!) может быть построено / закодировано / взломано. Есть даже люди, которые могут вайб-кодить, задавая вопросы ChatGPT, а затем собирать все это самостоятельно. Преклоняюсь перед ними, но я лично всегда ненавидел и до сих пор ненавижу заниматься «логистикой», чтобы все заработало; мне нравится сам процесс творчества. И да, у меня нет времени.

Плюс ко всему, меня не волнуют бренды и громкие названия: Replit, Loveable, Bolt и так далее. Для меня они все одинаковы, при условии, что выполняют обещанную работу по разумной цене. Их маркетинг мне тоже не интересен. Некоторые компании более агрессивны и больше хайпуют, а некоторые ведут себя скромнее. Мне без разницы.

Итак, с моими требованиями разобрались, идем дальше.

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

• Могут ли они генерировать Frontend / UI (страницы, виджеты и так далее)?
• Могут ли они генерировать Backend (логику, внешние интеграции API, например, с OpenAPI)?
• Могут ли они создавать и управлять базами данных, чтобы приложение запоминало данные, и делать это для реального трафика, а не только в локальной песочнице?
• Могут ли они опубликовать мое приложение в интернете, чтобы его можно было открыть по ссылке и пользоваться? Здесь речь не только об интерфейсе, но и об основной логике, то есть бэкэнде и базе данных.

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

Все инструменты здесь выдают очень похожий результат, все они могут генерировать весьма приличный фронтенд. Почему, спросите вы. Есть основная причина, и до нее довольно легко докопаться, если рассуждать логически.

Интерфейс, он же UI, состоит из трех основных частей:

• HTML — это скелет (кнопки, изображения, текстовые блоки и т.д.)
• CSS — это стили (кнопки скругленные или квадратные, с тенями или нет и так далее),
• JavaScript — это то, что их оживляет (нажмите на кнопку, чтобы открыть карту).

Любой интерфейс, который вы видите на сайте или в приложении, — это просто комбинация этих трех блоков ДНК, и сложность здесь довольно ограничена. Да, интерфейсов огромное количество и они разные, но на самом деле все они представляют собой просто последовательность заголовка, подзаголовка, текста, картинки, кнопок и ссылок. И да, это может быть длинная страница, но это такая же страница, просто на ней много текста, кнопок, картинок. С точки зрения кода это не делает ее сложнее. Неспециализированные LLM типа Claude или ChatGPT очень хорошо генерируют этот код (который является просто текстом), и инструменты ИИ-прототипирования за счет этого хорошо работают.

Мой вердикт: все топовые инструменты могут справиться с фронтендом. Кто-то возразит, что «инструмент X копирует UI лучше, чем инструмент Y». Я думаю, что для быстрых прототипов это не так уж важно. Но в любом случае, если захочется, всегда можно подправить получившийся интерфейс, причем несколькими способами:

• Дать задачу агенту («Исправь это, добавь тени здесь, поменяй синий на темно-синий здесь» и так далее).
• Или, и это даже важнее, изменить библиотеки компонентов (это набор элементов, которые ИИ должен использовать). Это имеет смысл: если ИИ использует те же кнопки, что и оригинал, то ваша копия получится более похожей.
• Наконец, можно загрузить скриншот оригинального интерфейса в Figma, тогда получится точная копия.

Как обычно, тут мы балансируем между затраченным временем и качеством.

Здесь у нас самое большое различие. Прежде всего, топовые инструменты (Replit, Lovable, Bolt) могут справляться с простыми бэкэндами (например, для приложения для списка дел вам нужно уметь создавать задачу, обновлять ее и удалять, то есть нужна очень простая база данных с простыми операциями в ней).

Но если вы требуете от ИИ для создания прототипов что-то вроде: «А теперь добавь возможность вытащить мои задачи из этого VoiceAPI (который транскрибирует голос в текст), а затем отправь все задачи в OpenAI API, чтобы расставить приоритеты и создать персональный бэклог на неделю», то все усложняется.

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

• Replit в этом случае выступает в качестве «разработчика, сидящего рядом с вами» — он выяснит требования и начнет интегрироваться сначала с VoiceAPI, а затем с OpenAI API. Это именно то, что мне нужно для моей задачи: я генерирую идеи, а ИИ агент заботится о кодинге.
• Lovable / Bolt будет периодически создавать проблемы и спотыкаться. При интеграции с OpenAI API все может быть хорошо, но с менее знаменитой (или более сложной) интеграцией он, скорее всего, не справится. Таким образом, есть большая вероятность, что вам понадобится настоящий разработчик, чтобы все дописать и закончить. У меня нет разработчика, и я не хочу писать код сам.
• Кодинг ассистенты (Cursor, Copilot) могут создавать любой нужный вам код, но дальше уже ваша задача — заставить его работать на вашем компьютере; вы должны знать, что дальше с этим кодом делать. А это трудно и у большинства из нас, людей не очень технических, это отнимает много времени.

Как я уже упоминал выше, сделать можно все; вопрос в том, сколько свободного времени и мотивации у вас есть. В этом смысле Replit кажется наиболее выгодным вариантом. Все остальные инструменты потребуют от вас действий: от простой настройки внешнего инструмента (например, Supabase) и до сложных вещей типа выяснения особенностей интеграции API, или вообще всяких безумств типа конфигурации собственного облачного хостинга. При этом в других инструментах это делается в два клика.

Для моих юзкейсов я предпочитаю Replit: он обрабатывает простые макеты пользовательского интерфейса и позволяет мне держаться подальше от кода, особенно когда мне в голову приходит классная идея. Еще Replit — это инструмент «все-в-одном», и мне не надо подбирать несколько тулзов под разные задачи. А значит, не надо создавать несколько учетных записей, изучать несколько интерфейсов и платить за разные продукты.

Здесь важно пояснить, что это не значит, что Replit является лучшим в целом; это просто означает, что это лучший инструмент под мои запросы.

Если вам нужны просто скетчи для UI и вам нравится Lovable — выбирайте его.
Если нравится Bolt, пусть будет он.
Если нравится лазить в код и все делать самому — Cursor ваш друг.

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

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

Надеюсь, было полезно 🤖

Автор: Владимир Калмыков, Lead PM @ Booking.com