How to get your entire team prototyping with AI

How to get your entire team prototyping with AI

Как вовлечь всю команду в прототипирование с помощью AI

A guide to creating AI prototypes that match your brand and are integrated into every step of your development lifecycle

Руководство по созданию AI-прототипов, соответствующих вашему бренду и интегрированных в каждый этап жизненного цикла разработки

👋 Welcome to a 🔒 subscriber-only edition 🔒 of my weekly newsletter. Each week I tackle reader questions about building product, driving growth, and accelerating your career. For more: Lenny’s Podcast | How I AI | Lennybot | Courses | Swag

👋 Добро пожаловать в 🔒 выпуск только для подписчиков 🔒 моей еженедельной рассылки. Каждую неделю я разбираю вопросы читателей о создании продуктов, стимулировании роста и развитии карьеры. Больше материалов: Lenny's Podcast | How I AI | Lennybot | Курсы | Мерч

Annual subscribers now get a free year of Bolt, Perplexity Pro, Notion, Superhuman, Linear, Granola, and more. Subscribe now.

Годовые подписчики теперь получают бесплатный год Bolt, Perplexity Pro, Notion, Superhuman, Linear, Granola и других сервисов. Подпишитесь сейчас.

Colin Matthews holds the distinct honor of having not one but two posts in my top 10 most popular posts of all time. Today he’s back with a post that I suspect will make it three.

Colin Matthews имеет уникальное достижение: не один, а два поста в моём топ-10 самых популярных публикаций всех времён. Сегодня он возвращается с постом, который, подозреваю, станет третьим в этом списке.

I love Colin’s stuff because it’s always rooted in the real-life problems that product builders actually run into with AI tools—and he articulates the solutions so simply and practically. I’m excited to keep collaborating with him to help us all learn how to go from hype to reality. Let’s get into it.

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

For more from Colin, check out his free 45-minute live online class coming up on July 8th, and his course AI Prototyping for Product Managers (which kicks off on June 30th; use code LENNYSLIST to get $100 off). You can also book Colin for one-day team workshops with your team.

Больше материалов от Colin: его бесплатное 45-минутное онлайн-занятие, которое пройдёт 8 июля, и его курс AI Prototyping for Product Managers (стартует 30 июня; используйте код LENNYSLIST, чтобы получить скидку $100). Вы также можете заказать у Colin однодневный воркшоп для вашей команды.

Since I first shared a guide to AI prototyping for product managers in January, AI prototyping tools have become immensely popular. It’s now more common than not for product teams to use v0, Bolt, Replit, or Lovable to build a quick prototype to share their ideas and get feedback.

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

After having taught more than 500 PMs over the past five months how to get the best out of these tools (along with another 10,000 in numerous free online lightning lessons), I’ve seen two questions come up most often when people try to use these tools in real life:

Обучив более 500 продакт-менеджеров за последние пять месяцев тому, как извлечь максимум из этих инструментов (плюс ещё 10 000 на многочисленных бесплатных онлайн-уроках), я заметил два вопроса, которые возникают чаще всего, когда люди пытаются использовать эти инструменты в реальной работе:

Как сделать прототипы достаточно качественными, чтобы показывать их клиентам или топ-менеджерам?Как успешно внедрить эти инструменты на уровне команды, а не множества людей, работающих в изоляции?

These common questions are the reasons product, design, and engineering teams are struggling to figure out team workflows for AI tools. Without handoff guidance or high-quality prototypes, AI prototyping is left to explorations and experiments, which are hard to operationalize and scale.

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

In this post, I’ll walk you through three ways to create component libraries that consistently create great mocks; team workflows to reduce rework; and a step-by-step guide on how prototypes should be used. I’ll also give you plenty of time-, token-, and headache-saving tricks for most popular AI prototyping tools. I’ll be including v0, Bolt, Cursor, and Magic Patterns in this post, but these techniques work with any AI prototyping tool.

В этом посте я расскажу о трёх способах создания библиотек компонентов, которые стабильно дают отличные макеты; о командных рабочих процессах для сокращения переделок; и дам пошаговое руководство по использованию прототипов. Также поделюсь множеством приёмов, экономящих время, токены и нервы, для самых популярных инструментов AI-прототипирования. В этом посте я буду использовать v0, Bolt, Cursor и Magic Patterns, но эти техники работают с любым инструментом AI-прототипирования.

To give you a quick example of what’s possible, here’s an Airbnb prototype I built with a single prompt: “Build a homepage and a listing details page.”

Чтобы дать вам краткий пример того, что возможно, вот прототип Airbnb, который я создал одним промптом: «Создай главную страницу и страницу деталей объявления.»

