The prompt I use to build a website with Claude - five pages in two hours

This is how I build websites for clients now. Five pages, a contact form that puts the person into an email list with a tag and sends them a confirmation, a cookie banner, a privacy policy, the lot. It takes me about two hours, and most of that is me reading and deciding, not typing.

I used to do this in a page builder and it took a day, minimum. The first website I built with Claude Code, I opened the chat and typed, honestly, "I've never used Claude Code before, I have a Google Doc with her branding and copy, tell me what you need from me." It scaffolded the whole thing. That was June. I've built a lot of websites since, and the process has settled into two prompts and a handful of steps.

Here they are, start to finish, written for someone who has never built a website before.

What you need before you start

Get these sorted first, because every one of them is a wall you'll hit halfway through if you don't.

1. Decide: are you capturing anyone's email? A contact form. A newsletter box in the footer. A "download the guide" form. If the answer is yes to any of those, you need an email marketing tool for those contacts to land in. For this post that's Mailchimp - free tier is fine - but the same steps work for any of them. If the answer is no, the site is just pages, and you can skip everything about Mailchimp below.

2. A domain, bought. Namecheap, GoDaddy, wherever. You need it before the end, not the start - but buy it now so you're not deciding names at 11pm.

3. A Vercel account. Free. This is where the website will live on the internet. More on why in a minute.

4. Claude, on a paid plan. You'll use two parts of it: Claude Design (for how it looks) and Claude Code (for actually building it).

5. A brand profile. Palette, fonts, the feeling. Yours or the client's. If there isn't one, stop and make one - it's twenty minutes in Claude Design and I wrote it up here: How I built my brand profile with Claude Design. A website built without one is a website you'll rebuild.

6. The information. All in one folder:

The five pages. For a services business it's nearly always: Home · About · Services · Blog (or Work) · Contact. Write them down now.
The sections on each page, one line each. Home: hero, what you do, who it's for, proof, a button. About: the story, a photo. Services: each service with a price or a "from". Contact: the form and what happens next. You're not designing these - you're listing them so nothing gets invented.
The copy. Even rough. A Google Doc, a heading per page, the words underneath. Get it before you build, not after - Claude will happily write placeholder copy and the client will happily leave it there forever.
Images, in a folder, named sensibly. Note which one is the hero.
Screenshots of websites you or the client love. Five or six. Not competitors - anything that made you stop scrolling. These do more for the design than any adjective.
Who it's for. One line. Who lands on this site and what they should do.
The feeling. One sentence. When I built the Tech Queen Academy site it was "floating through space with stars around you." For a wellness client it might be "someone wandered into her journal." This is the single highest-leverage thing you'll give the design tool.

What you don't need: a database. People ask about Supabase. You need a database when the website has to remember things - logins, a members' area, bookings, orders. A five-page site with a form that sends straight to Mailchimp doesn't remember anything; Mailchimp is the record. Keep it out. When you build something with a login, that's a different post.

Twenty minutes of collecting. Then you're ready.

The shape of it

Two tools, in order:

Claude Design does the design. You give it the brief, the screenshots and the brand profile. It gives you three different versions. You pick one, tweak it, export it.
Claude Code does the build. You give it the export and the copy and a build prompt. It builds the site on your computer, you look at it in your browser, you fix what you don't like, you connect the forms to Mailchimp, you put it on a test link for the client, and then you put it on the domain.

Design tool for taste. Code tool for making it real. Keeping them separate is the whole reason this works - ask a code tool to also have taste and you get a website that works and looks like every other website.

Step 1 - The design brief (Claude Design)

Open Claude Design. Attach the brand profile, the screenshots and the copy doc. Paste this, filled in.

I need a five-page website designed for [BUSINESS NAME].

WHAT IT IS
[One paragraph: what the business does, who it does it for, & what
someone should do when they land on the site - book, enquire, buy.]

THE FEELING
[Your one sentence. What it should feel like, not look like.]

THE BRAND
Attached is the brand profile - palette, fonts, spacing, the do's & don'ts.
Follow it. Don't reinvent it. If something in this brief contradicts it,
tell me rather than quietly choosing one.

WHAT I'M DRAWN TO
Attached are screenshots of websites I love. I'm not asking you to copy
them - I'm showing you what makes me stop scrolling. Tell me what you
think they have in common before you design anything.

THE PAGES & SECTIONS
1. Home - hero (headline + sub + one button) · what we do · who it's for ·
   proof (testimonials / logos / numbers) · call to action
2. About - the story · photo · values or approach · call to action
3. Services - one block per service: name, who it's for, what's included,
   price or "from" · FAQ · call to action
