How to Build a Website with Claude Code (Step by Step, 2026)

Claude Code is the fastest way we know to go from an empty folder to a real, fast, hand-coded website. It's also the fastest way to end up with a site that looks like every other AI site, has a contact form that sends nowhere and can only be changed by the person who built it. The difference between those two outcomes is not talent. It's about eight decisions you make before and after the code gets written.

This guide walks through those decisions in order. We build customer sites with Claude Code every day, so every step here is something we actually do, including the parts that tutorials skip.

What you need before you start

A Claude plan that includes Claude Code. Pro (about $20 a month) is enough for a small site. Max gives you more room if you build a lot. Alternatively you can pay per use with an API key.
A terminal and Node.js. Claude Code runs in the terminal on macOS, Linux and Windows, and in editor extensions for VS Code and JetBrains.
Git and a GitHub account. Not strictly required to build, but it's how you'll deploy, and it gives you an undo button for every change Claude makes.
A domain, if you want the site on your own address. Around 10 to 15 euros a year.
Your content. Real text, real photos, real prices. This matters more than anything on this list, and we'll come back to it.

Step 1: Install Claude Code and start in an empty folder

Follow the official setup guide. The short version is a single install command, then claude in a new folder:

npm install -g @anthropic-ai/claude-code
mkdir my-site && cd my-site
git init
claude

The first run asks you to log in. Starting in an empty folder with git init means every step from here on can be committed and rolled back. When a change goes wrong, and one will, you want to type "undo that" and have it be true.

Step 2: Pick the stack before Claude picks it for you

If you don't say what to build with, Claude Code will often reach for React or Next.js. That's the right tool for a web app and the wrong one for a business website: more JavaScript, a build pipeline you have to maintain, and nothing a visitor benefits from. For a website, there are really only two good answers.

Stack	Good for	Watch out for
Plain HTML + CSS	One-pagers, landing pages, sites with three to five pages that rarely change	The header and footer get copied into every file, so a menu change means editing every page
Astro	Anything with shared layout, a blog, or more than a handful of pages	Needs a build step (`npm run build`), so deploy from Git rather than by drag and drop

Both produce static files: plain HTML that any host can serve, with nothing to update and nothing to hack. If you're unsure what that rules out, we wrote down what a static website can and can't do. In short: perfect for sites that show things, not for full online shops or customer portals. Astro's own docs are good if you want to understand what Claude is generating.

Step 3: Install the design skills

This is the single biggest quality lever. Without a design skill, Claude Code produces the page everyone recognises: centred hero, soft gradient, three feature cards, a stats row. With one, it makes real decisions about type, colour and layout.

frontend-design (Anthropic) raises the floor on everything. Install it always.
impeccable asks what the business actually is and looks for a form that fits it. Use it for the homepage and anything that has to persuade.
webapp-testing lets Claude open the page in a real browser and look at it. Without it, Claude is designing blind.

We compared these and three more in detail, including where each one falls short, in the best Claude Skills for web design. If you only read one other article before you start, make it that one.

Step 4: Write the brief into CLAUDE.md

Claude Code reads a file called CLAUDE.md at the start of every session. Put your brief there once, and you stop repeating it in every prompt. A good one is short:

# Bergmann Physio, website

## The business
Physiotherapy practice in Freiburg, team of four. Known for treating
runners and for Saturday appointments. Most patients come from Google
Maps and want to know: can I get an appointment soon, and is it covered.

## The goal of the site
Visitors should book an appointment or call. Everything else is secondary.

## Stack and rules
- Astro, static output, no client-side framework
- Self-host fonts (no Google Fonts requests), no third-party scripts
- Semantic HTML, one h1 per page, alt text on every image
- Brand: deep green #1E4034, warm off-white #F6F1E7, one accent
- Never invent facts: no made-up reviews, numbers, awards or addresses

Two lines in that example do more work than they look like. "Known for treating runners and for Saturday appointments" is a fact the model could never have guessed, and it gives the design something to be about. "Never invent facts" stops the most embarrassing failure of AI-built sites: the five-star testimonial from a customer who doesn't exist.

Step 5: Plan first, then build the homepage only

Switch Claude Code into plan mode (Shift+Tab) and ask for a plan: the pages, the sections of the homepage, the components that will be shared. Read it, correct it, then let it build. A plan you approve is far cheaper to fix than a site you don't like.

Then build only the homepage. It sets the system: type, colours, spacing, buttons, the header and footer. Iterate on it until you genuinely like it. Then ask Claude to extract that system into shared components (in Astro: a layout plus a few components) and build every other page against it. Sites built page by page without a shared system are where AI design visibly falls apart, usually around page five, when every page has developed its own opinion about buttons.

A prompt that works

"Build the homepage from CLAUDE.md. Use the impeccable skill. Before you write code, tell me the one idea the page is built around and why it fits this business. Real copy only, mark anything you don't know as TODO instead of making it up."

Step 6: Check it on a phone, then stop

Most visitors to a small-business site arrive on a phone. Ask Claude to open the page at phone width and at desktop width with the webapp-testing skill, take screenshots, and list every problem it sees. Typical findings: text overflowing sideways, a hero image that fills the whole first screen, buttons too small to tap, grey text on a grey background. Then have it fix all of them in one batch.

