The Vibe Coding
Playbook

Vibe coding is a method of building software where you describe what you want in plain English, and Artificial Intelligence writes the code for you. You do not need to memorize programming languages, understand complex syntax, or spend years studying computer science. You just need a clear idea and the ability to communicate it.

The term was coined in February 2025 by Andrej Karpathy, a prominent AI researcher and former Director of AI at Tesla. He described it as a process where you "fully give in to the vibes, embrace exponentials, and forget that the code even exists." Collins Dictionary named it their Word of the Year for 2025.

The Chef Analogy That Makes It Click

Think of yourself as the head chef in a high-tech kitchen. You write the recipe (the prompt) and the AI acts as your sous-chef, chopping, stirring, and cooking at incredible speed. You do not need to know how to hold the knife perfectly. You just need to know what the final dish should taste like. The AI handles the technical execution; you handle the vision and direction.

How Is This Different From Traditional Coding?

The short answer is: almost anything at the prototype or MVP stage. Vibe coding has already produced thousands of real, functional applications used by real people. Here are categories of what is being built right now, with actual examples.

Getting started with vibe coding does not require any prior technical knowledge. What it does require is a clear vision, a willingness to experiment, and the patience to iterate. Here is the exact workflow we recommend for beginners.

What a Good Prompt Looks Like

The AI coding tool market is crowded and evolving fast. We have tested and researched every major option so you do not have to wade through marketing copy. Here is our honest assessment of each tool, including what they are genuinely great at and where they fall short.

All pricing data sourced from official vendor pricing pages as of May 2026. Prices are subject to change.

Browser-based vibe coding tools are perfect for getting started. But once you are ready to work with real codebases, run terminal commands, and have AI that truly understands your entire project, it is time to meet the two most powerful AI coding agents available today: Claude Code from Anthropic and Codex CLI from OpenAI. Both run directly in your terminal and connect to your local files.

Step 0: Install Your Foundation Tools

Bookmark these. You will use them constantly. These are the commands that matter most when working with Claude Code and Codex CLI from your terminal.

Every AI coding session starts from zero. The model has no memory of what you built yesterday, no idea what tech stack you use, and no clue about your naming conventions. Context engineering is the practice of deliberately feeding the right information to the AI before it starts working, so it produces useful output the first time instead of the third.

Think of it like briefing a contractor before they start a job. A contractor who shows up with no briefing makes assumptions. Some will be right. Many will not. A contractor who arrives with a clear project brief, a list of house rules, and examples of the work style you want produces far better results on day one. Context files are that brief.

# My Project

A React 19 + Supabase SaaS app for freelance invoice management.
Users create, send, and track invoices. Payments via Stripe.

## Stack
- Frontend: React 19, TypeScript, Tailwind CSS 4
- Backend: Supabase (Postgres + Auth + Storage)
- Payments: Stripe

## Commands
- `pnpm dev`   — start dev server on port 5173
- `pnpm test`  — run Vitest unit tests
- `pnpm build` — production build

## Rules
- TypeScript strict mode, no `any` types
- Named exports only, no default exports
- Never commit .env files
- The /api/webhooks/stripe route validates signatures — do not modify the signature check

Write clean, readable code.
Follow best practices.
Be careful with security.

When creating a migration, first
check /db/migrations, then name
the file with a timestamp, then
run --dry-run first, then confirm
with the team lead, then...

Once you move beyond browser-based tools into terminal agents like Claude Code and Codex CLI, you gain access to a powerful configuration system. These files and folders control how the AI behaves, what it remembers, what it is allowed to do, and how it handles specific tasks. Here is every file that matters, what it does, and how to use it.

