How to vibe code w/ claude code

A practical guide

The “vibe coding” thing people keep joking about is just the visible tip of something much bigger.

I spent the last two weeks building apps that I always wished existed.

From chord progression designers to screen recorders.

We are going into an era where every app will be built on demand. Buying software makes sense if it's solving a problem that cannot be generated.

If your problem can be generated and you’re still waiting for a company to solve it, you’re already behind.

This is me catching you up — with Claude Code.

Why claude

I’ve tried everything at this point. Chatgpt, cursor, copilot, gemini, all of it

They all work. But Claude is the only one I actually use now for building things, not because it writes better code (sometimes the others write better code honestly)

It’s because Claude asks instead of assumes

With chatgpt i’d prompt something and it would just... do it. Even if my prompt was unclear or I was asking for something that didn’t make sense. It would confidently give me something and let me figure out later that it was wrong

Claude does this thing: “just to clarify, do you want X or Y?” or “i’m assuming you want Z, is that right?”

Seems tiny but it changes everything when you don’t know what you’re doing. Those clarifying questions have saved me hours of debugging code that was solving the wrong problem.

The other thing is Claude explains what it’s doing without me asking. I’ll get the code and then a paragraph explaining why it made certain choices. Chatgpt just gives you the code and moves on.

For someone who’s actually trying to learn while building, that context matters. I’ve picked up more programming concepts from Claude’s explanations than from any tutorial i’ve tried.

1: The core mechanics

To control the machine, you must understand the machine. Claude operates on a strict 4-step loop:

• Receives Task: (e.g., “Fix the bug”).

• Gathers Context: It reads files to understand the codebase.

• Formulates Plan: It decides on a strategy.

• Takes Action: It updates files and runs tests.

The Lesson: Claude’s superpower isn’t IQ; it’s the ability to chain tools together. The model cannot “see” your computer; it relies on the Assistant to append instructions and execute formatted responses.

2: Context engineering

If you dump a massive codebase into the chat, the model degrades. You need Context Management.

The Map (/init): Run this once. It analyses your architecture and builds a Claude.md file, a map of your project’s soul. Critical Detail: The contents of this file are included in every single request. Keep it lean.

The 3-Layer Memory:

• Project Level: Shared instructions committed to the repo.

• Local Level: Your personal instructions (ignored by git).

• Machine Level: Global instructions for you across all projects.

The Laser (@): Don’t let it guess. Use @database_schema to force it to look at the exact file you need. This saves tokens and increases accuracy.

3: Two brains strategy

Claude has two distinct high-performance modes. Knowing when to use which is the difference between a bug fix and a system architecture. Note that both consume additional tokens so use them wisely.

• Mode A: Planning (Shift + Tab x2)

You use this when: You need Breadth (e.g., “Refactor this module across 10 files”).

What does it do? It halts execution to research the codebase and write a detailed implementation plan before touching a single line of code.

• Mode B: Thinking (”Ultra think”)

You use this when: You need Depth (e.g., “Why is this race condition happening?”).

What does it do? It gives Claude an extended “reasoning budget” to solve hard logic puzzles or debug specific issues.

Pro Tip: Paste screenshots to give it visual context on UI bugs. Note: Use Control-V (not Command-V), even on macOS.

4: Utilising the panic buttons

When the AI starts hallucinating, do not argue with it. Control the timeline.

• The Stop (Escape): Interrupts the output immediately.

• The Correction (Escape + Memory): Don’t just stop it; teach it. Pressing this allows you to add a memory (using #) about the mistake so it doesn’t repeat it next time.

• The Rewind (Double Escape): This is your time machine. It lets you jump back to before the mistake happened, erasing the bad context entirely.

• The Compact (/compact): If the conversation gets too long, this summarises the history while keeping the lessons learned, clearing out the clutter.

5: Utilising hooks (guardrails)

Stop fixing Claude’s mistakes manually. Automate the feedback loop using Hooks defined in your .clod/settings.local.json.

The “Security Guard” (Pre-Hook):

• Problem: Claude tries to read your sensitive .env file.

• Fix: A pre-hook that monitors the read or grep tools. If the path includes .env, your script exits with Code 2.

• The Feedback: You must print the error to stderr. This isn’t just a log; it is fed back to Claude, forcing it to recognise the block and change its strategy.

The “Type-Safety” Loop (Post-Hook):

• Problem: Claude edits a file but breaks the build.

• Fix: A post-hook that runs tsc --no-emit after every edit. If errors are found, they are fed back to Claude instantly so it can self-correct.

The “Anti-Bloat” System:

• Problem: Claude creates duplicate code.

• Fix: A hook that watches specific folders and spins up a secondary Claude instance to check for duplicates before committing.

6: Going god mode

This is where you leave 99% of developers behind.

Custom Commands: Stop typing repetitive prompts. Create a markdown file in .Claude/commands/ (e.g.,audit.md). Now, typing /audit runs that complex dependency check instantly.

Give it Hands (MCP): Plug in external tools using the Model Context Protocol. Run claude mcp add [name] to install servers like Playwright. Now Claude can open a real browser, click buttons, and fix CSS based on what it sees.

Security Note: You can auto-approve tools in your settings to speed up the workflow.

7: Scaling it

Stop waiting for humans to review your code.

GitHub Integration: Install the Claude App. It will now auto-review every Pull Request for bugs and security risks.

Architecture: It runs inside GitHub Actions. You can even add Custom Instructions in .github/workflows to teach it your team’s specific coding standards.

The SDK: Want to build pipelines? Import the Claude Code SDK into your Python or TypeScript scripts to embed this intelligence directly into your CI/CD workflow.

What’s actually possible now

Here’s the part that still surprises me

I’ve talked to actual engineers (people with years of experience), people who understand things i can’t even comprehend and some of them are shipping less than people who started vibe coding 6 months ago

Because they think in constraints. They see a problem and think “that would take three months to build properly” meanwhile some person with zero technical background just describes what they want and has a working prototype by Tuesday.

The market doesn’t care about your credentials or your experience. It cares about what you can deliver and right now, a person who thinks clearly and iterates fast can outship someone with a CS degree who’s worried about doing things the right way

I’m not saying vibe coders are better than engineers. We’re not. For anything complex or mission-critical you need someone who actually understands what’s happening under the hood but for the other 80% of things? the internal tools, the automations, the simple products, the workflows? you don’t need an engineering degree anymore. you need clarity and patience

Now find ideas, and go build them.

I just wanted to show a very simple process to get you started, to make you realize that it’s actually as simple as many are saying.

So I hope you go try it out! There’s nothing else that you need for this.

At best, you create something crazy.

At worst, you learn an incredibly productive skill not be left behind.

-Abi