Build a real website with Claude Code, start to deployed (Day 25 code lane, 30-Day Challenge)

The task

Use Claude Code to build and deploy an actual website — spec → plan → build → verify → live URL — driving an agent that edits files and runs commands, not a chat you copy-paste from. This is the Day 25 "Ship a prototype" code-lane build from the 30-Day AI-Native Challenge. Its sibling is the same thing as a mobile app.

Before AI

Starting a site means fighting the setup before you write a word of content: framework choice, folder structure, styling system, deploy config. Claude Code does the scaffolding and wiring; you own the spec and the review.

What you'll need

• Claude Code — a paid Claude Pro/Max plan or API billing (the tool is paid; the Claude Code 101 course from Day 24 is free). Codex on the free ChatGPT tier is the no-cost substitute; the loop is identical.
• Node.js installed, a terminal, and a free Vercel account for deploy
• A one-page spec (write it first — see step 1)

The workflow

1. Write the spec before you open Claude Code. Same discipline as every build day:

SITE: A portfolio site for [me], a [freelance designer].
PAGES:
  1. Home — hero (name, one-line pitch, CTA), 3 featured projects
  2. Work — grid of projects, each: title, image, one-line result
  3. About — short bio, skills list, contact button
LOOK: clean, lots of whitespace, one accent color (#3d8cff), dark mode.
MUST: responsive (looks right on a phone), fast, no backend needed for v1.
NOT in v1: CMS, blog, contact-form backend, animations.

2. Start Claude Code in an empty folder and set the ground rules:

mkdir my-site && cd my-site
claude

Then your first message — plan before code:

Read the spec I'm about to give you and propose a plan: framework, folder
structure, and the files you'll create. Use Next.js with the App Router and
Tailwind. Do NOT write code yet — show me the plan and wait for my ok.

[paste your spec]

3. Review the plan, then let it build. Approve the plan (or correct it in one line — "static export, no server components needed"). Then:

Build it. Work page by page. After each page, run the dev server and tell me
the local URL so I can look before you continue. Follow the spec's look exactly.
Don't add pages or features I didn't ask for.

4. Look at every page in the browser as it's built. This is the whole point of an agent over a chatbot — it runs npm run dev, you open localhost:3000, you see the real thing, you give real feedback ("hero text too big; project grid should be 3-up on desktop, 1-up on mobile").

5. Verify the spec, line by line. Open the site on your actual phone (same-wifi local URL or a preview deploy). Check the MUST list: responsive? fast? works with no backend? Anything on the NOT list that snuck in gets removed.

6. Deploy to a real URL. Ask Claude Code to ship it:

Deploy this to Vercel. Walk me through connecting my account if needed, then
give me the live URL. Confirm the production build passes before deploying.

You now have a real, shareable website — a Day 25 artifact you can put in your Day 30 portfolio.

Verify it worked

Open the live URL on a phone and a laptop. Every page in the spec exists, the MUST list holds (responsive, fast, no errors in the console), and nothing from the NOT list appears. Send the link to one person and watch them use it cold.

Troubleshooting

• Agent goes off-spec (adds a blog, a fancy animation)? Re-anchor: "the spec's NOT list is binding — remove anything not explicitly asked for."
• Styling drifts between pages? Have it extract shared components first ("make a Layout and a ProjectCard component, then use them everywhere").
• Build fails on deploy but works locally? Ask it to run the production build (npm run build) locally and fix errors before deploying — a standing rule worth adding to step 3.
• Burning through usage fast? Give tighter, batched instructions; approve plans so it doesn't rebuild things twice.

Reality check

Claude Code is genuinely good at this, and it's still not a designer or a QA team — you are. The spec and the page-by-page review are the judgment; the agent is the hands. Skip the review and you'll ship the METR result: feels fast, quietly broken.

Data & security

A portfolio site is low-stakes. The moment a site touches real user data, auth, or payments, the responsible-AI rule from the challenge is absolute: no AI-generated code near those paths without human review. Watch deploy steps for leaked API keys or secrets committed to the repo.

Going further

Same loop, mobile target: build a mobile app with Claude Code + Expo. Then package your build conventions as a reusable SKILL.md so every future site starts from your standards.

Your takeaway

A real website, spec'd by you and built by an agent you supervised, live at a URL you can share — the code-lane proof that "AI-assisted building" means directing, not copy-pasting.