your-project/
├── CLAUDE.md                 ← Root context file (commit to git)
├── CLAUDE.local.md           ← Personal preferences (add to .gitignore)
├── AGENTS.md                 ← Cross-tool open standard (Codex, Cursor, etc.)
│
├── .claude/                  ← Claude Code configuration folder
│   ├── settings.json         ← Project-level Claude settings
│   ├── settings.local.json   ← Personal overrides (add to .gitignore)
│   ├── rules/                ← Modular rule files (all auto-loaded)
│   │   ├── code-style.md
│   │   ├── testing.md
│   │   └── security.md
│   ├── commands/             ← Custom slash commands (/review, /test-this)
│   │   ├── review.md
│   │   └── pr-prep.md
│   └── skills/               ← Reusable multi-step agent capabilities
│       ├── refactor/
│       │   └── SKILL.md
│       └── test-writer/
│           └── SKILL.md
│
└── .codex/                   ← Codex CLI configuration folder
    ├── config.toml           ← Project-level Codex settings
    └── AGENTS.md             ← Alternative instructions location

# Test Writer Skill

When invoked, generate a comprehensive test suite
for the specified file or function.

## Steps
1. Read the target file and understand its purpose
2. Identify all public functions and expected behaviors
3. Write unit tests: happy path, edge cases, errors
4. Match the project's existing test patterns
5. Run `pnpm test` and fix failures before finishing

## Output
- Test file saved with .test.ts suffix
- Summary of what was tested and what was skipped

Review the changes in the current git diff. Check for:
1. Security vulnerabilities (SQL injection, XSS, secrets)
2. Missing error handling
3. TypeScript type safety issues
4. Performance problems (N+1 queries, re-renders)
5. Missing or outdated tests

Format as a numbered list ordered by severity.
For each issue: file name, line number, specific fix.

## Debugging
"I am getting this error: [paste error].
Here is the relevant code: [paste code].
Walk me through what is causing this and provide a fix.
Explain why the fix works."

## Feature Planning
"I want to add [feature] to my [tech stack] app.
Before writing any code, give me a step-by-step plan
with the files I need to create or modify, in order."

{
  "permissions": {
    "allow": [
      "Bash(pnpm *)",
      "Bash(git status)",
      "Bash(git diff *)",
      "Read(**)",
      "Write(src/**)"
    ],
    "deny": [
      "Bash(rm -rf *)",
      "Write(.env*)"
    ]
  },
  "model": "claude-opus-4-5",
  "hooks": {
    "PostToolUse": [{
      "matcher": "Write",
      "hooks": [{ "type": "command", "command": "pnpm lint --fix" }]
    }]
  }
}

# Default model
model = "gpt-5.5"

# When Codex asks for approval before running commands
# Options: "on-request" | "never" | "untrusted"
approval_policy = "on-request"

# Filesystem access level
# Options: "workspace-write" | "read-only" | "danger-full-access"
sandbox_mode = "workspace-write"

# Web search behavior
web_search = "cached"

# Reasoning effort
model_reasoning_effort = "high"

# Communication style
personality = "friendly"

[features]
memories = true
multi_agent = true

Vibe coding can feel like magic one day and a frustrating mess the next. The difference is almost always in the workflow, not the tool. These are the habits and techniques that separate builders who ship from those who get stuck.

We have seen hundreds of vibe coding projects, both the ones that succeed and the ones that fall apart. The failures almost always trace back to the same handful of mistakes. Here is what to watch out for, and exactly how to avoid each one.

Every vibe coder hits a wall. The app was working yesterday, and now it is not. Or the AI keeps generating the same broken code no matter how you rephrase the prompt. This is normal. Here is a systematic approach to getting unstuck.

The Vibe Code Rescue Checklist

Recognizing the "Vibe Coding Hangover"

The vibe coding hangover is a real phenomenon. Your app works, but it is slow, every new feature breaks three existing ones, and the AI is generating increasingly bizarre solutions to increasingly bizarre problems. This is called technical debt, and AI is exceptionally good at accumulating it quickly.

Signs you have a technical debt problem include: the AI refuses to make changes without rewriting large sections of unrelated code; your app takes more than 5 seconds to load; users report intermittent bugs you cannot reproduce; or you have more than 20 files in your project and cannot explain what half of them do.

The vibe coding rescue market is growing fast, and unfortunately, so is the number of firms claiming to specialize in it without the expertise to back it up. Here is exactly what to look for, and what to avoid, when hiring a team to fix, rescue, or scale your AI-generated project.

What to Look For in a Vibe Code Rescue Firm

Red Flags to Watch Out For