product

How To Build Your First Full Code Prototype As A Product Manager

a guide to build your first prototype

I gave a presentation at work on AI, my POV on PMs in the AI world, and what I think PMs should focus on going forward.

The goal was not only to encourage everyone to explore AI more in their daily work, but to embrace their uniqueness and lean into it.

Upon recieving positive feedback, I wrote a guide to help my coworkers build their first full-code prototype using AI. This is that guide.

Overview:

This guide walks you through a simple, step-by-step workflow to help Product Managers turn an idea into a fully functional web-based prototype using AI tools. By the end, you’ll have a deployed prototype ready to demo to stakeholders

Workflow Steps:

  1. Set Up Accounts
  2. Draft a PRD with an AI Chatbot (Optional, but recommended)
  3. Generate Prototype Code
  4. Deploy Your Prototype
  5. Iterate and Refine with Cursor IDE (Optional)

Note: For an in-depth exploration of AI coding tools (and approaches if you subscribe to the newsletter), check out Lenny Rachitsky’s write-up. (Shoutout to Sheldon for sharing!).

This guide intentionally focuses on one AI-driven workflow to help you start prototyping quickly without the hassle of choosing between tools.

Assumptions

  • All tools mentioned have free plans sufficient for prototyping your vision
  • This guide focuses on web applications (not mobile apps)
  • The initial code generated by AI tools may not be perfect, so expect to iterate with AI to refine and troubleshoot

Step 0: Set Up Your Accounts

Before you begin, create these (free) accounts:

  1. Lovable (or v0) – For the first-pass on generating your code
    • This guide uses Lovable for simplicity and its clear, beginner-friendly explanations
  2. GitHub – To store your code
  3. Vercel – To deploy your web app online

Optional, but helpful:

  • Supabase – If you need a backend database
  • Cursor – An AI-powered IDE for coding refinement
  • ChatGPT / Claude / ChatPRD – For brainstorming your requirements or iterating on code

Step 1: Draft a PRD With an AI Chatbot (Optional but Recommended)

Using ChatGPT or Claude, prompt the bot to create a polished, detailed PRD for your idea. This helps clarify your vision and refine requirements for more accurate code generation. You can use the following prompt (then paste your raw notes below it):

Prompt

You are an expert product manager with extensive experience taking products from 0→1. Your role is to help me create a polished, detailed one-pager of requirements and specifications for a full-code prototype of a new product or feature. This document should clarify my vision and refine my ideas, ensuring it is optimized for input into a language model (LLM) to generate full-stack code.

Key Instructions

  1. Do not provide code. Focus exclusively on refining the product idea, defining features, and specifying requirements.
  2. Prioritize the most critical elements needed to demo the product’s core functionality to stakeholders like designers, engineers, and business leaders.
  3. Make the one-pager concise yet comprehensive, covering all necessary details for an LLM to understand the scope and intent of the product.
  4. Tailor recommendations and requirements for the following tech stack:
    • Frontend: Next.js with TypeScript
    • Styling: TailwindCSS
    • UI Library: Shadcn
    • Hosting/Deployment: Vercel
    • Backend Database: Supabase

Your Deliverable

  1. Product Overview: Brief description of the product or feature, the target audience, and the problem it solves.
  2. Core Features: Prioritized list of must-have functionalities for a viable prototype.
  3. User Journey: A short walkthrough of how a typical user would interact with the product.
  4. Technical Considerations: Constraints, integrations, or requirements relevant to the tech stack.
  5. Success Criteria: Define what a successful prototype looks like.

Context on What I Want to Create

< Insert your own brainstorming or outline of ideas >

This PRD process ensures you have a clear roadmap to guide the AI tools in generating high-quality, relevant code.

Step 2: Generate Your Full-Stack Code

  1. Choose a One-Shot Code Generation Tool
    • Lovable.dev (recommended for its simplicity, easy integration with Supabase if you need a database, and great job explaining its thought process for beginners).
    • v0.dev (more features, but can be overwhelming for first-timers).
  2. Feed Your PRD to the Tool
    • In Lovable, provide your finished one-pager. Let it generate a full-stack solution with Next.js, TailwindCSS, and optional Supabase integration.
  3. Review the Generated Code
    • AI-generated solutions might have gaps or minor errors. This is completely normal. Iterate with the tool’s built-in AI chat or your go-to chatbot (ChatGPT, Claude, etc.) for quick fixes.

Step 3: Deploy Your Prototype!

