Claude Vibe Coding: Routes, Models and Plans

You can vibe code with Claude two ways. Use Claude chat for a single file or a small script you copy into place. Use Claude Code for a real project, because it reads your folder, edits files, runs your tests and shows diffs. Pro costs $17 a month on annual billing, $20 monthly. Facts checked 31 October 2026.

Pick your route

Most people begin in chat and move to Claude Code when copying files back and forth gets tiresome. That moment arrives fast: once the project has more than two or three files, the model needs to see them, and the chat window cannot.

If you want a guided build with Claude Code, our vibe coding tutorial takes you from an idea to a live page, and how to use Claude Code covers the first session. This page is about choosing among Claude's options.

Which Claude model

Claude has four current models, per Anthropic's models overview. Our Claude models page has the full table.

Those are API prices. On a subscription you do not pay per token, but the relative cost still shows up as how quickly you use your plan's limit. A heavier model burns the pool faster.

For vibe coding, this is a sensible default, drawn from the descriptions above rather than a test we ran. Start on Opus 5.5, which Anthropic recommends for most workloads. Drop to Sonnet 5.5 for small, clear changes, since it is half the price. Reach for Fable 5.1 only when a problem has defeated the others. Use Haiku 5.5 inside subagents for routine jobs, not as your main driver. In Claude Code, /model switches models during a session, and neither Fable model is the default on any plan.

What it costs

On a subscription, Claude Code shares one usage pool with chat, in rolling windows.

Team and Enterprise plans exist for organizations; see Claude Code pricing and Claude Pro pricing. Two details save surprises. Setting ANTHROPIC_API_KEY in your environment makes Claude Code bill the API instead of your plan. And API credits included with Max, Ultra and Team cannot be spent in Claude Code.

For a beginner, Pro is the starting point. If you run out mid-session, you wait for the window to reset, upgrade, or turn on usage credits at API rates. The costs page in Claude Code's docs explains how to watch usage.

Vibe coding in Claude chat

This route is the simplest, and it has real uses.

What to ask for. One file, one purpose. "Write a single HTML file with a tip calculator. Inline CSS and JavaScript, no libraries" is a good first prompt.

How to use the answer. Save the code to a file, open it, and test it. If something is wrong, paste the exact error back, or describe what you see versus what you expected.

Where it stops. The model cannot see your folder or run the code. You are its eyes and hands. For a project beyond a few files, that overhead eats the speed you came for. It is also easy to paste an old version of a file into the chat and get changes that fit the wrong one.

Good habits.

1. Ask for the whole file each time, so you do not merge snippets by hand.
2. Keep a version history in Git, even for one file.
3. Start a new chat when a thread gets long and confused, and paste in the current file.
4. Tell it what must not change.

Vibe coding with Claude Code

Claude Code works on your project folder. It reads files, writes changes, runs commands, and shows you what it did. You review each change, approve it, or tell it to try something else.

A first session goes like this.

1. Make an empty folder and start Claude Code in it.
2. Describe the smallest working version in a few sentences.
3. Review what it proposes, approve edits, and open the result.
4. Commit when something works, so you have a save point.
5. Add one change per prompt, and click through the result each time.

Three features make it better for vibe coding than chat.

• It runs things. It can start your app, run your tests and read the error, then fix it. The best-practices page says Claude stops when the work looks done, so give it a pass or fail check, and ask for the output.
• It shows diffs. You can read what changed, even if you do not read all the code.
• It has a plan mode. A read-only phase where it studies the project and proposes a plan before changing anything.

See Claude Code best practices for the team-level setup, including a short CLAUDE.md, permission rules and hooks.

Write a short instruction file

Claude Code reads a CLAUDE.md in your project at the start of each session. For a vibe coding project, three lines can save hours.

# Rules
- Run `npm test` after changes and show me the output.
- Never put secret keys in front-end code.
- Make one change at a time and tell me which files you touched.

Keep it short. The docs recommend under 200 lines, and a few lines you will actually keep up to date beat a long file nobody maintains. See how to write a good CLAUDE.md.

Keep it from doing damage

An agent that edits files and runs commands can make mistakes at speed. Three controls are worth setting up on day one.

