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.

26:10

26:32

16:05

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.

Paste this into Claude Code

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

Open the localhost link in your browser and 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.)