A guide to AI prototyping for product managersHow to turn your idea into a working prototype in minutes
👋 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: Lennybot | Podcast | Hire your next product leader | My favorite Maven courses | Swag This post will transform how you build products, come up with new ideas, and operate as a PM. Whether you’re already deep into AI tools or just getting started, you’ll learn what tools you should be paying attention to, which tool to use when, and how to get unstuck when you run into an issue. You’ll find a collection of battle-tested prompts, real-world examples, and a step-by-step guide you can put into practice immediately. Imagine being able to turn Figma designs into a working app with a few clicks, or turn your PRD into a working prototype in minutes. This is all possible, and you’ll learn how. Colin Matthews was a longtime PM and now teaches my favorite AI prototyping course: AI Prototyping for Product Managers. He also wrote my 9th most popular post of all time (Become a more technical product manager). I absolutely love how simply and clearly Colin is able to explain complex topics, and I personally learned so much from this post on AI prototyping. I’m confident you will too. If you’d like to learn more, Colin is teaching a free 30-minute lightning lesson on January 14th where he’ll show you how to build a functional prototype in 10 minutes (including a few advanced techniques). Sign up here. For much more hands-on learning, sign up for Colin’s live four-week cohort-based course on AI prototyping, where you’ll master AI prototyping tools, debug common issues, and build a fundamental understanding of how coding works. Use code “LENNYSLIST” to get $100 off. Enrollment closes January 23rd.
If you haven’t been paying close attention over the past six months, you may have missed the rise of tools like Cursor, Replit Agent, v0, Bolt, and other new cutting-edge AI tools that allow you to build working apps in minutes. For example, it took me 10 minutes to build this 2-D tank game (with an AI opponent included), merely using this series of prompts:
Pretty cool. But what’s cooler is that you can use these tools to build functional prototypes from a Figma design, convert a rough hand-drawn sketch to a working app, translate a PRD document into an interactive prototype, or even build a usable internal tool for your team, with no coding ability. In this post, I’ll cover the basics of AI prototyping, show how to get good results out of the most popular tools, and walk through an end-to-end example of building a prototype in less than 10 minutes. Choosing your toolingCurrent AI development tools come in three types:
Let’s review the most popular tools in each category to see what they can do and what we can build. Chatbots (ChatGPT, Claude)Best for: Prototypes that are just one page and don’t have complex design requirements, like calculators, flip cards, or data visualizations Chatbots are capable of writing code in response to a question or prompt. A prompt like “Build me a calculator with React” results in the following:  If you want to run this code, ChatGPT requires you to copy and paste the code into your IDE and run it on your own computer. Claude goes one step beyond ChatGPT’s abilities with their Artifact system. Artifacts allow you to run the code within Claude’s interface and deploy to a shareable link. An unfortunate limitation is that you can’t make any direct edits to the code, so you’re entirely reliant on using prompts to make code changes.
(Perplexity is another tool you’ve probably heard of, which feels similar to chatbots but is more focused on search and not as useful for creating apps. It can write basic code because it’s built on top of other AI models like ChatGPT and Claude, but I wouldn’t recommend it for this use case.) Remember that chatbots can write code for any part of our stack (client, server, database) but can’t host your code (deploy) for us. They also can’t create complex prototypes with multiple pages, and it’s difficult to change the code directly. As a result, these tools are best used for very simple one-time prototypes—which sometimes is enough to get the job done. Think of chatbots when you’re looking to create a very simple landing page, individual inputs like a date picker, or small apps like a to-do list. Cloud development environments (Replit, Bolt, v0, Lovable)Best for: Prototypes with more than one feature, specific design requirements, or many pages Cloud development environments are one big step up from chatbots. These tools handle all the tasks required to turn your ideas into an actual working product. They can help you build end-to-end features, handle the backend infrastructure necessary to run your prototype, allow multi-file edits with agentic workflows, and take on more complex tasks across your codebase such as updating your database schema. One of the key differentiators among the various cloud development environments is hosting. As I explained in my prior post on becoming a more technical PM, every software product is built with three parts: a client, a server, and a database. The client is what the user interacts with (often written in JavaScript), the server processes requests from the client to retrieve data or integrate with other products (often written in Node.js, Python, or Java), and the database is your permanent storage of data. Making prototypes that have real features requires you to host both your client and server code, and may require a database to power the app. One of the most popular tools today, v0, is capable of writing and hosting both client and server code. By default it uses specific frameworks called Next.js and Shadcn UI to do so (both were created by Vercel, the same company that owns v0). v0 can deploy your code and run backend servers—plus, one of its strongest features is that it has great styling as a default. Here’s a basic CRM I built in v0 with the prompt “Build me a basic CRM.”
Bolt is very similar to v0 in that it can also generate and deploy both client and server code. But a key difference is where the server runs. With v0, you deploy to real cloud hosting infrastructure, whereas Bolt runs the server code directly in the user’s browser. This means Bolt cannot natively support prototypes that need user identity like logins or accounts, multi-user interactions such as chat or collaborative workspaces, secure data operations like payment processing, or persistent data storage between sessions, because an isolated copy of the server is created on each user’s device. You can make up for this by integrating with external products like Supabase that offer servers and databases. Here’s a basic CRM I built with Bolt, using the prompt “Build me a basic CRM.”
Another popular tool is Replit. Replit allows you to build full-stack applications, including a client, server, and database. It can build web apps using both JavaScript and Python frameworks and particularly excels at building internal admin tools (e.g. file conversion, job applicant tracking) and data-driven applications (e.g. image resizing, multi-page dashboards) with simple UIs. I use Replit whenever I need a fully functional back end or I want to use Python code. I’ve used it to build an MP4-to-GIF converter and a Substack image resizer—both tools I use weekly. Here’s a basic CRM I built with Replit, using the prompt “Build me a basic CRM.”
Finally, we have Lovable. It’s the newest of the bunch. Lovable is most similar to v0 and Bolt—it excels at generating websites, and uses JavaScript frameworks like React and Next.js. Its differentiation comes from its integrations with other popular tools. Lovable can connect to a GitHub repository, automatically add authentication and databases with Supabase, and help you connect to AI providers like Anthropic and OpenAI. All of these features make it one of the best AI coding tools for building products you actually want to use in production. One major drawback of Lovable is the lack of a code editor. To edit code, you have to ask the agent with prompting. This can make it difficult to debug issues directly in Lovable. I often find myself starting a new feature here but moving over to Cursor to resolve problems. Here’s a basic CRM I built with Lovable, using the prompt “Build me a basic CRM.”
To recap:
Regardless of your choice, cloud development environments all support building more complex applications than chatbots, with the ability to deploy to the cloud and easily share updated iterations over time. Local developer assistants (GitHub Copilot, Cursor, Windsurf, Zed)Best for: People who know how to code and are working on serious applications they want to ship to production The final type of AI development tool is local developer assistants. These products are targeted toward people who know how to write code. Tools like Cursor and GitHub Copilot can take prompts in a similar fashion to Claude but can then generate and apply changes within your own codebase and development environment (IDE). These tools do more than autocomplete—they can now write most of your code just using prompts.  For example, I built this presentation app (with live Q&A and polls!) in about 10 days using Lovable and Cursor. I started the app in Lovable to build basic features quickly, synced my code to GitHub to allow editing in other tools, and made final changes and fixed bugs with Cursor. This application uses authentication, databases, real-time updates, and more. Ten days may sound like a lot, but most of that time was spent resolving bugs and troubleshooting issues—something Cursor excels at compared with other tools, and something I get into a couple of sections down.
GitHub Copilot is more popular in enterprise environments, as it comes from a trusted vendor, Microsoft. It supports multi-file changes from prompts, code explanations, and more. I’ve found it works best when given very specific direction and does not perform as well as Cursor at more general instructions. For example, when I asked for a new feature without providing context, Copilot re-created components of my app that already existed, whereas Cursor modified my existing files directly. Two tools I haven’t spent as much time with but people are excited about are Windsurf and Zed. Windsurf is another IDE that can suggest multi-line changes to files and suggest commands such as moving files on your behalf. It excels at working on larger, more complex codebases. Zed is a highly performant editor built with a variety of productivity features such as prompt libraries, slash commands, and keyboard shortcuts for common actions like applying AI-generated code. Building your prototypeNow that we’re familiar with the basic tools, let’s build some prototypes. The two most common prototyping use cases for product managers are:
Converting a design to a functional prototypeLet’s turn the following design for Airbnb’s home page into a working prototype. Say you want to use this prototype to explore a new feature, such as a price filter. Here’s our initial design:
I chose Bolt for this task, as it’s better at building off a pre-existing design and we don’t need the backend database provided by Replit. Here’s a prompt I used (which you can copy and paste). Make sure to include a screenshot of the design! “Build a prototype to match this design. Match it exactly.” Here’s how this experience looks in Bolt:
Next, we’ll add our new price filter feature. Notice in the prompt below how I describe every feature in detail. One pro tip with prompting these tools is to be hyperspecific when describing changes for your subsequent prompts, as it helps the AI pinpoint what should change. “Implement an inline price filter as a component of the search bar. It should appear next to ‘Add guests’ in its own section. Selecting the input should pop up a price filter with minimum and maximum values. The background of the pop-up should be white and should cover elements beneath it.”  This is a great starting point. Let’s extend this feature with a slider for the minimum price. “Can you add a price slider? It should have a blue line and a black node. Sliding the node should modify the minimum price.”
We now have a functional initial prototype of your product idea within 10 minutes! Without any coding skill. Incredible. We could even continue to improve this prototype filter (e.g. showing listings updated in real time as you adjust the price). Check out the prototype here. Building a prototype from scratchIf you’re like me, your design skills are probably not good enough to create the initial design we used in the prior example. Luckily, you can build a prototype using existing patterns and components from free and publicly available design systems like Tailwind or Shadcn UI. Let’s build a quick CRM with Bolt, then add a new feature to it. Let’s say we’re considering adding a feature that automates email outreach directly from our CRM and want to gather customer feedback about this feature before building it, by showing potential users a prototype of what it might look like. We can quickly put together a v1 with the following prompts: “Create a comprehensive customer relationship management (CRM) system.”
Again, let’s take a moment to pause here. We just created a working prototype of a CRM in less than five minutes—something that would have previously taken weeks of an engineer’s time. Unbelievable. Let’s keep going and see how we add a new feature. “Please implement a mock AI email writer. This should be accessible from the left nav.”
Again, less than five minutes to be able to play with a new feature idea. Just think about how many ideas you can explore and how quickly you can bring them to market. AI prototyping tools have been available for less than six months and have already absolutely changed the speed at which teams can ship. Now we can take our prototype and get customers’ direct feedback without wasting time developing an initial version. This approach can speed up your discovery process by getting interactive examples in your customers’ hands as early as possible. Each AI tool will have very different outcomes based on their default settings and how specific you are. Here’s the exact same example with the same prompts using v0:
Common use cases and prompt templatesHere are a few good templates you can use to get started with each of the tools I’ve highlighted: Task #1: Build a prototype from an existing Figma designPrompt:
Tool: Bolt Example: Deployment manager... Subscribe to Lenny's Newsletter to unlock the rest.Become a paying subscriber of Lenny's Newsletter to get access to this post and other subscriber-only content. A subscription gets you:
|
A guide to AI prototyping for product managers
Subscribe to:
Post Comments (Atom)
Bug management that works (Part 2)
Making time for bug fixing, dedicated ‘goalies’, preventing bugs, and how to create a culture quality-focused culture which minimizes them ͏...
No comments:
Post a Comment