1. Git. Commit before each big change. If the result is bad, go back.
2. Permissions. Keep the default of being asked before edits and commands until you trust the pattern. Deny access to .env files.
3. A hook for the rule you cannot afford to break. For example, block edits to a protected file. See the hooks guide.

Habits that make Claude results better

These apply to both routes.

• Describe the outcome and the user. "A page where a customer picks a time and sees a confirmation" gives the model a target.
• Ask for a plan on anything large. Read it. A wrong plan is cheap to fix.
• Paste exact errors. Do not paraphrase.
• Ask it to explain. "Explain this change in two sentences" is a quick comprehension test.
• Ask for the tests, then ask it to run them.
• Say what is off limits. "Do not change the sign-in code" prevents collateral damage.
• Start fresh when stuck. After three failed attempts at the same bug, revert and describe the symptom anew.

Prompt recipes that work with Claude

Here are four reusable prompts. Swap the nouns for your own project. They work in chat and in Claude Code.

Start small. "Build the smallest version of a booking page: a list of three time slots, a name field and a confirm button. One HTML file. Explain in two sentences how it works."

Add one thing. "Add an email field to the booking form. It must show an error if the address is empty or has no @. Do not change anything else. Tell me which lines you changed."

Ask for a plan first. "Before changing code, list the files you would touch to add a cancel button, and the risks. Wait for my reply."

Review your own work. "Read the code you just wrote. List anything that could go wrong with unusual input, such as empty fields, very long text or two quick clicks. Do not fix anything yet."

The last one is the most valuable habit. A model that has just written code will often find problems when asked to look again with a different brief, which is the same idea as using a separate reviewer in a larger setup.

A first project in four sittings

Here is a pace that suits a beginner, with a small project such as a split-the-bill calculator.

Four short sittings teach the loop better than one marathon. Each one ends with something saved, which means a bad idea costs you an evening at most.

When Claude gets it wrong

Claude makes mistakes like any model. Expect three kinds. It may write code that looks right and fails on an edge case. It may misread a vague request and build something close but not quite what you wanted. And over a long session it may lose track of earlier rules, since context fills up. When that happens, the fixes are cheap: be more specific, restate the rule, or start a new session after committing your work. In Claude Code, instructions placed in CLAUDE.md survive compaction, because the file is re-read from disk, while instructions that existed only in conversation may not.

Where Claude fits among vibe coding tools

Claude is a model family and an agent, not a hosted builder. It does not publish your app, supply a database or give you a custom domain. Builders such as Lovable, Bolt and Replit do those things for you, and you pay for the convenience and accept their platform. With Claude Code you choose your own host. Our tutorial deploys to Cloudflare Pages for free, and our deploy guide covers the rest.

For a comparison of Claude Code with other agents, see Cursor vs Claude Code and how to choose an AI coding agent.

Privacy

What happens to your prompts and code depends on your plan and settings. Read Anthropic's data usage documentation before putting private code or customer data into a session. The docs say Free, Pro, Max and Ultra accounts can allow their data to train future models, with 5-year retention if you allow it and 30 days if you do not, and that Team, Enterprise and API use is not trained on under commercial terms, with 30-day standard retention and zero data retention available to qualified accounts. As a baseline for any AI tool, keep secrets and customer records out of prompts.

Our take

The simplest advice is to match the route to the size of the job. A script goes in chat. A project goes in Claude Code, with Git, a few lines of rules and a check you can run. Spend your first week learning the loop of small change, test, commit, because that loop is what makes vibe coding with Claude safe enough to trust.

On models, resist the urge to run the most expensive one all the time. A mid-priced model that finishes the task beats a top model that ends your window early. And whatever the route, remember the limit of the method: if the app will hold other people's data, get someone to read the code before launch, as in our security guide.

Checklist

• Chose chat for small pieces and Claude Code for projects
• Picked a model by the size of the task
• Know which plan you are on and how its limit works
• Project is in Git with a commit after each working step
• A short CLAUDE.md with a test command and two or three rules
• Secrets are kept out of prompts and front-end code
• A reviewer has seen anything handling money or personal data

Related pages

• Vibe coding tutorial
• Claude Code
• Claude models
• Cursor vibe coding
• Is vibe coding bad