The Website Guide

Let's build something lovely

A calm, start to finish way to make a genuinely beautiful website for a small business, even if you have never written a single line of code. You plan the idea with one AI, then let another one build it. Everything here is optional, nothing can break, and there is no wrong turn to take.

A hand-drawn laptop showing a little website, with a leafy plant, a flower and a cup of tea beside it

The whole thing, in three moves

Before you build anything, it helps to know the shape of the day. It really is just these three.

  1. Plan it with Gemini

    You talk your idea through with Gemini, and it writes a perfect set of instructions for Claude. Doing the thinking here means Claude gets it right faster, and you use less of your Claude allowance.

  2. Build it with Claude

    You hand those instructions to Claude, which builds a real website on your own computer while you watch, explaining what it is doing in plain words as it goes.

  3. Make it live

    When you are proud of it, one short sentence puts it online with a link you can share with anyone.

Step one

Gather your bits

A little preparation makes everything smoother. Spend ten minutes gathering these before you open any AI. None of it has to be perfect, and you can always add more later.

About the business

  • What it does, in a sentence
  • Its services, and rough prices
  • Opening hours
  • Where it is (the address or area)
  • A phone number or email people can use
  • A few nice photos, if there are any
  • Its current website or social pages, if it has any

The look you want

Find three to six websites whose look you love. Pinterest is perfect for this, try searching something like "hair salon website", "florist website" or "cafe website". Save a screenshot of each one you like.

Why this matters most

Showing the AI real examples is the single biggest thing that stops a website looking generic. It gives it a target to aim at, instead of quietly inventing a bland one.

Step two

Plan it with Gemini

Open a brand new chat in Gemini. Fill in whatever you already know below (all optional), copy the instruction it builds for you, and paste it into that Gemini chat. Then just answer Gemini's questions one at a time, and upload your screenshots when it asks.

Just its name. Leave blank and Gemini will ask you.
One line is plenty.
If they have any. One per line. Gemini will look at them.
The ones you found for inspiration. One per line.
In your own words.
Your answers are saved on this computer only.
Your Gemini prompt

        

What happens next

When Gemini has everything, it will show you a short summary to check, then write one big instruction for Claude. Copy that instruction, you will paste it into Claude in the next step. You do not need to understand it, it is just a very thorough set of notes.

Step three

Build it with Claude

Now the fun part. Claude will build the actual website on your computer, and you get to watch it happen.

  1. Make a new folder somewhere easy (your Downloads folder is fine). Name it after the business. Put your screenshots, and any logo or photos, inside it.
  2. Open Claude Code and start a new session, set to that folder. The folder box is right at the bottom when you start.
  3. Paste in the instruction Gemini wrote for you, and send it.
  4. Answer any questions Claude asks in plain words. It will build a preview on your own computer and give you a link that starts with "localhost".
Which Claude

Leave it on Sonnet, the everyday one. It is plenty clever and gentle on your allowance, so turn its thinking on and let it work. If you are building something big and want extra polish for the very first go, switch to Opus for that first build, then switch back to Sonnet for the little tweaks. You will find the choice in the model picker.

You cannot break anything

Honestly. If something looks wrong, you simply tell Claude and it fixes it. Nothing you do here touches anything but this one folder.

Step four

Look, and make it lovelier

Open the localhost link Claude gives you. That is your private preview, it only opens on your computer, so nobody else can see it yet. Now you make it yours.

Talk to it like a designer friend

The trick is to change one thing at a time, and be specific. Instead of "make it nicer", try "make the big title at the top a bit smaller and warmer", or "the buttons feel too bright, soften them". Small, clear notes get lovely results.

To see it on a phone, either make it live first (the next step) and open the link on your phone, or simply ask Claude to show you how it looks on a smaller screen.

If it ever feels a bit "AI made"

Paste this in and let Claude be honest with itself. It has a design checker called Impeccable built in that catches the tell tale signs of a generic website.

The honesty check
Be really honest with me. Does this look like a generic, AI made, "vibe coded" website, or like something a real designer made just for this business? Please run your Impeccable design check on it, list everything that looks templated or AI generated (the fonts, the spacing, the layout, the wording, the colours, anything at all), and then fix each one. I would rather you were harsh with it now than have it look generic. Keep it in British English with no dashes.

What things are called

You do not need any of these words to build a lovely website. But when you want to point at a part of the page, here is what people call it.

The hero
The big welcome area right at the top, the first thing people see.
The nav
The row of links along the top that jump you around the site.
A section
One horizontal band of the page, like a chapter.
A card
A little boxed panel, often used for a service, a price or a review.
The footer
The strip at the very bottom, usually the contact details and hours.
The button (or call to action)
The main thing you want people to click, like "Book now".
Localhost
Your private preview. It only opens on your own computer.
Going live (deploying)
Putting it on the internet with a public link anyone can visit.
Mobile view
How the site looks and behaves on a phone rather than a laptop.
A placeholder
A temporary stand in bit of text or a photo, there until you swap it for the real thing.
Step five

Put it online

When you are proud of it, putting it online is one sentence. This is already set up for you, so there is nothing fiddly to do.

To make it live

Tell Claude: "Make it live on Cloudflare." It will create a public link you can share. The very first time takes a couple of minutes to set up, and you do not need to do anything while it works.

To keep improving after it is live

Say: "let's keep changing the local version for now, and I'll tell you when to push it live again." Then, when you are happy with the new changes, just say "push it live again". Your edits never touch the live version until you ask.

Keep these in your pocket

Everything above, boiled down to the handful of things that matter. Come back to this bit any time.