This post will transform how you build products, come up with new ideas, and operate as a PM by using Artificial Intelligence.
Whether you’re already using AI tools or just getting started, you’ll learn which tools to pay attention to, which tool to use when, and how to resolve issues. You’ll find battle-tested prompts, real-world examples, and a step-by-step guide you can put into practice immediately. Imagine turning Figma designs into a working app or your PRD into a working prototype in minutes. This is all possible, and you’ll learn how in this beginner’s guide to AI in product management.
AI Prototyping Tools: A beginner’s guide to AI in product management
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 10 minutes to build this 2-D tank game (with an AI opponent included), merely using this series of prompts:
- “Build a 2d tank game with an AI opponent.”
- “Add collision for the shot when it hits a tank.”
- “When health hits zero, play an animation and reset the game.”
- “Improve the acceleration for player movement.”
- “Make it so holding down the space bar has a timer to shoot a 2nd time.”
- “Add power ups to the map.”
AI-Generated Tank Game: An example of a simple game created with AI prompts.
You can use these AI product management 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. This guide covers the basics of AI prototyping, shows how to get good results from the most popular tools, and walks through an end-to-end example of building a prototype in less than 10 minutes.
Choosing Your Tooling
Current AI development tools come in three types:
Types of AI Development Tools: A comparison of chatbots, cloud development environments, and local developer assistants.
Let’s review the most popular tools in each category to see what they can do and what we can build as product managers.
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:
React Calculator with ChatGPT: An example of code generated by ChatGPT for a simple calculator.
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.
Claude’s Artifact System: Running code within Claude’s interface and deploying with a shareable link.
Chatbots can write code for any part of the 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. 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.”
Basic CRM built with v0: Example of a CRM prototype generated using v0.
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.”
Basic CRM built with Bolt: Example of a CRM prototype generated using Bolt.
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.”
Basic CRM built with Replit: Example of a CRM prototype generated using Replit.
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.”
Basic CRM built with Lovable: Example of a CRM prototype generated using Lovable.
To recap:
- Choose v0 for beautiful designs by default
- Choose Bolt for quick prototypes with flexible designs
- Choose Replit for internal tools or products that store or transform data
- Choose Lovable for building production apps that benefit from integrations with your current tools
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.
Presentation App Build with Lovable and Cursor: Example of a live Q&A and polls application.
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.
Cursor’s Code Debugging Capabilities: Demonstrating Cursor’s capabilities in fixing bugs.
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 Prototype
Now 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 an existing design to a functional prototype
- Building an idea into a prototype from scratch
Converting a Design to a Functional Prototype
Let’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:
Airbnb’s Homepage Design: An example of a design that can be converted into a functional prototype.
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:
Bolt Prototype from Design: Building a prototype from a pre-existing design using 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.”
Adding Price Filter to Bolt Prototype: Implementing an inline price filter within the search bar.
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.”
Adding Price Slider: Implementing a price slider for the minimum price in the filter.
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 Scratch
If 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.”
Creating a CRM with Bolt: Quickly setting up a CRM system using AI prompts.
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.”
](https://substackcdn.com/image/fetch/w_424)](https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc61c29eb-4947-43af-a4c6-70497f745483_1080x641.gif)
Adding AI Email Writer to CRM: Implementing a mock AI email writer feature in the CRM prototype.
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:
CRM Built with v0: A CRM prototype created from scratch using v0 and AI prompts.
Common Use Cases and Prompt Templates
Here 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 design
Prompt:
Build a prototype to match this design. Match it exactly. Use Tailwindcss.
Match styles, fonts, spacing, and colors.
[Include a single screenshot from Figma]
Tool: Bolt
Example: Deployment manager
