Learn Vibe Coding 101
Sharing some fundamentals to build apps with tools like Replit, Bolt or Lovable.
Hello, thank you for reading The Product Courier.
We’re now 2,830+ in our community. 🙏🏻
In this 52nd edition, I want to share with you:
🗞️ Latest AI features
🧰 Vibe coding 101
Key basics to make the best out of AI app-building tools.
And build working prototypes in minutes, like this lead conversion calculator:
👋🏻 Before we dig in, I want to share our upcoming event with “The Impostor PM” next week: The Product Buildcamp.
A hands-on weekend dedicated to product building with AI:
Create an MVP from scratch using AI tools and tactics.
Learn AI for Product work through actionable workshops and mentorship.
Join The Product Buildcamp from May 30th to June 1st in Lisbon, Portugal
(limited spots available)
News of the week. 📰
While you’re working, AI innovation doesn’t stop.
Here is a quick roundup of the latest AI releases:
🗂️ Notion upgrades AI across workspaces
💬 OpenAI rolls out GPT-4.1 for everyone
💻 ChatGPT gets AI "Codex" Agent
🧠 DeepMind reveals new advanced model AlphaEvolve
⌚ Google’s Gemini goes cross-device
📱 TikTok launches AI Alive for photos
🎁 Thanks for reading The Product Courier.
We share actionable AI tips to help you deliver better work and accelerate your career.
Join our Premium community and get full access to all our tutorials
+ curated prompts for Product work + private Q&A sessions and more…
Your AI tutorial. 🧰
Welcome to Vibe coding 101
"The expert in anything was once a beginner."
✅ PM time is scarce. Vibe coding helps PMs focus on ideas instead of syntax, but requires proper structure to work.
✅ Success comes from starting with clear product management tactics: detailed briefs, context-rich prompts, and building iteratively.
✅ Start with 1-2 tools that fit your workflow and focus on user flow and minimal viable UI before adding complexity.
Vibe Coding for Product Teams
If you work in Tech, you've likely heard about 'vibe coding' as the trending skill for PMs.
Coined by Andrej Karpathy in February 2025, the term refers to telling an AI tool in plain language what you want your app to do and letting it write the code.
This concept has expanded into 'vibe marketing,' 'vibe designing,' and other areas.
The goal is to use AI tools to let you focus on ideas and user experience instead of low-level syntax/tasks.
This matters for PMs because developer and design talent is scarce (over 80% of companies report shortages).
As I shared in a previous tutorial, AI tools like Replit Agent, Lovable, Bolt and others can turn English descriptions into working apps.
How to make it work, simply
Successful vibe coding is not magic. It follows pragmatic rules.
Or you’ll end up going back and forth with little to no tangible results.
Here are a few principles (synthesized from expert sources):
Start with product management:
Before coding, chat with your favorite AI assistant to outline a plan.
List the details you have in mind and create a detailed brief.
Ask ChatGPT (or Claude, Gemini…) to break the project down into small steps.
And review the proposed output.
This forces clarity on scope and flow before code.
Give AI clear, context-rich prompts:
Write precise instructions.
“Clear, concise, and context-rich prompts are the foundation of effective vibe coding” according to Replit.
For example, instead of prompting:
❌ “make a form,”
say
✅ “Add two number inputs labeled ‘Leads’ and ‘Conversion Rate (%)’ and a Calculate button.”
Always include the context (app purpose, target user, relevant details). If possible, show examples of expected output.
Build iteratively – one small step at a time:
Tell the AI to do one thing at a time, test it, then move on.
Start with the architecture/frameworks, for example, then add components and features one by one.
You can ask the App builder to break the project down into very small steps and wait for testing after each step before moving on to the next.
Break features into mini-tasks:
First, just create the form,
Then add the compute logic,
Then handle edge cases.
Test after each change:
After the AI generates any code, immediately run and check it.
Open the app preview (or browser console) and verify nothing broke.
For instance, if adding a calculation function, test it with sample inputs.
If something is off, fix it right away rather than piling on more changes.
Version control is your friend:
Whenever AI makes a change that breaks something, use the tool’s undo or checkpoint feature.
In Replit (Cursor) and similar IDEs there is a “Revert to checkpoint” button.
Vibe coding tools you can use.
I shared several AI app-building tools here. Each app has its strengths and weaknesses.
My go-to is Replit, because it’s a good mix between ease of use and coding, and I use Lovable for designs.
Here is a list of my favorites and how I use them:
All these tools share the same core workflow: you talk or write instructions, and the AI writes code.
The specifics vary, but you can apply the same prompting strategies and principles in any of them.
Step-by-Step: Vibe-Coding a mini app.
Let’s illustrate with a real-world example.