(2025-01-07) A Guide To Ai Prototyping For Product Managers

Colin Matthews: A guide to AI prototyping for product managers (vibe prototyping). tools like Cursor, Replit Agent, v0, Bolt, and other new cutting-edge AI tools that allow you to build working apps in minutes

*Choosing your tooling
Current AI development tools come in three types:

• Chatbots (e.g. Claude, ChatGPT): The AI tools you probably know, which can also write and explain basic code
• Cloud development environments (e.g. Replit, Bolt, v0, Lovable): Full-stack platforms that can build and run your apps in the cloud
• Local developer assistants (e.g. GitHub Copliot, Cursor, Windsurf, Zed): Development environments (i.e. IDEs) that help you write code with the help of AI

Let’s review the most popular tools in each category

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.

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.

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

One of the key differentiators among the various cloud development environments is hosting

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

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.

*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.*

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.

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

generate and apply changes within your own codebase and development environment (IDE).

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

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:

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.

“Build a prototype to match this design. Match it exactly.”

Next, we’ll add our new price filter feature. Notice in the prompt below how I describe every feature in detail

Building a prototype from scratch

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.

“Please implement a mock AI email writer. This should be accessible from the left nav.”

Now we can take our prototype and get customers’ direct feedback without wasting time developing an initial version.

Common use cases and prompt templates

Task #1: Build a prototype from an existing Figma design
Prompt:
Build a prototype to match this design. Match it exactly. Use Tailwindcss.