Детальный гайд по AI-прототипированию

Всем привет!
Меня зовут Александр, я COO в SaaS-платформе аналитики данных. Последний год активно изучаю внедрение AI-решений в кросс-функциональные процессы. Делюсь материалами, которые помогают:

• Продуктовым менеджерам — интегрировать AI без перегрузки команд;

• Разработчикам — выбирать инструменты под конкретные бизнес-задачи;

• Специалистам по данным — избегать ошибок в production-развертывании.

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

Сегодняшний перевод — AI Prototyping: The Ultimate Guide For Product Managers

Статья представляет собой исчерпывающее руководство по AI-прототипированию для продакт-менеджеров с детальным сравнением инструментов (Lovable, Bolt, Databutton), примерами промптов и двумя подробными практическими кейсами.

Ключевые моменты:

• возможность создания прототипов тремя способами (на основе текстового описания, на базе дизайнов или с использованием клиентских данных)

• интеграция с аналитическими инструментами и важность сохранения баланса между скоростью и качеством дизайна

• AI-прототипирование не заменяет традиционные экперименты и командное взаимодействие, но значительно ускоряет процесс валидации гипотез.

Я вижу три отдельных варианта использования этих AI-инструментов и технологий:

Вариант использования 1: AI-прототипирование

AI-инструменты вроде Lovable, Databutton и Bolt, которые продуктовые команды могут внедрить в свои процессы исследования продукта.

Вариант использования 2: AI No-Code создание

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

Вариант использования 3: AI-помощники для кодирования

AI-инструменты такие как Replit, v0, Windsurf и Cursor. Опытные инженеры могут использовать их для работы над сложными продуктами. Эти инструменты не подходят для людей без технического опыта.

Основа: Большие языковые/мультимодальные модели

Вы также можете напрямую использовать LLMs/LMMs (такие как Claude, ChatGPT, DeepSeek, Llama или Gemini) для генерации простых скриптов, визуализаций или ответов на вопросы. Но в реальных приложениях вы добьетесь гораздо большего, используя оболочку, которая может бесшовно работать с вашей кодовой базой, создавать и развертывать её. Тем не менее, вы всё равно можете использовать её вместе с LLMs/LMMs.

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

1. Что такое прототипирование?

2. Каковы преимущества AI-прототипирования?

3. Инструменты для AI-прототипирования: цены, плюсы и минусы

4. AI-прототипирование пошагово с промптами и видео:

5. Восемь лучших практик

6. Кейс-стади AI-прототипирования 1: Приложение для соцсети без дизайнов (Bolt.new)

7. Кейс-стади AI-прототипирования 2: Клон Product Hunt с дизайнами (Lovable)

8. Как использовать AI-прототипирование в непрерывном исследовании продукта? Заключение.

1. Что такое прототипирование?

В своей книге Inspired Марти Каган перечислил четыре типа прототипов:

• Низкодетализированные пользовательские прототипы (например, с помощью инструментов вроде Balsamiq),

• Высокодетализированные пользовательские прототипы (например, с помощью инструментов вроде Figma),

• Прототипы осуществимости (например, в Spikes),

• Прототипы с реальными данными, которые используют настоящие производственные данные (например, в A/B-тестировании).

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

Итак, я буду называть прототипами интерактивные визуальные артефакты, используемые в экспериментах. Это не продукты. Их основная цель — быстро и дешево проверить предположения.

Вы можете использовать прототипы для:

• Проверки рыночной вовлеченности для нового продукта, например, с XYZ-гипотезой.

• Проверки предположений, связанных с рисками удобства использования и ценности. Важно отметить, что прототип — это не эксперимент, а просто инструмент для проведения экспериментов, таких как:

  • Дать пользователю задачу для выполнения,

  • Тестирование первого клика,

  • 5-секундный тест,

  • Размышление вслух.

