How I build agency-grade websites with Claude Code (my real stack)

You don't write the website. You direct it. That's the idea that changes everything. The beginner's trap is thinking you have to type every line: you don't. You decide the architecture and the rules; Claude Code writes the code at your pace. With your documentation done right, one person ships like a small studio. Here's the exact stack I use and the method that keeps it from falling apart halfway through.

What stack do I use to build a website with Claude Code?

Four pieces, no more to get started: Next.js, Tailwind, Supabase and Vercel. It's the same combination behind sites like OpenAI's or Notion's, all open source or free-tier, and it fits the AI-directing workflow perfectly.

• Next.js — the foundation. The React framework behind practically every serious frontend today. Open source.
• Tailwind — the styling. You style straight from the code instead of wrestling loose CSS files.
• Supabase — the data. Real PostgreSQL, with a login system (Auth) already included.
• Vercel — the publishing. Connect GitHub and your site is online in seconds.

You're the architect; the AI is the team writing the code. That's the only hierarchy that matters.

How much does this stack really cost?

Almost everything is free to start, but there's an "almost" worth saying out loud: the tool that accelerates you, Claude Code, is paid from day one.

| Tool | Free to start | You start paying when… | | --- | --- | --- | | Next.js | Always. Open source. | Never. | | Tailwind | Always. Open source. | Never. | | Supabase | Free plan: holds an entire project. | Heavy traffic or a large database. | | Vercel | Hobby plan: perfect to launch. | Commercial use or high traffic. | | Claude Code | Not free. | From day one (paid Claude account). |

The stack costs nothing to start; the acceleration does. Honesty first: for a small business the free Supabase and Vercel plans are more than enough, but know it before you promise anything.

What's the method that keeps the AI from falling apart?

Documentation first, one phase at a time. One session = one phase. The beginner's mistake is asking the AI for everything at once: the context gets muddy, it makes things up, and the result collapses. The method that works is the opposite — split the project into small phases and give it one per session.

1. You write the CLAUDE.md — a document that gives it permanent context: stack, rules and architecture.
2. Claude Code reads it and executes — every session starts by reading that context before touching a line.
3. You verify by opening files — don't trust the summary. Open one or two key files and confirm what it claims is actually there.
4. /clear and on to the next phase — you wipe the context between phases. Fresh memory, better results.

The golden rule: Claude Code tends to oversell what it did in its summaries. No matter how convincing it sounds — open the files and verify. Trust the code, not the summary.

How do I wire it all together, step by step?

From empty terminal to live site, in order.

0. Install Claude Code

# macOS / Linux / WSL
curl -fsSL https://claude.ai/install.sh | bash

# npm alternative (needs Node 18+)
npm install -g @anthropic-ai/claude-code

You need a paid Claude account (Pro, Max, Team…). The free plan doesn't include Claude Code.

1. Create the project and the brain

npx create-next-app@latest my-site   # pick TypeScript + Tailwind
cd my-site
claude                              # open Claude Code
> /init                            # generates a base CLAUDE.md; you refine it

2. Connect Supabase

npm install @supabase/supabase-js
# 1) Create a project at supabase.com and copy URL + anon key
# 2) In .env.local (NEVER commit it to Git):
NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...

3. Deploy on Vercel

Push the repo to GitHub, go to vercel.com, import the repo, paste the same environment variables and hit Deploy. Seconds later you have a public URL.

4. Iterate by phases

Hero, forms, blog, admin panel… one phase per session, /clear between each, always verify.

What does a CLAUDE.md that works look like?

The clearer the rules, the less the AI drifts. This is the skeleton I use. Save it at the root of the project: it's the first thing Claude Code reads every session.

# CLAUDE.md — Project context

## What we're building
Professional website for [client/brand]. Agency quality.

## Stack (don't change without flagging it)
- Next.js (App Router) + TypeScript
- Tailwind CSS
- Supabase (PostgreSQL + Auth)
- Deploy on Vercel

## Inviolable rules
- Strict TypeScript. No "any".
- Mobile-first. Accessible (AA contrast minimum).
- Security: never commit .env to Git. Validate data on the server.
- No prefab UI libraries: custom components only.
- Dark, clean design, Linear/Raycast style.

## How we work
- 1 session = 1 phase. /clear between phases.
- Before touching code, read this whole file.
- When done, list the files you created or changed.

Conclusion: three truths, no hype

So nobody sells you smoke, three things almost no one tells you:

1. AI accelerates, it doesn't give for free. Claude Code multiplies your speed, but it's paid and it doesn't decide for you. Without knowing what you want to build, it's useless. The thinking is on you.
2. Free plans have a ceiling. Supabase and Vercel are free to launch; when traffic, emails or data grow, you pay. For starting out it's plenty — just know it.
3. Verify, don't believe. AI oversells its work. Open the files, confirm what it claims it built, test the site. "It's ready" isn't law until you see it yourself.

This isn't the only way to build websites — there are a thousand stacks and a thousand paths — but if you're starting, it's one of the simplest and most solid. Now it's your turn.

---

Need a custom website or automation? Get a ballpark estimate or email me directly.