📋 Bookmark this page

Vibe Coding Cheat Sheet

One page. Everything you need. Keep it open while you build.

🎯 The Prompt Formula

Every good prompt has these four parts. More context = better output.

ROLE: You are a senior [framework] developer.

CONTEXT: I'm building [app] for [audience]. Here's what exists so far: [paste code/structure]

TASK: Build [specific thing]. It should [requirements]. Use [tech/pattern].

CONSTRAINTS: Keep it under 200 lines. No external deps. Must work with [existing code].

⚡ Quick Prompts (copy & use)

Prompts that work in any AI coding tool. Fill in the brackets.

Scaffold a new project

"Create a [framework] app with [features]. Use [styling]. Include auth, a dashboard, and a landing page."

Fix a bug

"I'm getting [error]. Here's the code: [paste]. Here's what I expect: [behavior]. Fix it and explain why."

Improve existing code

"Refactor this to be more readable, performant, and maintainable. Add error handling. Keep the same API."

Add a feature

"Add [feature] to this [component/page]. It should [behavior]. Match the existing code style."

Write tests

"Write comprehensive tests for [file/function]. Cover happy path, edge cases, and error states. Use [test framework]."

Deploy prep

"Review this project for production readiness. Check: env vars, error handling, security, performance, SEO meta tags."

🛠 Tool Picker

What to use, when.

I want to...	Use this	Why
Build anything real	Claude Code	Agentic coding from your terminal. Reads your codebase, writes code, runs commands. The default choice.
Get a second opinion / PR review	OpenAI Codex	Spins up a sandbox, writes and tests code, gives you a PR. Great alongside Claude Code.
Prototype fast (no setup)	Bolt / Lovable	Browser-based. "Make the button green" → see it change live. Great for prototyping.
Generate UI components	v0 by Vercel	Best for React/Tailwind components. Describe it, get it.
Think through architecture	Claude (chat)	Best reasoning. Great for planning before building.

✅ Do / ❌ Don't

Do this

Give full context before asking for code

Describe the end state you want, not just the first step

Paste error messages verbatim when debugging

Use CLAUDE.md for persistent project context

Ship fast, iterate in public

Read the code AI writes (skim, don't memorize)

Keep conversations focused — one feature per chat

Don't do this

Ask for one file at a time in isolation

Accept code blindly without reading it

Give vague prompts like "make it better"

Put secrets or API keys in prompts

Skip testing because "AI wrote it"

Let one conversation go on for 50+ messages

Fight the AI — if it's struggling, re-prompt differently

⌨️ Claude Code Essentials

The commands and patterns you'll use every day.

Start a session claude

One-shot task claude "make the button green"

Resume last session claude --continue

Project instructions CLAUDE.md

Accept all changes y / Enter

Cancel current task Esc

Run with auto-accept claude --dangerously-skip-permissions

Pipe input cat error.log | claude "fix this"

🔁 Common Patterns

Prompting patterns that work across all tools.

The Scaffold → Iterate Loop

Generate the full structure first ("scaffold a Next.js app with..."), then iterate feature by feature. Never start with details.

The "Make the Button Green"

Sometimes the best prompt is the simplest. "Make the button green." "Center this." "Make it faster." Don't overthink it — say what you see, say what you want.

The Rubber Duck

Before building, describe your entire app to the AI. Ask it to poke holes. Then build with the improved plan.

The Fresh Start

If a conversation is going in circles after 15+ messages, start a new one. Re-paste context and re-prompt. This works better than you'd think.

The Diff Review

After AI makes changes, always review the diff (not the full file). Faster to skim, easier to catch mistakes.

Ready to build something?

Pick a workflow and start shipping.

Browse Workflows → What is Vibe Coding? →