From "What If" to "Here's How": AI for Practical Product Prototyping

That moment when an idea sparks – a brilliant new product feature, a game-changing app concept? I've been there countless times. I remember one Friday afternoon, scribbling furiously on a whiteboard, convinced I had the next big thing. By Monday, the sheer scale of building it from scratch had deflated my enthusiasm. Most of the time, those ideas stay trapped in our heads or on a whiteboard. We dream about what could be, but turning that "what if" into a "here's how" used to mean weeks, even months, of development.

What if I told you that you could bridge that gap in a matter of minutes? Seriously. Not just a static mockup, but a functional, clickable prototype that lets you actually see and interact with your idea. That's the magic AI prototyping tools are pulling off for product managers right now.

I've been using these tools for a while, and they've completely changed how I approach building products, sparking new ideas, and frankly, how I operate as a PM. Whether you’re already dabbling in AI or just getting your feet wet, you’re about to discover a whole new world. This post will transform how you build products, come up with new ideas, and operate as a PM!

Think Tanks: Building a 2D Game in 10 Minutes

If you haven't been keeping a close eye on the AI space lately (it moves fast!), you might've missed the explosion of tools like Cursor, Replit Agent, v0, Bolt, and Lovable. These cutting-edge AI powerhouses let you build actual working apps in minutes. Imagine this: I built a 2D tank game with an AI opponent in just 10 minutes, using simple prompts like:

• "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."

Pretty wild, right? But here’s the really cool part: you can use these same tools to turn a Figma design into a live prototype, transform a rough sketch into a working app, convert a PRD into an interactive experience, or even build a handy internal tool for your team – all without writing a single line of code. In this post, I’ll walk you through the basics of AI prototyping, show you how to get killer results from the most popular tools, and guide you through an end-to-end example of building a prototype in less than 10 minutes.

Picking Your AI Playground

Think of current AI development tools as falling into three main types. Each has its strengths, depending on what you’re trying to build:

• Chatbots (e.g., Claude, ChatGPT): Your go-to for simple, single-page prototypes like calculators or quick data visualizations.

• Cloud Development Environments (e.g., Replit, Bolt, v0, Lovable): Perfect for prototypes with multiple features, specific design needs, or lots of pages.

• Local Developer Assistants (e.g., GitHub Copilot, Cursor, Windsurf, Zed): These are for the folks who do code and are building serious applications ready for prime time.

Let’s break down the popular ones in each category to see what they can do and what kind of cool stuff we can cook up.

Chatbots (ChatGPT, Claude)

Best for: Prototypes that are just one page and don’t need super complex design, like a quick calculator, a flip card, or a simple data visualization.

Chatbots are pretty clever at spitting out code based on your questions. For instance, ask it to "Build me a calculator with React,” and boom, you get code.

Now, with ChatGPT, you’d need to copy that code and run it in your own development environment. Claude, though, takes it up a notch with their Artifact system. You can actually run the code right inside Claude’s interface and even get a shareable link. The only catch? You can't directly edit the code there; you have to rely on prompts to make any changes.

(A quick note on Perplexity: It’s awesome for search, but not really your best bet for building apps, even though it can generate basic code using other AI models. Stick to ChatGPT or Claude for code generation.)

Remember, chatbots can write code for any part of your app (client, server, database), but they won't host it for you. And they’re not great for complex, multi-page prototypes or direct code editing. So, think of chatbots for those super simple, one-off prototypes – sometimes, that's all you need! A basic landing page, a date picker, or a to-do list, for example.

Cloud Development Environments (Replit, Bolt, v0, Lovable)

Best for: Prototypes with more than one feature, specific design requirements, or multiple pages.

These tools are a huge leap from chatbots. They handle the heavy lifting of turning your ideas into working products. We’re talking end-to-end features, backend infrastructure, multi-file edits with intelligent agents, and even more complex tasks like updating your database. It’s like having a mini dev team at your fingertips.

