How to Vibe Code with Claude: A Step-by-Step Workflow That Doesn't Ship Security Bugs

Claude is very good at turning a plain-English description into working software. That is what makes it popular for vibe coding. It is also what makes it easy to ship something you do not fully understand.

This guide is the workflow we recommend to founders who build with Claude. It covers which Claude product to use, how to set up a project so Claude stays on track, how to review what it writes, and the security pass to run before real users arrive. It is not a list of clever prompts. It is a process that keeps the speed and removes the most common ways AI-built apps fail.

Claude.ai, Artifacts, or Claude Code: which one should you use?

"Vibe coding with Claude" can mean three different things, and they suit different stages.

Claude.ai chat with Artifacts. You describe a small tool or interface and Claude renders it in the browser next to the conversation. This is ideal for prototypes, landing page mockups, calculators, and internal one-offs. There is no repository, no deployment pipeline, and no real backend. Use it to explore an idea, not to run a business on.

Claude Code. Anthropic's agentic coding tool runs in your terminal, IDE, desktop app, or the browser. It reads your repository, edits files, runs commands, and commits. This is what you want once the project has a real codebase, a database, authentication, or payments. See the Claude Code documentation for installation and setup.

Claude inside another tool. Cursor, Lovable, Bolt, and others can use Claude models behind the scenes. The workflow below still applies, but each platform has its own risks. Our Cursor security review and Lovable security audit pages cover those specifics.

Is Claude good for vibe coding? Yes, especially for multi-file changes where it needs to understand how parts of the app connect. The limitation is not code quality. It is that Claude optimises for the request you made. If you never ask "who should be allowed to see this record?", it may never answer that question.

Step 1: Start with a written plan, not a prompt

Before Claude writes a line of code, write down what you are building in a short document:

• Who the users are and what roles exist (for example: visitor, member, team admin, internal staff).
• What data each role can read and change.
• What happens when someone pays, cancels, or gets a refund.
• What third-party services you will use (Supabase, Stripe, Resend, OpenAI, and so on).

This takes twenty minutes and prevents the biggest category of bugs we find in audits: missing authorization. Claude can only enforce rules you state. A plan with explicit access rules gives it something to enforce and gives you something to check against later.

Step 2: Set up CLAUDE.md

Claude Code reads a CLAUDE.md file at the root of your project at the start of every session. Treat it as standing instructions for your codebase. Anthropic's memory documentation explains where these files can live and how they load.

A useful CLAUDE.md for a vibe-coded app is short and specific:

# Project rules

## Stack
Next.js App Router, TypeScript, Supabase (Postgres + Auth), Stripe.

## Commands
- npm run dev / npm run build / npm test

## Security rules (always apply)
- Never put secrets in client code. Only NEXT_PUBLIC_ values may reach the browser.
- Every API route and server action must check the session AND ownership of the record.
- Every new Supabase table needs RLS enabled with explicit policies.
- Prices and plan limits come from the server, never from the request body.
- Stripe webhooks must verify the signature before doing anything.

## Workflow
- Propose a plan before multi-file changes.
- Keep changes small. One feature per commit.

Keep it under a page. Long instruction files get diluted. If you notice Claude repeating the same mistake, add one line about it.

Step 3: Use plan mode for anything non-trivial

Claude Code has a plan mode where it researches the codebase and proposes an approach without editing files. Use it for every feature that touches more than one file, and always for anything involving auth, payments, or data access.

Read the plan before approving it. You are looking for three things:

1. Did it understand the request? AI tools sometimes build something adjacent to what you asked for.
2. Where does the access check happen? If the plan adds an API route or a database query, it should say how it confirms the user is allowed to do this.
3. What is it touching that you did not expect? A plan that edits your auth middleware to add a dashboard widget deserves a question.

Pushing back on a plan costs seconds. Untangling a bad implementation costs hours.

Step 4: Work in small diffs and commit often

The most reliable predictor of a messy vibe-coded codebase is giant, unreviewed changes. Ask Claude to build one thing at a time, and commit after each working step.

Small diffs give you two things. First, you can actually read them. A 40-line change to one route is reviewable; a 2,000-line change across 30 files is not. Second, git becomes your undo button. If Claude takes a wrong turn, you can return to the last good commit instead of asking it to "fix" its way out.

When you do not understand a change, ask: "Explain this diff in plain English and list anything that could go wrong for security or data access." Claude is good at critiquing code, including its own, when you ask it to.

Step 5: Choose permission modes deliberately

Claude Code asks for permission before running commands or editing files, and you can configure what is allowed automatically. The permissions documentation covers the options.

Sensible defaults for a solo founder:

