Module 4 · Build your website
Build & preview your website
Stage 3 — the exciting part. Claude now builds your actual website from your two documents, and shows it to you running live on your own computer. You’ll watch your brand turn into real pages.
Watch — hand-picked
The clearest walkthroughs of this step, from creators we rate. Each one’s credited — go give them a follow.
Build $10,000 Websites using Claude Code (Ultimate Guide)
How to Make a Website with Claude Design (Step-by-Step for Beginners)
How to Build Beautiful Websites with Claude (That Don't Look AI-Generated)
The big picture
Claude sets up a modern website (Next.js + Tailwind), then builds each page exactly as described in your site-architecture.md, styled with your brand from brand-strategy.md. It runs the site on a private preview link (localhost) that only you can see, so you can review and refine before anyone else does.
This is the biggest single step in the course, so it’s a good one to look at before it happens. Switch to Plan mode first — the mode selector next to the send button in the Desktop app, or Shift+Tab in the terminal — and paste the prompt below. Claude will read your two documents, write out exactly how it intends to build the site, and change nothing until you approve. Send the plan back for another pass as many times as you like, then let it run.
Paste this into Claude Code
Build my website
Let's do Stage 3 — build my website. Please follow your frontend-design and copywriting skills, and build from my site-architecture.md and brand-strategy.md: 1. Set up a new Next.js + Tailwind website in this project. 2. Build my homepage and every other page exactly as described in site-architecture.md — the sections, the copy, and the design instructions — using my brand colors, fonts, and logo. 3. Make it look great on phones as well as desktop. 4. Start the local preview and give me the link so I can see it. 5. Save a snapshot when the first version is working. Explain what you're doing in simple terms, and approve nothing destructive without telling me.
Then review and refine, in plain English
This is the loop you’ll live in for the rest of the module — look, ask, save, repeat — until the site feels like yours:
Now go and look at it. In the Desktop app your site opens in a preview pane right beside the chat — and Claude can see that running page itself, so you can say “the spacing under the headline looks wrong” and it will go and look rather than guess. In the terminal, open the localhost link in your browser instead. Either way, tell Claude what to adjust. Real examples:
- “Make the hero headline bigger and bolder.”
- “Add more space between the sections — it feels cramped.”
- “Use my accent color for the buttons.”
- “This section looks off — here’s a screenshot — the spacing is uneven.” (You can drag a screenshot right into Claude.)
There’s more to making it truly yours — real photos, a working contact form, and the little polish moves — so we gave that its own lesson next. First, get the site standing and take it in.
Whenever the site reaches a good spot, say “save a snapshot.” It’s your reset button — if a later change goes wrong, you can always roll back. Build fearlessly.
Next to the send button there’s a model name — that’s which version of Claude is doing the work. If the same problem comes back a second time, click it, pick a stronger model, and say “try that again.” The stronger models use up more of your monthly allowance, so save them for the genuinely hard bits.
On the Pro plan, a long build day might hit a “limit reached” message. Don’t panic — your work is saved in your files and snapshots. The main limit resets every five hours, so reopen the project after a break and say “where did we leave off?” to continue.
There’s also a separate weekly limit that a short break won’t clear. If you hit that one, spread the rest of the build over the following days — it’s the reason we suggest two sittings rather than one marathon.
You have a complete, branded, mobile-friendly website running on your computer. It’s real — you can click through every page. Next we’ll polish it and make sure it’s flawless on every screen.
Setup or a change throwing an error? Copy the error and paste it to Claude: “This didn’t work — please fix it.” Errors during a build are completely normal and Claude resolves them quickly.
You may also notice a file called AGENTS.md appear when the site gets created. That’s a note the website framework writes for AI tools — leave it alone. Your CLAUDE.md from the Build Kit is still the one in charge.
Watch this step
Here's the build stage on screen: a full site coming together in Claude Code, the same one-prompt-then-refine rhythm you're about to run. It’s from an independent creator — credited below, so go give them a follow.
Build $10,000 Websites using Claude Code (Ultimate Guide)