Build with AI

The Vibe Coding Starter Kit (2026)

The Vibe Gate·July 24, 2026·7 min read

Since I published the build log for this site, the most common question hasn't been about the scroll trick or the prompts. It's been some version of: "okay, but what do I actually need to install?" Usually from people who've been circling vibe coding for months, convinced there's a long shopping list between them and a first shipped project.

There isn't. The whole kit is one paid subscription, one free host, one cheap domain, and three habits. Everything on this page is the real stack behind thevibegate.com — not tools I researched for an article, tools I was using yesterday. Total cost to start: about $31. Let's go through it.

The core: an agent in your terminal, not a chatbot in a tab

The one non-negotiable piece is a terminal AI agent. I use Claude Code — it runs in a plain terminal window (there's a desktop app now too, same brain), and it's included in the regular Claude Pro subscription: $20 a month, or $17 if you pay annually. There are $100+ Max tiers for heavy use. You do not need them in week one. Pro was enough to build everything you're reading.

Why a terminal agent instead of pasting code into a chatbot? Because a chatbot can only talk about your project. An agent lives inside it. It reads your files, writes new ones, runs commands, sees the error, and fixes its own mistake — while you watch. The copy-paste loop puts you in the middle as a very slow clipboard: copy the code out, paste it into a file, run it, copy the error back in, repeat until your soul leaves your body. I did that for a while. Never again.

A chatbot gives you code. An agent gives you a finished change, already tested against your actual project.

Installing it is genuinely one command, then you start it inside your project folder:

# install once
npm install -g @anthropic-ai/claude-code

# then, from inside your project folder
cd my-first-site
claude

That's the moment vibe coding starts: a blinking cursor that understands "make me a page that does X."

A place to ship: free hosting, one cheap domain

An unshipped project is a diary entry. The fix costs almost nothing in 2026:

Hosting: Vercel's Hobby plan, $0. Free forever for personal projects, with 100 GB of data transfer a month — more than any first project will touch. Deploying is one command from your project folder: npx vercel --prod. Thirty seconds later you have a live URL. The honest caveat: Hobby is for personal, non-commercial use. The day your project starts making money, you're supposed to move to Pro at $20 a month. That is a good problem to schedule for later.

A domain: roughly $11. A .com at a registrar like Namecheap runs about $10.98 for the first year, often less on promo. Here's the part that annoys me, so you get warned in advance: renewal is not the sticker price. That $10.98 .com renews at $18.48 a year. Every registrar plays this game. Buy the first year happily, just know year two costs more, and never pay for the add-ons they wave at you during checkout. The domain is the only physical-world money in this entire kit, and it's the best $11 you'll spend — a real name changes how seriously you (and everyone you show it to) treat the project.

Git: your undo button across days

If "version control" sounds like a programmer ritual you're hoping to skip — reframe it. Git is an undo button that works across days instead of keystrokes. Cmd+Z saves you within a session. Git saves you on Thursday, when Tuesday's version worked and you can't remember what changed since.

You need embarrassingly little of it. Ask your agent to "commit this" after each working state, and push to a free GitHub account so your project survives a dead laptop. The core is three moves:

git init                             # once, at the start
git commit -am "nav works on mobile"  # save a checkpoint
git checkout -- .                    # panic button: back to the last checkpoint

Will git's error messages occasionally read like a threat written by a lawyer? Yes. This is the annoying part of the kit and I won't pretend otherwise. But this is also exactly where the agent earns its subscription — paste the error in, or honestly just type "fix the git thing," and it will. You get the safety net without the priesthood.

Habit one: look at what you shipped

Agents finish confidently. Confidence is not correctness. The single highest-leverage habit I know is ending build prompts with a demand for proof:

The sentence that changes everything When you're done, open it in a real browser, check it at desktop and phone widths, screenshot both, and read the console for errors — before telling me it's finished.

Claude Code can drive a browser, so this isn't hypothetical — it will actually catch its own bugs and hand you screenshots as receipts. When I built this site, that verification pass caught layout breaks I never saw, because they only happened at phone width. And after every deploy, load the live URL yourself, on your actual phone. Localhost lies. Only production tells the truth.

Habit two: give your project a brain

Your agent wakes up every session with amnesia. Tuesday-you will burn twenty minutes re-explaining what Monday-you already decided — unless you write decisions down where the agent reads them automatically. For Claude Code, that's a file called CLAUDE.md in your project folder. Mine for a new project looks like this:

# CLAUDE.md — the project's brain
- What this is: a recipe site for my sourdough experiments
- Colors and fonts live in tokens.css — never invent new ones
- Voice: plain English, no marketing-speak
- Deploy: npx vercel --prod, only when I say "ship it"
- Decided 07-22: no framework. Plain HTML until it hurts.

One line per decision, added the moment you make it. This file quietly compounds: every session starts where the last one ended instead of from zero. It's the cheapest productivity upgrade in the whole kit — it costs nothing and nobody does it.

What you don't need

The starter-kit genre loves padding lists with a dozen SaaS logos. Skip all of it:

The whole bill: Claude Pro $20/mo · Vercel $0 · GitHub $0 · git $0 · one .com ≈ $11 for year one. About $31 to start, $20/mo after. Anyone selling you a longer list is selling the list.

Your first week, realistically

Day 1 — install and go live. Claude Code installed, project folder made, and your first prompt: one simple page about something you actually care about. Then npx vercel --prod. A live URL on day one is the point — it converts vibe coding from theory into a thing you did before dinner.

Days 2–3 — iterate in short sentences. "Make the header calmer." "That spacing is wrong on my phone." "Warmer colors." Steering, not coding — this loop is the entire skill, and it's exactly how this site got built. Commit every time something works. Start the CLAUDE.md.

Days 4–7 — ship something tiny but real. Point the domain at it, make it do one complete thing, and show it to one human who isn't obligated to be nice. Tiny and finished beats ambitious and abandoned, every single time. A one-page tool, a three-page site about your weird hobby — done and live beats the startup idea rotting in your notes app.

That's the kit. One agent, one free host, one $11 domain, three habits. The gap between you and your first shipped project is not money or credentials — it's about $31 and a week of evenings.

Sources

Prices checked July 2026 — these numbers drift, so verify before you buy:

Next on the bench: the head-to-head I promised — same five tasks through Claude Code and Cursor, receipts included. Step through below if you want it first.

Get the next guide, first.

One email when a new build log or review ships. No noise, ever.