Как превратить идею в рабочий прототип за считанные минуты
👋 Привет! Это 🔒 выпуск только для подписчиков 🔒 моей еженедельной рассылки. Каждую неделю я отвечаю на вопросы читателей о создании продуктов, росте и карьере. Подробнее: Lennybot | Подкаст | Найди следующего лидера продукта | Мои любимые курсы на Maven | Мерч
Этот пост изменит то, как ты создаёшь продукты, генерируешь идеи и работаешь как PM.
Независимо от того, активно ли ты уже используешь ИИ-инструменты или только начинаешь, ты узнаешь, на какие инструменты стоит обратить внимание, когда что использовать и как выбраться из тупика. Здесь собраны проверенные промпты, реальные примеры и пошаговое руководство, которое можно применить немедленно. Представь, что можешь превратить дизайн из Figma в работающее приложение за несколько кликов или конвертировать PRD в рабочий прототип за несколько минут. Всё это реально, и ты узнаешь, как это делается.
Colin Matthews — многолетний PM, который теперь ведёт мой любимый курс по ИИ-прототипированию: AI Prototyping for Product Managers. Он также написал мой девятый по популярности пост всех времён (Стань более техническим продакт-менеджером). Мне очень нравится, как просто и ясно Colin объясняет сложные темы, и лично я очень многому научился из его поста об ИИ-прототипировании. Уверен, ты тоже.
Если хочешь узнать больше, посмотри бесплатный 30-минутный мини-урок Colin, где он показывает, как собрать рабочий прототип за 10 минут (включая несколько продвинутых техник). А для более глубокого погружения загляни на четырёхнедельный курс Colin на основе живых сессий — там ты освоишь инструменты ИИ-прототипирования, научишься отлаживать типичные проблемы и разберёшься в основах программирования. Используй код «LENNYSLIST», чтобы получить скидку $100.
Если ты не следил пристально за последние полгода, возможно, пропустил появление таких инструментов, как Cursor, Replit Agent, v0, Bolt и других новейших ИИ-инструментов, позволяющих создавать работающие приложения за минуты. Например, мне понадобилось всего 10 минут, чтобы собрать вот эту 2D-игру в танки (с ИИ-противником в комплекте), используя лишь следующую серию промптов:
Круто. Но ещё круче то, что эти инструменты позволяют создавать функциональные прототипы из дизайна Figma, конвертировать грубые нарисованные от руки наброски в работающее приложение, превращать документ PRD в интерактивный прототип или даже собирать полезный внутренний инструмент для своей команды — без навыков программирования. В этом посте я расскажу об основах ИИ-прототипирования, покажу, как добиваться хороших результатов от самых популярных инструментов, и разберу сквозной пример создания прототипа менее чем за 10 минут.
Современные ИИ-инструменты для разработки делятся на три типа:
Давай рассмотрим самые популярные инструменты в каждой категории, чтобы понять, на что они способны и что с их помощью можно создавать.
Лучше всего подходят для: прототипов, состоящих всего из одной страницы и не предъявляющих сложных требований к дизайну, — например, калькуляторов, карточек с переворотом или визуализаций данных
Чат-боты способны писать код в ответ на вопрос или промпт.
Промпт вида «Создай мне калькулятор на React» даёт следующий результат:
Если хочешь запустить этот код, ChatGPT потребует скопировать его в свою IDE и запустить на собственном компьютере.
Claude делает один шаг вперёд по сравнению с ChatGPT благодаря системе Artifacts. Artifacts позволяют запускать код прямо в интерфейсе Claude и деплоить его по общей ссылке. Неприятное ограничение — нельзя напрямую редактировать код, поэтому ты полностью зависишь от промптов для внесения изменений.
(Perplexity — ещё один инструмент, о котором ты наверняка слышал; он напоминает чат-боты, но больше ориентирован на поиск и не так полезен для создания приложений. Он умеет писать базовый код, поскольку построен поверх других ИИ-моделей вроде ChatGPT и Claude, но я бы не рекомендовал его для этой задачи.)
Помни, что чат-боты могут писать код для любой части стека (клиент, сервер, база данных), но не могут хостить твой код (деплоить). Они также не создают сложных прототипов с несколькими страницами, и редактировать код напрямую затруднительно. Поэтому эти инструменты лучше всего использовать для очень простых одноразовых прототипов — чего иногда вполне достаточно. Думай о чат-ботах, когда нужно создать совсем простую посадочную страницу, отдельные элементы ввода вроде выбора даты или небольшие приложения типа списка дел.
Лучше всего подходят для: прототипов с более чем одной функцией, особыми требованиями к дизайну или множеством страниц
Облачные среды разработки — это большой шаг вперёд по сравнению с чат-ботами. Эти инструменты берут на себя все задачи, необходимые для превращения идей в реально работающий продукт. Они помогают создавать сквозные функции, обеспечивают бэкенд-инфраструктуру для запуска прототипа, позволяют редактировать несколько файлов с агентными рабочими процессами и решать более сложные задачи в кодовой базе — например, обновлять схему базы данных.
Один из ключевых отличительных признаков облачных сред разработки — хостинг. Как я объяснял в своём предыдущем посте о том, как стать более техничным PM, каждый программный продукт построен из трёх частей: клиента, сервера и базы данных. Клиент — это то, с чем взаимодействует пользователь (часто написан на JavaScript), сервер обрабатывает запросы клиента для получения данных или интеграции с другими продуктами (часто на Node.js, Python или Java), а база данных — это постоянное хранилище данных. Создание прототипов с реальными функциями требует хостинга как клиентского, так и серверного кода, а также может потребовать базы данных.
Один из самых популярных инструментов сегодня, v0, умеет писать и хостить как клиентский, так и серверный код. По умолчанию он использует фреймворки Next.js и Shadcn UI (оба созданы компанией Vercel, которой принадлежит и v0). v0 умеет деплоить код и запускать бэкенд-серверы — плюс одна из его сильных сторон — отличный стиль по умолчанию. Вот базовая CRM, которую я собрал в v0 с промптом «Создай мне базовую CRM».
Bolt очень похож на v0 тем, что тоже умеет генерировать и деплоить как клиентский, так и серверный код. Но ключевое отличие — в том, где работает сервер. В v0 ты деплоишь на реальную облачную инфраструктуру, тогда как Bolt запускает серверный код прямо в браузере пользователя. Это означает, что Bolt не может нативно поддерживать прототипы, которым нужна идентификация пользователей (логины, аккаунты), многопользовательские взаимодействия вроде чата или совместных рабочих пространств, безопасные операции с данными типа платёжных систем или постоянное хранение данных между сессиями — потому что на каждом устройстве пользователя создаётся изолированная копия сервера. Компенсировать это можно интеграцией с внешними сервисами вроде Supabase, предоставляющими серверы и базы данных.
Вот базовая CRM, которую я собрал с помощью Bolt с промптом «Создай мне базовую CRM».
Ещё один популярный инструмент — Replit. Replit позволяет создавать полностековые приложения, включая клиент, сервер и базу данных. Он умеет создавать веб-приложения на фреймворках как JavaScript, так и Python, и особенно хорошо подходит для внутренних административных инструментов (например, конвертации файлов, отслеживания кандидатов) и приложений на основе данных (например, изменения размера изображений, многостраничных дашбордов) с простым интерфейсом.
Я использую Replit всякий раз, когда мне нужен полноценный бэкенд или хочу писать на Python. Я уже создал с его помощью конвертер MP4 в GIF и инструмент для изменения размера изображений для Substack — оба использую еженедельно.
Вот базовая CRM, которую я собрал с помощью Replit с промптом «Создай мне базовую CRM».
Наконец, есть Lovable. Это самый новый из перечисленных. Lovable больше всего похож на v0 и Bolt — он отлично справляется с генерацией веб-сайтов и использует JavaScript-фреймворки вроде React и Next.js. Его отличительная черта — интеграции с другими популярными инструментами. Lovable умеет подключаться к репозиторию GitHub, автоматически добавлять аутентификацию и базы данных через Supabase, а также подключаться к провайдерам ИИ вроде Anthropic и OpenAI. Всё это делает его одним из лучших ИИ-инструментов для написания кода при создании продуктов, которые действительно хочется использовать в продакшене.
Один существенный недостаток Lovable — отсутствие редактора кода. Чтобы редактировать код, нужно обращаться к агенту через промпты. Это затрудняет прямую отладку проблем в Lovable. Я часто начинаю новую функцию здесь, но перехожу в Cursor для решения проблем.
Вот базовая CRM, которую я собрал с помощью Lovable с промптом «Создай мне базовую CRM».
Итого:
Независимо от выбора, все облачные среды разработки позволяют создавать более сложные приложения, чем чат-боты, с возможностью деплоя в облако и лёгким обменом обновлёнными итерациями со временем.
Лучше всего подходят для: тех, кто умеет программировать и работает над серьёзными приложениями, которые планирует запустить в продакшене
Последний тип ИИ-инструментов для разработки — локальные ассистенты. Эти продукты ориентированы на людей, умеющих писать код. Такие инструменты, как Cursor и GitHub Copilot, принимают промпты аналогично Claude, но затем генерируют и применяют изменения прямо в твоей кодовой базе и среде разработки (IDE). Эти инструменты делают больше, чем автодополнение — теперь они могут писать большую часть кода просто по промптам.
Например, я создал это приложение для презентаций (с живыми вопросами, ответами и опросами!) примерно за 10 дней, используя Lovable и Cursor. Я начал в Lovable, чтобы быстро собрать базовые функции, синхронизировал код с GitHub для редактирования в других инструментах, а финальные изменения и исправление багов сделал с помощью Cursor. Это приложение использует аутентификацию, базы данных, обновления в реальном времени и многое другое.
Десять дней могут показаться много, но большая часть этого времени ушла на устранение багов и отладку — именно в этом Cursor превосходит другие инструменты, и об этом я подробнее расскажу через пару разделов.
GitHub Copilot более распространён в корпоративной среде, поскольку поставляется от надёжного поставщика — Microsoft. Он поддерживает изменения в нескольких файлах по промптам, объяснения кода и многое другое. Я заметил, что он лучше всего работает при очень конкретных инструкциях и уступает Cursor при более общих командах. Например, когда я попросил добавить новую функцию без предоставления контекста, Copilot воссоздал компоненты приложения, которые уже существовали, тогда как Cursor напрямую изменил мои существующие файлы.
Два инструмента, с которыми я провёл меньше времени, но которые вызывают у людей интерес, — Windsurf и Zed. Windsurf — ещё одна IDE, способная предлагать многострочные изменения файлов и рекомендовать команды, например перемещение файлов. Она отлично справляется с работой над более крупными и сложными кодовыми базами. Zed — высокопроизводительный редактор со множеством функций для повышения продуктивности: библиотеками промптов, слэш-командами и горячими клавишами для таких частых действий, как применение ИИ-сгенерированного кода.
Теперь, когда мы знакомы с основными инструментами, давай создадим несколько прототипов. Два наиболее распространённых сценария прототипирования для продакт-менеджеров:
Давай превратим следующий дизайн главной страницы Airbnb в рабочий прототип. Предположим, ты хочешь использовать этот прототип, чтобы изучить новую функцию — например, фильтр по цене.
Вот наш исходный дизайн:
Я выбрал Bolt для этой задачи, поскольку он лучше справляется с работой на основе готового дизайна, а бэкенд-база данных от Replit нам не нужна. Вот промпт, который я использовал (можешь скопировать). Не забудь приложить скриншот дизайна!
«Создай прототип, точно соответствующий этому дизайну. Совпадение должно быть точным.»
Вот как это выглядит в Bolt:
Далее добавим новую функцию — фильтр по цене. Обрати внимание на промпт ниже: я описываю каждую функцию подробно. Один полезный совет при работе с этими инструментами — будь максимально конкретен, описывая изменения в последующих промптах, это помогает ИИ точнее определить, что нужно изменить.
«Реализуй встроенный фильтр цен как компонент строки поиска. Он должен появляться рядом с «Добавить гостей» в отдельной секции.
При выборе поля должен появляться попап с фильтром по минимальной и максимальной ценам. Фон попапа должен быть белым и перекрывать элементы под ним.»
Отличная отправная точка. Давай расширим эту функцию, добавив слайдер для минимальной цены.
«Можешь добавить ценовой слайдер? У него должна быть синяя линия и чёрный узел. Перемещение узла должно изменять минимальную цену.»
За 10 минут мы создали рабочий начальный прототип идеи продукта — без единого навыка программирования. Невероятно. Мы могли бы продолжать улучшать этот фильтр (например, показывать обновляющиеся в реальном времени объекты при изменении цены). Посмотри на прототип здесь.
Если ты похож на меня, твои дизайнерские навыки, вероятно, недостаточны для создания исходного дизайна, как в предыдущем примере. К счастью, можно создать прототип, используя существующие паттерны и компоненты из бесплатных публично доступных дизайн-систем вроде Tailwind или Shadcn UI.
Давай быстро создадим CRM с помощью Bolt, а затем добавим в неё новую функцию. Предположим, мы рассматриваем добавление функции, автоматизирующей email-рассылку прямо из CRM, и хотим собрать обратную связь от клиентов об этой функции до начала разработки — показав потенциальным пользователям прототип того, как это могло бы выглядеть.
Мы можем быстро собрать v1 следующими промптами:
«Создай комплексную систему управления взаимоотношениями с клиентами (CRM).»
Снова остановимся на секунду. Мы только что создали рабочий прототип CRM менее чем за пять минут — то, на что раньше у инженера ушли бы недели. Неимоверно.
Давай продолжим и посмотрим, как добавить новую функцию.
«Пожалуйста, реализуй макет ИИ-рассыльщика писем. Он должен быть доступен через левую навигацию.»
Снова — менее пяти минут, чтобы получить возможность поиграть с новой идеей функции. Только подумай, сколько идей можно исследовать и как быстро выводить их в работу. Инструменты ИИ-прототипирования доступны уже менее шести месяцев, а уже абсолютно изменили скорость, с которой команды могут выпускать продукты.
Теперь мы можем взять прототип и получить прямую обратную связь от клиентов, не тратя время на разработку начальной версии. Этот подход ускоряет процесс открытий, позволяя как можно раньше вложить интерактивные примеры в руки клиентов.
Каждый ИИ-инструмент даст очень разные результаты в зависимости от настроек по умолчанию и того, насколько ты конкретен. Вот тот же пример с теми же промптами в v0:
Вот несколько хороших шаблонов для начала работы с каждым из инструментов, которые я выделил:
Промпт:
Создай прототип, точно соответствующий этому дизайну. Совпадение должно быть точным. Используй Tailwindcss.
Соблюдай стили, шрифты, отступы и цвета.
[Прикрепи один скриншот из Figma]
Инструмент: Bolt
Пример: Менеджер деплоев
Промпт
Создай прототип для [x].
Этот инструмент должен:
- [Поведение 1]
- [Поведение 2]
- [Поведение 3]
Реализуй простую начальную итерацию, точно соответствующую этим требованиям.
Инструмент: v0
Пример: Калькулятор продаж
Промпт:
Создай прототип для [x].
Используй Python и Streamlit.
Инструмент: Replit
Пример: Дашборд продуктовой аналитики
Промпт:
Конвертируй нарисованный от руки набросок в функциональный прототип. Сосредоточься на фронтенд-функциональности.
Сделай это в стиле [продукт, который тебе нравится].
Инструмент: v0
Пример: Блог в стиле Netflix
Промпт:
Реализуй прототип, соответствующий функциям в этом PRD. Следуй точным спецификациям документа. Сосредоточься на фронтенд-функциональности — не включай сервер или базу данных. Используй Tailwindcss
[Скопируй/вставь PRD. Прикрепи все необходимые изображения]
Инструмент: Bolt
Пример: UI двухфакторной аутентификации
Промпт:
Создай инструмент, который делает [x].
Этот инструмент должен:
- [Поведение 1]
- [Поведение 2]
- [Поведение 3]
Инструмент: Replit
Пример: Инструмент изменения размера изображений Substack
Создать начальный прототип — одно дело. Но одна из самых распространённых причин разочарования при ИИ-прототипировании — ошибки, которые ИИ допускает на пути к рабочей версии. Если попытаться сделать что-то хоть немного сложное, ты, скорее всего, упрёшься в стену. Умение программировать становится суперспособностью для отладки, но есть и другие подходы, которые могут использовать нетехнические разработчики для достижения отличных результатов.
Давай разберём четыре наиболее эффективных способа добраться до рабочих прототипов:
Рефлексия — самая важная стратегия для получения полезных результатов от ИИ-инструментов написания кода. По умолчанию эти инструменты отвечают на любой вопрос, сразу генерируя код, что часто означает отсутствие реального плана. Заставив ИИ сначала составить план, а не сразу переходить к коду, ты получишь гораздо лучшие результаты и лучше поймёшь, что происходит.
Пример:
«Создай приложение для отслеживания калорий только с фронтендом. Начни с подробного описания минимальных требований. Не пиши никакого кода.»
Рефлексию можно также использовать, чтобы выбраться из замкнутого круга. Вместо того чтобы просить ИИ исправить синтаксические ошибки, попроси его составить список возможных причин существования ошибки. Прямо укажи, что нужен не код, а только объяснение происходящего.
Пакетирование — немного контринтуитивно. Большинство людей думают, что предоставление максимального контекста сразу поможет ИИ принять правильные решения, но всё наоборот. Нужно создать минимальную итерацию чего-то работающего, а затем расширять её. Попробуй разбить промпты на меньшие пакеты, а не просить сразу сложный прототип. Я рекомендую начинать с модели данных — это основа того, как прототип будет хранить информацию.
Пример:
«Реализуй только клиентское представление для отслеживания калорий. Используй базовую модель данных, которая отслеживает записи с описанием и количеством связанных калорий. Отобрази таблицу всех текущих записей и сумму всех калорий в правом верхнем углу.»
Чем конкретнее ты можешь быть с ИИ, тем выше вероятность получить то, что хочешь. Как при работе с джуниор-разработчиком. Конкретность проявляется в разном — какие технологии используются, какие части продукта нужно создать, какие файлы или даже конкретные строки кода нужно изменить.
Пример:
*«Добавь возможность отслеживать калории по каждому дню.
- Расширь модель данных, включив дату для записи
- Отобрази выбор даты в форме добавления записи, по умолчанию установленный на сегодня
- Отобрази сегодняшнюю дату рядом с общим количеством калорий
- Добавь стрелки навигации влево и вправо рядом с количеством калорий для переключения дней назад и вперёд
- Общее количество калорий должно показывать сумму калорий за указанную дату.»*
Один из самых неприятных опытов при использовании ИИ-инструментов для прототипирования — когда они переписывают целые разделы прототипа и ты теряешь часы работы. Это часто происходит, когда инструкции недостаточно конкретны и ИИ не может понять, какие именно изменения нужно внести, поэтому переписывает всё. К счастью, в большинстве инструментов есть система контрольных точек, позволяющая легко откатиться к предыдущей версии.
Также можно избежать потери контекста, сосредоточив ИИ на конкретных частях продукта, которые нужно изменить. Это можно сделать, комбинируя вышеупомянутые стратегии:
ИИ-прототипирование меняет то, как работают продуктовые команды. Вместо того чтобы тратить недели или месяцы в ожидании, пока функция будет готова, можно создать прототип и получить мгновенную обратную связь. Запустить внутренний инструмент за день и проверить, решает ли он реальную проблему. Набросать макет на доске и превратить его в приложение в тот же день.
Звучит как магия (и ощущается как магия), но есть ограничения. Большинству продакт-менеджеров следует использовать облачные среды разработки:
Когда работаешь над прототипом, ты, скорее всего, столкнёшься с проблемами. Будь конкретен, применяй рефлексию и пробуй небольшие инкрементальные пакеты для достижения наилучших результатов.
Спасибо, Colin!
Если хочешь узнать больше, Colin проводит бесплатный 30-минутный мини-урок 14 января, где покажет, как создать рабочий прототип за 10 минут (включая несколько продвинутых техник). Зарегистрируйся здесь. Для более глубокого практического обучения запишись на живой четырёхнедельный курс Colin по ИИ-прототипированию, где ты освоишь инструменты ИИ-прототипирования, научишься отлаживать типичные проблемы и разберёшься в основах программирования. Используй код «LENNYSLIST», чтобы получить скидку $100. Запись закрывается 23 января.
Продуктивной и насыщенной недели 🙏
Я веду рекрутинговый сервис премиум-класса, специализирующийся на старших должностях в продукте (например, директора, VP и руководители продукта), работая с несколькими избранными компаниями для заполнения открытых вакансий. Если нанимаешь — подай заявку ниже.
Если эта рассылка приносит тебе пользу, поделись ею с другом и рассмотри возможность подписки, если ещё не сделал этого. Доступны групповые скидки, подарочные варианты и реферальные бонусы.
С уважением,
Lenny 👋