How to build a website with Claude Code, end to end

To build a website with Claude Code, give the agent an orchestrated workflow, not one big prompt. Run nine ordered steps: idea, PRD, copy, design system, memory bank, architecture, MCP and skills, build, deploy. Each step writes a file the next step reads, so the agent stays on spec instead of hallucinating your repo.

The first time I asked Claude Code to "build my marketing site," it produced something that looked right and was wrong in ten small ways. Wrong file paths. Invented components. A second session that had forgotten the first. The fix was not a better prompt. It was a process. Here is the one I use.

What do you need before you start?

You need three things: a Next.js codebase the agent can read, a place to write the artifacts each step produces, and an agent that loads your rules on every session. AI Web Launcher gives you all three out of the box, but the method is portable. If you are wiring it yourself, set up an ai_rules/ directory and a root context file first. Everything else hangs off those.

You do not need to be a prompt engineer. The steps are mostly questions you answer and files the agent writes down. The skill is in the order and the discipline of letting each step finish before the next one starts, not in clever phrasing.

Why does one big prompt fail?

A single prompt fails because it asks the model to decide what to build and how to build it at the same time, with no memory between sessions. AI made writing code cheap. It did not make deciding what to build cheap, and a model that invents your file paths is not reliable. You need to split the decisions from the typing.

What are the steps to build a website with Claude Code?

The workflow is nine steps. Each one runs a specific prompt or generator and produces an artifact. The artifact is the contract the next step reads. This is the whole trick.

How do you keep the agent from hallucinating your repo?

You give it a memory bank. Step 5 writes an ai_rules/ directory and a root CLAUDE.md that hold your enforceable coding rules, conventions, and a context map. Claude Code reads this on every session, so it stops inventing file paths and APIs. This is the Spec Harness layer, and it is documented in the Spec Harness docs.

What does a step actually look like in practice?

Each step is a prompt you run, then a file you commit. Step 1 is the shortest and sets the tone. You answer the brief, the agent writes it down, and every later step references it instead of guessing.

# Step 1: idea -> concept brief
Run: prompts/1_idea_clarification
You answer ~8 questions about the product.
Output: ai_rules/app_approach/concept-brief.md

# Step 2: brief -> PRD
Run: prompts/2_prd_generator   (reads concept-brief.md)
Output: ai_rules/app_approach/PRD.md  (acceptance criteria)

Why generate the copy and design before the build?

Order matters. If you build the pages before the copy and the design tokens exist, the agent invents placeholder text and arbitrary colors, and you refactor both later. Steps 3 and 4 fix the copy and the OKLCH color tokens first, so step 8 builds against real content and a real palette. The build stops being a guessing game about what goes where. You are filling a known shape, not inventing one mid-flight.

This is the same reason the PRD comes before the build. A spec with acceptance criteria gives the agent a finish line it can check itself against. Without it, "done" is whatever the model decides looks plausible, which is how you end up with features that demo well and break on the second click.

What goes wrong without the memory bank?

Without a memory bank, every new session starts cold. The agent re-reads whatever fits in context, guesses the rest, and slowly drifts from your conventions. You get two components that do the same thing, imports from paths that do not exist, and a styling approach that changes every few files. The memory bank is boring infrastructure, and it is the single highest-leverage step for anyone building a real site with an agent rather than a toy.

# Step 5: write the memory bank once, read it every session
ai_rules/            # enforceable rules + generators
  app_approach/      # concept-brief.md, PRD.md
  design_system/     # token + voice rules
CLAUDE.md            # root context map the agent loads first
.cursorrules         # same context, Cursor format

How long does it take?

Steps 1 through 7 are mostly decisions, and they run in an afternoon once you know the product. Step 8, the build, is where time goes, and it goes faster because the agent is no longer guessing. The point is not raw speed. It is that the output is on spec the first time, so you are not redoing it on the second.

A rough mental model: the steps you skip are not saved, they are deferred. Skip the brief and you pay for it in scope churn. Skip the PRD and you pay for it in rework. The workflow front-loads the cheap decisions so the expensive ones never happen. That is the whole economic argument for doing it in order.

How do you deploy and reuse it for the next site?

Step 9 deploys to Vercel, which for a Next.js app is close to a push. The part that compounds is what you keep afterward. The ai_rules/ pack you built for this site is a re-runnable kit. For the next project, you fork, run step 1 again with a new brief, and the agent inherits the conventions instead of relearning them. The second site is faster than the first because the process carries over, not just the code.

That reuse is the quiet reason the workflow earns its place. A starter saves you once. A workflow saves you every time you run it. The more sites you ship, the more the upfront discipline pays back.

Does this only work with Claude Code?

No. The boilerplate ships a .cursorrules file and a CLAUDE.md memory bank plus the shared ai_rules/ pack, so Cursor, Windsurf, and most agentic editors read the same context. Claude Code is what I use, but the workflow is agent-agnostic.

Do you still review the code?

Yes, and the workflow makes review easier, not optional. Because the build ships one atomic task at a time against a written spec, each change is small enough to actually read. You are reviewing a focused diff with a clear acceptance criterion, not a thousand-line dump you rubber-stamp because it is too big to follow. The agent does the typing. You stay responsible for the decisions.

Frequently asked questions

Can I start from step 8 if I already have a brief? You can, but write at least a thin PRD first so the build has a spec to check against. Skipping straight to build is the most common way this goes sideways.

What if I am not building a site from scratch? The memory bank and build loop still apply to an existing repo. Steps 1 through 4 matter most for greenfield work.

Does it work with other agents? Yes. Cursor, Windsurf, and most agentic editors read the same ai_rules/ context.

I run this exact process on real sites. AI Web Launcher is the architecture behind getwireai.com, aimobilelauncher.com, morrowself.app, and casainnov.com. The nine steps are not theory. They are the thing that let one person ship and maintain that many sites with AI agents instead of drowning in re-explanation.

The full workflow ships with AI Web Launcher for €99. Read the workflow docs first if you want to see every step before you buy.