What vibe coding actually is (in 60 seconds)
Quick definition first, because the term gets thrown around a lot. Vibe coding is when you describe what you want in plain English, and an AI builds it for you. You're not writing code. You're describing the thing — pages, buttons, what happens when someone clicks — and the AI handles the actual coding underneath.
It's the same energy as telling a designer "I want a clean homepage with a hero and three feature cards" — except the AI also writes the working app behind it. You stay in the driver's seat on what you want. The AI takes care of the "how do I build this" part.
There are three tools most people start with. The framework on this page works for all three — pick whichever feels right for where you're at:
Lovable
Visual builder for web apps + landing pages. Browser-based, no terminal, see your app rendering live. The friendliest entry point if you've never touched code before.
Bolt
Very similar to Lovable, also browser-based. People often pick Bolt for fast prototyping — same vibe, slightly different feel. Try whichever you like the look of.
Claude Code
Runs in your terminal, owns the whole codebase locally on your computer. Steeper learning curve, but you own the code and can grow the app as far as you want.
Honest take on which to start with
If you've never built anything before — start with Lovable. It's forgiving. If you already love your terminal and want to own everything you build long-term — start with Claude Code. Either way, the playbook below is the same.
The 3-step framework (the headline)
There are technically four steps, because there's a Step 0 that nobody tells you about and it's the difference between an app that works and an app that falls apart.
The bit nobody tells you: set up your folder + global context FIRST
Before you open the builder, before you write a single prompt, set up a project folder on your computer with a CLAUDE.md (or equivalent system prompt) that tells the AI who you are, what your tech stack is, and your brand basics. Colours, fonts, voice, the works.
Why: every page Claude (or Lovable, or Bolt) builds without this context is starting from scratch. You'll spend the next 5 hours saying "no, the brand colour is teal" and "no, use DM Sans" and "no, it should sound less corporate." With it, every page already knows.
This is the move that makes everything else in the playbook work. Skip it and you'll feel like the AI keeps "forgetting" — because it is.
Never start in the builder. Build the brief in Claude or ChatGPT first.
Open Claude.ai or ChatGPT, not the builder. Describe your idea in one or two sentences. Then ask the AI to help you build a project brief: what pages, what user flow, what database tables, what design direction.
Ten minutes here saves five hours of redoing later. The brief becomes the source of truth that goes into your builder. (Section 4 has the exact prompt — copy it.)
Don't move to the builder until you can read the brief out loud and it makes sense. If you can't explain the user flow to a friend in 30 seconds, the brief isn't done.
Take the brief into your builder. Build ONE page at a time.
Not the whole app. One page. Then test it, fix it, lock it in, and only then move to the next page.
The pattern looks like this: "Here's the brief [paste]. Build me the homepage based on the brief — this is the first page in the user flow. The user lands here and the goal is to get them to click through to [next page]."
Test the homepage works. Fix anything broken. Then ask for page two, with the same context: "Now build the [next page]. It sits between [page A] and [page B] in the flow." Repeat.
After each page works, save the working version.
This is your insurance policy. Every tool has its own version of "save your progress":
Lovable has version pinning (pin a version once a page works). Bolt has snapshots. Claude Code has git commits (the AI can run them for you — just say "commit this").
Pin / snapshot / commit before you move on. When v3 inevitably breaks something, you can roll back to v2 in one click. Without this, every break is a "rebuild from scratch" moment.
The whole framework in one sentence
Set up context before you start, plan before you build, build one page at a time, save every working version. That's it. Do those four things and your app will hold together.
The 5 mistakes that kill most vibe-coded apps
If you've tried this once and it didn't work, your app probably died because of one (or more) of these. None of them are obvious until you've felt the pain.
- One-shotting the whole app in a single prompt The "build me a full booking app for personal trainers" prompt. Feels efficient. Isn't. You can't debug what you don't understand — and one-shot apps always have something subtly broken you can't pinpoint. Always build screen-by-screen. The friend feeling proud of their one-shot app on day one is the friend rebuilding it from scratch on day three.
- Skipping the brief "Just figure it out" prompts force the AI to guess. The bigger the guess, the worse the foundation. Ten minutes building a real brief saves five hours undoing what the AI guessed wrong about your user flow, your database, your design direction. The brief isn't optional — it's the cheapest insurance you'll ever buy.
- No version control When v3 breaks something v2 had working, you need to roll back. Without pin / snapshot / commit habits, your only option is to keep prompting the AI to "fix it" — which usually breaks something else. Pin / snapshot / commit after every page works. Future-you will be sending past-you flowers.
-
Over-explaining in every prompt
Once your
CLAUDE.mdor system prompt has your context — your stack, your brand, your voice — stop pasting it again every chat. It's already there. Re-pasting it just burns tokens and dilutes the prompt with noise. (If you want the deep dive on why this matters, my token-saving guide goes hard on it.) - Trying to fix a bad foundation with more prompts The killer. If pages 1 and 2 are messy, page 5 will be a disaster — no amount of "make it cleaner" prompting will fix it. When you feel the foundation is wrong, start over. Sunk-cost fallacy is the #1 thing that kills vibe-coded apps. The 30 minutes to rebuild on a clean foundation is always cheaper than the 6 hours of patching a broken one.
The unsexy truth
Most apps that "fail" at vibe coding don't fail because the AI isn't smart enough. They fail because the human in the chair didn't slow down enough at the start to make the foundation right. The framework above is the slow-down. Use it.
The starter prompt (copy-paste this)
This is the prompt that turns "I have an idea" into a real plan in 10 minutes. Paste it into Claude.ai or ChatGPT (not the builder), replace the bracketed bits, and let the AI walk you through the brief.
Help me plan a [type of app] for [audience]. Before any code: 1. List every page/screen the app needs. 2. Map the user flow — what does someone do first, second, third. 3. List the database tables I need (with columns + relationships). 4. Suggest a tech stack (framework, database, hosting) appropriate for someone non-technical. 5. Sketch the visual direction in 3 lines (vibe, fonts, colours). Don't write any code yet. Show me your plan. I'll iterate with you before we move to the builder.
When the AI gives you the plan, poke at it. "Why three tables and not two?" "Is there a simpler way to do the user flow?" "Can we skip page 4 for v1?" The brief gets sharper with every question.
Once you can read it out loud and it makes sense — that's when you open Lovable, Bolt, or Claude Code. Paste the brief in as the first message. Then ask for page one.
Pro move
Save the brief in a file (brief.md) and keep it next to your project. When you switch tools, switch chats, or come back to the project tomorrow — paste the brief in first. It's your single source of truth, not whatever you remembered last night.
Pick your tool (when to use which)
All three tools work with this framework. Here's how I'd pick between them based on what you're trying to do:
Want to ship a landing page or simple app fast — no terminal?
Use Lovable. Browser-based, beginner-friendly, you'll see your app rendering live. lovable.dev
Same as above but you've heard people swear by it for prototyping?
Try Bolt. Same browser-based vibe, slightly different feel. Both are great — pick the one whose interface feels more "you". bolt.new
Want full control + own the codebase + plan to grow it long-term?
Use Claude Code. It runs in your terminal, owns the whole project locally, and is what I use for everything serious. Steeper to start but the ceiling is way higher. claude.com/claude-code
Want me to walk you through Claude Code step-by-step? That's exactly what the Claude Code Masterclass is for.
You don't have to pick the "best" one
Pick the one you'll actually open tomorrow. The tool that gets used beats the tool that's "more powerful but I'm scared of it" every single time.
Want community + support along the way?
If you want to be in a room with other women figuring this out — asking questions, sharing wins, getting unstuck together — come into the Wright Mode Membership. We share workflows, prompts, and skills like the ones in this playbook every week.
Wright Mode Membership
Weekly trainings, a vault of prompts and skills, and a room of women building real AI workflows together.
Claude Code Masterclass
The complete walkthrough for non-coders. Install, set up, and start vibe coding with Claude Code — from zero.
Follow me on IG
@wright_mode — that's where I drop new prompts, skills, and workflows the moment I find them.