One big thing that sets these environments apart is how they handle hosting. As I’ve explained before, every software product has three main parts: the client (what the user sees, usually JavaScript), the server (processes requests, often Node.js, Python, or Java), and the database (where your data lives). To build prototypes with real features, you need to host both your client and server code, and sometimes a database.

Let’s look at some popular ones:

• v0: Super popular right now. It can write and host both client and server code, using frameworks like Next.js and Shadcn UI (both from Vercel, v0’s parent company). It deploys your code and runs backend servers, and a huge plus is its beautiful default styling. I whipped up a basic CRM in v0 with the prompt "Build me a basic CRM," and it looked fantastic.

• Bolt: Similar to v0, it generates and deploys client and server code. The key difference? Bolt runs the server code directly in your browser. This means it can’t natively support prototypes needing user logins, multi-user interactions, secure payment processing, or persistent data storage, because each user gets an isolated copy of the server. You can get around this by integrating with external tools like Supabase for servers and databases.

• Replit: This is my go-to for full-stack apps with a client, server, and database. It’s great for web apps using JavaScript or Python frameworks, and it shines for internal admin tools (think file converters or job trackers) and data-driven apps with simple UIs. I use Replit when I need a fully functional backend or want to use Python. I’ve even built an MP4-to-GIF converter and a Substack image resizer here – tools I use weekly!

• Lovable: The new kid on the block, very much like v0 and Bolt, excelling at generating websites with JavaScript frameworks like React and Next.js. Lovable's superpower is its integrations: GitHub, Supabase for authentication and databases, and connections to AI providers like Anthropic and OpenAI. This makes it a serious contender for building production-ready apps.

One minor snag with Lovable is it lacks a direct code editor. You have to prompt the AI to make edits, which can be tricky for debugging. I often start a feature there, but then hop over to Cursor if I hit a wall.

To quickly recap these:

• Choose v0 for gorgeous designs right out of the box.

• Choose Bolt for quick prototypes with flexible design options.

• Choose Replit when you need internal tools or apps that store or transform data.

• Choose Lovable for production apps that play nicely with your existing tool stack.

No matter which one you pick, these cloud development environments let you build way more complex applications than chatbots, easily deploy to the cloud, and share iterations with ease.

Local Developer Assistants (GitHub Copilot, Cursor, Windsurf, Zed)

Best for: Folks who already know how to code and are building serious applications they plan to ship.

These tools are tailored for developers. Think of Cursor and GitHub Copilot as super-smart coding buddies. You give them prompts, and they generate and apply changes directly within your own codebase and development environment (IDE). They do way more than just autocomplete; they can write most of your code with just a few instructions.

For example, I built a presentation app (with live Q&A and polls!) in about 10 days using Lovable and Cursor. I kicked off the basic features in Lovable, then synced the code to GitHub so I could refine it in other tools, making final tweaks and bug fixes with Cursor. This app handles authentication, databases, real-time updates—the works!

Ten days might sound like a lot, but most of that time was spent squashing bugs and troubleshooting, which is where Cursor really shines compared to other tools.

GitHub Copilot is often favored in bigger companies because it comes from Microsoft, a trusted vendor. It handles multi-file changes and code explanations well. I’ve found it works best when you give it very specific instructions. If I gave it a general request for a new feature without much context, Copilot would sometimes re-create existing parts of my app, whereas Cursor would intelligently modify my current files.

I haven't spent as much time with Windsurf and Zed, but they’re generating a lot of buzz. Windsurf is another IDE that excels with larger, more complex codebases, suggesting multi-line changes and even moving files for you. Zed is known for being super fast, packed with productivity features like prompt libraries and handy keyboard shortcuts for applying AI-generated code.

Let's Build a Prototype!

Now that you know the players, let’s get our hands dirty and build some prototypes. As a product manager, you'll typically use these for two main things:

1. Turning an existing design into a functional prototype.

2. Building a new idea into a prototype from scratch.

From Design to Done: Converting a Figma Design

