Vibe Coding

Table of content

Vibe coding is programming by describing what you want, not how to build it. You talk to an AI agent, it writes the code. Your job shifts from typing syntax to directing intent.

The mental shift

Traditional coding:

# You think about HOW
def parse_config(path):
    with open(path) as f:
        data = json.load(f)
    return Config(**data)

Vibe coding:

"Parse the config file at this path and return a Config object"

Traditional	Vibe
Write syntax	Describe intent
Debug line by line	Review and iterate
Know the API	Know what you want
Hours of implementation	Minutes of conversation

The workflow

Research → Plan → Implement → Validate
   ↓         ↓        ↓          ↓
Understand  Design   Execute   Verify
the problem before   in small  it works
            coding   batches

1. Research first

Before writing code, understand the landscape:

You: "I want to add OAuth login. What are the options
     for Next.js apps? Don't implement yet."

Claude: [explains options, tradeoffs, recommendations]

Use Plan Mode (Shift+Tab twice in Claude Code) to prevent premature implementation.

2. Plan before implementing

You: "Create a plan for adding Google OAuth.
     List the files we'll touch and the order."

Claude: [outputs structured plan]

Review the plan. Adjust before any code is written.

3. Implement in batches

You: "Implement step 1 from the plan."

Claude: [writes code, explains key decisions]

You: "Good. Now step 2."

Small batches = easier review = fewer mistakes.

4. Validate constantly

You: "Run the tests. If they fail, fix them."

Claude: [runs tests, iterates until green]

Key principles

Context is everything

Claude only knows what’s in context. Manage it:

Do	Don’t
Keep CLAUDE.md under 500 lines	Dump entire codebase
Reference specific files	Say “you know the code”
Stay under 60% context window	Let context overflow

Your CLAUDE.md is your API

# CLAUDE.md

## Project
Next.js 14 app with Prisma, TypeScript strict mode.

## Commands
- `pnpm dev` - Start dev server
- `pnpm test` - Run tests
- `pnpm db:push` - Push schema changes

## Patterns
- Use server components by default
- Zod for all validation
- No relative imports deeper than ../

This file persists across sessions. Keep it current.

Iterate, don’t perfect

First pass won’t be perfect. Plan for iteration:

You: "This works but the error handling is weak.
     Add proper error boundaries and logging."

Claude: [improves code]

You: "Now add tests for the error cases."

Common mistakes

Mistake	Fix
Implementing before understanding	Research → Plan → Implement
One massive prompt	Break into steps
Accepting first output	Review, iterate, verify
Ignoring context limits	Check context usage, start fresh when needed
No CLAUDE.md	Write one. Update it.
Skipping validation	Always run tests before moving on

Tools

Tool	Strength
Claude Code	Best for complex projects, full codebase access
Cursor	IDE integration, inline edits
Windsurf	Visual, beginner-friendly

Start with Claude Code. It has the deepest integration with your filesystem and terminal.

When vibe coding fails

Not everything should be vibe coded:

Performance-critical code — You need to understand the implementation
Security-sensitive logic — Review every line yourself
Novel algorithms — AI can’t invent what doesn’t exist in training data

For these, use AI as a research assistant, not an implementer.

Next: Claude Code Setup Guide