4. Blog - listing page + one article page layout
5. Contact - short form (name, email, message) · other ways to reach us ·
   what happens next
[+ a newsletter sign-up box in the footer, if you're having one]

Every page needs a header with nav & a footer with the legal links
(privacy, terms, cookies). Mobile first - most of this traffic is a phone.

THE COPY
Attached. Use the real words. Where I haven't given you copy, use
obviously-placeholder text in [BRACKETS] so nothing fake slips through.

WHAT I DON'T WANT
[The styles that aren't this brand - corporate, twee, purple SaaS
gradients, gold-on-black, stock handshakes, whatever it is.]

GIVE ME THREE DIRECTIONS
Three complete, genuinely different versions of the Home page & the
Services page. Not three shades of the same idea. For each one, tell me
in one line what it's doing differently & who it would suit.

Then tell me which one you'd pick for this business, & why.

Build it as clean, self-contained pages - real HTML & CSS, nothing that
only works inside this tool - because it's going to be handed to Claude
Code to build for real.

Three lines in there matter more than the rest.

"Tell me what they have in common before you design anything." This is how the screenshots actually get used. Without it, Claude glances at them. With it, it has to say the pattern out loud - and then it designs to the pattern.

"Three genuinely different versions." One version and you'll accept it because you've got nothing to compare. Three and you'll know in four seconds which one is right, and usually why.

"Self-contained pages, real HTML and CSS." Claude Design has helpers that only work inside Claude Design. If you don't say this, you can export something that looks perfect and doesn't run anywhere else.

Pick, tweak, export

Look at the three. The one you like is usually obvious straight away. Then go back and forth on that one until it's right - this is where taste happens and it's the bit not to rush. Short and specific, one thing at a time: "the hero's too busy, one image and one line." "Less pink." "The footer's black, make it the grey from the header."

When it's right, export it. Share → Export, and take the files - the HTML, the CSS, the images. Put that folder inside your project folder, named design/. That's what Claude Code builds from.

Step 2 - Build it (Claude Code)

First, what "localhost" means, because nobody explains it

When Claude Code builds a website, it runs on your own computer first. It gives you a link that looks like http://localhost:5173. You open it in your browser and there's the website - real, clickable, looks exactly like it will when it's live.

Only you can see it. It's not on the internet. It's a private preview on your machine. That's the point: you build and fix and rebuild here, as many times as you like, and nobody sees the messy bits.

When it's right, you deploy it - which means copying it to a computer that is on the internet, so everyone can see it. That computer is Vercel. Localhost is your workshop; Vercel is the shop window.

The build prompt

Open Claude Code in your project folder. The design/ folder, the copy doc and the images are all in there. Paste this, filled in.

Build me a five-page website for [BUSINESS NAME].

WHAT YOU'VE GOT
- design/ - the approved design from Claude Design. Match it: same layout,
  same fonts & sizes, same spacing, same colours. This is the source of
  truth for how it looks.
- copy/ - the words for every page. Use them exactly.
- images/ - the photos. [hero.jpg] is the home hero.
- brand-profile.pdf - the brand, if anything in design/ is unclear.

KEEP IT SIMPLE
Five pages. No database, no login, no content system. Use a modern,
well-supported setup that deploys to Vercel with no fuss - you choose,
& tell me what you chose in one sentence.

PAGES
Home · About · Services · Blog · Contact. Header with nav on every page,
footer with links to Privacy, Terms & Cookies on every page. Mobile first.

FORMS
The contact form: name, email, message. [The newsletter box: email only.]
For now, build them so they look right & show a proper thank-you when
submitted - we'll connect them to my email tool in the next step.
Include anti-spam: a hidden honeypot field & a minimum time-to-submit.
No CAPTCHA.

GDPR & LEGAL - non-negotiable
- Cookie banner on first visit with two buttons: "Essential only" &
  "Accept all". Nothing non-essential (analytics, pixels) loads until they
  choose "Accept all". Remember their choice. Link to the cookie policy.
- A privacy policy page written for THIS site in plain English: what we
  collect (the form fields), why, where it goes (the email tool), who else
  touches it (the email tool, Vercel, analytics if any), how long we keep
  it, & the email address to write to if they want it deleted. Not a
  copied template that mentions things this site doesn't do.
- A terms page in plain English for a services business.
- A one-line consent note under every form saying what happens to their
  details, linking to the privacy policy.
- HTTPS only, sensible security headers.

QUALITY
- Every image has alt text. Colour contrast passes accessibility checks.
  Works with a keyboard.
- Page title & description for every page. A share image. A sitemap.

HOW TO WORK
Build it page by page, Home first. Run it on localhost & give me the link
after each page. Don't move on until I've said yes. I'm not a developer -
explain what you're doing in plain English & tell me exactly what to
click.

Why "you choose the setup, tell me in one sentence." You don't need to know what React or Vite is. Claude does. Your job is to check it picked something normal that deploys to Vercel - it will.

Why the forms don't connect yet. Because connecting them needs a key from Mailchimp, and that deserves its own step done carefully. Build the shape first.

Why the GDPR block is so specific. "Make it GDPR compliant" gets you a pasted template. Saying what is collected, where it goes, who touches it and how to delete it gets you a privacy policy that's actually true. A policy that mentions things the site doesn't do is worse than none - it's evidence you didn't read it.

"Don't move on until I've said yes." Page by page. Otherwise you get five pages built on a misunderstanding from page one.

Then make it right

This is where you spend most of the two hours, and it's the easy bit. You look at localhost on your laptop and on your phone, and you tell Claude what's wrong, one thing at a time:

"The hero image is cropping her head off on mobile."
"The services cards are different heights, make them match."
"The footer's too tall."
"Swap the About photo for sam-laptop.jpg."

It fixes it, the localhost page refreshes, you look again. Keep going until you'd be happy for the client to see it. Then you're ready to connect the forms.

Step 3 - Connect it to your email tool

Right now the form looks right and does nothing. This step makes it put the person into Mailchimp with a tag, so you know where every contact came from.

A note on why this step is done the way it is. To talk to Mailchimp, the website needs an API key - which is a password for your Mailchimp account. Two rules, and they matter even if you don't yet know why:

It never goes in the chat. Anything you type into a chat gets stored. A password typed into a chat is a password you should consider shared.
It never goes in the website's code. Code ends up in places - a backup, a shared folder, a public repo - and a key in there is a key anyone can find.

So the key lives in one file called .env - a private note on your computer that only the website reads, and that Claude Code knows never to share or copy. You'll type the key into that file yourself. Claude sets everything else up. Here's the prompt:

I've built this five-page website for [BUSINESS NAME] & I want to connect
it to Mailchimp.

- Anyone who submits the CONTACT form gets added to my Mailchimp audience
  & tagged "contact-form", with their message saved against them.
- Anyone who signs up on the NEWSLETTER box gets added & tagged
  "newsletter".
- Mailchimp should email me when someone new comes in.
- Apply the tag as part of adding the contact, not afterwards, because a
  Mailchimp automation on that tag is going to send them a confirmation.

Set it up so the Mailchimp key is only ever read from a .env file that's
gitignored, never written into the code, & never sent to the visitor's
browser - the form should talk to Mailchimp through a small server step,
not directly. Create a .env.example with the variable NAMES only. I'll
type the real values into .env myself.

Talk me through it one step at a time: what you're going to build, then
exactly what I need to go & get from Mailchimp & where to put it. I'm not
a developer.

Claude will build the connection and then stop and say something like: "I need two things in .env: MAILCHIMP_API_KEY and MAILCHIMP_AUDIENCE_ID. Here's where to find them." It's right, and here's where:

Getting the two things from Mailchimp

Log into Mailchimp. Click your profile picture (bottom left) → Account & billing.
Extras → API keys → Create A Key. Name it after the website - so if you ever need to switch it off, you know which one.
Copy the key. Open the file called .env in your project (Claude will have told you where it is - it's a plain text file). Find the line MAILCHIMP_API_KEY= and paste the key straight after the =. Save.
Back in Mailchimp: Audience → All contacts → Settings → Audience name and defaults. On that page there's an Audience ID - a short code. Copy it into .env after MAILCHIMP_AUDIENCE_ID=. Save.
While you're on that page: New subscriber notifications → turn on "one by one" and put in your email. That's what emails you when someone submits a form.

Then tell Claude: "Both keys are in .env." It'll restart the site and say try the form.

Send the visitor a confirmation email

Right now, when someone fills in the contact form, you get an email and they get a thank-you page. That's not enough. If they don't get an email, half of them will assume it didn't work and fill it in again, or worse, go elsewhere.

You don't need another tool for this - Mailchimp sends it, triggered by the tag the website just applied. Two minutes:

Mailchimp → Automations → Create → choose a Customer Journey (or "Welcome new contacts", depending on what your plan shows you).
Starting point: Tag added → pick contact-form.
Add an email. Subject: "Got your message" or similar. Body: thank them, tell them when they'll hear back, one line about what to do if it's urgent. Keep it human - it's the first thing your client's business ever says to them.
Turn it on.

Do the same for the newsletter tag with a short welcome. And if you're using an email tool that doesn't do tag-triggered automations on your plan, tell Claude "send the visitor a confirmation email from the website when they submit the contact form" - it'll add a small free email service and one more line to .env. Same rules apply to that key.

Test it before you go any further

On localhost, submit the contact form with an email you can check. Then:

Mailchimp → Audience → All contacts - your email is there, tagged contact-form, with the message on the contact.
Your inbox - Mailchimp's notification arrived.
Your test inbox - the "got your message" confirmation arrived too. If it didn't, the automation isn't on or the tag doesn't match - check the tag spelling first, it's nearly always that.
The site - you saw a thank-you, not a blank page.

Do the same for the newsletter box. Then submit the form again instantly with nothing in it - nothing should land. That's the anti-spam working.

If any of those didn't happen, tell Claude exactly which one - "it says sent but there's nothing in Mailchimp" - and it'll find it. Don't move on with a form that half works.

Step 4 - Put it on a test link and show the client

Now the site is right and the form works, but it's still only on your computer. Time to put it on the internet on a test link - a temporary address the client can open, before it's on the real domain.

Tell Claude: "Deploy this to Vercel so I can share a test link." It walks you through it, but so you know the shape:

GitHub. Claude will ask you to create an empty repository on github.com (free account) and then it puts the code there. This is where the code lives from now on - think of it as the master copy.
Vercel → Add New Project → Import the repository. It recognises what Claude built. Don't change any settings.
Environment Variables. Vercel shows a form. Add the same two lines from your .env - MAILCHIMP_API_KEY and MAILCHIMP_AUDIENCE_ID - with the same values. This is the only other place those keys are ever allowed to be. Vercel needs them for the same reason your laptop did.
Deploy. About a minute. You get a link like clientname.vercel.app.

Open it on your phone. Submit the form once more - check Mailchimp, check your inbox for the notification, check the test inbox for the confirmation. Same as before, but on the internet this time.

Send that link to the client. They click around, they tell you the About photo's wrong and they want the blue darker. You go back to Claude on localhost, make the changes, and say "deploy the update." The test link updates itself. Round and round until they say yes.

Before it goes live - the audit

One more prompt, because it catches what you'll miss and it's the difference between a website and a liability:

Before this goes live, audit it for GDPR & security as if you were a
careful reviewer who'd be blamed if it's wrong.

Read the actual code - the forms, the server step that talks to
Mailchimp, the privacy page, the cookie banner, the built files. For each
of these tell me pass / partial / fail with the file as evidence:
- What personal data is collected & where it goes (name every third party)
- Does the privacy policy match what the code actually does
- Does anything non-essential load before cookie consent
- Is there a way for someone to get their data deleted
- Are there any keys or secrets anywhere in the built files or in git
- Are security headers set

Don't invent problems. Don't wave anything through you haven't checked.
Rank the list by how bad it is, then fix the ones you can.

You'll get a short list. Fix it. Now it's a website you can put your name on.

Step 5 - Go live on the domain

The client's said yes, the audit's clean, the test link works. Last step: make the real domain point at it.

Vercel → your project → Settings → Domains → Add. Type the domain (clientname.com). Vercel shows you two or three lines called DNS records - an A record and a CNAME, usually.
Wherever you bought the domain (Namecheap, GoDaddy) → find DNS or Manage DNS for that domain. Add the records exactly as Vercel showed them. If there's an existing A record pointing somewhere else, replace it.
Wait. Ten minutes to an hour, occasionally longer. Vercel's Domains page turns green when it's through.
Open clientname.com. It's the site. Submit the form one final time and check Mailchimp - because a test you didn't run is a bug you'll hear about from the client.

Done. Send them the real link.

What this looks like as a business

Here's why I'm writing this up rather than keeping it to myself.

An opt-in landing page takes me about ninety minutes with this process. A five-page site is around two hours. My reusable templates are the difference between a four-hour build and a ninety-minute one, and every site I build adds to them - I wrote up how I pull the best features out of each build here.

That's the maths. Two hours of my time for a website that works, captures leads, and won't get anyone fined. That's not an hourly job. That's a product with a price on it.

And the client can't tell the difference between this and a build that took a week - because there isn't one, except the week.

Start with your own

Don't do this for a client first. Do it for yourself - your own five pages, your own form, your own privacy policy. You'll hit every snag with nobody waiting, and by the end you'll have a site you're proud of and a process you've actually run.

Then the next one takes two hours.

If you haven't built your brand profile yet, that's genuinely step zero: start here. And if you haven't got your AI brain set up so Claude knows your business before it builds anything: The Co-Founder Setup.

And if what you want is the whole system - the pricing, the positioning, and the tech and AI that lets you run a business on three days a week - that's what I teach.

Watch the free training →

The Prompt I Use to Build a Website (Five Pages, Two Hours, Captures Leads)