Module 4 · Build it

Build the site with Claude and the kit

This is Stage 3, the one people remember. Your plan goes in and a real website comes out: every page in site-map.md, with your wordmark and colors, running on your own computer where nobody else can see it yet. You’ll spend most of this lesson looking at it and asking for changes in plain English.

Two minutes of pre-flight

Check three things before you paste anything. It takes longer to read than to do.

• site-map.md exists in your project folder and you have read it. It is the blueprint; a page missing from it will be missing from your site.
• brand-strategy.md exists, and the brand folder holds the wordmark files from Module 2.
• A snapshot is saved. If you’re not sure, say “save a snapshot before we start” and Claude will make one.

Two kinds of gaps in the plan are expected, and the build keeps both visible on purpose: facts you haven’t supplied yet, in [square brackets], and notices marked TODO-COMPLIANCE. The next lesson fills most of the brackets; Modules 5 and 6 fill the notices.

Start in Plan mode: “show me first”

Module 0 pointed out Plan mode; this is where you use it. In Plan mode Claude reads your files, writes out how it intends to build the site, and changes nothing. You read the plan, send it back if something’s off, and only then say go. It’s the same instinct as reading a consent form before signing it.

Switch to it with the mode selector next to the send button, or press Shift+Tab until the mode reads Plan. When the plan is ready you’ll be offered three choices: approve it and let Claude work on its own, approve it but review each edit, or keep planning. The labels may be worded slightly differently on your screen.

The build prompt

Replace only what is in square brackets. The kit’s skills carry the detail, so the prompt stays short on purpose.

Let's do Stage 3 — build my website. Follow your frontend-design and copywriting
skills, and build from site-map.md and brand-strategy.md.

1. Set up the Next.js + Tailwind website exactly as your frontend-design skill
   describes. Straight after the setup step, read me the first line of CLAUDE.md.
2. Build every page in site-map.md, with its sections, copy and design notes, using my
   wordmark, colors and fonts.
3. Put "Book a free 15-minute call", the line under it, and my phone number as a
   tap-to-call link everywhere site-map.md says. Build the footer, with the crisis
   block, on every page.
4. Leave /contact, /thank-you, /privacy and /policies as simple placeholder pages.
   The contact form gets built in a later stage.
5. Build it phone-first. Many people will read this site on a phone.
6. No photographs of people anywhere: leave a clearly marked placeholder where my photo
   goes. No testimonials, reviews, star ratings or client stories, not even as sample
   content. Anything you don't know stays in [brackets].
7. Start the local preview and give me the link. Save a snapshot when the first
   version runs.

Explain what you're doing in plain words as you go.

What to check: two things, in order. First, the line Claude reads back from CLAUDE.md must be exactly # CLAUDE.md — Therapist Website Build Kit. The tool that sets up the website can write a CLAUDE.md of its own; the kit tells Claude how to prevent that, and this is you confirming it worked. If the line is anything else, say “Restore CLAUDE.md from the last snapshot” before anything else happens. Second, when the preview opens, every page in your plan should be there, and you should see no photo of a person, no testimonial and no invented fact about you.

Now go and look at it

Claude will hand you a localhost link. That’s a private address that only works on your own computer: your website is running there, and nothing is on the internet yet. In the Claude app the site can also open in a panel right beside the chat, and Claude can look at the running page itself. So you can say “the spacing under the headline looks wrong” and it goes and looks rather than guessing.

That loop is the rest of this lesson, and the way you’ll update the site for years. Real things to say:

• “The headline is too long. Cut it to ten words and make it bigger.”
• “On a phone, the booking button should be the first thing I see after my name.”
• “This paragraph sounds like a brochure. Rewrite it the way I’d explain it to someone on the phone.”
• “Add more space between the sections; it feels cramped.”
• “Here’s a screenshot from my phone. The footer text is under the sticky bar.” (You can drag a screenshot straight into the chat. Check first that nothing else on your screen, like an open email or a calendar, shows anything about a client.)

Check every page at phone width before you move on. Drag the edge of the preview panel in until it’s phone-shaped, or, better, open the localhost link on your actual phone if it’s on the same wi-fi. Ask Claude how, in those words.

Describe, never promise: fix it now

Read the words on the built pages, not just the layout. If a sentence tells the reader what they will feel, achieve or overcome (“you’ll leave feeling lighter”), it’s a promise, and it came in while nobody was watching. Say: “Rewrite this so it describes what people commonly experience, not what the reader will get.” Words are cheapest to fix today.

The undo button

Module 0 mentioned it; here it is. Claude saves a copy of your files before every message you send, so when a change makes things worse you don’t have to describe your way back out.

/rewind

You get a list of everything you’ve asked in this session, and you can put your files back exactly as they were before any one of them. You can roll back the files, the conversation, or both. Pressing Esc twice on an empty message box does the same thing.

Watch this step

The build loop on screen: describe it, look at it, refine it, with a builder steering away from the look that reads as machine-made. The second clip has no narration; watch it only for what the preview step looks like. It’s from an independent creator — credited below, so go give them a follow.

16:05

1:15