Let’s get started!

Давайте начнём!

Component libraries

Библиотеки компонентов

Component libraries are the first big improvement you can bring to your team. They allow you to maintain branding and consistent styling without having to manually clean up each prototype to look like your product. Building a component library will take some up-front effort, but you’re also building reusable assets that will greatly improve the quality of your prototypes going forward and save you time after the initial investment.

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

There are three different approaches to building component libraries with AI prototyping tools, with different advantages and tradeoffs in effort and output:

Существуют три подхода к созданию библиотек компонентов с помощью инструментов AI-прототипирования, с разными преимуществами и компромиссами по трудозатратам и результату:

СкриншотыРасширения для ChromeКод

Let’s go through each and discuss their tradeoffs.

Давайте разберём каждый и обсудим их компромиссы.

Method 1: Screenshots

Метод 1: Скриншоты

Screenshots are the easiest way to start building a component library. You don’t need any technical expertise, and this approach works with any tool.

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

Start by prompting your favorite AI prototyping tool with the following:

Начните с такого промпта в вашем любимом инструменте AI-прототипирования:

You are tasked with creating a component library based on a screenshot using React, and Tailwind CSS.

Твоя задача — создать библиотеку компонентов на основе скриншота, используя React и Tailwind CSS.

All components should be custom-made to match the screenshot as closely as possible.

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

Follow these instructions carefully:

Внимательно следуй этим инструкциям:

1. Analyze the provided screenshot.

1. Проанализируй предоставленный скриншот.

2. Identify distinct UI components in the screenshot. These may include, but are not limited to, ◦ Buttons ◦ Input fields ◦ Navigation bars ◦ Cards ◦ Modals ◦ Typography elements

2. Определи отдельные UI-компоненты на скриншоте. Это могут быть, помимо прочего: ◦ Кнопки ◦ Поля ввода ◦ Навигационные панели ◦ Карточки ◦ Модальные окна ◦ Элементы типографики

3. For each identified component:

3. Для каждого определённого компонента:

a. Create a React functional component.

a. Создай функциональный компонент React.

b. Use Tailwind CSS classes to style the component, matching the visual design in the screenshot.

b. Используй классы Tailwind CSS для стилизации компонента, воспроизводя визуальный дизайн со скриншота.

c. Ensure the component is responsive and accessible.

c. Убедись, что компонент адаптивный и доступный.

d. Add any necessary props for customization.

d. Добавь необходимые props для кастомизации.

e. Include a brief comment describing the component’s purpose.

e. Добавь краткий комментарий, описывающий назначение компонента.

4. After creating all individual components, create an index page that imports and displays each component with example usage.

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

Remember to use only custom-made components and Tailwind CSS classes. Do not use any external libraries or pre-built components.

Помни: используй только собственные компоненты и классы Tailwind CSS. Не используй внешние библиотеки или готовые компоненты.

Strive to match the visual design in the screenshot as closely as possible while maintaining good coding practices and component reusability.

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

Let’s give this a try with v0, re-creating a Google Calendar UI. Remember to include a screenshot!

Давайте попробуем это с v0, воссоздав интерфейс Google Calendar. Не забудьте приложить скриншот!

Here’s our initial result:

Вот наш первоначальный результат:

One quick note: You may end up with a reproduction of the screenshot instead of a list of components. These AI tools are very tuned to reproduce screenshots, so you may need to push it with one more prompt, like “Instead of showing me a page that re-creates the UI, the index page should be a list of components in the component library.”

From here, you can continue adding more components by pasting in additional screenshots with the prompt “Add these components as well.” If you want to refine the components, I recommend starting with this prompt:

Небольшое замечание: вы можете получить воспроизведение скриншота вместо списка компонентов. Эти AI-инструменты очень хорошо настроены на воспроизведение скриншотов, поэтому вам может понадобиться дополнительный промпт, например: «Вместо страницы, воспроизводящей UI, индексная страница должна быть списком компонентов из библиотеки компонентов.» Далее вы можете продолжать добавлять компоненты, вставляя дополнительные скриншоты с промптом «Добавь также эти компоненты.» Если хотите доработать компоненты, рекомендую начать с такого промпта:

“List the differences between the screenshot and your implementation. How can you match the design more exactly? Don’t code.”

«Перечисли различия между скриншотом и твоей реализацией. Как ты можешь точнее воспроизвести дизайн? Не пиши код.»

This technique (called reflection) makes it easy to leverage the AI to quickly make UX improvements.

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

