The Claude Prompts I Use to Build a Website (Steal Them)

I used to build websites in page builders like Elementor and lose basically an entire week to them. Dragging blocks around, fighting with mobile layouts, and then realising the contact form had never actually been connected to anything.

Now I build them with Claude Design and Claude Code, and most of my time is spent reading, making decisions and telling Claude what I want changed. I'm not building anything. A client website is about a 90-minute job, and I charge for it the same as I did when it took a week, because the client is paying for what gets built, not how long I sat there.

These are the prompts I type at every step, in order, and the buttons Claude sends you to click. You don't need to know how any of it works underneath. You type the prompt, Claude does the work, and when it needs something from you, it tells you exactly what.

What you're building

A services website on the client's own domain, with:

• The pages a services business needs. Home, About, Services, Blog and Contact, with a header and footer on every one, built for phones first because that's where most people will see it.
• Forms that go somewhere. A contact form and a newsletter box that put the person into the client's email tool with the right tag, and send them a confirmation email so they know it worked.
• The legal bits done properly. A cookie banner, a privacy policy written for this site, and a terms page.
• The basics search engines want. Page titles, descriptions, a share image and a sitemap.

How this post is organised

Four parts, in this order:

1. Design it in Claude Design. Three directions, pick one, tweak it, export it.
2. Build it in Claude Code, page by page, on your own computer.
3. Connect it to the email tool, so the forms actually work.
4. Test it and go live. A test link for the client, then the domain.

What you need before you start

• Decide whether you're capturing anyone's email. A contact form, a newsletter box, a "download the guide" form. If yes, the client needs an email marketing tool for those people to land in. This post uses Mailchimp, and the free plan is fine. If no, the site is just pages, and you can skip Part 3.
• A domain, bought.
• A Vercel account. Free. This is where the website lives on the internet once it's built.
• A GitHub account. Free. It's where the code gets stored so Vercel can publish it.
• Claude, on a paid plan. You'll use Claude Design for the look, and the Claude Code tab in the Claude desktop app for the build.
• Node.js. This is a small free programme the code needs to run. When you get to it, Claude will help you install it.
• A brand profile. Palette, fonts, the feeling. If the client hasn't got one, here's how to make one in twenty minutes. Don't build without it.
• The information. The copy for every page, even if it's rough. The images. Five or six screenshots of websites the client loves. And one sentence on how the site should feel. When I built the Tech Queen Academy site it was "floating through space with stars around you." That sentence does more for the design than anything else you'll give it.

You don't need a database for this. A website like this doesn't have to remember anyone; the email tool is the record.

---

Part 1 - Design it

Step 1 - Set up your build folder

Everything for this build lives in one folder, so Claude always knows where to look and where to put things.

1. On your desktop, create a folder and call it the client's name.
2. Put the brand profile PDF in it.
3. Put the copy in it as a document, with a heading for each page and the words underneath.
4. Create a folder inside called images and put the client's photos and logo in it. Name them sensibly, and note which one is the hero.
5. Create a folder inside called inspiration and put the screenshots of websites you love in it.

Step 2 - Design it in Claude Design

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

I need a website designed for [BUSINESS NAME].

What it is: [One paragraph. What the business does, who it does it for,
and what someone should do when they land on the site.]

How it should feel: [Your one sentence.]

The brand: attached is the brand profile. Follow 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. Tell me what you think they have in common
before you design anything.

The pages: Home, About, Services, Blog and Contact. Every page has a
header with navigation and a footer with links to Privacy, Terms and
Cookies. Design for phones first.

The copy: attached. Use the real words. Where I haven't given you copy,
use obvious placeholder text in [BRACKETS].

What I don't want: [The styles that aren't this brand.]

Give me three complete, genuinely different directions for the Home page
and the Services page. Not three shades of the same idea. For each one,
tell me in one line what it's doing differently and who it would suit.
Then tell me which one you'd pick for this business, and why.

Build them as clean, self-contained pages in plain HTML and CSS, because
they're going to be handed to Claude Code to build for real.