And then stop. Open-ended "keep improving it" loops are the most expensive thing you can do in Claude Code, and after the second round they mostly move things around.

Step 7: Do the boring parts that make it a real website

A page that looks finished is not yet a website that works. Ask Claude to go through this list:

A title and meta description on every page, written for the search, not the brand.
sitemap.xml and robots.txt. Astro has an official sitemap integration; for plain HTML, Claude can write one by hand.
Structured data: at least Organization or LocalBusiness on the homepage, so search engines and AI assistants know who you are.
A working contact form. A static site has no server to receive it. You need a form service or a platform that handles it, and you should send a test message before launch.
A 404 page, a favicon and share images for when someone posts your link.
The legal pages your country requires. In Germany that means an Impressum and a privacy policy, and a consent banner as soon as you add analytics.

Static sites have a real head start in search because they're fast and clean, but only if this list is done. We go deeper in static website SEO.

Step 8: Put it live on your own domain

Push the repository to GitHub, connect it to a static host (Cloudflare Pages, Netlify and GitHub Pages all have free tiers that are plenty for a small site), set the build command (npm run build and output folder dist for Astro, nothing for plain HTML) and add your domain in the host's settings. From then on, every push publishes.

The details, including what to do when you made the site with a Claude artifact or Claude Design instead of Claude Code, are in our guide to publishing a website made with Claude on your own domain.

What it really costs

Item	Cost	Note
Claude plan	From about $20 a month	Pro is enough for one small site; heavy design iteration uses more
Hosting	Usually free	Static hosting free tiers cover typical small-business traffic
Domain	About 10 to 15 euros a year	Often already owned
Your time	An afternoon to a few weekends	One-pager vs a multi-page site with a blog

The money is small. The time is the real cost, and most of it is not the build. It's content, the boring list in step 7, and every change after launch.

Where it goes wrong

The generic look. A thin brief produces the average website. Fix the brief, not the prompt.
Invented facts. Opening hours, prices, team sizes and testimonials that sound plausible and are wrong. Read every sentence before you publish.
Long sessions drift. After hours in one session, Claude starts forgetting earlier decisions. Use /clear between tasks and keep the rules in CLAUDE.md, where they survive.
Silent breakage. A "small" change to the header that breaks the mobile menu on every page. Commit often and check the phone view after anything shared.

Want the result without the terminal?

ShiftPress builds the site from a few sentences about your business, or from a design you bring, using the same design skills. You change it afterwards by describing what you want.

Build a site ↗

The six-month question: who edits it?

The launch is the easy day. Six months later the prices change, a team member leaves, and someone needs a new page. If the only way to edit the site is to open a terminal and talk to Claude Code, then the site belongs to whoever can do that. For a developer building their own site, that's fine. For a business owner, it's the same dependency they were trying to escape.

There are a few ways to plan for this, from editing the files directly to putting a CMS on top. We compared them honestly in how to edit a static HTML website. The option we built ShiftPress around is the one where you keep the fast static site and change it by describing the change in a chat, and you see a preview of every affected page before anything goes live.

And if you already have a website and just want it faster and easier to run, don't rebuild it from zero. Moving an existing site to static code keeps your content, URLs and rankings, which a rebuild from scratch puts at risk.

Frequently asked questions

Can Claude Code build a whole website?

Yes. Claude Code can build a complete multi-page website, including layout, copy placeholders, styling, a sitemap and structured data. It works best when you build the homepage first, turn its design into shared components, and then build the other pages against that system, instead of asking for the whole site in one prompt.

Do I need to know how to code to build a website with Claude Code?

You don't need to write code, but you do need to be comfortable in a terminal, with Git and with reading what Claude proposes. You also need to judge whether the result is right on a phone, and set up hosting and a domain yourself. If that sounds like too much, a managed platform that builds and hosts the site for you is the better route.

Is Claude Code free?

No. Claude Code is included in the paid Claude plans, starting with Pro at about $20 a month, or you can pay per use with an API key. Hosting a static website is usually free on Cloudflare Pages, Netlify or GitHub Pages, so the plan and a domain are the main costs.

Which framework should Claude Code use for a website?

For a business website, plain HTML and CSS for one-pagers and very small sites, and Astro for anything with several pages, a shared layout or a blog. Both produce fast static files. Avoid React or Next.js for a brochure site unless you need app features, because they add JavaScript and maintenance without helping visitors.

How do I put a Claude Code website on my own domain?

Push the project to GitHub, connect the repository to a static host such as Cloudflare Pages or Netlify, set the build command if you use Astro, and add your domain in the host's settings. The host tells you which DNS records to set, and SSL is issued automatically.

How do I stop Claude from making the site look generic?

Install a design skill such as frontend-design or impeccable, and give it a brief that contains facts about the business it could not have guessed: what you are known for, who your visitors are and what they should do next. A specific brief changes the result far more than a cleverer prompt.

The bottom line

Building a website with Claude Code comes down to a short sequence: empty folder and Git, a static stack, two design skills, a brief in CLAUDE.md, the homepage first, a check on a phone, the boring list, then deploy. Done in that order, it produces a site that's faster and more original than most of what agencies shipped a few years ago.

Decide before launch who will change it afterwards. That decision matters more for the site's first year than anything you do in the build.