AI Prototyping: The Ultimate Guide For Product Managers

Tools, frameworks, prompts, and two step-by-step case studies of using AI prototyping in product management

Hey, Paweł here. Welcome to the free special edition of The Product Compass!

Every week, I share actionable insights and resources for PMs. Here’s what you might have recently missed:

• The Ultimate ChatGPT Prompts Library for Product Managers

• Free AI Agents For Product Managers

• How to Quickly Build SaaS Products With AI (No Coding)

• Introduction to AI Product Management

• The Ultimate List of 147 Product Manager Interview Questions

Consider subscribing and upgrading your account for the full experience:

---

2025 is just crazy in product.

Two weeks ago, I demonstrated that we can already build simple full-stack apps with AI without coding and explained how.

A few days ago, I launched aigents.pm using the same techniques. Over 2,600 people have already used them to craft PRDs and strategies, ideate, or review resumes.

And 2025 has just started.

I see three separate use cases for those AI tools and technologies:

Use Case 1: AI Prototyping

AI tools like Lovable, Databutton, and Bolt that product teams can incorporate into their product discovery practices.

Use Case 2: AI No-Code Building

AI tools that allow individuals or small teams to launch small, secure, full-stack initiatives (like a side project or an app for your portfolio). The only solution I found that worked when prompted correctly was Lovable.

Use Case 3: AI Coding Assistants

AI tools like Replit, v0, Windsurf, and Cursor. Experienced engineers might use them to work on complex products. Those are not the right tools for people without tech experience.

Bottom Line: Large Language/Multimodal Model

You can also use LLMs/LMMs (such as Claude, ChatGPT, DeepSeek, Lliama, or Gemini) directly to generate simple scripts and visualizations or answer questions. But in real-life applications, you will do much better using a wrapper that can seamlessly work with, build, and deploy your entire codebase. That said, you can still use it alongside LLMs/LMMs.

Today, we focus on AI Prototyping, the most important use case for product teams:

1. What is Prototyping?

2. What Are the Benefits of AI Prototyping?

3. AI Prototyping Tools: Pricing, Pros, and Cons

4. AI Prototyping Step-By-Step With Prompts and Videos:

   1. Eight Best Practices

   2. AI Prototyping Case Study 1: Social Media App Without Designs (Bolt.new)

   3. AI Prototyping Case Study 2: Product Hunt Clone With Designs (Lovable)

5. How to Use AI Prototyping in Continuous Product Discovery? Conclusion.

---

1. What is Prototyping?

In his book Inspired, Marty Cagan listed four types of prototypes:

• Low-Fidelity User Prototypes (e.g., with tools like Balsamiq),

• High-Fidelity User Prototypes (e.g., with tools like Figma),

• Feasibility Prototypes (e.g., in Spikes),

• Live-Data Prototypes that use real production data (e.g., in A/B testing).

It’s fair to say that Product Managers do not often use the third category name.

So, I will call prototypes interactive visual artifacts used in experiments. Those are not products. Their primary goal is to test assumptions quickly and cheaply.

You can use prototypes to:

• Test market engagement for a new product, for example, with the XYZ hypothesis.

• Test assumptions related to usability and value risks. Importantly, the prototype is not an experiment but just a tool to perform experiments, such as:

  • Give the user a task to accomplish,

  • First-click testing,

  • The 5-Second test,

  • Thinking aloud.

• Conduct “production-like” experiments by letting users interact with real data instead of generic or fake data that is not adjusted to their context.

---

2. What Are the Benefits of AI Prototyping?

AI prototyping involves using AI to create interactive prototypes. In the context of product teams, AI can help you quickly:

Option 1: Create prototypes based on a text description

While impressive, this carries risks related to overlooking the importance of design. We’ll discuss that in more detail later in this post.

Option 2: Create more interactive prototypes based on designs

While tools like Figma allow you to define and share prototypes, they are limited to specific, predefined clicks and miss basic logic.

Imagine you work on a CRM system. A Figma prototype wouldn't allow users to add new customers beyond predefined ones, nor would it let them find those customers on other screens.

AI prototyping can solve that problem.

Option 3: Create prototypes with access to customer data

You get far more reliable test results when users interact with familiar data, rather than “lorem ipsum” or generic names that blend together

For example, when a user works on a CRM system prototype, you might want to display real sales representatives and real customer names from their organization. Before 2024, achieving this required engineers to code these “live data prototypes.”

---

3. AI Prototyping Tools: Pricing, Pros, and Cons

Here’s my subjective comparison of the AI prototyping tools (Databutton vs. Bolt vs. Lovable) after prototyping and attempting to build apps with all three tools (2-month research).

Note: I only included the best-supported backend solutions. For example, you can combine Bolt with Firestore or Lovable with Clerk authentication, but this might not be the best combination.

