Build a web page in 1 day with 0 coding background

Two ways to do it without installing Claude Code

This page uses Claude Code, GitHub and Vercel, so the code lives in your own GitHub and later edits or extra pages are easy. If you only need a single page you can share quickly, there are two simpler routes:

• Build it right in claude.ai: describe the page to Claude, then click Publish at the top right of the result to get a public link. Viewers do not need a Claude account, and the free plan can publish. The address is on Claude's domain and cannot use your own domain; once you unpublish, that page cannot be published again (Anthropic help).
• Connect Vercel in claude.ai: on Pro and above you can add Vercel under Connectors in settings, then ask Claude to deploy the finished page and get a vercel.app address. You need a Vercel account, but no Claude Code install and no GitHub (Vercel docs).

Both suit pages you finish once and rarely touch, like a profile card or an event page. For a site you will keep running and updating, follow the full process below.

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-1Install Claude Code

Claude Code is Anthropic's official command-line tool, a separate tool from the Claude web chat. 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

Copy

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 if you can (click Next all the way). Claude Code uses its Git Bash to run commands. It is optional, and without it Claude Code falls back to PowerShell
2. Open PowerShell (search "PowerShell" and press Enter)
3. Paste this line:

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

Copy

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-2Start 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.

0-3Create 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-4Create a Vercel account

Vercel is the platform that puts your page on the internet. The Vercel free plan (Hobby) is for personal, non-commercial use. A portfolio is fine; a site that promotes a service or earns money from client work needs the Pro plan under Vercel's rules. 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.

cd ~/Projects
claude

STEP 1Requirements (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.

Copy

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.

Copy

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 2Content (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.

Copy

What Claude does: Writes 2-3 placeholder sentences per section and uses a random image placeholder image or an Unsplash photo 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.

Copy

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 3Visuals (4 prompts)

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

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.

Copy

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.

Copy

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.

Copy

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.

Copy

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.

Add my IG and Threads icons at the bottom of the page, linking to https://instagram.com/your-handle and https://threads.com/@your-handle

STEP 5GitHub (1 prompt)

Upload the finished files to GitHub.

10Upload to GitHub

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

Copy

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.

Logging in to GitHub: 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 6Vercel 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.

Copy

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.

Copy

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.

Handling errors in Claude Code

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.

Here is what I am seeing:
[paste the screen / error message here]
What I want is [the result you want].
Help me work out how to fix it.

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. Reports have tested AI-generated apps and found 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.

FAQ

Tools used on this page