Build a web page in 1 day with 0 coding background

How to use this page

15 minutes of prep: install 3 things, create 2 accounts

Get these ready before you start. You only do it once, and the second web page needs none of it.

0-1 Install Claude Code

Claude Code is Anthropic's official command-line tool, not the Claude web app you chat with. It creates files, edits files and runs commands directly on your computer. One official command installs it, and you do not need Node first.

On Mac

Open Terminal (a built-in app, search "Terminal" in Spotlight), then copy this line, paste it and press Enter:

curl -fsSL https://claude.ai/install.sh | bash

This is Anthropic's official native installer. One line installs it and keeps it on the latest version.

On Windows

1. Install Git for Windows first (click Next all the way). Claude Code needs it to run commands on Windows
2. Open PowerShell (search "PowerShell" and press Enter)
3. Paste this line:

irm https://claude.ai/install.ps1 | iex

Seeing 'irm' is not recognized means you opened CMD instead of PowerShell. Close it, open it again, and search for "PowerShell" this time.

Check the install: once it is installed, type claude --version in Terminal. A version number printing back means it worked.

0-2 Start Claude Code for the first time

Once it is installed, type claude in Terminal / PowerShell and press Enter. The first run asks you to log in.

1. Type claude and press Enter
2. It opens a browser on the Anthropic login page. Log in with your Anthropic account, the same one you use for Claude on the web
3. Once you are logged in the browser tells you it is safe to close the window. Back in Terminal you will see it waiting for your command

Note: Claude Code needs a paid plan.The docs are explicit about it. A free Claude.ai account does not include Claude Code. You need Pro (USD 20 / month), Max, Team or Enterprise. No account yet? Go to claude.ai/upgrade and subscribe to Pro. One month of Pro covers several web pages plus daily help writing copy and fixing your resume, which is worth it.

0-3 Create a GitHub account

GitHub is where code lives, and it is free. When Vercel deploys, it pulls your page from GitHub and puts it online.

1. Go to github.com, then click the top-right Sign up
2. Enter your email → set a password → pick a username (it shows up in your future page address, so keep it memorable and lowercase)
3. GitHub emails you a verification code, type it back in
4. It then asks a few personalization questions (what you use it for, your experience). Any answer is fine
5. Once you are in you land on the GitHub home page, the one with the green New button on the left

0-4 Create a Vercel account

Vercel is the platform that puts your page on the internet, and the free plan stays enough forever. The easiest way to sign up is to log in with the GitHub account you just made.

1. Go to vercel.com, then click the top-right Sign Up
2. Choose Continue with GitHub
3. GitHub asks whether to let Vercel access your account → click Authorize Vercel
4. Vercel asks for your name and a team name. Working on your own, anything you type is fine
5. When the Vercel Dashboard shows up, you are done

12 prompts: talk a web page into existence with Claude

From here you do one thing: paste each prompt below into Claude Code in order, watch Claude finish → press Enter → paste the next one. Every prompt has a copy button in its top right.

STEP 1 Requirements (2 prompts)

Start by telling Claude what you want to build.

1Create the folder and a basic HTML file

Create a folder called my-website with an index.html inside. I want a one-page site that introduces my services.

What Claude does: Creates the folder, creates index.html, and writes the most basic HTML structure, still empty.

2Spell out the sections

Split the site into 4 sections: a headline, about me, 3 services, and contact.

What Claude does: Splits index.html into 4 sections, each with a placeholder heading. Open the file now and the structure is already visible.

STEP 2 Content (2 prompts)

Drop in dummy text and images first, then swap them for your real content later.

3Fill in placeholder text and images

Put dummy text and placeholder images in every section so I can see the overall feel.

What Claude does: Writes 2-3 placeholder sentences per section and uses a random image from placeholder.com or unsplash as the cover.

4Turn the 3 services into cards

Turn the 3 services into cards, each with a title, a short description and a price.

What Claude does: Lays out 3 columns of cards with CSS grid, each holding a title / a short description / a price. On a phone they stack into one column.

STEP 3 Visuals (4 prompts)

Overall tone → palette → mobile layout → let Claude review its own work.

An extra trick, Claude Design: on 2026-04-17 Anthropic launched a sibling product, Claude Design (available on Pro / Max / Team / Enterprise), built for generating visual drafts. The flow istune the interface in Claude Design until you like it, then hand it to Claude Code to build in one click. This page tunes visuals with prompts alone, which is enough. If you are picky about visuals, or want to compare a few versions before deciding, Claude Design gets you there faster and cleaner. It does not change the logic of these 12 prompts, it just gives Step 3 a smarter route.

