Christmas Giveaway #1: The Complete Vibe Coding Playbook

If you’ve tried vibe coding before, but kept getting stuck before you could finish, this playbook is for you

Follow it step-by-step and you’ll cross the finish line with a working application, completely free, in less than a day (bookmark this): **

*Quick Note:* This is part 1 of our Christmas Playbook Giveaway: brought to you by myself and @eyad_khrais.

We’re dropping everything we used this year to vibe-code 100x faster and master AI tools in record time.

Turn on post notifications because the next playbook (N8N Mastery) drops this week.

Now onto the Vibe Coding playbook **

1. Step 0: Your Philosophy

Treat the LLM you use to vibe-code like a brilliant but forgetful intern.

If you tell it ‘build me X’ and then hit ‘accept all’ on everything, it’s going to start hallucinating and veering off course very quickly. Then your project hits a wall, and you give up.

If instead you give it:

1. a clear plan 2. frequent course-corrections 3. tiny, atomic tasks it will build your whole app. **

2. Step 0: Your Golden Path

Here’s the exact route every beginner should take:

1. Make the PRD with a single paste-in prompt. 2. Turn that PRD into a TDD the AI can follow perfectly. 3. Auto-generate your screens in Lovable/Bolt/v0. 4. Open in Cursor/Codex/Claude Code and let it wire login, DB, payments, hosting. 5. Work in tiny tasks using fresh chats and logs. 6. Test the full run: sign up with a brand new account, then do the main action, then pay, then success.

Ingrain this in your mind, because the rest of the playbook breaks down each of these sections, and how to follow them. **

3. Step 0: The Success Checklist

Before you open a UI tool or touch code, get these 4 things written down. This is what keeps the LLM anchored so it doesn’t drift.

You need:

1. A one-sentence product: “For [who], we [do X] so they can [outcome].” 2. One target user. A real person type that would be interested in using or buying your app or product. 3. Exactly 3 must-have features in v1. No more and no less. The biggest issue builders make is they try to include 100 features in v1. Chill out. 4. A demo deadline that you set within 3 days.

If you skip this, you’ll constantly feel like the model is building a different app than the one in your head, and you’ll have no structure to fall back on. **

4. Step 1: Create the Plan Doc (PRD)

The PRD is your blueprint. It’s written in plain English, not technical language.

Start a fresh chat in ChatGPT 5.1 or Gemini 3.0 Pro and paste this:

“You are my senior product partner. Ask me ONE question at a time to create a simple product requirements document (PRD) for my app.

Cover: the problem, the one target user, the #1 job they want done, the platform (web or mobile), how we make money, and any limits (budget, timeline).

Show your % understanding after each message. When you reach 100%, give me a clean file called PRD.md with:

• Problem (1 paragraph)
• Who it’s for (1 sentence)
• 3 Must-have features for MVP (exactly 3 bullets)
• What’s NOT included yet (3 bullets)
• Success test (how we know it works)
• User stories (short “As a user, I want…”)
• MVP now, later phases next Use simple language.”

What success looks like: The AI asks short questions. You answer in everyday words with examples. At 100%, you get a clear, short PRD. **

5. Step 2: Turn the PRD into the Build Doc (TDD)

The TDD is your technical-design-document: a step-by-step instruction manual the LLM will follow to actually build your app.

Open a new chat in ChatGPT 5.1 or Gemini 3.0 Pro. First paste your finished PRD, then paste this: “Turn this PRD into a very clear build plan called TDD.md that an AI can follow exactly. Use this stack: Next.js/React for screens (web), Supabase for login and database, Vercel for hosting, Stripe for payments.

Include:

• File/folder list
• What pages and buttons we need
• What data we store (comprehensive db schema)
• What web addresses the app uses to talk to itself (these are routes)
• A short list of tests for each feature
• An example .env file (placeholders only) Keep it simple and step-by-step.” Think of it like this: Supabase = how users create their accounts and store their data Stripe = how you collect money from paying users (assuming you’ll want to) Vercel = how you put the app on the internet

You should end up with a very easy to follow and detailed TDD. **

6. Step 3: Generate the Screens

Now you turn the words into actual screens. Open Lovable / Bolt / v0. Any one of them works.

The steps you need to follow: 1. Create a new project and choose “Web App.”

2. Attach or paste your PRD.md and TDD.md.

3. Paste this prompt: “Make all screens and components listed in my TDD.md. Use simple, clean layouts. Add placeholder text and sample data. Leave any ‘connect to database’ spots as TODOs. Show me the full screen list and how they link together.”

4. Look at the preview like a real user. If something is off, say: “Fix the header” or “Make the primary button more obvious” or “Adjust spacing on the dashboard.” Only do one fix at a time, and feel free to stop at 90 percent. Perfect slows you down, and LLMs have a hard time with ‘perfect’ anyways.

5. Export the project as a ZIP or push to GitHub. This becomes the front end your automations will wire together next. **

7. Step 4: Time to Vibe-Code

Goal: Cursor/BlackBox AI clicks the buttons for you. You only hit approve when it makes sense.

1. Drag the exported folder into BlackBox AI (or paste the GitHub link). Wait for it to load. For the model, click GPT-5.1-Codex MAX or Claude Opus 4.5 MAX.

