繁中 →
visitors
Zero to Product EP.4

Before you start: the tools you need

Antigravity / VS Code / Claude Code / Cursor

← Back to the series
📅 Published 2026-04-06🔄 Last updated 2026-04-08

The last three episodes were all concepts.
Next episode we start building the first web page.

But before that,
you need the right tools on your computer.

I'll be straight with you here:
these are the tools I've used myself,
lined up worst to best in five stages,
plus where a complete beginner should start in 2026.

My vibe coding tool history (five stages)

Stage 1 (earliest)
ChatGPT canvas
Paste the code in, then paste it back into the files on my computer. 5% writing code, 95% copy and paste.
Stage 2
Pure copy and paste
No canvas even, all by hand. Once there were a lot of files I lost track of which piece lived where.
Stage 3
Manus (cloud agent version)
A cloud AI agent from China's Butterfly Effect. It runs long tasks, but it couldn't touch every file on my computer, so anything important still had to be moved by hand.
Stage 4
VS Code + Claude Code
The first time I felt how good it is to have AI editing files directly on my computer. My first three products were all built with it.
Stage 5 (now)
Antigravity + Claude Code + claude channels
My main setup: Antigravity as the shell, Claude Code for the core tasks, and claude channels to link several sessions and split the work.
Each stage roughly doubled my output.
The point isn't switching fast,
it's having the concepts first,
so you know why you're switching.

Why not stay on the ChatGPT web app?

You can, but it hurts.

Every single change
means another copy and paste.
Once you have a lot of files, you lose track of which piece is in which file.

So here is the core of this episode:
pick a tool that lets AI work directly inside your computer.

Five tools worth knowing in 2026

These five get talked about the most.
I've used or followed all of them,
so here's what each one is like.