Two lines in there do most of the work. "Tell me what they have in common before you design anything" is how the screenshots actually get used, because Claude has to say the pattern out loud before it designs to it. And "three genuinely different directions" is how you find the right one, because with one you'll accept it, and with three you'll know in four seconds.

Look at the three. Pick one. Then go back and forth on that one until it's right, 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, click Share, then Export, and download the files. Put that folder inside your build folder and call it design.

---

Part 2 - Build it

Step 3 - Open the folder in Claude Code

1. Open the Claude desktop app.
2. Click the Claude Code tab at the top.
3. Start a new chat.
4. Click the + at the bottom of the chat and choose your build folder from the desktop. Now Claude Code is working inside that folder.

Paste this as your first message:

I'm building a website for [BUSINESS NAME] and I'm not a developer. In
this folder you'll find the approved design in the design folder, the
copy in [COPY DOC NAME], the images in the images folder, and the brand
profile. Have a look at all of it so you understand what we're making.

We're going to do this together, one step at a time, and I'll tell you
when each step is done before you move on. Explain things in plain
English. If you need a decision from me, tell me what you'd recommend and
ask me a yes or no question.

Two rules for the whole build: never put a key or password in the code,
and never ask me to paste one into this chat. When you need one, open the
file it goes in and I'll paste it there myself.

Tell me when you've looked at everything and we'll start.

Step 4 - Get it running on your computer

Set up the website so I can see it on my computer. Use a modern setup
that deploys to Vercel without any fuss, and tell me in one sentence
what you chose. Check that everything it needs is installed and install
anything that's missing. Then start it and give me the link to open in my
browser.

Claude checks whether Node.js is installed and helps you install it if it isn't. Then it sets the site up, starts it, and gives you a link that looks like http://localhost:3000.

Open it in your browser. That's the website, running on your own computer. Only you can see it. You'll build and fix everything here, and put it on the internet in Part 4.

Step 5 - Build the pages

Build the website to match the design folder exactly: the same layout,
fonts, sizes, spacing and colours. Use the real copy from my copy
document and the images from my images folder, and use [HERO IMAGE NAME]
at the top of the Home page. Phones first.

Build the contact form and the newsletter box so they look right and show
a proper thank-you message when submitted. We'll connect them to my email
tool later. Include a hidden anti-spam field and a minimum time to
submit, but no CAPTCHA.

Do the Home page first and give me the link. Don't move on to the next
page until I've said yes.

Claude builds the Home page and tells you to look. Open it on your laptop and on your phone. Say 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 is too tall."
• "Swap the About photo for sam-laptop.jpg."

When Home is right, say "yes, next" and it builds About. Then Services, Blog and Contact the same way.

Step 6 - The cookie banner and the legal pages

Now the legal pages. Add a cookie banner that shows on the first visit
with two buttons, "Essential only" and "Accept all", remembers the
choice, and doesn't load anything non-essential like analytics until
they choose Accept all.

Then add three pages linked from the footer, written in plain English for
THIS site. Privacy: what we collect on the forms, why, that it goes to
Mailchimp, that the site is hosted on Vercel, how long we keep it, and
the email address to write to if someone wants their details deleted.
Terms: for a services business. Cookies: what the banner does. Under
every form, add one line saying what happens to their details, linking
to the privacy page.

Read the three pages as if you were a visitor. If they mention anything the site doesn't do, tell Claude to take it out. A privacy policy that mentions things the site doesn't do is worse than none.

Step 7 - The bits search engines and screen readers need

Add a page title and description for every page, a share image for when
the site is posted on social media, and a sitemap. Make sure every image
has alt text, the colours pass accessibility contrast checks, and the
whole site works with a keyboard.

Claude does all of that in one go. That's the build done.

Part 2 is done. The site looks right on my laptop and my phone.

---

Part 3 - Connect it

Step 8 - Connect the forms to Mailchimp

Right now the forms look right and do nothing. This step makes them put the person into Mailchimp with a tag, so the client knows where every contact came from, and sends the person a confirmation.

Now I want to connect the forms to Mailchimp. Anyone who submits the
contact form gets added to my audience and tagged "contact-form", with
their message saved against them. Anyone who signs up on the newsletter
box gets added and tagged "newsletter". Apply the tag as part of adding
them, not afterwards, because Mailchimp is going to send them a
confirmation based on that tag.