Once you have your component library complete, pause! You’ll want to create a fork of the project and start to use your components in a new project. Your forked project will automatically reuse your components to assemble your design like Legos. Again, this technique works in any of your favorite AI prototyping tools. (Here’s how to create a fork in each AI prototyping tool: Bolt, v0, Lovable, Replit, Magic Patterns.)

Когда ваша библиотека компонентов готова, остановитесь! Вам нужно создать форк проекта и начать использовать компоненты в новом проекте. Форк автоматически будет переиспользовать ваши компоненты для сборки дизайна, как из Lego. Опять же, эта техника работает в любом из ваших любимых инструментов AI-прототипирования. (Вот как создать форк в каждом инструменте: Bolt, v0, Lovable, Replit, Magic Patterns.)

For example, we can prototype an AI agent in Google Calendar that blocks deep-work slots with a simple prompt like “Create a Google Calendar main page view that has an AI scheduling assistant to recommend deep-work blocks.”

Например, мы можем прототипировать AI-агента в Google Calendar, который блокирует слоты для глубокой работы, простым промптом вроде «Создай основной вид Google Calendar с AI-ассистентом для планирования, который рекомендует блоки для глубокой работы.»

Here’s the result:

Вот результат:

Spending time to improve your components is worth it. Every prototype made using them has better visual quality, is less distracting to stakeholders, and allows conversations to focus on the specific elements that are being tested.

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

Method 2: Chrome extensions

Метод 2: Расширения для Chrome

The next option for creating component libraries is to use Chrome extensions. As of today, Magic Patterns is the only tool that supports extracting components from a webpage directly.

Следующий вариант создания библиотек компонентов — использование расширений для Chrome. На сегодняшний день Magic Patterns — единственный инструмент, поддерживающий извлечение компонентов непосредственно с веб-страницы.

Using the extension is simple: Select a UI element, extract its styling, and turn it into a reusable component.

Использовать расширение просто: выберите UI-элемент, извлеките его стили и превратите в переиспользуемый компонент.

I like to fire off multiple of these extracts at the same time to create as many components as I can in a short period of time. Once they land in Magic Patterns, you can continue to prompt your way through refinements.

Мне нравится запускать несколько таких извлечений одновременно, чтобы создать как можно больше компонентов за короткое время. Как только они попадают в Magic Patterns, вы можете продолжать дорабатывать их с помощью промптов.

The real magic comes in using these components. Let’s try the prompt “Build me a channel view of YouTube.”

Настоящая магия начинается при использовании этих компонентов. Давайте попробуем промпт «Создай мне вид канала YouTube.»

Here’s the result from a single prompt:

Вот результат одного промпта:

Method 3: Code

Метод 3: Код

The last way to build a component library is with code, using your real components. This approach requires the most effort but will provide you with prototypes that are indistinguishable from your real product. You’ll need assistance from engineering, and the overall effort and complexity will depend on your codebase and company size. This option is most realistic in smaller companies or those with more technical designers and PMs.

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

To start, your engineering team will need to set up the repository so you can run the front-end application locally without having to connect to any back-end services or databases. This can be accomplished by creating a new entry point for the client-side app that mocks up the API responses. Once you have your local environment running, you can use an AI code editor like Cursor or Windsurf to prototype.

Для начала вашей инженерной команде нужно настроить репозиторий так, чтобы вы могли запускать фронтенд-приложение локально без подключения к бэкенд-сервисам или базам данных. Этого можно добиться, создав новую точку входа для клиентского приложения, которая мокирует ответы API. Когда локальное окружение заработает, вы сможете использовать AI-редактор кода вроде Cursor или Windsurf для прототипирования.

Here’s an example of an app I’m working on. All of the information you see is mocked up client-side, with no servers or databases connected.

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

This approach works best if you’re comfortable with GitHub, branches, and running basic terminal commands.

Этот подход лучше всего работает, если вы знакомы с GitHub, ветками и базовыми командами терминала.

Another way to leverage code to get more accurate components is with the new Figma MCP server (which just launched last week!). In case you’re unfamiliar, MCP is a protocol that allows AI agents to retrieve information or take actions in another application. In this case, we can use the Cursor agent to make calls to Figma’s MCP server to retrieve detailed styling information, and then transform that into components.

Ещё один способ использовать код для получения более точных компонентов — новый MCP-сервер Figma (который запустился буквально на прошлой неделе!). Если вы не знакомы с MCP — это протокол, позволяющий AI-агентам получать информацию или выполнять действия в другом приложении. В данном случае мы можем использовать агент Cursor для обращения к MCP-серверу Figma, чтобы получить детальную информацию о стилях и затем преобразовать её в компоненты.

