How to build your website with Claude Code and Vercel

Many people build content with AI now, and it quickly starts to look alike. The difference is what you give as input. This guide is the order I followed myself when I built aimedline.dk. Six pages, plain HTML, my own design system, live on Vercel.

You don't need to know how to code. You need to know your business, have your own texts at hand, and be willing to spend an afternoon on the foundation before you ask for anything.

Paper first

Before I opened anything, I sat down without a computer. Paper, a pen, and the pages drawn up one at a time.

For each page I wrote three things: what it is called, who it is for, and what she should do once she has read it. The front page should get people to sign up. The page for companies should get them to write to me. Guides should be open to everyone.

It took an hour. And that is the hour that gave Claude a plan instead of a mood.

what I had on paper

Six pages: front page, what I have built, for companies, session, guides, about. One job per page. One button per page.

What you give Claude

This was in my Claude project before I asked for the first file. It is what decides whether the site looks like you.

Your design system
Colours with hex codes, two typefaces, and the rules for how they are used. Mine is five colours, Fraunces for text, Caveat for handwritten notes, and a thin frame around every section.
Your tone of voice file
How you write. Words you use, words you never use, how a sentence opens, what a button may be called. If you don't have one, start with the brand file.
Texts you have written yourself
Posts, newsletters, what you have on your current site. Bring plenty. Those are what it learns your voice from.
Proposals and emails you have sent
How you talk to a client when it counts. That is a different tone from Instagram, and it needs to be included too.
Screenshots and inspiration
Sites you like, with a line about why. The air, the typography, the way they use images. Claude can see images, so show it.
Clients, cases, numbers and prices
Who you have worked for, what you built, what it gave. Written down, so it fetches facts instead of inventing them.

It should fetch facts, not invent them.

It sounds like a lot. Most of it you already have lying around. The work is gathering it in one place, in files Claude can read, instead of in your inbox and your head.

Design skills from GitHub

Ask an AI for a website with nothing else, and you get default AI: rounded corners, a gradient, three boxes in a row. That can be fixed before you start.

There are ready-made skills on GitHub that teach Claude typography, space and hierarchy. Anthropic has its own repo of skills at github.com/anthropics/skills, where frontend-design lives. That is what I started with. On top I have two skills on design taste that pull in a calm, editorial direction.

A skill is a folder with a file called SKILL.md. Download it and put it into Claude. In Claude Code it lives in the folder .claude/skills in your project. In Claude you zip the folder, with the folder itself at the top of the zip file, and upload it under Customize, then Skills, the plus, Create skill, then Upload a skill. Switch it on, and Claude uses it on its own when it builds, in Claude Code too when you are signed in with the same account.

the order matters

Design skills give the craft. Your design system gives the expression. Without the first it gets clumsy. Without the second it gets pretty and anonymous.

The stack, layer by layer

Four tools. Each of them has one job.

Claude Code builds
That is Claude working directly in a folder on your computer. It writes the files, corrects them, and keeps track of them. You open it in the desktop app under the Code tab: choose Local, then Select folder, and point at the folder. Nothing to install. Requires a paid plan: Pro, Max, Team or Enterprise.
Design skills and the design system control the expression
What you set up in steps 2 and 3. Claude reads it every time it touches a page.
GitHub keeps everything
The folder lives as a repo on GitHub. Every change is saved with a message about what was changed. You can always go back.
Vercel shows it
Vercel watches your repo. Every time something new arrives, it goes live by itself. The free Hobby plan is for personal projects. If you run a business on the site, it belongs on Pro.
Your provider has the domain
I bought mine at Simply.com. The only thing the provider has to do is point the domain at Vercel.

That was all. No WordPress, no template, no subscription to a site builder.

Build and correct

One HTML file per page. All styling inside the file. Fonts from Google Fonts. That is the whole technical decision, and it makes the site fast and easy to correct.

I asked Claude to build one page at a time, the front page first, from what I had on paper and what was in the project. Then I opened it in the browser and had a look.

You write corrections the way you would say them to a colleague:

"The client list is stacked on top of itself. Split it into two columns."

It split it up and put a thin line in between.

"Cases should sit in boxes with a thin frame."

Three boxes side by side, frame in black, air in between.

"The ads agent should be at the top of the list."

Order swapped. One minute.

You don't write code. You look, and you say what should be different. Correct one thing at a time, so you can see what happened.

GitHub and Vercel

This is the step that sounds technical and takes ten minutes.

Create an account on github.com, and ask Claude to put the folder up as a repo

It creates the repo and pushes the files up. That needs GitHub's own small program, gh. If you don't have it, Claude offers to install it, and the first time GitHub opens the browser and asks you to sign in and approve the connection. Say yes.

