You can vibe code a website — describe it in plain language and have an AI agent build, fix, and deploy it — in a single afternoon, for free, without knowing how to code. That sentence would have been marketing fluff in 2024. In 2026 it's just the workflow. This tutorial walks the whole path: installing an agent, describing the site, steering the build, and putting it on a live URL you can send to anyone.

We'll use Claude Code because a terminal-first agent teaches you the real loop (and it's what our flagship course covers in depth), but every step here translates to Codex, Cursor, or Gemini CLI — the platform comparison covers the differences.

What you need before you start

  • A computer with a terminal (macOS, Windows, or Linux — all fine).
  • Node.js 20+ installed (nodejs.org, one download).
  • A Claude account — the free tier is enough to build a small site.
  • An idea small enough to finish today: a portfolio, a wedding site, a local business page, a link-in-bio. Not a marketplace. Not a social network. Small.

Step 1 — Install the agent

Open your terminal and install Claude Code:

npm install -g @anthropic-ai/claude-code
mkdir my-site && cd my-site
claude

The first run walks you through signing in. When you see the prompt, you're pair programming with an agent that can read files, write code, and run commands in this folder — with your permission at each meaningful step.

Step 2 — Describe the website you want

Don't say "build me a website." Describe outcomes: who it's for, what pages it has, what it should feel like. Here's a real first prompt you can adapt:

Build a personal portfolio website with Next.js and Tailwind.
Pages: home (short intro + featured projects), /projects (grid of 6
project cards from a data file), /contact (simple form that opens a
mailto link for now). Style: minimal, generous whitespace, dark mode
support, serif headings. Mobile-first. When you're done, run the dev
server and tell me the URL.

The agent will scaffold the project, install dependencies, create the pages, and start a local server at something like localhost:3000. Open it in your browser. There's your website — version 0.1, ten minutes in.

Step 3 — The loop: review, correct, repeat

This is the actual skill of vibe coding: the loop. Look at the site, notice what's wrong, and say it plainly — one change per message beats ten. "The hero text is too small on mobile." "Make the project cards link to real URLs — here are three." "The contact page feels empty; add my email and GitHub." The agent edits, you refresh, you correct again.

Two habits make this loop reliable. First, read the diffs — the agent shows you what it changed; skimming them is how you catch drift early and learn how your own site works. Second, when something breaks, paste the error verbatim instead of describing it. Errors are the agent's native language; it will usually fix in one turn what would take a beginner an evening of searching.

Step 4 — Make it look designed, not generated

Generic AI sites share a look: centered hero, three feature cards, purple gradient. Break it with constraints. Give the agent a reference ("structure like a printed field manual", "typography like a literary magazine"), pick two fonts and three colors and name them, and ask for one distinctive element — a dot-grid background, numbered sections, a marquee of your skills. Specificity in, distinctiveness out.

Step 5 — Deploy to a live URL

Tell the agent: "Deploy this to Vercel." It will install the CLI, walk you through a one-time login, and run the deploy. Two minutes later you have a live https URL on a free plan. Netlify and Cloudflare Pages work just as well — the agent knows all three.

you: Deploy this site to Vercel.
agent: Running `vercel` — you'll be asked to log in once…
agent: Deployed. Production: https://my-site-xyz.vercel.app

Want a real domain? Buy one (~$10/year), then ask the agent to connect it — it will print the exact DNS records to set. That's the whole deployment story: no FTP, no servers, no DevOps.

Can you vibe code a website for free?

Yes, genuinely. The free path: Claude's free tier (or Codex with a ChatGPT plan you already have) + Next.js (open source) + Vercel's free hobby hosting. The only thing worth paying for early is a custom domain. Everything in this tutorial — and our full course track — costs nothing.

How long does it take?

A focused afternoon for the version you'd show a friend; a weekend for the version you'd put on a business card. The scaffold is minutes; the taste pass — spacing, copy, the details that make it yours — is where the hours go, and where the loop gets genuinely fun.

Common mistakes (and the fix for each)

  • Asking for everything in one prompt. Fix: one change per message; three small turns beat one giant one.
  • Never reading the diff. Fix: skim every change — it's how you stay the pilot instead of the passenger.
  • Fighting the error yourself. Fix: paste it verbatim and let the agent debug.
  • Restarting the project when styling drifts. Fix: describe the drift; agents are better at course-correcting than you'd guess.
  • Scope creep at hour two. Fix: write the three-page spec before you open the terminal, and ship it before expanding it.

Where to go from here

If this afternoon clicked, you've felt the core of vibe coding: intent in, working software out, you in the review seat. The next level is making the loop reliable on bigger projects — project memory, plan mode, tests, hooks — which is exactly what the free Vibe Coding using Claude Code course teaches across 28 interactive lessons. From there, the roadmap runs through shipping a mobile app with Codex and orchestrating multiple agents with Antigravity.