Инструменты AI-прототипирования позволяют пройти путь от идеи до работающего прототипа за часы, а не недели. Это создает колоссальное преимущество для продактов, которые умеют с ними работать.
Но таких инструментов много. Как понять, какой лучше подойдет для решения задачи?
Мы ответили на этот вопрос, протестировав самые популярные инструменты AI-прототипирования на бизнес-кейсе.
Какие инструменты и как мы оценивали
Мы взяли два наиболее востребованных инструмента:
Добавили еще четыре инструмента, которые заслуживают внимания:
Также мы отдельно выделили — AI-агент, который отличается своим подходом к планированию и реализации задач. Команда Lovable утверждает, что Agent Mode сокращает количество ошибок на 90%, поэтому нам было интересно добавить его к сравнению.
Что мы оценивали:
- Как быстро получилось собрать прототип;
- Насколько удобно было работать с интерфейсом;
- Каковы преимущества и недостатки инструмента.
Процесс AI-прототипирования
Процесс прототипирования с помощью AI-инструментов состоит из трех основных этапов:
- Вы пишете запрос со своей идеей на естественном языке.
- AI обрабатывает запрос и создает на его основе работоспособный код.
- Вы получаете результат — функционирующий прототип.
В рамках этого тестирования мы прошли этот короткий путь с каждым из AI-инструментов.
Эксперимент
Чтобы сравнить выбранные инструменты на практике, мы взяли один конкретный и несложный кейс — собрать базовую страницу мессенджера Slack с чатами, каналами, аватарами и возможностью отправлять сообщения.
В качестве инструкций для AI мы использовали один и тот же скриншот, а также одинаковые цепочки промптов на естественном языке.
Вот выбранный нами скриншот, который мы использовали как референс для AI-инструментов:
Набор промптов, которые мы использовали:
- Подготовь прототип на основе скриншота Slack. Владелец этого Slack-аккаунта — Jasper Lane.
- Добавь поле для ввода сообщений в каждый диалог. Должна быть возможность отправки сообщения. После нажатия клавиши Enter или нажатия кнопки «Отправить» сообщение должно появиться в переписке.
- Добавь примеры сообщений в чаты.
- При нажатии на иконку с именем коллеги в боковой панели должен открываться отдельный чат с ним.
- Добавь реалистичные аватары для каждого коллеги в боковую панель, как в реальном пространстве Slack.
- Последнее сообщение всегда должно быть видно над полем ввода сообщения во всех диалогах и каналах.
- В списке каналов должны быть: #general, #announcements и #reports.
- В разделе «Direct messages» должны быть переписки с тремя коллегами и с самим собой (Jasper Lane). Сгенерируй реалистичные имена для коллег.
Мы отклонялись в промптах только если возникали ошибки или не удавалось получить ожидаемую функциональность.
Для каждого инструмента мы описываем результаты эксперимента и его фичи, которые могут быть важны при выборе инструмента для решения других ваших задач.
Результаты нашего эксперимента:
✅ Получилось собрать прототип быстро и без ошибок.
✅ Было достаточно бесплатного аккаунта.
Фичи инструмента, которые делают прототипирование с его помощью более эффективным:
➕ Хорошо работает автоматическое исправление ошибок.
➕ Есть удобный режим “Chat” для обсуждения прототипа без внесения изменений.
➕ Есть интеграция с Supabase.
➕ Доступен импорт из Figma.
Результаты в эксперименте для :
✅ Получилось собрать прототип быстро и без ошибок.
⚖️ Не почувствовали разницы с Lovable для выбранного простого кейса. Возможно отрыв можно почувствовать в сложных кейсах.
Команда Lovable утверждает, что Agent Mode сокращает количество ошибок на 90%. Из-за этого может появиться соблазн использовать в Agent Mode очень большие промпты, в которых объединены несколько инструкций. Наша практика показала, что пока Agent Mode не справляется с декомпозицией сложного промпта и это нужно делать самостоятельно.
Результаты нашего эксперимента:
✅ Получилось собрать прототип быстро и без ошибок.
✅ Было достаточно бесплатного аккаунта.
Фичи инструмента, которые делают прототипирование с его помощью более эффективным:
➕ Возможно удобно создавать копии прототипов.
➕ Есть интеграции с Supabase, Stripe.
➕ Доступен импорт из Figma.
Результаты нашего эксперимента:
❌ Не удалось собрать работающий прототип с бесплатным аккаунтом.
❌ Агент задавал сложные и неожиданные вопросы — многошаговый план действий и настройка базы для хранения диалогов (хотя этого было совсем не нужно).
❌ Выпадали ошибки при запуске простых промптов.
Фичи инструмента, которые делают прототипирование с его помощью более эффективным:
➕ Можно управлять собственной базой данных внутри Replit.
➕ Доступны интеграции с множеством сервисов, например Stripe, PayPal, Telegram.
Результаты нашего эксперимента:
✅ Получилось собрать прототип быстро и без ошибок.
✅ Было достаточно бесплатного аккаунта.
Фичи инструмента, которые делают прототипирование с его помощью более эффективным:
➕ Возможно удобно создавать копии прототипов.
➕ Есть интеграция с Supabase.
Результаты нашего эксперимента:
❌ Не удалось собрать работающий прототип с бесплатным аккаунтом.
Фичи инструмента, которые делают прототипирование с его помощью более эффективным:
➕ Доступен визуальный редактор макета прототипа, что позволяет не тратить промпты для изменения дизайна.
➕ Есть интеграции с Supabase, Figma.
Результаты нашего эксперимента:
✅ Получилось собрать работающий прототип, но потребовалось больше времени, чем в Lovable/Bolt.
❌ Не с первого раза выполнялись простые промпты.
Фичи инструмента, которые делают прототипирование с его помощью более эффективным:
⚖️ Чат находится справа, что не очень удобно, так как во всех остальных инструментах он слева.
➕ Есть интеграция с Figma: в отличие от всех остальных сервисов, позволяет выгрузить макет прототипа в Figma и делает это достаточно хорошо.
➕ Есть возможность коллаборативного редактирования прототипов.
Результаты эксперимента
| AI-инструмент | Оценка | Комментарий |
| ⭐️⭐️⭐️ | Все получилось быстро и просто. | |
| Lovable | ⭐️⭐️⭐️ | Нет отличий от Lovable. |
| ⭐️⭐️⭐️ | Все получилось быстро и просто. | |
| ⭐️⭐️⭐️ | Хорошие результаты без существенных отличий от Lovable и Bolt.new. | |
| ⭐️⭐️ | Можно добиться нужного результата, но дольше и сложнее, чем с Lovable и Bolt.new. | |
| ⭐️ | Не удалось добиться результата с бесплатными аккаунтами. | |
| ⭐️ | Не удалось добиться результата с бесплатными аккаунтами. |
Дополнительные комментарии:
- На рассмотренном простом кейсе не было заметно разницы в использовании Lovable Agent Mode от Lovable. Возможно отличия появятся на более сложных задачах. Например таких, для которых нужно реализовывать многошаговые взаимодействия и разнообразные интеграции с внешними сервисами.
- Репутация Replit как более сложного инструмента для людей с техническим опытом подтвердилась. При решении простого кейса агент задавал технические вопросы, без которых обходились все остальные инструменты.
В основе этих инструментов одни и те же технологии
Если вы проверите эти инструменты самостоятельно, то убедитесь, что во многом они очень похожи — и результаты их работы тоже. Например, некоторые элементы прототипов, которые не были описаны заранее в промптах, получаются идентичными.
Обратите внимание, что на прототипах ниже — в Lovable, Replit, V0 и Magic Patterns — присутствует один и тот же аватар (выделен на скриншотах красным прямоугольником), а в Replit и Magic Patterns этот аватар был выбран для владельца аккаунта.
Lovable
Replit
V0
Magic Patterns
Такие совпадения происходят благодаря тому, что практически все инструменты используют одну и ту же ведущую LLM (большую языковую модель) в своей основе — .
Кстати, набор встроенных интеграций этих инструментов с внешними платформами также очень схож: GitHub, Supabase, Figma, Stripe и другие.
Выводы
В рамках эксперимента сюрпризов не случилось. Ожидаемо лучше всего себя показали два ведущих инструмента — Lovable и Bolt.new. По некоторым данным Lovable на данный момент , а Bolt.new — .
Если вы задаетесь вопросом с какого инструмента начать, то выбирайте между ними.
Принципы написания промптов и создания прототипов универсальны для всех инструментов. Уверенно овладев одним из них, вы сможете легко использовать остальные.
Если вы готовы освоить AI-прототипирование и начать применять его в работе или для реализации личных проектов, мы рекомендуем пройти наш курс «AI-прототипирование: симулятор». В этом курсе мы подробно разбираем кейс создания новой фичи для Slack, а также другие интересные кейсы.
