A real, live website on your own address, made by talking
What you will have built
A live website address (https://...vercel.app) anyone in the world can open
Claude Pro plan (or higher)required
This is the brain of vibe coding. Claude Pro ($20/mo) is plenty to start; if you build a lot every day, the Max plan gives you far more headroom. The free plan works for a taste but hits its limit quickly.
A computer (Windows or Mac)required
Specs barely matter. Any laptop with internet is enough.
Node.js (LTS version)required
The engine that runs your code. Grab the version marked 'LTS' from nodejs.org. We install it together in step 1.
VS Code (Visual Studio Code)required
A free code editor. You install the Claude Code extension here to 'code by chatting with AI'. Note it is different from Microsoft's Visual Studio (a separate, heavier IDE).
Making a website used to mean knowing HTML, CSS, design, and servers. Now you tell Claude 'make a cafe website' and it does.
We use Next.js, the most popular web tool. You preview on your computer while building, then publish online for free with a service called Vercel.
Tip
Want a faster taste? Ask Claude for 'a simple intro page as a single index.html file' and open that file in a browser. This track covers the proper version.
Install the code engine Node.js from nodejs.org (the 'LTS' version, keep clicking Next).
Open Terminal → New Terminal in VS Code and verify with the command below.
$node -v$npm -v
v20.18.0 10.8.2
If you see this, it worked
Two version numbers means success. The exact values don't matter.
If you hit an error
Install VS Code from code.visualstudio.com. In Extensions (four-squares icon), search 'Claude Code' and install.
Click the Claude icon in the sidebar → Sign in to link your Pro/Max subscription. Now you can ask in plain language.
Tip
If multiple results appear, pick the one whose Publisher is Anthropic.
From where you want to work (e.g. Desktop), open a terminal and run the command below. For most questions you can just press Enter (the default).
For TypeScript? Tailwind CSS? App Router?, Yes is recommended for all. When it finishes, a my-site folder appears.
$npx create-next-app@latest my-site
✔ Would you like to use TypeScript? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use App Router? … Yes Creating a new Next.js app... Success! Created my-site
If you see this, it worked
'Success! Created my-site' means it worked.
If you hit an error
Go into the folder and start the dev server. Run the two lines below in order.
When 'http://localhost:3000' appears, open it in a browser. Seeing the default Next.js page means success. Keep this window running.
$cd my-site$npm run dev
▲ Next.js 15 - Local: http://localhost:3000 ✓ Ready in 1.4s
If you see this, it worked
The default page in your browser means your dev environment is ready.
If you hit an error
Describe the site to Claude. e.g. "Turn app/page.tsx into a homepage for our local cafe 'Move'. Put the name and slogan at top, three menu items, opening hours, a map link, and an Instagram link at the bottom, in a warm brown tone."
On save, the browser auto-refreshes and you see it. Keep refining: 'menu as cards', 'rounder buttons', 'looks good on mobile too'.
Tip
Have a reference site? Say 'clean like site X', or give exact HEX colors (e.g. #6b4f3a) to land your intent.
If you hit an error
Before going online, confirm the site builds cleanly into a final version. Run the command below.
'Compiled successfully' means it's safe to deploy. If red errors appear, show them to Claude, fix, and rerun.
$npm run build
✓ Compiled successfully ✓ Generating static pages Route (app) Size ┌ ○ / 5.2 kB
If you see this, it worked
A success message plus a table of pages and sizes means you're OK.
Vercel (run by the makers of Next.js) is the easiest host. Install its tool and run it below. First time? It guides you to sign up (GitHub/Google works).
Press Enter through most prompts. At the end you get a real address like 'Production: https://my-site.vercel.app'. Send it to anyone and it just works.
$npm i -g vercel$vercel
Vercel CLI ? Set up and deploy? yes ? Link to existing project? no ✅ Production: https://my-site.vercel.app
If you see this, it worked
When a https://...vercel.app address appears and opens, your site is live worldwide.
Tip
You can also connect a GitHub repo on vercel.com, then your site auto-updates every time you change the code.
If you hit an error
Congratulations, you have a real website with a real address.
Next, add a contact form, a blog, multiple languages, or your own domain (e.g. mycafe.com), all the same way. Post your site on the Launchpad for feedback.
