How to Build a Website With Claude Code (That Doesn't Look AI-Made)

Claude Code can build you a working website in an afternoon. It can also build you the most generic website you've ever seen in five minutes. The difference is almost entirely in how you start.

The biggest mistake is opening Claude Code and typing "build me a website for my business". With nothing to go on, Claude gives you the average of every website it has seen. This guide is the process that avoids that.

What you need

• Claude Code. Claude working in your terminal or the desktop app, where it can create files and run commands. It needs a paid Claude plan or API credits; check Anthropic's site for current options.
• An empty folder for the project.
• Your content. Real headline, real sections, real photos or screenshots. This matters more than any prompt.

You don't need to know how to code, but it helps to be willing to read what Claude tells you it's doing.

Step 1: Plan the site before you prompt

Spend ten minutes writing this down in a plain text file in the folder, say brief.md:

• Who it's for and the one thing they should do (book a call, buy, sign up).
• The pages. For most small sites: home, one or two detail pages, contact.
• The sections on the home page, in order. For example: hero, what you do, work examples, testimonial (only if you have a real one), call to action, footer.
• Your copy for each section, even if it's rough.
• Look and feel: two or three websites you like, and what exactly you like about them.

Then your first prompt can simply be: "Read brief.md. Ask me any questions before you start." Claude asking questions first is a good sign.

Step 2: Start from a reference, not an adjective

"Modern and clean" means nothing to an AI. A reference does. You have three good options:

1. Describe a site you like precisely. Not "like Apple", but "large centred headline in a serif font, lots of white space, one product image per section, black buttons with full rounding".
2. Paste a section prompt. On Oversight Supply's sections page, every section can be copied as a single prompt that describes the layout, type and motion in detail. Paste one and ask Claude to adapt it to your content.
3. Start from a whole template. If you want the full site to feel designed, start from a template copied as one prompt and change the content, rather than designing from scratch.

Step 3: Pick a simple stack (or let Claude)

For a marketing site, plain HTML and CSS is often enough and easiest to host. If you'll add a blog or more pages later, a framework like Next.js or Astro is a good choice. If you don't have an opinion, tell Claude: "Use the simplest setup that's easy to host for free and easy to edit later. Explain your choice in two sentences."

Step 4: Build one section at a time

Don't ask for the whole site at once. Go section by section:

1. "Build the hero section from the brief. Use only my copy."
2. Look at it. Fix what's off.
3. "Now the services section." And so on.

This keeps every section deliberate, and when something looks wrong you know exactly where it came from. It also stops Claude inventing filler like fake testimonials or "Trusted by 10,000+ teams". Add this line to your brief to be sure: "Never add copy, statistics, logos or testimonials that aren't in this brief."

Step 5: Preview it locally

Ask Claude Code to start a local preview: "Run a local server so I can see the site in my browser." It will give you an address like localhost:3000. Keep it open while you work and check every change.

Check on your phone size too. In most browsers you can switch to a phone view in the developer tools, or just ask Claude: "Make sure every section works at 375px wide with no sideways scrolling."

Step 6: Make it look designed

This is where AI sites usually fall short. A few targeted prompts go a long way:

• "Use [heading font] for headings with a big size jump from body text. No more than four font sizes on the page."
• "Neutral palette with one accent colour, used only for the main button. No gradients."
• "Vary the spacing: more space around the hero headline, tighter inside grids."
• "Add subtle hover states to buttons and cards, and respect reduced motion."

There's a longer list in how to make AI-generated websites look less generic.

Step 7: Check the basics

Before you publish, ask Claude to go through this list and fix anything missing:

• A unique page title and meta description on every page
• Alt text on every meaningful image
• A favicon and a social share image
• Working links, including the contact or booking link
• Fast loading: compressed images, no huge files

Step 8: Publish

Static sites and most framework sites can be hosted for free or cheaply on services like Vercel, Netlify or Cloudflare Pages. The usual flow is: put the project on GitHub, connect the repo to the host, and every push goes live. Claude Code can walk you through each step and run the commands with you. Then connect your domain in the host's settings.

The short version

Plan the content first, give Claude a real reference, build one section at a time, preview everything, and never let it invent copy. Do that and the site you get looks like yours, not like everyone else's.