Create an account on vercel.com, and choose Import from GitHub

Choose your repo. Vercel works out by itself that they are ordinary HTML files. Press Deploy.

You get a link right away

Your-project.vercel.app. The site is live before your domain is. Share the link if you want feedback before the domain goes on.

From here every correction goes live on its own

You ask Claude to correct something, it sends it to GitHub, and Vercel builds it in a minute. No upload, no FTP.

The domain

The only step that takes time. And it only takes time if you leave it until last.

Open your browser, log in at your provider, and ask Claude to handle the domain work. With Claude in Chrome it can see the screen and point the domain at Vercel while you watch. What needs to happen is two lines: an A record on your domain pointing at Vercel's IP address, and a CNAME on www so the www version works too. Vercel shows you both under Domains in your project and suggests the www line itself.

If you have a .dk domain, there is one more step. Punktum dk requires ID verification with MitID before the domain is activated. It is in an email you get when you buy it, with a deadline of 25 days. If you don't do it, the site doesn't go live, whatever DNS says.

what I would do differently

Take the domain first. Buy it, complete the ID verification, point it at Vercel. Then it is ready the day the site is.

The prompt

Put the files from step 2 in the folder, open the folder in Claude Code, and paste the prompt as the first message. It asks the questions, you answer, and it builds one page at a time.

prompt · build my website

You are my web designer and developer. We are building my website together, in plain HTML, one file per page, with all styling inside the file and fonts from Google Fonts. It will live on GitHub and go live on Vercel. You build, I look. Work through the steps in order, and don't skip ahead.

HOW YOU WORK

Ask one question at a time, and wait for my answer. Use plain language. Build one page at a time, and show it to me before you move on to the next. Never invent text, clients, numbers or prices. If you are missing something, ask. Only correct what I ask to have corrected, and leave the rest. Never send anything to GitHub before I have said yes.

STEP 1 · READ WHAT IS IN THE PROJECT

Read all the files in the project before you ask anything: my design system, my tone of voice file, my own texts, my proposals and emails, screenshots and inspiration, and the list of clients, cases, numbers and prices. Summarise in ten lines what you have understood about my business and my expression. Correct me if something is unclear. If one of the files is missing, say which, and ask whether I have it.

STEP 2 · THE PAGES

Ask me which pages the site should have. For each page I want three things in place before you build: what it is called, who it is for, and what she should do once she has read it. Every page has one job and one button. Suggest an order yourself, front page first.

STEP 3 · THE DESIGN SYSTEM IN CODE

Translate my design system into a shared style block that all pages use: the colours as variables, the two typefaces, spacing, frames, buttons. No boxes with shadows, no gradients, no rounded corners unless my design system says so. Show me the style block on an empty test page before you build anything real.

STEP 4 · BUILD THE FRONT PAGE

Build the front page as one HTML file according to what we agreed in step 2. The text must follow my tone of voice file and resemble my own texts. Only use clients, cases and numbers from the project. Show me the page, and wait for my corrections. Correct one thing at a time.

STEP 5 · BUILD THE REST

Repeat step 4 for each page in the order. Same style block, same navigation, same footer. All links must work between the pages.

STEP 6 · GITHUB

When I say the pages are ready: guide me through creating an account on github.com if I don't have one. Create the repo, and push the folder up. Explain what you do, one line at a time. Use SSH if it is set up. Never suggest a token before we have checked whether SSH works.

STEP 7 · VERCEL

Guide me through creating an account on vercel.com, importing the repo and pressing Deploy. Ask me to send you the link once the site is live, and check that all pages open.

STEP 8 · THE DOMAIN

Ask where my domain was bought. Tell me exactly which DNS record to create at the provider, with the values Vercel shows under Domains. If it is a .dk domain, remind me of the ID verification with MitID at Punktum dk, and that the site won't go live until it is completed.

STEP 9 · AFTERWARDS

Explain to me how a correction goes from you to GitHub to Vercel, so I know what happens when I ask for something next time. Suggest three things I can build on from the foundation that is now in the project.

Start now. Begin with step 1.

before you paste it

The prompt only works once the files from step 2 are in the project. Without them it has nothing to build from, and then you get the generic site you were trying to avoid.

Next time

The foundation is what you use again. The next page, the next newsletter, the next carousel build on the same files.

That is why the afternoon with paper and files is well spent. The site was one day. The files are still there, and they get better every time you correct them.

If you don't have a Claude setup yet, start with Get started with Claude. If the foundation needs writing first, the method is in Build your brand file. If you would rather build it together with me, you can read about a session.