• Allow file edits and read-only commands in the project.
• Keep approval on for anything that deploys, pushes to main, deletes data, or touches production credentials.
• Never put production database URLs or live Stripe secret keys in the environment Claude runs in. Use a development database and Stripe test mode.

Auto-approving everything feels faster until an agent runs a migration against the wrong database.

Step 6: Make Claude write tests, then check the tests

Ask Claude to write tests for every feature that handles money, permissions, or user data. Then read the tests, because AI-written tests have a specific failure mode: they often assert whatever the code currently does, including the bug.

A test that says "user B can fetch user A's invoice and gets status 200" passes perfectly and proves the vulnerability exists. The tests you want say "user B gets 403 or 404". Our guide on how to test vibe-coded apps covers the specific cases worth writing, including two-account access tests.

Step 7: Be careful with MCP servers, plugins, and skills

Claude Code can connect to MCP servers and load plugins that extend what it can do. These are powerful and they run with real access to your machine and accounts. Treat them like any other dependency:

• Install only from sources you trust, and read what a plugin or MCP server can do before enabling it.
• Avoid giving an MCP server broad credentials (an admin database URL, an org-wide GitHub token) when a scoped one will do.
• Be wary of content Claude reads from the outside world: issues, web pages, README files, and pasted logs can contain instructions aimed at the agent.

We have written about several real cases, including a GitHub issue that could hijack Claude Code. If your product itself is an agent or uses MCP, our AI agent security audit covers tool permissions and prompt injection paths in depth.

Step 8: Run a security pass before launch

When the app works, stop adding features and do a dedicated security pass. Claude Code includes a /security-review command that asks Claude to review pending changes for common vulnerabilities. Use it. It will catch real issues such as injection, hardcoded secrets, and obviously missing checks. We looked at what this kind of tooling catches and misses in Claude Code Security Plugin: What It Catches and Misses.

Then go further than any automated review can:

1. Two-account test. Create two users. As user A, copy a request from the browser network tab. Replay it with user B's session. User B should never see A's data. This is the IDOR test and it catches the most common serious bug in AI-built apps.
2. Check your database policies. If you use Supabase, confirm row-level security is on for every table and that policies are not using (true). See Supabase row-level security.
3. Check payments. Paid access should be granted only after a verified webhook, never on the success page redirect. See Stripe webhook signature bypass.
4. Search the browser bundle for secrets. Open your deployed site, view the JavaScript in dev tools, and search for sk_, service_role, and API key prefixes.
5. Work through a full checklist. Our 25-point vibe-coded app security checklist covers secrets, auth, data access, payments, and deployment.

If you want a quick scored answer on where you stand, the free vibe code security check takes a few minutes.

Claude Code best practices, in short

• Write the access rules down before building.
• Keep CLAUDE.md short, specific, and focused on rules Claude keeps breaking.
• Use plan mode for multi-file and sensitive changes, and actually read the plan.
• One feature per change, one change per commit.
• Keep production credentials out of the agent's environment.
• Read AI-written tests and make sure they assert the secure behaviour.
• Treat MCP servers and plugins as dependencies with real access.
• Run /security-review, then the manual two-account and payment checks.

When to bring in a human reviewer

The workflow above will get a careful founder a long way. It will not replace a second set of eyes when the stakes go up: real payments, health or financial data, enterprise customers, or a fundraise with technical due diligence.

A professional review looks at your app the way an attacker would, with your business rules in mind. Our Claude Code security audit is built for apps made this way, and our general code audit service covers any stack. You can see how engagements are scoped on the pricing page.

FAQ

Can you vibe code with Claude Code if you can't program?

Yes, many non-developers do. You will move faster and ship safer if you learn to read a diff, use git to undo changes, and understand the basics of authentication and database access. You do not need to write code from scratch, but you do need to know what to check.

Is Claude better than Cursor for vibe coding?

They are different kinds of tool. Cursor is an editor that can use several models, including Claude. Claude Code is an agent that works across your repository from the terminal or IDE. Many developers use both. The security practices in this guide apply to either.

Does Claude Code write secure code by default?

It writes code that often follows good practice, but it optimises for the task you describe. If your request does not mention authorization, rate limiting, or webhook verification, those can be missed. Stating security rules in CLAUDE.md and running a security pass before launch closes most of the gap.

What is the /security-review command?

It is a built-in Claude Code command that asks Claude to review your pending changes for security issues. It is a useful first pass. It does not know your business rules, so it cannot reliably tell whether one user should be allowed to see another user's record.

How do I start vibe coding with Claude today?

Prototype in Claude.ai with Artifacts to shape the idea. When you need a real backend, install Claude Code, create a repository, write a short plan and CLAUDE.md, and build one feature at a time with commits in between.