Most "how to use Claude Code" tutorials show you a hello-world. This piece shows you how to use Claude Code to maintain a real business website that has revenue depending on it, in 2026, without breaking anything. It's the playbook we use across every Velocity X client site.
If you're new to Claude Code, the one-line summary is: it's Anthropic's CLI tool that lets Claude read your entire local codebase, run commands, edit files, and ship git commits. Unlike chat-based AI assistants, Claude Code operates on your actual repository — clone, branch, write, test, commit, push. It works.
Here's the production playbook.
Step 1: Set Up CLAUDE.md
The single most important file in your repository when working with Claude Code is CLAUDE.md. It's the persistent context document Claude reads at the start of every conversation. Without it, Claude has to re-learn your project on every session. With it, Claude shows up already knowing your stack, conventions, brand voice, and the things you've corrected past sessions on.
A good CLAUDE.md has three sections. The first is "Project Overview" — three to five sentences describing what the project is, what stack it uses, and what makes it different. The second is "Conventions" — code style, naming, where things live, what to avoid. The third is "Brand & Voice" — either inline or a pointer to brand.json.
Add to that: a "Hard Rules" section listing the things Claude must never do without asking (delete files, change fonts, push to remote, modify CI). And a "Recent Learnings" section that captures corrections — when Claude does something wrong and you correct it, add the correction here so the same mistake doesn't happen next session.
For larger projects, use the "halls and rooms" convention: keep CLAUDE.md short (an index), and break domain-specific guidance into hall files (CLAUDE.md/halls/payments.md, halls/database.md, etc.). Root CLAUDE.md loads every session; halls only load when relevant. This keeps the always-loaded context small while letting deep, specific rules live where Claude can find them.
Step 2: Pin Your brand.json
Reference brand.json explicitly in CLAUDE.md as the canonical brand-context file. Something like:
{`## Brand Context
brand.json at the project root is the canonical source for every
brand-affecting input — name, tagline, voice rules, pricing,
contact details, palette. Read it before writing any user-facing
copy. If brand.json doesn't have what you need, ask first; never
guess.`}With this in place, Claude consults brand.json when writing copy, generating pricing references, picking colours, and crafting tone-sensitive language. You get on-brand output by default instead of corrections after the fact.
Step 3: Establish the Branch-Preview Workflow
Production websites need a deploy preview before changes go live. Set this up before you start using Claude Code in anger.
The pattern: every branch in your GitHub repo deploys to a unique Netlify preview URL automatically. main deploys to the production domain. Claude Code creates feature branches, pushes them, and Netlify generates a preview URL Claude can share back to you. You click the link, see the change live, and either merge the PR or ask for revisions.
To configure this on Netlify: connect your GitHub repo, leave the default "deploy previews for all PRs" setting on, and you're done. The same is true for Vercel and Cloudflare Pages. This isn't a Claude Code feature; it's the standard CI behaviour of every modern host, and it's what makes the whole workflow safe.
Step 4: Use Specific Prompts
The single biggest factor in Claude Code output quality is prompt specificity. Vague prompts give vague results. Specific prompts that name files, reference the convention, and state acceptance criteria give shippable results.
Bad: "Add a new pricing tier."
Good: "Add a fourth pricing tier called 'Enterprise' to brand.json after 'large'. Price $49,995. Include the same fields as the other tiers. Then update Section-PricingHormozi.astro to render four cards instead of three, keeping the existing grid breakpoints. The new tier gets ribbon text 'Custom' in violet. Use the existing value-stack pattern for the included items — eight items, including the same dedicated-module language as the large tier."
The second prompt produces a shippable PR in one pass. The first produces a back-and-forth conversation. The cost of writing more specific prompts is paid back many times over in fewer iterations.
Step 5: Use Sub-Agents Sparingly
Claude Code supports sub-agents — separate Claude instances dispatched in parallel to handle independent work. They're powerful for tasks that genuinely split, like "audit twenty pages for broken links" or "rewrite all the alt tags". But they consume context aggressively and their outputs flow back into the main conversation, so use them deliberately, not reflexively.
The rule we use: if the work is genuinely parallel (no shared state, no inter-dependencies), and you can describe each sub-task in a paragraph or two, sub-agents make sense. If the work is sequential or requires a lot of context, do it in the main conversation.
Step 6: Treat Claude Like a Senior Collaborator, Not a Junior
The teams that get the most out of Claude Code talk to it the way they'd talk to a senior engineer on Slack. They state the goal, the constraints, and the relevant context, and then they let Claude propose an approach. Sometimes Claude pushes back with "actually, the simpler way is X" — and they listen, because the senior-collaborator framing means the AI is empowered to disagree.
Teams that treat Claude like a code-completing junior write tighter prompts but get tighter results. The best prompts in our experience are paragraph-long briefs, not one-line commands.
Step 7: Use Skills and MCP Servers
Claude Code supports skills (workflow modules) and MCP servers (external integrations). Three skills worth installing for production website work:
superpowers — workflow scaffolding for brainstorming, planning, debugging, and writing. Auto-loaded at session start.
caveman — ultra-compressed comms mode that saves ~75% of tokens during sub-agent dispatch and large scans. Worth enabling for big refactors or multi-project sweeps.
frontend-design — design-engineering helper for UI craft.
For MCP servers, the ones that matter for production websites are Supabase (for database operations from inside Claude), Netlify (for deploy info and env vars), and a browser automation MCP for visual verification.
Step 8: Visual Verification Is Mandatory
Build passes are not a substitute for "looks right". Before declaring a UI change complete, launch a browser automation tool (Playwright, PinchTab, or Claude-in-Chrome) and screenshot the page at the viewport sizes your users actually browse on — typically 360px, 390px, 768px, 1024px, and 1440px. Eyeball every change. AI assistants will sometimes produce code that passes type-checks and lint but renders subtly wrong; visual verification catches this.
This is non-negotiable enough that we add it to CLAUDE.md as a hard rule: "Never claim visual/UI work is done without launching the browser, navigating to the page, and screenshotting desktop + mobile. If the browser won't launch, stop and ask — no workarounds."
Step 9: Auto-Debug Watch
Run a passive monitor on your dev-server log filtered for "error|failed|cannot|undefined" while Claude is editing. Build breaks show up as notifications instantly rather than being discovered when you next try to render the page. The Claude Code session can self-heal by reading the error, identifying the cause, and fixing it before you've even noticed.
For projects with a connected browser (PinchTab, Claude-in-Chrome), add a 60-second heartbeat that reads browser console errors. Same principle: catch problems immediately rather than later.
Step 10: Commit Hygiene
Configure Claude to write conventional commit messages — short subject line, body that explains why, never "what" (the diff shows what). Set up Claude to make one logical change per commit instead of dumping a whole feature in a single commit. Future-you, doing a git blame in 18 months, will thank present-you.
Our convention: short subject under 70 chars, blank line, 1-3 paragraph body, ending with the trailer Co-Authored-By: Claude so it's clear in the history which commits were AI-assisted. Useful for audits, debugging regressions, and the inevitable "wait, why did we do this" three months later.
Frequently Asked Questions
Do I need to be a developer to use Claude Code?
For day-to-day content edits on an existing project: no. With a well-set-up CLAUDE.md and brand.json, you can describe changes in plain English and review Claude's PRs visually on Netlify preview URLs. For the initial setup (installing Claude Code, configuring CLAUDE.md, connecting to GitHub) — you'll either spend a weekend learning the basics or hire a developer to do the setup once.
Can Claude Code break my website?
Not if you have branch previews. Every change Claude makes goes through a feature branch and a preview URL before it merges to production. You see the rendered result before it ships. The risk model is the same as code review with any human collaborator. The teams that have problems with Claude Code are the ones that skip the preview step and let Claude push straight to main — don't do that.
How expensive is running Claude Code in production?
For a small business website, expect $5-$50 USD per month in API costs depending on usage. The 1M-context Claude Opus is more expensive per call but produces fewer iterations. For most small businesses, the API cost is rounding-error relative to the alternative cost (developer time at $100+/hr).
What about Cursor?
Cursor is a fine alternative if you prefer working in an IDE. The principles are the same: pin brand.json in the rules file, enforce branch previews, write specific prompts. Claude Code's edge is its CLI-first design and tighter coupling to git operations; Cursor's edge is the inline editing experience. Pick whichever fits your workflow.
What about ChatGPT or Gemini?
Neither has a production-grade equivalent of Claude Code yet. Both can help with one-off code snippets but neither operates on a full repository the way Claude Code does. For production website maintenance, Claude Code (or Cursor with Claude) is the current best-in-class workflow.
How do I onboard a new team member to a Claude-Code-based project?
Three things. First, get them familiar with the CLAUDE.md and brand.json — that's their orientation document. Second, get them to make one tiny PR via Claude Code so they see the loop end-to-end (branch, push, preview, merge). Third, have them watch you do a real feature in real time. Total onboarding is typically 2-3 hours for a developer, half a day for a non-developer.
The Bottom Line
Claude Code on a production business website works in 2026, but it works much better when you set up CLAUDE.md, brand.json, branch previews, and a few hard rules upfront. The teams that win with this workflow ship faster than teams that don't — typically 3-5x faster on content edits and 1.5-2x faster on feature work. The investment in setup pays back inside the first week of real use. Start with CLAUDE.md, set up brand.json, wire up Netlify previews, and write your first specific prompt today.