Imagine you’ve got a polished Figma design for Airbnb’s homepage. You want to explore a new feature – say, a price filter – and need a working prototype to show it off.

Here’s our starting point:

[Imagine an Airbnb homepage design here]

I’d grab Bolt for this, since it’s great at building from existing designs, and we don’t need a backend database for this particular flow. Here’s a prompt I’d use (and you can seriously copy-paste this), making sure to include a screenshot of your design:

Build a prototype to match this design. Match it exactly. Use Tailwindcss.
Match styles, fonts, spacing, and colors.
[Include a single screenshot from Figma]

Bolt will then do its thing. Next up, let’s add our new price filter. This is where being super specific in your prompts helps the AI zero in on exactly what you want changed:

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

Boom! Great start. Now, let’s refine it 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

And just like that, in less than 10 minutes, you have a functional prototype of your product idea – without writing a single line of code! Incredible, right? We could even keep refining this filter, maybe showing live listing updates as you adjust the price.

From Scratch: Building a Prototype Idea

If your design skills are, well, like mine (let’s just say “developing”), you can totally build a prototype using existing design patterns and components from free libraries like Tailwind or Shadcn UI.

Let’s say we want to build a quick CRM and then add a new email automation feature. We’re thinking about letting users send emails directly from the CRM and want to get early customer feedback before we build it for real. A prototype is perfect for this!

Here’s how we’d put together a v1 with Bolt:

Create a comprehensive customer relationship management (CRM) system

Seriously, take a moment. You just created a working CRM prototype in under five minutes—something that used to take weeks of engineering time. It’s mind-blowing.

Now, for that new feature:

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

Again, under five minutes, and you’re playing with a new feature idea. Just imagine how many ideas you can explore and how fast you can bring them to market now. AI prototyping tools are brand new, yet they’ve already completely reshaped how quickly teams can ship.

Now you can take this prototype, get direct customer feedback, and validate your idea without wasting precious development time. This approach lets you accelerate your discovery process by getting interactive examples into your customers’ hands as early as possible.

It’s worth noting that each AI tool will give you slightly different results based on its default settings and how specific you are. Here’s that same CRM example, using the exact same prompts, but done in v0:

[Imagine a v0 CRM prototype here]

Your Go-To Prompts for Success

Here are some battle-tested prompt templates you can use to kickstart your prototyping journey with the tools we’ve discussed:

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

Task #2: Generate a simple, interactive component

Prompt:

Build me a [component name] with [framework, e.g., React]

Tool: ChatGPT / Claude

Example: "Build me a calculator with React."

Task #3: Build a full-stack internal tool

Prompt:

Create an internal tool for [purpose, e.g., tracking job applicants]. Include [specific features, e.g., filters, search, data entry form]

Tool: Replit

Example: "Create an internal tool for tracking job applicants. Include filters for status, a search bar, and a form for adding new applicants."

Task #4: Generate a multi-page web application

Prompt:

Build a multi-page web application using [framework, e.g., Next.js and Shadcn UI] for [purpose, e.g., a basic CRM]. Include pages for [list pages, e.g., contacts, companies, deals]

Tool: v0 / Lovable / Bolt

Example: "Build a multi-page web application using Next.js and Shadcn UI for a basic CRM. Include pages for contacts, companies, and deals."

Task #5: Refine existing code or add a new feature (for developers)

Prompt:

Refactor this [function/component] to improve [efficiency/readability/performance].
[Paste code here]

Or:

Add a new feature: [describe feature in detail]. It should [explain functionality and placement]

Tool: Cursor / GitHub Copilot

Example: "Refactor this calculateTotal function to be more efficient when dealing with large arrays of items." or "Add a new feature: a dark mode toggle button in the user settings menu. It should persist the user's preference across sessions."

Related Articles

• From Feature Requests to Functional Concepts: AI Prototype Generation in Action

• Stop Wasting Engineering Cycles: Validate with AI Prototypes First

• The Prototype Playground: Fast-Track User Testing with AI Generation