You can deploy your new app in two ways:

  1. One-Click Deployment in Lovable
    • Click Deploy directly in Lovable to get a live URL
    • Great for quick demos or when you don’t need to iterate extensively
  2. Export to GitHub & Deploy via Vercel (recommended for complex prototypes)
    • Export your code from Lovable to GitHub
    • Create a new project in Vercel and link it to your GitHub repo.
    • Vercel will automatically build and deploy your code each time you push changes.
    • This is the best route if you plan on iterating and collaborating more in the future.

Step 4: Further Iteration with Cursor IDE (Optional)

  1. [if you haven’t already] Install Cursor
    • Cursor is an AI-powered IDE (IDE = what engineers use to actually write code) that streamlines coding, letting you collaborate with an AI assistant that can access your code as you build.
  2. Open Your Github Project in Cursor
    • Continue refining the UI, features, or backend integration.
  3. Use the AI Chatbot Within Cursor

    • You can keep refining or debugging your code by prompting the AI with specific issues.

    • PRO TIP: Add this specialized prompt to Cursor’s custom instructions (found in settings) for guided, friendly, and in-depth teaching:

      Prompt

      You are an AI coding instructor designed to assist me in writing great code and guide me as I learn to code. Your primary goal is to accelerate my product development while helping me learn programming concepts, best practices, and problem-solving skills while writing code. Always assume I'm a beginner with limited programming knowledge whose primary goal is create functional product prototypes.

      Follow these guidelines in all interactions:

      1. Explain concepts thoroughly but in simple terms, avoiding jargon when possible.
      2. When introducing new terms, provide clear definitions and examples.
      3. Break down complex problems into smaller, manageable steps.
      4. Encourage expert coding practices and explain why they are important.
      5. Provide examples and analogies to illustrate programming concepts.
      6. Be patient and supportive, understanding that learning to code can be challenging.
      7. Be confident in your recommendations, ensuring your work is best in class.
      8. When correcting errors, explain why the error occurred and how to fix it.
      9. Suggest resources for further learning when appropriate.
      10. Encourage me to ask questions and seek clarification.
      11. Foster problem-solving skills by guiding me on how to find the solution or recommendation you arrived upon.
      12. Adapt your teaching style to my pace and learning preferences.
      13. Provide code snippets to illustrate concepts, but always explain the code line by line.
      14. Use comments throughout the code to help document what is happening and for readability.
      15. Keep your code implementations concise and lightweight, unless absolutely necessary for performance.

      Address the my questions thoroughly, keeping in mind the guidelines above. If the question is unclear or lacks context, ask me for clarification. Because I am a beginner programmer, consider recommending I check other dependent parts of my code project before adding more complexity to fix it.

      Review the code and provide feedback. If there are errors or areas for improvement, explain them clearly and suggest corrections. If the code is correct, offer praise and explain why it's a good implementation.

  4. Tips for successful AI-Assisted Coding
    • Be specific: Clearly state what you want the AI to fix or build.
      • e.g. skim the developer docs to get an idea of what you’re working on
    • Provide context: Share relevant code snippets and your goal.
      • e.g. use the ‘@codebase’ feature in Cursor’s chat to provide your entire codebase as context
    • Tackle one request at a time: Ask about one fix or feature per chat. Once completed, create a new chat for a new request.
    • Learn as you go: Use AI as a tutor, not just a tool.

Caveats & Final Notes

  • Limited to Web: This workflow focuses on web applications. AI support for mobile stacks (e.g., Swift, React Native) is limited right now, but expect improvements soon.
  • Expect Imperfection: The first output might not be flawless—be ready to iterate and collaborate with AI to achieve your vision.
  • Upgrading: When you outgrow the free plan or need more control, make sure you’ve exported your code to GitHub (or local directory) and use Cursor along with pro-level tier to get into the nuance of your prototype.

References & Additional Tools

Chat bots to create full-stack prototypes in one shot:

  • Lovable.dev – Recommended for simple full-stack generation
  • Bolt.new – Similar to Lovable, includes export to StackBlitz
  • v0.dev – Offers CLI, organizes your project directly under Vercel
    • Pro Tip: if you just want pretty looking UI for your prototype, use v0.

Chat bots for brainstorming (or generating code):

Further Reading

  • Lenny Rachitsky’s Guide to AI Prototyping
    • if you’re not familiar with Lenny, you’re missing out on the best resource for learning about PM and staying sharp on all things in the Venn diagram of PM, tech, and AI