• Проведение “производственных” экспериментов, позволяя пользователям взаимодействовать с реальными данными вместо общих или фейковых данных, которые не адаптированы к их контексту.

2. Каковы преимущества AI-прототипирования?

AI-прототипирование включает использование AI для создания интерактивных прототипов. В контексте продуктовых команд AI может помочь вам быстро:

Вариант 1: Создавать прототипы на основе текстового описания

Хотя это и впечатляет, это несет риски, связанные с недооценкой важности дизайна. Мы обсудим это более подробно позже в этой статье.

Вариант 2: Создавать более интерактивные прототипы на основе дизайнов

Хотя такие инструменты, как Figma, позволяют определять и делиться прототипами, они ограничены определенными, предопределенными кликами и не включают базовую логику.

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

AI-прототипирование может решить эту проблему.

Вариант 3: Создавать прототипы с доступом к данным клиентов

Вы получаете гораздо более надежные результаты тестов, когда пользователи взаимодействуют со знакомыми данными, а не с “lorem ipsum” или общими именами, которые сливаются воедино

Например, когда пользователь работает с прототипом CRM-системы, вы можете захотеть отобразить реальных торговых представителей и реальные имена клиентов из их организации. До 2024 года для достижения этого требовалось, чтобы инженеры программировали эти “прототипы с реальными данными”.

3. Инструменты для AI-прототипирования: цены, плюсы и минусы

Вот мое субъективное сравнение инструментов AI-прототипирования (Databutton vs. Bolt vs. Lovable) после создания прототипов и попыток построить приложения со всеми тремя инструментами (2-месячное исследование).

Примечание: я включил только наиболее поддерживаемые бэкенд-решения. Например, вы можете комбинировать Bolt с Firestore или Lovable с аутентификацией Clerk, но это может быть не самой лучшей комбинацией.

Databutton: Мне понравились предлагаемые действия, отображаемые под чатом, бесшовная интеграция с Firestore и возможность быстро отмечать любой компонент, набирая “#”. К сожалению, он не позволяет легко экспортировать исходный код (хотя вы можете просматривать отдельные файлы) и становится менее надежным для более крупных инициатив.

Bolt: Мне понравилось разнообразие поддерживаемых фреймворков и языков программирования. К сожалению, инструмент в основном сосредоточен на фронтенде. Варианты хостинга бэкенда ограничены или не полностью поддерживаются (январь 2025).

Lovable: Мое любимое решение не только для AI-прототипирования, но и для создания простых full-stack приложений. Основной недостаток заключается в том, что иногда он слишком рано переходит к действию и может изменять несколько файлов, когда вы просто хотите задать вопрос. Вы можете избежать этого, используя “Режим чата”, будучи точным или возвращаясь к предыдущей версии, когда это происходит. Интересно, что это единственное решение, которое считает сообщения вместо токенов.

4. AI-прототипирование пошагово с промптами и видео

Восемь лучших практик

Вот что работает лучше всего для меня:

1. Определяйте маленькие, точные задачи вместо загрузки всего PRD.

2. Описывайте пользовательский поток “шаг за шагом”, чтобы AI понимал взаимодействия.

3. Когда возможно, используйте базу данных в памяти вместо Firebase или Supabase, которые нужны в основном для реальных приложений или прототипов с реальными данными.

