Brooke Wright
Brooke Wright · @wright_mode
FREE PLAYBOOK

Vibe coding for beginners

The 3-step framework I use to build apps in Lovable, Bolt, or Claude Code without it falling apart on page 4. Plus the 5 mistakes that kill most vibe-coded apps before they're finished.

No coding background needed Works in Lovable, Bolt + Claude Code Copy-paste starter prompt Built by Brooke
Something went wrong. Please try again.

No spam. Unsubscribe anytime.

Want me to walk you through Claude Code from scratch? Claude Code Masterclass → See all options
Wright Mode — Free Playbook

Vibe coding for beginners

The 3-step framework + 5 mistakes that kill most apps. Built for women founders who've heard about vibe coding, want in, and don't want to give up on page 4.

✨ No coding background needed ⚡ Lovable, Bolt + Claude Code 📋 Copy-paste starter prompt

What's inside

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:

Easiest start

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.

Quick prototypes

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.

Most powerful

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.


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.

0

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.

1

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.

2

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.

3

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.


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.

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.


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.


All three tools work with this framework. Here's how I'd pick between them based on what you're trying to do:

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.


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.