← Part 1: Idea to ConceptWatch TutorialInstructor notes

Part 2 · 2-hour live class

Vibe Coding

Describe your product in plain English and let AI write the code. Leave with a live link to a working first version of your idea.

Before class

  1. 00:00–00:10 · 10 min

    1. Welcome: What Is Vibe Coding?

    You describe what you want in plain English. The AI writes the code.

    • You are the product manager, the AI is the developer
    • Today's outcome: a live link to a working first version of your idea
    • Open your MVP Brief from Part 1

    Tip: You don't need to understand the code. You do need to be clear about what you want.

    • The first version will be rough, and that's the point.

  2. 00:10–00:20 · 10 min

    2. Pick Your Tool

    Choose one AI builder and stick with it for the whole class.

    • Lovable: full web apps with login, data and publishing built in
    • ChatGPT or Claude: planning your app and explaining errors
    • Alternatives: Bolt, v0, Replit. Similar idea, different strengths
    • Create a new project and keep the tab open

    Tip: Use a chat assistant to plan and a builder to build. Don't switch builders mid-project.

    • Free plans have limits, so your credits may run out.
    • No account yet? Pair up with a neighbor.

  3. 00:20–00:35 · 15 min

    3. From MVP Brief to Build Brief

    Turn your business brief into a clear description of screens and actions.

    • Who is the user, and what one job do they come to do?
    • List 3–5 screens at most
    • Name the single 'magic moment' the app must deliver
    • Write down what's out of scope for version 1

    Prompt

    “Act as a senior product manager. Using my MVP brief below, write a build brief for the first version of a web app. Include: (1) the main user and the one job they need done, (2) 3–5 screens with what appears on each, (3) the single most important action ('magic moment'), (4) what data the app needs to save, (5) what we will NOT build yet, and (6) a suggested look and feel in one sentence. Keep it under 300 words. My MVP brief: [paste your brief here]”

    Tip: Small scope wins. Cutting features is the most important skill in vibe coding.

    • Run this step in ChatGPT or Claude, not the builder. It keeps the builder's history clean.
    • Example (GuardianLine): Family dashboard, Add a parent, Scam alert feed.

  4. 00:35–00:55 · 20 min

    4. Your First Build

    Paste your build brief into the builder and get version 1.

    • Paste the build brief as your very first message
    • Wait, then click through every screen
    • Write down 3 things that are wrong or missing
    • Don't fix anything yet; just look

    Prompt

    “Build the first version of this web app. Focus only on the screens and the main action described. Use realistic sample data so I can see how it works. Make the design clean and easy to read on a phone. [paste your build brief here]”

    Tip: The first prompt matters most. Put your best, most complete description into it.

  5. 00:55–01:20 · 25 min

    5. Iterate: One Change at a Time

    Improve the app through short, specific requests.

    • Ask for one change per message
    • Describe what you see, what you expected, and where
    • If something breaks, paste the error and ask the AI to fix it
    • Use undo/restore if a change makes things worse

    Prompt

    “On the [screen name] page, when I [action], I see [what happens]. I expected [what should happen]. Please fix only this and don't change anything else.”

    Tip: Vague requests ('make it better') get vague results. Be specific about the screen, the button and the outcome.

    • Stuck after 3 tries on the same fix? Undo, then reword your request.

  6. 01:20–01:35 · 15 min

    6. Make It Real: Data & Logins

    Save real information and let people sign in.

    • Ask the builder to save data instead of using sample data
    • Add sign-up and login if users need their own accounts
    • Test it: create an account, add something, refresh the page
    • Leave payments for later. Validate first

    Prompt

    “Replace the sample data with real saved data so that information stays after a page refresh. Add sign up and log in with email so each user only sees their own information.”

    Tip: If it disappears when you refresh the page, it isn't saved yet.

    • Simple, single-user idea? This step is optional; keep polishing instead.
    • Don't use real customer data until you know who can see it.
    • Payments, email and AI features can be added the same way, later.

  7. 01:35–01:50 · 15 min

    7. Test It With a Real Human

    Watch someone else use your app without helping them.

    • Swap laptops or links with a neighbor
    • Give them one task: 'Try to [magic moment]'
    • Stay silent and take notes on where they hesitate
    • Turn the top 2 issues into iteration prompts

    Tip: Where people get confused is where your next prompt should go.

    • This is customer validation from Part 1, just faster.

  8. 01:50–02:00 · 10 min

    8. Publish, Demo & Next Steps

    Get a live link you can share with customers and investors.

    • Click Publish and copy your live link
    • 30-second demo: problem, magic moment, live link
    • Add the link to your pitch deck from Part 1
    • Plan: 5 real users try it this week

    Prompt

    “Review my app and list the 5 most important improvements to make before showing it to real customers, ordered by impact. Keep each to one sentence.”

    Tip: A live link beats a perfect slide. Investors and customers believe what they can click.