#011: Vibe coding 101: Tools to use
Practical guide on which tools to use to begin prototyping
In Part 1, we defined vibe coding: building by conversing with AI, not wrestling syntax. In Part 2, we turned that mindset into a step-by-step path from idea to working prototype. Today, we’re picking up the tools and getting tactical — so you can ship something clickable this week. (productpulseafrica.com)
Anchor reference: Aakash Gupta’s prototyping tools thread — https://x.com/aakashg0/status/1947139750655410423
Why prototypes are your PM superpower
Prototypes force clarity. They turn “we should add X” into screens, flows, and trade-offs your team can actually feel. They align stakeholders, de-risk bets, and help you learn faster than any deck. Most importantly, they sharpen your taste — because once something is on screen, small UX decisions suddenly matter.
Quick decision guide: which tool when?
Aligned with Aakash Gupta’s taxonomy of Vibe Coding vs AI Prototyping tools.
Tool taxonomy (aligned)
Courtesy of Aakash Gupta
The Vibe Coding Loop (Prototyping Edition)
Prompt it → Describe the outcome in one paragraph.
Spin up a base → Generate a first version in Lovable/Bolt/Replit.
Polish → Move UI to Figma/Framer for flow and feel.
Test → Put it in users’ hands; watch, don’t explain.
Iterate → Tighten copy, flows, and empty states.
Ship the next cut → Same week, not next quarter.
Copy-paste prompt recipes (ship in 2 hours)
1) SACCO Savings Goal Simulator (web)
Use: Lovable (fast) → Replit (extend)
Prompt:
“Build a mobile-first web app called Sacco Goal. Users input: target amount (KES), monthly deposit, interest rate (%), and timeline (months). Show: total saved, interest earned, and a progress bar per month. Include a simple chart and an ‘Export to PDF’ button. Clean, accessible UI, large inputs, bottom-sticky CTA. Use responsive layout.”
Polish cues to add:
Empty state with friendly microcopy
Example presets (e.g., KES 50,000 / 12 months)
Dark mode toggle
2) Airtime & Data Cost Splitter (USSD-style flow)
Use: Lovable (fast end‑to‑end) → Figma/Framer (polish)
Brief: A 4-screen flow that feels like lightweight USSD:
Enter total bundle cost
Choose split rules (equal / % / specific KES)
Assign to contacts
Confirmation + share link
Polish cues to add:
High-contrast, single-action screens
Big numeric keypad
Error states for invalid inputs
A mini flow you can reuse (any feature, any tool)
Intent line (1 sentence): “I want users to ___ so that ___.”
User story (1 line): “As a ___, I want ___, so that ___.”
Inputs & outputs (bulleted): 3 inputs max, 2 outputs max for v1.
Success metric (1): e.g., “time to first value < 90s.”
Constraints (2): mobile-first; single action per screen.
Drop this into Lovable/Replit as your first message, or paste into your Figma cover page so the team shares the same intent.
Taste checklist (this is where PMs win)
Clarity: Every screen answers “What next?”
Focus: One primary action per step.
Copy: Replace jargon with verbs (“Send”, “Top up”, “Invite”).
Speed: Reduce typing; prefer presets and sensible defaults.
Recovery: Helpful errors and empty states.
Delight (sparingly): Micro-animations on success, not everywhere.
What’s next
If Part 1 was mindset and Part 2 was method, this chapter is your muscle memory. Pick one recipe, time-box two hours, and ship something your team can click this week. Next time, we’ll cover making prototypes sell themselves — packaging, narrative, and stakeholder walkthroughs that unlock buy-in. (productpulseafrica.com)
P.S. Want an Africa-first research edge while you build? Pair your prototype sprints with quick desk research to validate market reality (e.g., price bands, adoption patterns) before you over-invest. (If you’re new here, try the Pulse Research Assistant — and explore the tools we’ve been building on Product Pulse Africa.)
—
If you’re reading this from the Product Pulse Africa page, drop a comment: which recipe are you trying this week — Sacco Goal, Airtime Splitter, or Vendor Scorecard?
Sources & Inspiration
Anchor reference — Aakash Gupta’s prototyping tools thread: https://x.com/aakashg0/status/1947139750655410423
Additional references
Vibe Coding 101 (Part 1) — https://www.productpulseafrica.com/p/009-vibe-coding-101
Vibe Coding 101 (Part 2) — https://www.productpulseafrica.com/p/vibe-coding-101-part-2
Cursor — https://cursor.com/
Windsurf — https://windsurf.com/
Replit — https://replit.com/ | Replit AI — https://replit.com/ai
v0 — https://v0.dev/
Bolt.new — https://bolt.new/ | Getting Started — https://support.bolt.new/docs/getting-started | GitHub — https://github.com/stackblitz/bolt.new
Lovable — https://lovable.dev/
Base44 — https://base44.com/
Figma — https://www.figma.com/
Framer — https://www.framer.com/
ProtoPie — https://www.protopie.io/
Glide — https://www.glideapps.com/
Uizard — https://uizard.io/
Further reading
Business Insider on Bolt’s turnaround — https://www.businessinsider.com/stackblitz-bolt-silicon-valley-hottest-ai-coding-startup-nearly-died-2025-5
“Vibe coding a website with my daughter (Bolt)” — https://www.businessinsider.com/vibe-coding-website-daughter-ai-bolt-2025-6