Build real websites by describing them.

Get a Claude Pro subscription

Claude has a free tier, but it cannot touch files on your computer. The thing you actually want, the one that builds a whole website into a folder, is called Claude Code, and it only comes with a paid plan.

1. Go to claude.ai and make an account if you do not have one.
2. Go to claude.com/pricing and pick Pro. Not Max. Max is for people running Claude all day.
3. Monthly is fine to start. You can switch to annual later once you know you like it.

Install the Claude desktop app

This is a normal Mac app. It already contains Claude Code inside it, so you do not need to install anything else, and you do not need to know what Node.js is.

1. Download it: claude.ai/download
2. Open the .dmg file that lands in your Downloads folder.
3. Drag the Claude icon onto the Applications folder in that window.
4. Open Claude from Applications. Sign in with the account you just paid for.

Along the top you will see three tabs: Chat, Cowork, and Code. Chat is the one you already know. Code is where websites get built. Ignore Cowork for now.

Make a folder, then open it in the Code tab

Claude Code works on one folder at a time. That folder is your project. Everything it writes goes in there, and nothing outside it gets touched.

1. Open Finder. Press Shift + Command + N in your home folder to make a new folder. Call it Sites.
2. Inside Sites, make another folder called first-site.
3. In Claude, click the Code tab, choose Local, click Select folder, and pick first-site.
4. In the permission dropdown next to the send button, pick Manual for now.

Manual means Claude shows you every change and waits for you to approve it. It is slower and it is the right way to start. Once you trust it, switch to Accept edits and it stops asking.

Now type something in and watch what happens:

Build me a one page site for a florist called Field & Fern.
Warm, a bit old fashioned, not corporate. Just index.html
and styles.css, no frameworks. Show me a plan before you
write anything.

Install the design skills

A skill is a folder of instructions that Claude reads when it is relevant. Out of the box, Claude designs like a competent engineer with no taste. Skills are how you fix that. This is the single biggest quality jump available to you, and it takes about four minutes.

First, the Anthropic pack. Type these two lines into the Code tab, one at a time, pressing Enter after each. They start with a slash because they are commands, not questions.

> /plugin marketplace add anthropics/skills

> /plugin install example-skills@anthropic-agent-skills

That one install gets you eight skills at once, including the two that matter most for you: frontend-design and canvas-design. The full list is in the catalog below.

Then the two best outside ones. These go in the terminal rather than the chat box. In the Claude desktop app, press Control + backtick to open a terminal pane, make sure you are in your project folder, and paste:

$ npx impeccable install

$ npx skills use vercel-labs/agent-skills \
    --skill web-design-guidelines --agent claude-code

Say yes when it asks to download the package. Then restart Claude and type /skills in the Code tab. Everything you installed should be listed.

Make a Cloudflare account

Cloudflare is where your sites will live. The free plan is the real product, not a trial, and it does not ask for a card unless you buy a domain.

1. Go to dash.cloudflare.com/sign-up.
2. Use an email you will still have in three years. This account ends up owning your domain names.
3. Click the link in the verification email.
4. Turn on two factor authentication while you are in there. My Profile, then Authentication.

You do not need to add a website or a domain yet. Stop once you can see the dashboard.

Put your site on the internet

Do this the easy way the first time, so you get the feeling of it working. Drag and drop, no commands.

1. In the Cloudflare dashboard, go to Workers & Pages.
2. Click Create, then the Pages tab, then Upload assets.
3. Give it a name, like first-site.
4. Drag your first-site folder into the box. Click Deploy.

Thirty seconds later you get a real address ending in .pages.dev. That link works for anyone, on any phone, anywhere. Send it to someone.

Once that has clicked, here is the version you will actually use day to day. Two lines in the terminal, from inside your project folder:

$ npx wrangler login

$ npx wrangler pages deploy ./ --project-name=first-site

Better still, once you have done it once: just tell Claude "deploy this to Cloudflare Pages" and let it run the command.

Point a real domain at it

Only worth doing when you have something you are proud of. A .dev domain is a nice pick for this: it is what people who build things use, and it is forced to be secure, so you can never accidentally ship an insecure version.

1. In Cloudflare, go to Domain Registration, then Register Domains. Search for the name you want.
2. Buy it. Cloudflare sells at cost and does not do the renewal price trick that other registrars pull.
3. Go back to your Pages project, then Custom domains, then Set up a domain, and enter it.
4. Go to the domain's DNS tab and add a record: type CNAME, name @, target your-project.pages.dev, proxy on (the orange cloud).