Claude Code Tutorial Part 3: Plan Your Website Before You Build It

Part 3 of 8 of Building a Website with Claude Code. See all parts.

Thinking about your website before you build

This part is the most important and the most often skipped. Spend half an hour here and you'll save days later.

Writing a brief

Write a one-page document that answers:

1. What is this website for? One sentence. Not three.
2. Who is the visitor? Be specific. Age, role, what they're trying to do.
3. What does success look like? A booking, an email signup, a phone call, an article read?
4. Three things the visitor must leave knowing.
5. Three things the visitor must be able to do.
6. One sentence about tone of voice. Formal? Friendly? Authoritative?
7. Three websites you admire and why. Not to copy, to learn the language.
8. One website you don't want to look like. Just as important.

Hand this brief to Claude in your first prompt. The whole conversation gets better.

Information architecture

That's a long phrase for "what pages do you have and how are they organised."

For a small site, draw a tree on paper:

Home
├── About
├── Services
│   ├── Service A
│   └── Service B
├── Pricing
├── Articles
│   └── (each article)
└── Contact

A few rules worth following:

• No page should be more than two clicks from the home page.
• Group related pages. Don't have a flat list of fifteen items in the top navigation.
• The home page is not a dumping ground. It's an introduction.
• The contact page is non-negotiable. Even if you also have a form on every page.

Brand and tone decisions

Make four decisions and write them down:

• Two fonts. One for headings, one for body. Many sites use a single font in two weights, which is also fine.
• One primary colour. This is for the things you want the visitor to click.
• A neutral palette. Greys for text, white or off-white for backgrounds, light borders. Avoid pure black #000000 and pure white #FFFFFF, slightly warmed versions feel more refined.
• One word for the tone. "Calm." "Confident." "Friendly." "Authoritative." This guides every word and image choice.

Choosing fonts with Google Fonts

Google Fonts is a free library of over 1,500 typefaces, hosted on a fast worldwide CDN. It's where most websites in 2026 get their fonts. Browse at https://fonts.google.com.

What to look for when picking a font:

• Sans-serif vs serif. Sans-serif fonts (Inter, IBM Plex Sans) feel modern, technical, neutral. Serif fonts (Fraunces, Source Serif 4, EB Garamond) feel editorial, considered, warmer. Pick one of each, or commit to a single family in different weights.
• Variable fonts. A "variable" font is one file that contains every weight (light, regular, bold, etc.) and sometimes other axes (slant, optical size). They're faster to load and give you more flexibility. Look for the "VAR" badge on Google Fonts.
• Weights you actually need. Body text usually needs 400 and 500. Headings need 700 or 800. Don't load weights you won't use; each one adds page weight.
• Real character without precious. Avoid fonts that are too quirky for long reading (anything labelled "Display" is for headlines, not body copy).

Pairings that work (all free on Google Fonts, none feels AI-generated):

• IBM Plex Sans body + Fraunces headings: technical-but-warm. Common in editorial tech sites.
• Inter body + Inter headlines (in extra-bold): single-family, modern, confident. Used by Stripe, Linear, and most modern SaaS done well.
• Source Serif 4 body + Source Sans 3 headings: classic editorial pairing.
• EB Garamond body + Inter headlines: book-like reading with crisp headers.
• DM Serif Display headlines + DM Sans body: bold serif headers, very clean.

Fonts to avoid (overused, instantly recognisable as the default choice):

• Roboto (Android default; everywhere)
• Open Sans (mid-2010s blog vibe)
• Lato (similar)
• Poppins (the AI-startup go-to)
• Montserrat (everywhere on Wix and Squarespace)

Inter is technically overused too, but it's so well-designed that using it deliberately is fine.

How to use Google Fonts:

Option A, Direct from Google. Easiest, works anywhere:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">

Option B, Via Bunny Fonts (https://fonts.bunny.net). A privacy-friendly drop-in mirror of Google Fonts. Same fonts, identical syntax, but no data goes to Google. Better for UK GDPR compliance because Google Fonts sends visitor IPs to Google's servers, which has been ruled non-compliant in some EU courts. If you'd like fonts without the legal grey area, use Bunny.

<link href="https://fonts.bunny.net/css?family=inter:400,500,700,800&display=swap" rel="stylesheet">

Telling Claude what you want:

Use IBM Plex Sans for the body and Fraunces for headings. Load them via Bunny Fonts so we don't ship visitor IPs to Google. Body weights 400 and 500; heading weights 600 and 700. Use Tailwind to apply them.

Claude will write the right <link> tags, configure Tailwind, and use them across the site.

Content plan

Write a list of every page, and for each page:

• The page title.
• The headline.
• The single sentence that summarises the page.
• The three or four sections it contains.

This is the spine of the site. If you have it, building goes quickly. If you don't, you'll get stuck halfway through.

Anti-references

This is the most useful list you'll write. Note three things you do not want.

• Generic stock photos of people in suits shaking hands.
• Purple gradients on white backgrounds (the dominant AI-startup look in 2026).
• Pages that load with a chatbot pop-up.
• Auto-playing video.
• The phrase "Empowering teams to unlock potential."

Tell Claude what you don't want. It listens.

← Part 2 of 8: Set Up Claude Code on Your Computer · All parts · Part 4 of 8: Prompt and Plan with Claude Code →