2. Paste this prompt in:

"You are my automation engineer. Without asking me to use a terminal, do the following and paste back screenshots/logs for each step: 1. Supabase: create a new project, turn on email/password sign-in, and make the tables from the TDD. Give me the project URL and the keys. Create an .env file for me with these values. 2. Stripe (test mode): create a product “Starter Plan” ($X/mo) and a price, set success URL = [MY_APP_URL] / success and cancel URL = [MY_APP_URL]/cancel. Create a webhook for /api/webhooks/stripe and give me the secret. Add the keys to the .env file. 3. Vercel: create a project from this code, add all .env values, and make a preview link. 4. Run the app locally. Seed sample data if needed. Walk through the full user flow: sign up → main action → pay → success. Paste the exact steps you took and the logs."

3. BlackBox AI may open browser windows asking you to log in or approve access. Click "Allow" or "Authorize." Cursor will continue on its own.

4. Each step of the way, once BlackBox AI says it has finished a task, it should start up something called localhost:3000, which is basically running the ‘app’ you are making ‘locally’ on your own computer. Go to the URL (confirm with BlackBox AI that localhost is running) and use the app; ensure that everything works as you expect it to before moving on to the next task.

What you should receive back: A filled .env file, a preview link for your app, and a short note saying the flow works.

If it didn’t work, try switching the model to the other (Codex <–> Opus) in a new chat window. This works 99% of the time. **

8. Step 5: Work in Small Tasks (Chat Hygiene).

Why start a new chat every 5–10 messages? The AI has a short memory. Long chats push out earlier facts, so it starts guessing. Fresh chats keep the plan front-and-center and reduce mistakes.

When to start fresh: After 5–10 back-and-forths or when you start a new task. 1. Click New Chat. 2. Paste this mini-brief (fill in the brackets): PROJECT: [name] GOAL: [few sentence] SOURCE OF TRUTH: PRD.md + TDD.md TASK: [one change, e.g., “Fix the sign-up error message”] COMPLETION CRITERIA: [what the screen should show] 3. Logs: Tell the LLM, “Run the app and inspect the logs in terminal to decide if this worked”

When the task is done, close the chat. Start a new chat for the next task using the mini-brief again.

Again - very important: Each step of the way, once the LLM says it has finished a task, it should start up localhost:3000.

Go to the URL (confirm with the LLM that localhost is running) and use the app; ensure that everything works as you expect it to before moving on to the next task. If you encounter an error, just describe it to the LLM in as much detail as possible, and it’ll solve the issue for you. **

9. Step 6: Test and Demo

Tell BlackBox AI/Cursor: "use the CLI to deploy this project to Vercel in the free tier. I’ll log in when necessary".

Here’s your release checklist: [ ] Can create an account and sign in (Supabase works) [ ] Can do the main action with sample data [ ] Stripe test card 4242 4242 4242 4242 works and shows a success screen [ ] Preview link on Vercel loads from your phone [ ] Error messages are friendly

Your 30-second demo video: show sign up –> main action –> pay –> success. **

10. Quick Troubleshooting Guide

1. The AI keeps guessing or going off track? Start a new chat and paste the mini-brief. Keep the task very small.

2. The UI builder made weird screens? Ask it to fix one thing at a time (header, button, spacing). Export and let BlackBox AI / Cursor clean it up later. (Gemini 3.0 as a model is fantastic for UI).

3. Payments don’t fire? Ask the LLM: “Open test checkout and confirm I see a Stripe test payment in the dashboard. Paste a screenshot. Use the CLI / MCP to go into Stripe and see why this might be happening”

4. Login redirects are wrong? Ask the LLM: “Double-check the allowed URLs in Supabase and in Vercel settings using the CLI / MCP. Show me screenshots of both."

5. Blank page after deploy? Ask the LLM: “Confirm all public variables start with NEXT_PUBLIC_ and paste the current values (no secrets) and a screenshot of Vercel environment settings." **

11. Conclusion

Keep everything tiny: one task, one chat, one win. Fresh chats keep the AI sharp and prevent drift. Ship a demo this week because real users will teach you faster than planning ever will.

Quick translations so nothing trips you up: PRD = the plain-English blueprint for your app TDD = the step-by-step instruction manual for the AI Supabase = handles user accounts and app data Stripe = handles payments Vercel = hosts your app on the internet Repo = the project folder that holds all your code

Remember the loop: 1. Pick one small task 2. Start a new chat and paste the mini-brief 3. Let the AI run and give you logs + screenshots 4. You test the result 5. If it’s broken, describe what you saw and let the AI fix it 6. When it works, close the chat and move on Once this loop clicks, vibe coding becomes a repeatable system that gets you shipping 100x faster.

If you found this playbook valuable, you’ll love the next one: a complete mastery on n8n. Turn on post notifications for me and @eyad_khrais, and you’ll be the first to hear about it.

We also have a free AI newsletter for the latest news on AI developments and the tools that you should use: varickagents.com/newsletter

For more longer-form videos and tutorials, subscribe to my YouTube channel here: youtube.com/@vasumanmoza **

• • •

Missing some Tweet in this thread? You can try to force a refresh