Databutton vs. Bolt vs. Lovable, Jan 2025

Databutton: I loved the suggested actions displayed under the chat, the seamless Firestore integration, and the ability to quickly tag any component by typing “#.” Unfortunately, it doesn’t allow you to export the source code easily (though you can view individual files) and becomes less reliable for larger initiatives.

Databutton: Suggested actions

Bolt: I loved the variety of frameworks and programming languages it supports. Unfortunately, the tool is focused primarily on the front end. Since it runs in WebContainer (a browser-based environment), backend hosting options are limited.

Lovable: My favorite solution not just for AI prototyping but also for building simple full-stack apps. The main disadvantage is that it sometimes jumps to action too early and can modify multiple files when you only intend to ask a question. You can avoid this by using “Chat mode,” being precise, or reverting to a previous version when it happens. Interestingly, it's the only solution that counts messages instead of tokens.

---

4. AI Prototyping Step-By-Step With Prompts and Videos

Eight Best Practices

Here’s what works best for me:

1. Define small, precise tasks rather than uploading the entire PRD.

2. Describe the user flow “step by step” so AI understands the interactions.

3. When possible, use an in-memory database instead of Firebase or Supabase, which are needed primarily for real apps or Live Data Prototypes.

4. Reference elements visible on the screen by specifying them directly (in Databutton, use “#”; in Lovable, select elements with a cursor). Similarly, you can mention routes (to simplify, “URLs”) or database tables.

5. Clearly state whether you're asking a question or requesting a modification (in Lovable, use “Chat mode,” in other tools, add “just answer, do not change anything”)

6. When things go wrong, retract changes from history rather than asking AI to revert them.

7. Follow suggestions to refactor components when lines exceed 150-200.

8. Specify your branding and style (e.g., primary color, font) in the project settings when working on larger prototypes

These practices aren’t enough to build real apps (we discussed more practices here), but they are enough for prototyping.

AI Prototyping Case Study 1: Social Media App Without Designs (Bolt.new)

Let’s prototype a social media app based on just text prompts using Bolt.new.

First, the result:

AI Prototyping Case Study 1

My initial prompt:

Create a basic social media home page with:

• Left menu (user photo link + links with icons)

• Center feed of 10 random posts

• Right panel (search + trending)

My primary color is #004346. Play with its variants.

Prompt 1:

Extend the home page and its three sections:

• Left panel: User’s photo (link to profile) + icons for Home (selected), Search, Notifications, Chat, Feeds, Profile, Settings.

• Center panel: List of posts (each post shows the author’s photo, relative time, text, optional image, number of comments, shares, and a heart icon + like count).

• Right panel: Search bar + trending topics.

Display 10 initial random posts after login and store them in memory.

Prompt 1.1 (it didn’t work, but I fixed it later)

Fix photos (user profile pictures and post content) so that they exist.

Prompt 2:

Add a “New Post” button at the top that opens a popup containing:

• User avatar.

• Text input (max 300 characters) + character count.

• Option to attach one picture, simulate it without a real upload.

• “Cancel” and “Post” buttons.

On clicking “Post,” save the new post to memory and show it at the top of the home page list.

Prompt 3 (I skipped it after realizing Bold already implemented it)

Implement post reactions with a heart icon under each post:

• Clicking once turns the heart red (liked) and increases the like counter by 1.

• Clicking again removes the red color (unliked) and decreases the counter by 1.

Prompt 4

I noticed that some post photos don't exist. Also, I can't see a simulated photo when creating a new post. Think step-by-step to fix this.

Bolt.new demonstration step-by-step (Speed x 4)

Hint: You can select 4K quality.

AI Prototyping Case Study 2: Product Hunt Clone With Screenshots (Lovable)

Based on the screenshots, let’s create a prototype of an app similar to Product Hunt.

First, the result. As a bonus, I demonstrate how to create a database that stores products, comments, pictures, users, and upvotes.

AI Prototyping Case Study 2

Prompt 1:

Create an app to promote new products based on the attached screenshots:

1. Home Page (one screenshot):

   • Top menu, trending products section, and blog posts section on the right.

   • Display 5 random products with real pictures stored in memory.

2. Product Page (two screenshots):

   • Opens when clicking a product on the home page.

   • Includes product details, tags, team info, screenshots, and a discussion section.

Enable clicking on any product from the home page to view its details on the product page.

Prompt attachments:

Prompt 2:

Add random comments from random users for existing products and allow me to add my new comment. Also, add "Next vs Previous" product buttons in the ProductDetails.

Prompt 3:

Yes, please refactor that page. Also, allow me to upvote products.

(Context: I selected the upvote button)

Prompt 4:

I want you to:

• Implement going back to the home page easily by clicking the logo

• Allow users to switch between grid and list view (one product in a row) on a home page

BONUS: Prompt 5 (I could stop already, but let’s connect a database):

I clicked “Supabase,” created a new project, waited 5 minutes, and continued. Lovable automatically created all tables. My next prompt:

Please export all existing data, pictures, upvotes, and comments to Supabase tables. You might need to add new or extend existing tables. Also, save my new comments and upvotes in Supabase tables.

Prompt 6:

For the code present, I get the error below. Please think step-by-step in order to resolve it.

(Suggested automatically)

Prompt 7:

Please ensure you fetch and store data from the database: products, comments, pictures, tags, team members, and user upvotes. You might need to generate more users and more upvotes.

(I intended to have hundreds of upvotes in the database, but it didn’t understand, and I didn’t follow up to fix it).

Prompts 8, 9, 10, 11:

Yes

Yes, please continue Supabase integration for /index and /product/:id For now, remove any database security policies. Anyone can read and write anything.

(Answers to a question about whether to continue integration, I decided to be more precise and specify routes)

I get an error that the product was not found.

For the code present, I get the error below. Please think step-by-step in order to resolve it.

(auto-suggested)

Prompts 12, 13, 14, 15, 16:

Looks like my upvotes are not stored in a database. After refresh, the number resets. Check the same for my comments on /product/:id

For the code present, I get the error below. Please think step-by-step in order to resolve it.

(Suggested automatically)

Sometimes, upvotes and downvotes work inconsistently. Is it possible that the user can vote more than once for the same product when refreshing the page and navigating back and forth? Think step-by-step and consider the most reliable solution.

(Step-by-step forces the model to consider more options)

There is still some mismatch. Remove any cache and always fetch and save upvotes in the database. When inserting an upvote, ensure it's not a duplicate.

(Providing a tech hypothesis)

Again, we get duplicates for my user in the database (always "pawelhuryn@..."). Do we unvote and upvote properly without cache?

(It finally worked!)

There were a few more problems than expected, but we finally set up a simple database. I’m leaving it unedited, so you can see how to fix similar issues.

All products, comments, pictures, users, and upvotes are stored in the database.

For real-life applications, you would need to add authentication and define security policies so that, for example, users need to sign in and can’t remove upvotes from other users. I will present another step-by-step recording of building a real app soon.

Lovable demonstration step-by-step (Speed x 4)

Note: I deleted 2 minutes because I didn’t realize the chat had replied, and I was waiting for its response. You can track the entire chat history.

Hint: You can select 4K quality.

---

5. How to Use AI Prototyping in Continuous Product Discovery? Conclusion.

Low-fidelity prototypes test early ideas, while high-fidelity ones refine usability. I believe it’s up to Designers, not Product Managers, to decide when to use which.

AI prototypes based on screenshots also lack precision. For example, Lovable’s results may look good but might not be enough for testing the usability of real products.

That’s why AI-generated prototypes from text prompts or screenshots should be handled by Product Designers.

The design cannot be an afterthought.

High-Fidelity and High-Precision in AI Prototyping

For startups, AI-generated designs might seem helpful, but in established product teams, they won’t replace a well-integrated design system. I expect Product Designers won’t fully adopt them unless they seamlessly integrate with existing tools.

The most practical use in mature companies would be exporting Figma designs to Lovable (or similar tools). This way, AI can support rather than disrupt the Product Trio.

Surprisingly, just a few days ago, Lovable announced that this is now possible:

How to Analyze the Results

Unless you plan to manually observe every user interaction, you should integrate product analytics tools like Microsoft Clarity (free heatmaps and session recordings) or Pendo into AI prototyping.

Providing a simple script generated by these tools in a chat window is enough.

For example, here’s the result of a Clarity script injected into aigents.pm (build with Lovable):

An example dashboard after injecting Clarity into a Lovable project

An example heatmap after injecting Microsoft Clarity into a Lovable project

TLDR;

For those interested, we apply privacy by default. All entered text is masked (I also don't log prompts in Supabase, and OpenAI doesn't use them to train their models):

Masking data entered by the users in Clarity

When using Clarity, you can also define custom CSS rules to adjust the masking.

Leveraging Live-Data AI Prototypes

Connecting prototypes to data from production might seem like a great idea

But in practice, AI prototypes will likely face security restrictions, preventing direct database connections.

Anonymized or market-segmented data might be the safer, more practical choice.

Experimenting is More Than AI Prototyping

AI prototypes work best when combined with other experiments.

For example:

• Card sorting and prototype A/B testing might require dedicated tools like Maze.

• Technical Spikes can only be performed by Engineers.

• A/B testing in production is a separate topic.

You must also understand which assumptions to test, which experiments to run, and how to interpret the results.

AI-generated prototypes are just another tool.

They’re not a replacement for experimentation and collaboration.

---

Thanks for Reading The Product Compass

It's great to explore, learn, and grow together!

Have a great rest of the week,
Paweł