5Overall style

Change the overall style to the clean, simple feel of Apple's website.

What Claude does: Adds a white background, generous spacing, light body text with bold headings, and greys for key words. If you want a different look, swap 「Apple」 for any brand name you like (say 「Japanese Muji style」 or 「the girly Xiaohongshu look」).

6Palette

Change the main palette to gold on black, like a high-end boutique.

What Claude does: Picks a suitable gold hex on its own (usually champagne gold), darkens the background, and moves headings / buttons / accents over. You never touch a colour code.

7Mobile layout

It has to look good on a phone too, with text that is not cramped.

What Claude does: Adds responsive breakpoints (usually 768px), bumps up the font size on phones, widens the gaps between sections, and turns 3 columns of cards into 1.

8Let Claude review its own work

Look at this page and tell me what could be better. Give me 3 suggestions, then apply them.

This is the most useful prompt: with 0 design background you cannot tell what looks off. Ask Claude to find its own faults and it comes back with details like 「the headline is too small」, 「the card shadow is too heavy」, 「the contact CTA does not stand out」, then fixes them itself.

STEP 5 GitHub (1 prompt)

Upload the finished files to GitHub.

10Upload to GitHub

Upload this to GitHub, name the repo my-website.

What Claude does:

• Runs git init to initialize the repo
• Asks for your GitHub account on the first run, just follow its login instructions
• Creates a repo called my-website on GitHub
• Pushes all the files up

When it finishes, GitHub shows a new repo with your page files in it.

A trap you will hit: if Claude asks whether to log in to the GitHub CLI (gh auth login), choose GitHub.com → HTTPS → Login with a web browser. It gives you an 8-character confirmation code, copy it and paste it in the browser.

STEP 6 Vercel deploy (2 prompts)

Connect the page on GitHub to Vercel and put it live in one click.

11One-click deploy

Connect my-website on GitHub to Vercel, deploy it, and give me the URL.

What Claude does:

• Calls the Vercel CLI (the first run asks you to log in to Vercel, just press Enter at the prompt and let it open a browser)
• Links my-website to your Vercel account
• Deploys automatically
• Hands you a URL when it is done, something like my-website-xxxx.vercel.app

12Confirm it is live

Open that URL. If I see my site, it worked.

After this step you have a URL you can send to anyone.Send it to friends, put it in your IG bio, drop it in LINE. The Vercel free plan is permanent, so it will not disappear.

What to do when you get stuck

Claude Code does not always nail it first try. You may run into:

• It said it would fix something and broke it: tell it 「that last change broke things, roll it back」. It will restore with git.
• Red text in Terminal: copy the red text straight into Claude and say 「I'm stuck here」.
• It asks yes / no and you do not know which to pick: type 「I do not follow, explain it before I choose」. It will explain.
• Nothing new shows up on GitHub or Vercel: wait 1 minute and refresh. The cloud lags a little.

The limits of building web pages with AI

Those 12 prompts take you from 0 to live. What you get is a one-page static site , text, images and link buttons on screen, with no member login, no database storing anything, no backend code running in the cloud. A page like this just puts finished files on Vercel for people to look at. Claude writes it and it runs, and changing text or images will not accidentally break another feature. That is why with 0 background Claude gets it right almost first try, and why it feels like you chatted your way to a website.

Once the site gets more complex, with sign-up and login, payments, a backend writing to a database, or data linked across pages, so-called AI vibe coding (writing by feel, never reading the actual code) starts to go wrong:

• Stability: AI invents function names, package versions and API paths that look right and do not run. A change in one place quietly breaks another, and without review you never notice.
• Security: passwords, payments, API keys and user data are where AI most easily writes a version that runs but is not safe. In 2026-04 several reports covered AI-generated apps that tested out with dozens of vulnerabilities.
• Maintainability: change whatever comes to mind and 3 months later you cannot read your own structure, which makes adding features painful.

This page covers the simple kind of site described above, mostly display, so none of those three risks apply, and following along with 0 background is fine. If you want something bigger, a membership system, e-commerce, SaaS, the three risks show up one by one. At that point chatting with AI is no longer enough, and the approach becomes AI for speed with a human checking, rather than vibe coding.

FAQ

Tools used on this page