My Vibe Coding toolkit: how one person can build a product from zero
My Vibe Coding toolkit: how one person can build a product from zero
In 2024 Andrej Karpathy coined Vibe Coding: you don't need to understand every line of code—just translate your intent to AI and "feel" your way to a shipped product.
Honestly, the first time I heard the term I rolled my eyes. As someone who's been writing full-stack code for years, "ship without understanding the code" sounded like the opening act of a disaster.
After I actually ran this workflow and built several projects from scratch, I changed my mind.
This post isn't theory—it's the tool stack I use in practice. Combined, it lets one person cover frontend, backend, design, and deployment end to end.
Claude: your staff engineer
This is the core of the whole workflow.
Vibe Coding is human–machine collaboration, and Claude is the strongest partner I've found so far. Unlike tools that mostly do autocomplete, Claude's edge is context: it grasps your repo layout and business logic and produces solutions you can actually ship.
I use Claude for three things:
- Architecture: turn fuzzy product ideas into a technical plan
- Code generation: components to APIs, database schemas to business logic
- Debugging: paste an error; it locates the issue and suggests a fix
The killer feature is "read the project." Point it at the codebase and it understands the architecture before it edits—instead of fixing one place and breaking another.
Native Claude is easier to get restricted if you're in mainland China, so I mostly use the CLI with a Coding Plan to keep cost down; I often run the GLM-5 model.
I also use Cursor because Tencent's Coding Plan doesn't support multimodal input—anything that needs image understanding I route through Cursor.
Getting the most out of these tools takes more than installs: e.g. essential skills to bound process and scope, a solid CLAUDE.md, and other habits like that.
Supabase: backend as a service
As a full-stack dev, one thing I least want to burn time on is raw infrastructure: database, auth, file storage, realtime… You rewrite the same plumbing every project, and it rarely moves the product forward.
Supabase fixes that. It's an open Firebase-style layer on PostgreSQL, so your data stays portable and under your control.
What I use most:
- Auth: email and social sign-in out of the box—wired up in minutes
- Database: Postgres plus auto-generated REST and GraphQL
- Storage: uploads with RLS (row-level security) for permissions
- Realtime: subscriptions—great for collaborative features
For Vibe Coding, Supabase is easy to describe to AI. Say "create a users table in Supabase" and Claude can spit out migrations and client calls.
The free tier includes 500 MB—enough to validate an idea. OAuth, forgot-password, signup flows are mostly turnkey, so you skip hand-rolling backend endpoints.
Resend: email for developers
Most products still need mail: OTPs, password resets, notifications… But running your own mail stack is a trap—get DKIM / SPF / DMARC wrong and you land in spam.
Resend makes it trivial: a few lines of code, a decent template UI, and a clean API.
// It really is this simple
await resend.emails.send({
from: 'noreply@yourdomain.com',
to: 'user@example.com',
subject: 'Verify your email',
html: '<h1>Click below to verify</h1>'
})
With Supabase Auth you can get a full signup flow working in about ten minutes. You'll want a domain; registrars in China often run cheap promos (e.g. ~¥39 bundles with a domain plus a year of a basic VPS)—enough to learn ops: deploy something, terminate TLS, the works. Worst case you've got a sandbox to play with.
3,000 emails per month on the free tier has been plenty for me.
Vercel: zero-config deploy
The app is done—how do you ship? It used to be the worst part: servers, Nginx, TLS, CI/CD…
Vercel makes that disappear. git push. Done.
Next.js support is first-class (same org), but other frameworks work too. Features I rely on:
- Preview deployments: every PR gets a URL—review the UI, not just the diff
- Edge Functions: run close to users globally
- Serverless: no servers to babysit; scale on demand
In a Vibe Coding loop, Vercel is deploy as confirmation—push and see production-like behavior in seconds. That tight feedback matters when you're coding by feel.
Custom domains are straightforward: add the DNS records and you're set.
Pencil: design next to your code
This one is underrated.
The classic flow is design in Figma, then devs pixel-pick in code. You lose nuance—color off by a hair, spacing off, motion that never quite matches.
Pencil flips that: it lives in VS Code. Sketch beside your code, generate code in one shot. Design and implementation stay in one place.
For a solo full-stack Vibe Coding setup, it's huge—you don't need to be a visual designer or bounce between Figma and the editor. Ideate, visualize in the same environment you ship from.
GitHub: the lifeline for your code
No surprise here, but in the Vibe Coding era GitHub matters more, not less.
When most of your code is AI-written, version control is your safety net. Every AI edit can introduce surprises. git diff lets you review each change fast; git revert means you can always roll back.
GitHub Copilot and Actions are baked into my day-to-day too: Copilot for small completions, Actions for tests and deploy automation.
How these pieces fit together
Individual tools are one thing; the pipeline matters. A typical pass for me:
1. Claude breaks down requirements and proposes a technical plan
2. Pencil for a quick UI prototype (when needed)
3. Claude implements from the plan
4. Supabase for backend (database + Auth + APIs)
5. Resend for transactional email
6. Vercel for one-click deploy
7. GitHub for history and every iteration
The through-line: each step can be driven in natural language. You're not hand-writing SQL for plumbing, hand-configuring Nginx, or building mail from scratch. State what you want; AI plus these services handle how.
That's Vibe Coding—moving energy from "how to build it" to "what to build."
Best of all, almost everything in this stack is free, which directly lowers the cost of turning an idea into something real.
A few personal notes
This toolkit didn't appear overnight. It's what I refined project after project.
If you're new to Vibe Coding, I'd suggest:
- Pick one AI coding tool first (Claude is still my top pick)
- Use Supabase for backend—don't roll your own first
- Deploy on Vercel—don't spend weeks on servers first
- Add the rest as you feel the pain
Optimize for shipping a first usable thing, not for owning every tool. The right additions find you through real work.
In the AI era what's scarce isn't skill—it's ideas and the discipline to validate them fast.
There's a book called Everyone Is a Product Manager. With this stack, that line feels less like a metaphor and more like Tuesday.
I've collected the full link list for these tools on LinkHub: Vibe Coding Tools. Help yourself if you need it. This was the first product I built; I'll write a dedicated post about the project later. You're welcome to try it—if you have ideas, leave me a message.
I'm Isaac, a full-stack developer using AI to change how I build. If Vibe Coding interests you too, I'd love to swap notes.