Figma currently supports four MCP actions:

В настоящее время Figma поддерживает четыре MCP-действия:

Get CodeGet Variable DefinitionsGet ImageGet Code Connect

This effectively gives Cursor the ability to autonomously take screenshots, extract design tokens, and get CSS from Figma’s Dev Mode.

Фактически это даёт Cursor возможность автономно делать скриншоты, извлекать дизайн-токены и получать CSS из Dev Mode Figma.

Here’s a quick side-by-side of a Figma design library and the same components reproduced in code.

Вот быстрое сравнение дизайн-библиотеки Figma и тех же компонентов, воспроизведённых в коде.

Figma:

Figma:

Code:

Код:

Here are the steps to build your components using Figma MCP:

Вот шаги для создания компонентов с помощью Figma MCP:

Включите MCP-сервер Figma для дизайна, с которым хотите работать (Preferences, затем Enable Dev Mode Server). Это даст вам URL для подключения.В Cursor перейдите в Settings, MCP Tools и нажмите «Add a new MCP server». Вставьте URL, предоставленный Figma.Скопируйте URL компонента из Figma, кликнув правой кнопкой и выбрав «Copy as URL».Попросите Cursor сгенерировать это как компонент и сделать индексную страницу списком компонентов.

So far, I’ve found this works best if you have existing components Cursor can mimic, or provide clear instructions for how the code should be formatted.

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

This option is very new but also very exciting for design teams who want to leverage their existing component libraries with AI prototyping tools.

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

To summarize, component libraries give your team a set of shared artifacts that make it easy for anyone to create realistic prototypes with AI. Your component library can be shared across your entire team, making it easy to onboard new team members and maintain high-quality visuals for testing directly with customers or in meetings with senior stakeholders.

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

Team workflows

Командные рабочие процессы

Now that you have components to help you create realistic prototypes in a flash, let’s talk about team workflows. There are two workflows I want to cover:

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

Базовые версии и форкиЖизненный цикл разработки продукта

Workflow 1: Baselines and forks

Рабочий процесс 1: Базовые версии и форки

Baselines and forks are an extension of the component libraries strategy. With components, you’re giving team members a head start by providing building blocks they can easily assemble into good-looking prototypes. “Baselines” go one step further, giving you a high-quality reproduction of your current product experience, allowing your team members to more easily experiment with new ideas using simple prompts. Forks build on this further, allowing you to duplicate a project and all of its contents without using any tokens, and keep you from screwing up your baseline.

Базовые версии и форки — это расширение стратегии библиотек компонентов. С компонентами вы даёте участникам команды фору, предоставляя строительные блоки, которые легко собрать в красивые прототипы. «Базовые версии» идут на шаг дальше, давая вам качественное воспроизведение текущего пользовательского опыта, что позволяет участникам команды легче экспериментировать с новыми идеями с помощью простых промптов. Форки развивают эту идею дальше, позволяя дублировать проект со всем содержимым без использования токенов и защищая базовую версию от случайных изменений.

This is best explained with an example.

Лучше всего объяснить это на примере.

Let’s say I’m the PM at Airbnb working on the new Experiences product. This is a product that features the most unique and interesting experiences around the world. Using baselines and forks, I’ll start by reproducing the current page and then explore a few new ideas.

Допустим, я продакт-менеджер в Airbnb, работающий над новым продуктом Experiences. Это продукт, демонстрирующий самые уникальные и интересные впечатления по всему миру. Используя базовые версии и форки, я начну с воспроизведения текущей страницы, а затем исследую несколько новых идей.

Creating the initial page with my component library took me about 20 minutes, mostly ironing out all the little details to make the prototype really look like Airbnb (see my previous guide for advice on fine-tuning your prototypes). Here’s how it looks:

Создание начальной страницы с моей библиотекой компонентов заняло около 20 минут — в основном на доводку мелких деталей, чтобы прототип действительно выглядел как Airbnb (см. моё предыдущее руководство с советами по тонкой настройке прототипов). Вот как это выглядит:

By the way, here’s the real site:

Кстати, вот реальный сайт:

Now that I have this page, I’ll treat it as my “baseline.” I won’t make any more changes and instead create a fork.

Теперь, когда у меня есть эта страница, я буду считать её своей «базовой версией». Я больше не буду вносить изменения, а вместо этого создам форк.

On the fork, I’ll enter a single prompt: “Modify this page so that it runs through a questionnaire to determine experiences that I would like before showing me experiences. Maintain the Airbnb branding.”

