Walkthrough: AI Prototyping

AI tools like ChatGPT and Lovable give you the ability to create interactive prototypes without code, validate ideas rapidly, and communicate complexity with clarity. This enables:

• Stronger interview performance
• Faster alignment with engineering and design
• Clearer articulation of user flows
• Rapid simulation of product behavior

In this walkthrough, you’ll build a complete AI-powered prototype:

PM To-Do List

A simple, functional tool where users add tasks, and an AI agent provides a one-sentence "Impact Check" to help the PM understand the value of that specific task.

Through this process, you’ll go from concept → UI → live AI behavior in a single session.

Vibe coding stack

ChatGPT (Ideation + flows + wording)

Use ChatGPT to:

• Outline the user journey
• Generate example content
• Create UX copy
• Refine tone
• Define the structure of explanations and ratings

The workflow is model-agnostic: use ChatGPT, Claude, Gemini — whichever you prefer.

Lovable.dev (UI + rapid prototype)

Lovable converts natural language into working UI:

• Generate screens instantly
• Restyle components using screenshot imports
• Edit layouts with short instructions
• Set up navigation and state
• Preview mobile/web builds

It’s a fast tool for turning your idea into a prototype.

Lovable Cloud (AI actions + backend logic)

Lovable Cloud powers your AI behaviors:

• No setup
• No API keys required
• GPT-ready backend functions auto-generated
• Actions wired directly to buttons

Everything lives inside one tool, keeping the workflow simple.

Setting up

Set up should take approximately 2 minutes.

Step 1: Create accounts

Create/log in to accounts for the following tools:

• ChatGPT
• Lovable.dev
• (Optional) OpenAI Developer Account
• (Optional) n8n Cloud

Step 2: Connect to Lovable Cloud

Inside your project:

1. Open the left panel
2. Click “Connect to Lovable Cloud”
3. Cloud mode enables backend AI actions

Now, you’re ready to build.

Building the prototype

This app simulates a high-leverage productivity loop for a PM, focusing on the transition from a quick thought to a strategic evaluation:

1. Chat to add: Capture a task immediately via a central, conversational chat bar.
2. Add context: Expand the task to include a detailed description of the "why" and "how."
3. Evaluate impact: Trigger an AI evaluation that identifies which metric is moved and how to improve the task's leverage.
4. Refine: Review the objective feedback to ensure your time is spent on high-value work.

Core user flow Chat Input → Task Entry → Add Description → Evaluate Impact → Metric & Improvement Feedback

Step 1: Define the concept

Clarify what you’re building. If this is a live interview, do it with your interviewer. If it is a take-home assignment, make sure you state these up-front.

• User: Product Managers who need a "second brain" to validate their daily priorities.
• Problem: To-do lists often become "laundry lists" of low-value tasks without a clear link to product goals.
• Solution: A single-page interface that pairs simple task management with a Senior PM "Impact Agent."
• Outcome: A prioritized list where every item has a clear metric alignment and a path toward higher impact.

Step 2: Ideate in ChatGPT

Paste this ideation prompt in the chat:

I’m building a single-page app called PM To-Do List. Generate a complete product blueprint, including:

• User journey: A top-level chat bar to type and add a task, which populates a list below.
• Components: Task items that expand when clicked to show a description input and an 'Evaluate Impact' button.
• Content: 5 example tasks reflecting real PM work (e.g., "Drafting PRD for Q1 search improvements").
• UX copy: Professional and minimalist button labels and placeholders.
• Feedback format: A strict 1-10 impact score, a 'Metric Impacted' section, and a 'Suggested Improvement' section.
• UI style: Inspired by Notion’s minimalist design (white space, clean typography, call-out boxes).

End with a section titled Blueprint for Vibe Coding that I can paste directly into Lovable.

ChatGPT will provide:

• Complete UX structure: The full user experience layout and flow.
• Question bank: Ready-to-use PM interview questions.
• Breakdown and rating formats: Templates for explanations and feedback.
• Flow descriptions: Step-by-step guidance on how users move through the feature.
• Clean UI copy: Polished text for buttons, prompts, and instructions.

Step 3: Generate UI in Lovable

1. Create a new Lovable project
2. Paste the Blueprint for Vibe Coding output
3. Lovable instantly generates your screens

Adding intelligence

We can use Lovable Cloud to run AI actions that simulate the app’s logic.

Tell Lovable:

“When the user taps Evaluate Impact, send the task title and the user's description to GPT. Act as a professional Product Manager mentor from a top tech company. Be extremely objective and strict. Evaluate only what is written, no assumptions. Return three specific sections:

• Impact score (1-10)
• Metric impacted (e.g., Revenue, Conversion, Growth)
• Suggested improvement (How to make the task more high-leverage) Display the result in a Notion-style callout box.”

Making it feel real

To elevate the prototype:

• Import screenshots to mimic familiar UI
• Ask ChatGPT to refine UX copy (“more concise,” “more friendly,” “more tech PM tone”)
• Add a short Loading… state before AI responses
• Include a failure state (empty answer → prompt user)
• Adjust spacing, radius, shadows for readability

Presenting your prototype

When presenting your prototype to your interviewers, use a simple narrative arc:

Problem → User → Flow → Prototype → Tradeoffs → Metrics

The focus is not on how you built the prototype, but on why you made the design decisions you did. Using a narrative arc helps interviewers follow your thought process.

Interviewers are mainly looking for:

• Product thinking
• Technical intuition
• Ability to simplify
• Creativity
• Clear communication
• Collaboration skills

After presenting your prototype, involve the interviewers in the process. For example, you could ask:

• “Are there any other evaluation metrics you would want to show?”
• “Is there any additional functionality you would like to see e.g. automatic ordering of tasks?”
• “Do you want to adjust the evaluation logic/prompt?”

This shows flexibility, strong collaboration skills, and makes interviewers invested in you because they’ve helped shape the solution.

Advance usage (Optional)

This section is for those who want deeper technical control.

Use your own OpenAI API key

If you want control over models, cost, or behavior:

1. Connect to Lovable Cloud
2. Add a secret named OPENAI_API_KEY
3. Paste your key
4. Tell Lovable to use it in the action

In the prototyping phase, you’ll rarely need this.

Use Replit, Bolt, or Cursor

If you want a more technical environment:

• Replit for building backend logic
• Bolt.dev for agent workflows
• Cursor IDE for AI-assisted coding, state management, or versioning

These tools let you extend the prototype beyond Lovable if needed.

Integrate with n8n

Use n8n if you want simple background workflows (lightweight automations) without building a backend. It’s helpful for:

• saving user answers over time
• tracking improvement history
• running basic analytics
• generating or rotating question sets automatically

You likely won’t need this for the core prototype.