How to Vibe Code
This is the playbook. Idea → prompt → iterate → ship. Every section is something you can do right now.
1. The mindset
Vibe coding is a fundamentally different way of building software. You're not writing code line by line — you're directing an AI to build what you see in your head. You say "make the button green" and the button turns green. The skill isn't syntax. It's clarity of vision and quality of communication.
Think in outcomes
Don't think "I need a React component." Think "I need a signup form that validates email and shows inline errors." Describe the what, not the how.
Ship ugly, then polish
Get it working first. Make it pretty second. Optimization and perfection are traps that kill momentum. A shipped ugly app beats a perfect local prototype.
You're the PM, AI is the dev
Your job is to set direction, review output, and make decisions. You don't need to know how the code works. You need to know if it does what you want.
2. Setup (5 minutes)
Pick your path based on what you're building. You don't need all of these — pick one and start.
Browser-based (no install)
Use Bolt or Lovable. Open the site → describe your app → it builds and deploys automatically. Say "make the button green" and watch it happen live. Best for: landing pages, prototypes, simple apps.
Cost: Free tier available. $20-25/mo for full features.
Claude Code
Install via npm i -g @anthropic-ai/claude-code → run claude in any project → give it tasks. It reads your codebase, writes code, runs commands, and ships autonomously. Best for: real projects, anything serious.
Cost: Requires Anthropic API key or Max subscription.
OpenAI Codex
OpenAI's agentic coding tool. Give it a task, it spins up a sandbox, writes and tests the code, and gives you a pull request. Best for: when you want a second opinion or different approach than Claude Code.
Cost: Requires OpenAI API key or ChatGPT Pro.
3. The Loop
Every vibe coding session follows the same cycle. Master this loop and you can build anything.
Vision
Describe the full picture first. "I'm building a habit tracker for people who want to build streaks. It needs auth, a dashboard with a calendar heatmap, and daily notifications." Give the AI the whole map before zooming into any piece.
Prompt
Now pick one piece and prompt for it specifically. "Start with the auth system. Use Supabase email + Google OAuth. Create the signup page, login page, and auth middleware." One feature at a time.
Review
Look at what it built. Run it. Click through it. Does it do what you wanted? You don't need to read every line of code — you need to check if it works and feels right.
Iterate
Tell the AI what's wrong or what to change. "The signup form works but the validation messages are ugly — make them inline below each field with red text." Be specific about what you see vs what you want.
Repeat
Go back to Prompt for the next feature. Keep the loop tight — 2-5 iterations per feature. If you're past 10, start a new conversation.
4. How to prompt
This is the core skill. A better prompt = better code on the first try = less iteration. Here's the formula:
The prompt template
Context: I'm building [app] for [who]. Tech stack: [stack].
Task: Build [specific feature]. It should [behavior 1], [behavior 2], and [behavior 3].
Constraints: Match the existing code style. Use [library]. Keep it under [X] lines.
Examples: Similar to how [reference] works, but [difference].
Prompting rules
Be specific about what you want. "Add a button" is bad. "Add a purple CTA button below the hero that says 'Get Started' and links to /signup" is good.
Give the full vision upfront. Don't drip-feed requirements. AI makes better decisions when it knows where you're going.
Reference what exists. "Look at how the login page is styled and match that for the signup page." Context from your own code beats generic instructions.
Say what went wrong, not just "fix it." "The form submits but shows a blank page instead of a success message. I expected a toast notification." Describe expected vs actual.
Don't over-specify implementation. "Use a useState hook with a useEffect that..." — you're doing the AI's job. Just describe the behavior you want.
Don't ask for everything at once. One feature per prompt. Build incrementally. A 500-word prompt asking for an entire app usually produces worse results than 10 focused prompts.
Power moves
Use CLAUDE.md / project instructions
A file at your project root that gives AI persistent context. Include your stack, code style, conventions, and file structure. Claude Code reads CLAUDE.md automatically. Saves repeating yourself every session.
"Make the button green" energy
Don't overthink your prompts. Sometimes the best prompt is the simplest one. "Make the button green." "Add a dark mode toggle." "This page is too slow, fix it." Direct and specific beats clever and verbose.
Fresh conversation > long threads
After 15+ messages, AI performance degrades. Start a new chat, paste relevant context, continue. Counterintuitive but faster. In Claude Code, just run claude again.
Ask for the plan first
Before building, say "Don't write code yet. Just outline how you'd approach this." Review the plan, course-correct, then say "Go." Better code from better plans.
5. Debugging
Things will break. That's fine. Debugging with AI is fast once you learn the pattern.
Error messages → paste verbatim
Copy the entire error. Don't summarize it, don't paraphrase. Paste the whole stack trace. Add: "Here's the file it's pointing to: [paste code]. What's wrong?"
UI bugs → screenshot + description
"The modal opens behind the navbar instead of on top. Expected: modal in center with dark overlay. Actual: modal is hidden behind the nav." Add a screenshot.
Logic bugs → expected vs actual
"When I click 'Save', the data should persist to the database. Instead it saves temporarily but disappears on refresh. Here's the save function: [paste]."
Stuck in a loop?
If the AI's fix didn't work after 3 tries: start a fresh conversation, paste just the broken code and the error, and approach it fresh. The old conversation's context might be confusing it.
6. Shipping
The whole point is getting it live. Here's the pre-launch checklist and where to deploy.
Pre-launch prompt
Review this project for production readiness. Check: - All environment variables are set (no hardcoded secrets) - Error handling on all API calls - Loading and empty states - Mobile responsive - SEO meta tags (title, description, OG image) - 404 page exists - Forms have validation Flag anything that would embarrass me in production.
Where to deploy
Vercel
Best for Next.js. Push to GitHub → auto deploys. Free tier is generous.
Netlify
Great for static sites, Astro, Gatsby. One-click deploy from Git.
Cloudflare Pages
Fastest CDN. Free. Great for anything static or with Workers.
7. Leveling up
Once you've shipped your first project, these are the skills that separate beginners from people who build real products.
Learn to read code (not write it)
You don't need to write code from scratch. But you need to skim what AI generates and spot when something looks off. This comes naturally with practice.
Understand architecture patterns
Learn what a database is, what an API does, what client vs server means. You don't need to implement these — just understand the concepts so you can direct the AI better.
Build systems, not just features
Use CLAUDE.md for consistent AI behavior across sessions. Set up CI/CD. Add testing. Use version control. These compound — every future project benefits.
Develop taste
Know when AI output is "good enough" vs when it needs another pass. Know when to use a simple solution vs when to invest in something robust. This is the real superpower.
Ready to build?
Pick a workflow, copy the prompt, and ship your first project. That's the best way to learn.