Do this through a small server step, not in the visitor's browser, so
the Mailchimp key never reaches anyone. When you need the key, open the
file it goes in. Talk me through it one step at a time.

Claude builds the connection and then stops and says it needs two things from Mailchimp. Here's where they are.

1. Log into Mailchimp. Click your profile picture in the bottom left, then Account & billing.
2. Click Extras, then API keys, then Create A Key. Name it after the website. Copy the key into a note.
3. Click Audience, then All contacts, then Settings, then Audience name and defaults. Copy the Audience ID from that page into your note.
4. While you're on that page, find New subscriber notifications, turn on "one by one", and put in the client's email address. That's what emails the client when someone fills in a form.

I've got the API key and the Audience ID in a note. Open the file they
go in and tell me which line each one goes on.

Paste them in, save the file, and tell Claude they're in. It restarts the site and tells you to try the form.

Send the visitor a confirmation. Right now the client gets an email and the visitor gets a thank-you page. That's not enough. If they don't get an email, half of them will assume it didn't work. Mailchimp sends it, triggered by the tag the website just applied.

1. In Mailchimp, click Automations, then Create, and choose a Customer Journey.
2. For the starting point, choose Tag added, and pick contact-form.
3. Add an email. Subject: "Got your message". 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 the client's business ever says to them.
4. Turn it on. Then do the same for the newsletter tag with a short welcome.

Test it. On localhost, submit the contact form with an email you can check.

• In Mailchimp, under All contacts, your email is there, tagged contact-form, with the message on it.
• The client's inbox has the notification.
• Your inbox has the confirmation.
• The site showed 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 something didn't happen, tell Claude exactly which one.

Part 3 is done. The forms are connected and tested.

---

Part 4 - Test it and go live

Step 9 - Test it like a stranger, and audit it

Give me a test script for this site as if I were a visitor who's never
seen it: every page, every link, the cookie banner, both forms, and the
legal pages. Then audit the site for security and GDPR as if you'd be
blamed if it's wrong. Read the actual code. Does anything non-essential
load before cookie consent? Is the Mailchimp key anywhere the browser
could reach, or anywhere in the code? Does the privacy page match what
the code actually does? Fix what you can and list what you can't.

Claude gives you the list and the audit. Work through the list on your phone in a private window. Fix anything on the audit. Now it's a website you can put a client's name on.

Step 10 - Put it on a test link for the client

Everything works on my computer. Put it on a test link with Vercel so I
can share it with the client. Walk me through it one step at a time.

Claude sends you to do these.

1. Create an empty repository on github.com. Claude puts the code there. The file with your Mailchimp key stays on your computer.
2. Go to vercel.com, click New project, and import the repository. Don't change the settings.
3. Under Environment Variables, add the two Mailchimp lines from your note with the same values. This is the only other place those keys are allowed to live.
4. Click Deploy. A minute later you get a link ending in .vercel.app.

Open it on your phone and submit the form once more. Same checks as Step 8, but on the internet this time.

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

Step 11 - Go live on the domain

The client has approved it. Connect the domain [DOMAIN] and walk me
through it.

1. In Vercel, go to Settings, then Domains, and add the domain. Vercel shows you two or three DNS records.
2. Go to wherever the domain was bought, find the DNS settings, and add the records exactly as Vercel shows them.
3. Wait. Ten minutes to an hour. Vercel's Domains page turns green when it's through.
4. Open the domain, submit the form one final time, and check Mailchimp.

Send the client the real link.

---

What this looks like as a business

The biggest shift for me is that I'm no longer being paid for how long it takes me to physically build a website. I'm being paid for knowing what to build, how it should work, what needs connecting, and whether it's actually good enough to put my name on.

Claude just made the production part dramatically faster. A site that used to be a week in a page builder is now a morning, and every one I build makes the next one quicker, because I pull the good bits back out afterwards. I wrote that habit up here.

Start with your own

Build one for yourself before you build one for a client. Your own 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.

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 →