1. Antigravity (Google's agentic IDE)

Google's AI dev environment, launched in early 2026,
built around running several agents at once.

The built-in model lineup is serious:
Gemini 3.1 Pro (High / Low), Gemini 3 Flash,
Claude Sonnet 4.6, Claude Opus 4.6, GPT-OSS 120B,
pretty much every top model today is in there.

What makes it different is that agents get three surfaces to act on:
the editor, the terminal, and the browser,
and you can send five agents on different tasks at once,
then watch who is doing what in the Manager view.

2026-03 v1.20.3 added AGENTS.md rule files and MCP integration,
so it can connect to GitHub, databases, and external APIs.

Pricing (changed since 2026-03, straight talk):
・Free: rate limited, fine for a light trial
・Pro: $20/month (same as Cursor)
・Ultra: $249.99/month (heavy users)
・Pay-as-you-go: $25 / 2500 credits

The community complained about the increase after the 2026-03 change,
so check antigravity.google/pricing for the current numbers before you decide.

Pros
Widest model lineup, parallel agents, beginner-friendly UI, full MCP ecosystem
Cons
The free tier is rate limited, serious use starts at $20, and Chinese-language resources are still thin
Best for
People who want to try both Gemini and Claude models and need agents running in parallel

2. Cursor 3 (the agent workstation most people use)

Cursor is Anysphere's AI IDE.
Cursor 3 shipped 2026-04-02,
with the interface rebuilt from scratch
and the core idea moving from writing code to managing agents.

What's new:
・Agents Window: several agent chats open side by side
・Parallel runs, and cloud agents pick up the work without breaking the thread
・Design Mode (a built-in design tool)
・Built-in git and multi-repo support
・Improved diff and PR workflow

Pricing didn't change, Pro is still $20/month.
It's the hottest tool right now, the biggest community, the most tutorials,
and nine out of ten vibe coding videos on YouTube use Cursor.

Pros
Big community, plenty of tutorials, a mature multi-agent experience in Cursor 3, supports every major model
Cons
Starts at $20/month, and heavy use burns through the included credits
Best for
People willing to pay who want to learn alongside the largest pile of tutorial videos

3. VS Code + Claude Code (what I built my first three products on)

VS Code is Microsoft's code editor,
free, and the most used one in the world.

Claude Code is Anthropic's official AI coding tool,
and it runs in the terminal (the command line).
Paired with VS Code,
it's the combo behind my first three products (Crispy Kingdom 脆脆王國 / NaLi Match / Flame Man).

The biggest difference from Cursor:
Claude Code is terminal-driven,
so you get a black window with white text
where the AI talks with you and edits your files.

What makes this combo land:
1M context (it can read more than a book's worth of code at once)
+ agents and subagents (several AI helpers working at the same time)
+ direct git integration across your whole project.

Still shipping updates in April 2026:
a new /powerup interactive tutorial,
the MCP tool output cap raised to 500,000 characters,
/cost breaking spend down by model,
and file diffs 60% faster.

The learning curve is steeper though,
because you have to get used to talking to AI inside a terminal.

Pros
The strongest Claude models, handles the most complex tasks, updated constantly by Anthropic
Cons
Needs basic terminal skills, paid (Claude Pro / Max), fewer Chinese-language tutorials
Best for
People who want to build complex products, don't mind the terminal, and will put in the time

4. Codex (OpenAI's version of the same weapon)

OpenAI's answer to Claude Code.
CLI, macOS desktop app, VS Code extension, and web are all connected,
so whichever end you use,
sessions and long tasks carry over.

The main model is GPT-5.2-Codex (released 2026-01),
SWE-Bench Pro 56.4%, Terminal-Bench 2.0 64.0%,
the reference model right now for long tasks and cross-file refactors.
There's also GPT-5.1-Codex-Max,
which uses 30% fewer thinking tokens at the same strength,
so it costs less.

Pricing change, this one matters:
From 2026-04-02 Codex bills by token instead of per message (Plus / Pro / Business).
Short tasks got cheaper,
but watch your usage on long tasks and big files.
Some users reported a single prompt eating 7% of their weekly limit.

The 2026-04 CLI also added a Windows sandbox,
ChatGPT device code login,
and codex exec support for prompt + stdin.

Pros
SOTA on long tasks, consistent sessions across clients, and the 4/2 move to token pricing makes short tasks cheaper
Cons
Tied to a ChatGPT subscription, long tasks need token monitoring, few Chinese-language tutorials
Best for
People who already pay for ChatGPT and want big refactors or cross-file tasks

5. Manus (from cloud agent to desktop agent)

I used the Manus cloud agent version myself.
That version could run long tasks,
but two things made me switch:

1️⃣ It couldn't touch every file on my computer
Output still had to be moved back into the project by hand.

2️⃣ Credits burned fast, and it got expensive
Manus was credit-based back then,
one complex task ate a big chunk of the balance,
so experimenting meant topping up again and again,
which doesn't work long term for a solo developer.

But Manus turned things around after that:

In 2025-12, Meta acquired Manus for US$2 billion.
By 2026-02, MAU passed 22 million and ARR passed US$100 million.
In March it launched the desktop version, My Computer,
which can now read and write local files and control applications.

Manus also launched a personal agent inside Telegram.
Scan a QR code and it joins your chat.
WhatsApp / LINE / Slack are officially very soon.

Pricing also moved from pure credits to a mix of monthly fees and subscription tiers,
which is much friendlier if you plan to run it long term.
Still, check the official page before you commit,
because the pricing may move again.

In other words,
the thing I complained about back then, not being able to touch files on my computer,
got fixed after Meta took over.
If you want AI to work across your apps rather than just write code,
the new Manus is worth watching.

Pros
A real multitask agent, can touch local files, integrates with messaging apps
Cons
Not as deep at coding as Claude Code / Codex, and it's being tied into Meta's ecosystem
Best for
People who don't code and want AI to work across their apps

Bonus: 4 browser-based options

The five above all install on your computer.
If you haven't even opened a computer yet, or you just want a prototype in 5 minutes,
these four vibe coding tools run in the browser alone,
each good at something different.

① Bolt.new: one sentence, a whole full-stack app

A web tool from StackBlitz.
One prompt gives you a running React/Vite project,
with live preview, a terminal, and one-click deploy to Netlify built in.

Best at
Testing an idea, building a demo, pitching, a prototype in 5 minutes
Not for
Real products you maintain long term (the file structure is closed, you have to export to move it)

② v0.dev: Vercel's React UI generator

Give it a text description or a design file,
and it returns production-ready React + Tailwind + shadcn/ui components.

Best at
You already know React and want the UI stage to go faster, or you want components built back from a design
Not for
People who need a backend or a database, or who want to get away from the shadcn look

③ Lovable: a full-stack vibe coding platform

A genuinely end-to-end tool from a European team.
UI, backend, Supabase database, and auth in one line,
with one-click push to your own GitHub.

Best at
SaaS prototypes with login, for people who don't want to wire up a database and auth themselves
Not for
Complex logic still needs the concepts before you can change it, and the monthly fee is higher than Bolt

④ Replit Agent: a cloud IDE with a built-in agent

From prompt to a site running on the public internet, all inside the browser,
with hosting built in, so you get a URL the moment it's done.

Best at
No computer, just a phone / iPad / Chromebook, or a student setup
Not for
Large projects get stuck, and you have less freedom than with local tools
All four are whiteboard tools.
Prototypes come fast,
but anything you maintain long term
still has to move to a local toolchain (Antigravity / Cursor / Claude Code).

Another 10 tools, where they stand, their pros and cons and who they suit (including the ones renamed, acquired, or shut down)
are collected in this series' tool library:
/series/tools/

So which one should you pick?

Complete beginner → start with Antigravity Free

Beginner-friendly UI, a full model lineup (both Gemini and Claude),
and a free tier that is rate limited but enough to tell whether you like it.
Move up to Pro at $20 once you're sure you'll stay.

After installing Antigravity,
add two extensions:

Must have 1
Claude Code extension
Connects Antigravity with Claude Code so you get both sides at once
Must have 2
Chinese-language extension
Turns the whole interface Chinese, 100 times friendlier for beginners

If you already subscribe to Google AI Pro / Ultra,
sign in to Antigravity with the same Google account,
which gives you a higher agent quota and more models.

Three months in, once you're comfortable,
you'll have your own preference.
That's when to think about moving to Cursor, Claude Code, or Codex.

Here's the order I'd go in:

Stage 1
Antigravity Free → Pro
Test the water on the free tier, move up to Pro at $20 once you like it
Stage 2
Cursor or Claude Code
When you start a serious product, pick one paid tool and stay with it
Stage 3
Mix and match
Different tools for different tasks, Cursor for the front end, Claude Code for the complex jobs

What installing actually looks like

The detailed install steps for each tool
are all over the web,
so here I'll just give you the shape of it:

Install Antigravity

1. Sign up on the Google Antigravity site (log in with your Google account)
2. Download the build for your system (Mac / Windows)
3. Open it and sign in with your Google account
4. In the Extensions marketplace, install the two must-haves:
 ・Claude Code extension
 ・Chinese-language extension
5. Create a new project folder
6. Open the chat window inside it and talk to the AI

Install VS Code + Claude Code

1. Download VS Code from code.visualstudio.com and install it
2. Create an Anthropic account and subscribe to Claude Pro or Max
3. Install the Claude Code command line tool in the terminal
4. Open your project folder in VS Code
5. In the VS Code built-in terminal, type claude, then start talking

Install Cursor

1. Download and install from cursor.sh
2. Create an account (the free plan is limited, the paid one is Pro)
3. Open it and sign in
4. Open a new project folder and press Cmd/Ctrl + L to bring up the AI chat

For the detailed steps, tell the AI: I want to install Antigravity / Cursor / Claude Code on a Mac, walk me through it step by step.
It'll be more accurate than any tutorial online.

The trap vibe coders fall into most

Spending a week researching which tool to pick,
and still not writing a single line of code.

Don't do that.

The differences between the three tools,
for someone who hasn't built a first product yet,
come down to all of them being fine.

Pick one (I'd say Antigravity),
install it,
and tomorrow you can build the first web page from EP.5.

Get the foundation right and the house can go up

The concepts in EP.0~3 are the foundation,
the tools are just the carpet.
You can swap the carpet any time.
The foundation decides how tall the house can go.

Next episode we get our hands dirty.

In 2026 you won't be writing HTML / CSS / JS syntax yourself.
One sentence to the AI and it's there.
So EP.5 teaches something quite different:

why does the page the AI wrote look like that?
Why are HTML, CSS, and JS split into three layers?
Once you know what each layer is for,
you can point the AI at exactly the piece you want changed.
Add a button, make the button blue, pop up a message on click
are three completely different conversations.

EP.5 is the smallest set of knowledge for speaking the same language as the AI.
So when you give an instruction,
the AI gets it right the first time.

FAQ

Can you use Antigravity / Cursor / Claude Code with no coding experience at all?

Yes. All of them are built so you give instructions in plain language and the AI writes the actual code. Beginners can use them. The difference is the learning curve and the interface style.

Antigravity or Cursor for a beginner?

Both start at $20/month, so the price is the same, and both have a beginner-friendly UI. Cursor has the biggest community and the most tutorial videos, so a beginner finds answers more easily. Antigravity's edge is the model lineup (both Gemini and Claude) and running several agents in parallel.

What is the difference between VS Code + Claude Code and Cursor?

The biggest difference is the interface. Claude Code is terminal-driven, so you get a black window with white text where the AI talks to you and edits your files. The learning curve is steeper, but it handles the most complex tasks, and 1M context plus subagents are its strong points.

Codex or Claude Code, which is better?

Same class of weapon, different camp. Codex is OpenAI's answer to Claude Code, and its main model GPT-5.2-Codex is strong on long tasks and cross-file refactors. If you already pay for ChatGPT, use Codex. If you don't and you want Claude models, pick Claude Code.

Why not keep building products in the ChatGPT web app?

You can, but every change means another copy and paste, and once you have a lot of files you lose track of which piece lives where. Building a product depends on letting the AI work directly inside your computer, and the ChatGPT web app can't do that.

Previous
EP.3 How the parts fit together
Next, coming soon
EP.5 Build your first web page with AI

Follow the series

New episodes get announced on Threads

Follow @kanisleo328