Module 4 · Build your site

Watch your website get built

This is Stage 3, and it is the one people remember. Your two planning documents go in, and a real website comes out — every page you planned, in your colors, running on your own computer where nobody else can see it yet. You will spend most of this lesson looking at it and asking for changes in plain English.

Two minutes of pre-flight

Before you paste anything, check three things. This takes longer to read than to do, and it saves the only kind of afternoon worth saving.

• site-architecture.md exists in your project folder and you have actually read it. It is the blueprint; if a page is missing from it, that page will be missing from your site.
• brand-strategy.md exists, and you were happy with the wordmark logo it produced.
• You have a snapshot saved. If you are not sure, say “save a snapshot before we start” and Claude will take one.

One thing your architecture document should already contain, from the planning module: a primary and a secondary call to action on every page, and empty placeholder pages for the intake form, the thank-you page, and the disclaimer. The build fills those shells in. Module 5 wires them to your inbox and your calendar. If they are not in the document, add them now with one sentence to Claude — retrofitting a contact path onto a finished layout is the single most annoying job in this course.

Start in Plan mode — the “show me first” button

Plan mode is a setting that tells Claude to think out loud and change nothing. It reads your documents, writes out exactly how it intends to build the site, and waits. You read the plan, ask for changes, and only then say go.

You are a person who reads a document before signing it. This is the same instinct, and it is the most useful setting in the whole application for a cautious beginner. 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 will be offered three choices: approve it and let Claude work on its own, approve it but review each edit, or keep planning.

The build prompt

Replace nothing here except what is in square brackets — the kit’s skills carry the detail, so this prompt stays short on purpose.

Let's do Stage 3 — build my website. 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 every page described in site-architecture.md — the sections, the copy and
   the design notes — using my brand colors, fonts and logo.
3. Put the primary and secondary calls to action on every page exactly where the
   architecture document says they go, and make the phone number a real tel: link
   everywhere it appears.
4. Create the empty shells for /contact, /thank-you and /disclaimer, /privacy. Leave them
   plain for now — we wire them up in the next module.
5. Build it phone-first. Most people reading a law firm's website are holding a
   phone, often at a bad moment. It has to be excellent there.
6. Start the local preview and give me the link.
7. Save a snapshot when the first version runs.

Explain what you're doing in plain terms as you go. Use no photographs of people
anywhere — leave a clearly-marked placeholder where a photo belongs, and I'll add
real ones in the next lesson.

Now go and look at it

Claude will hand you a localhost link. That is 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 also opens in a preview pane right beside the chat, which matters more than it sounds: Claude can look at the running page itself. You can say “the spacing under the headline is wrong” and it goes and looks rather than guessing.

That loop is the rest of the module. Real things to say:

• “The headline is too long. Cut it to eight words and make it bigger.”
• “The phone number should be the first thing I see on a phone, not the third.”
• “This practice-area page reads like a brochure. Make the first paragraph speak to someone who is frightened.”
• “Add more space between the sections — it feels cramped.”
• “Here’s a screenshot from my phone. The button is under the keyboard.” (You can drag a screenshot straight into the chat.)

Check every page at phone width before you move on. In the preview pane you can drag the edge in until it is phone-shaped; better still, open the localhost link on your actual phone if it is on the same wi-fi. Ask Claude how, in those words, and it will tell you.

The undo button you did not know you had

Claude quietly saves a copy of your files before every message you send. So when a change makes things worse, you do not have to describe your way back out of it.

/rewind

You get a list of everything you have asked in this session, and the option to 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

Here is the build stage on screen — the same describe-it-then-refine-it rhythm you're about to run, with a builder deliberately steering away from the look that reads as machine-made. Your kit already enforces most of what he does by hand. It’s from an independent creator — credited below, so go give them a follow.

16:05