Here’s the result:

На форке я введу один промпт: «Измени эту страницу так, чтобы перед показом впечатлений она проводила опрос для определения предпочтений пользователя. Сохрани брендинг Airbnb.» Вот результат:

Now let’s test another idea: using the customer’s past travel history to suggest relevant experiences.

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

Again, I create a fork from the baseline. On the new copy, I prompt, “Modify this page so it shows me experiences I would like based on my past travel history with Airbnb. For each recommendation, add a UI element that says ‘based on your trip to. . .”

Снова создаю форк от базовой версии. В новой копии ввожу промпт: «Измени эту страницу так, чтобы она показывала впечатления, которые мне понравятся, на основе моей истории путешествий с Airbnb. Для каждой рекомендации добавь UI-элемент с текстом «на основе вашей поездки в...»»

Here’s the result:

Вот результат:

Baselines and forks are best used when you want to explore multiple different ideas without having to rebuild the starting page each time. They provide your team with another leg up in getting high-quality results quickly when using AI prototyping tools.

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

Workflow 2: Product development lifecycle

Рабочий процесс 2: Жизненный цикл разработки продукта

If you implement everything we’ve covered so far, you’ll be dramatically ahead of the average AI prototyping noob. But it’s very possible that your PMs or designers will still prototype in isolation. Creating a shared understanding for your team for when to use AI prototypes is just as important as knowing how to get good results.

Если вы реализуете всё, что мы рассмотрели до сих пор, вы будете значительно впереди среднестатистического новичка в AI-прототипировании. Но вполне возможно, что ваши продакт-менеджеры или дизайнеры всё ещё будут прототипировать в изоляции. Создание общего понимания в команде о том, когда использовать AI-прототипы, так же важно, как и умение получать хорошие результаты.

Before we get into the product development lifecycle, I want to briefly touch on fidelity. For a long time, we’ve had low-fidelity scratch-pad versions of UIs, and high-fidelity mocks for the polished finished product. AI prototyping introduces medium fidelity—better than a napkin drawing but still not as good as your finalized Figma mocks.

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

Here’s an example of a mid-fi mock of Reddit. At first glance, it seems correct, but you’ll notice lots of imperfections, like two buttons for upvoting, too much padding on the left navigation, and the top right navigation items being pushed in too far from the right edge.

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

You can also definitely create high-fi mocks with AI prototyping tools—the key is how much time and effort you put into them.

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

It’s critically important to choose the appropriate fidelity for your prototype based on the context, and then set clear expectations with team members around that level of fidelity. For example, if you’re explaining an interaction to an engineer, mid-fi is totally fine, and it’s a waste of time to push past that. Whereas if you’re pitching your CEO on funding a new team that will require millions in new investment, a functional high-fi mock is probably worth the time.

Критически важно выбирать подходящий уровень детализации прототипа в зависимости от контекста и затем чётко устанавливать ожидания с членами команды относительно этого уровня. Например, если вы объясняете взаимодействие инженеру, средняя детализация вполне подойдёт, и нет смысла тратить время на большее. Тогда как если вы убеждаете CEO выделить финансирование для новой команды, требующей миллионных инвестиций, функциональный высокодетализированный макет, вероятно, стоит потраченного времени.

Below, I’ve outlined the six main steps in the product development lifecycle and how prototypes can be leveraged, as well as what fidelity they should be and who is responsible for the prototype. I encourage you to take this as general guidance and apply what makes sense in your own company.

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

Let’s walk through an example of the full development lifecycle for a new feature at Reddit called Reddit Answers. This will be a gen AI feature that allows users to ask questions and get quick answers based on past Reddit posts and comments.

Давайте разберём пример полного жизненного цикла разработки новой функции Reddit под названием Reddit Answers. Это будет функция на основе генеративного AI, которая позволяет пользователям задавать вопросы и получать быстрые ответы на основе прошлых постов и комментариев Reddit.

Step 1: Discovery

Шаг 1: Исследование

Starting in Discovery, you may choose to use an AI prototyping tool to quickly express an idea in medium fidelity. This is typically used only internally, and may just be between product, design, and your engineering lead. We might start out with something like this, which should take only about 20 minutes:

Начиная с этапа исследования, вы можете использовать инструмент AI-прототипирования для быстрого выражения идеи со средним уровнем детализации. Обычно это используется только внутри компании и может ограничиваться обсуждением между продуктом, дизайном и ведущим инженером. Мы можем начать с чего-то подобного, что займёт около 20 минут:

This post is for paid subscribers

Этот пост доступен только платным подписчикам