4. Ссылайтесь на элементы, видимые на экране, указывая их напрямую (в Databutton используйте “#”; в Lovable выбирайте элементы курсором). Аналогично вы можете упоминать маршруты (для упрощения, “URL”) или таблицы базы данных.

5. Четко указывайте, задаете ли вы вопрос или запрашиваете изменение (в Lovable используйте “Режим чата”, в других инструментах добавляйте “просто ответь, ничего не меняй”)

6. Когда что-то идет не так, отменяйте изменения из истории, а не просите AI отменить их.

7. Следуйте предложениям по рефакторингу компонентов, когда строки превышают 150-200.

8. При работе над более крупными прототипами указывайте свой брендинг и стиль (например, основной цвет, шрифт) в настройках проекта

Этих практик недостаточно для создания реальных приложений (мы обсудили больше практик здесь), но их достаточно для прототипирования.

Кейс-стади AI-прототипирования 1: Приложение для соцсети без дизайнов (Bolt.new)

Давайте создадим прототип приложения для социальных сетей на основе только текстовых промптов с использованием Bolt.new.

Сначала результат:

Мой начальный промпт:

Create a basic social media home page with:

• Left menu (user photo link + links with icons)

• Center feed of 10 random posts

• Right panel (search + trending)

My primary color is #004346. Play with its variants.

Промпт 1:

Extend the home page and its three sections:

• Left panel: User's photo (link to profile) + icons for Home (selected), Search, Notifications, Chat, Feeds, Profile, Settings.

• Center panel: List of posts (each post shows the author's photo, relative time, text, optional image, number of comments, shares, and a heart icon + like count).

• Right panel: Search bar + trending topics.

Display 10 initial random posts after login and store them in memory.

Промпт 1.1 (это не сработало, но я исправил это позже)

Fix photos (user profile pictures and post content) so that they exist.

Промпт 2:

Add a "New Post" button at the top that opens a popup containing:

• User avatar.

• Text input (max 300 characters) + character count.

• Option to attach one picture, simulate it without a real upload.

• "Cancel" and "Post" buttons.

On clicking "Post," save the new post to memory and show it at the top of the home page list.

Промпт 3 (я пропустил его, поняв, что Bold уже реализовал это)

Implement post reactions with a heart icon under each post:

• Clicking once turns the heart red (liked) and increases the like counter by 1.

• Clicking again removes the red color (unliked) and decreases the counter by 1.

Промпт 4

I noticed that some post photos don't exist. Also, I can't see a simulated photo when creating a new post. Think step-by-step to fix this.

Демонстрация Bolt.new пошагово (скорость x 4)

Подсказка: Вы можете выбрать качество 4K.

Кейс-стади AI-прототипирования 2: Клон Product Hunt со скриншотами (Lovable)

На основе скриншотов создадим прототип приложения, похожего на Product Hunt.

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

Промпт 1:

Create an app to promote new products based on the attached screenshots:

1. Home Page (one screenshot):

   • Top menu, trending products section, and blog posts section on the right.

   • Display 5 random products with real pictures stored in memory.

2. Product Page (two screenshots):

   • Opens when clicking a product on the home page.

   • Includes product details, tags, team info, screenshots, and a discussion section.

Enable clicking on any product from the home page to view its details on the product page.

Вложения промпта:

Промпт 2:

Add random comments from random users for existing products and allow me to add my new comment. Also, add "Next vs Previous" product buttons in the ProductDetails.

Промпт 3:

Yes, please refactor that page. Also, allow me to upvote products.

(Контекст: Я выбрал кнопку голосования)

Промпт 4:

I want you to:

• Implement going back to the home page easily by clicking the logo

• Allow users to switch between grid and list view (one product in a row) on a home page

БОНУС: Промпт 5 (Я мог уже остановиться, но давайте подключим базу данных):

Я нажал на “Supabase”, создал новый проект, подождал 5 минут и продолжил. Lovable автоматически создал все таблицы. Мой следующий промпт:

Please export all existing data, pictures, upvotes, and comments to Supabase tables. You might need to add new or extend existing tables. Also, save my new comments and upvotes in Supabase tables.

Промпт 6:

For the code present, I get the error below. Please think step-by-step in order to resolve it.

(Предложено автоматически)

Промпт 7:

Please ensure you fetch and store data from the database: products, comments, pictures, tags, team members, and user upvotes. You might need to generate more users and more upvotes.

(Я хотел иметь сотни голосов в базе данных, но он не понял, и я не стал исправлять это).

Промпты 8, 9, 10, 11:

Yes

Yes, please continue Supabase integration for /index and /product/:id For now, remove any database security policies. Anyone can read and write anything.

(Ответы на вопрос о продолжении интеграции, я решил быть более точным и указать маршруты)

I get an error that the product was not found.

For the code present, I get the error below. Please think step-by-step in order to resolve it.

(предложено автоматически)

Промпты 12, 13, 14, 15, 16:

Looks like my upvotes are not stored in a database. After refresh, the number resets. Check the same for my comments on /product/:id

For the code present, I get the error below. Please think step-by-step in order to resolve it.

(Предложено автоматически)

Sometimes, upvotes and downvotes work inconsistently. Is it possible that the user can vote more than once for the same product when refreshing the page and navigating back and forth? Think step-by-step and consider the most reliable solution.

(Пошаговый подход заставляет модель рассмотреть больше вариантов)

There is still some mismatch. Remove any cache and always fetch and save upvotes in the database. When inserting an upvote, ensure it's not a duplicate.

(Предоставление технической гипотезы)

Again, we get duplicates for my user in the database (always "pawelhuryn@..."). Do we unvote and upvote properly without cache?

(Наконец-то сработало!)

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

Все продукты, комментарии, изображения, пользователи и голоса хранятся в базе данных.

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

Демонстрация Lovable пошагово (скорость x 4)

Примечание: Я удалил 2 минуты, потому что не понял, что чат ответил, и ждал его ответа. Вы можете отслеживать всю историю чата.

Подсказка: Вы можете выбрать качество 4K.

5. Как использовать AI-прототипирование в непрерывном исследовании продукта? Заключение.

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

AI-прототипы, основанные на скриншотах, также не обладают точностью. Например, результаты Lovable могут выглядеть хорошо, но может быть недостаточно для тестирования удобства использования реальных продуктов.

Вот почему AI-сгенерированными прототипами из текстовых промптов или скриншотов должны заниматься Продуктовые дизайнеры.

Дизайн не может быть второстепенной задачей.

Высокая детализация и высокая точность в AI-прототипировании

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

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

Удивительно, но всего несколько дней назад Lovable объявил, что это теперь возможно:

Как анализировать результаты

Если вы не планируете вручную наблюдать за каждым взаимодействием пользователя, вы должны интегрировать инструменты аналитики продукта, такие как Microsoft Clarity (бесплатные тепловые карты и записи сессий) или Pendo в AI-прототипирование.

Достаточно предоставить простой скрипт, сгенерированный этими инструментами, в окне чата.

Например, вот результат скрипта Clarity, внедренного в aigents.pm (создан с помощью Lovable):

TLDR;

Для интересующихся: мы применяем приватность по умолчанию. Весь введенный текст маскируется (я также не логирую промпты в Supabase, и OpenAI не использует их для обучения своих моделей):

При использовании Clarity вы также можете определить пользовательские CSS-правила для настройки маскировки.

Использование AI-прототипов с реальными данными

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

Но на практике AI-прототипы, вероятно, столкнутся с ограничениями безопасности, препятствующими прямому подключению к базе данных.

Анонимизированные данные или данные по сегментам рынка и использование инфраструктуры компании (может быть развернуто из GitHub, это не должно быть неразрешимой проблемой) могут быть более безопасным и практичным выбором.

Экспериментирование — это больше, чем AI-прототипирование

AI-прототипы работают лучше всего в сочетании с другими экспериментами.

Например:

• Сортировка карточек и A/B-тестирование прототипов могут требовать специализированных инструментов, таких как Maze.

• Технические Спайки могут выполняться только Инженерами.

• A/B-тестирование в продакшене — это отдельная тема.

Вы также должны понимать, какие предположения проверять, какие эксперименты проводить и как интерпретировать результаты.

AI-сгенерированные прототипы — это просто еще один инструмент.

Они не заменяют экспериментирование и сотрудничество, а скорее дают вашим командам возможность двигаться еще быстрее.