I made this video explaining the basics of vibecoding, but here’s the written version in case you prefer to read instead of watch me mumble through examples.
Vibecoding is pretty simple: you describe what you want in plain language, and an AI tool turns that into working code. You say, “Add a dark mode toggle,” and boom—it writes it. You’re still the one with the idea (for now), but the robot does most of the typing.
But, I think it’s more than a new dev workflow—it’s a peek at what’s coming for everything. This whole pattern of “give input, get output, tweak input, repeat” is how we’ll build and make stuff on everything. Right now it’s code. Soon, it’s everything.
The way we talk to LLMs is the new programming. We have to see tools like Claude Code as the new type of sofware, the new operating systems. Partial autonomy feels like the real future. You’re not handing over your job; you’re getting a weird little teammate who can carry the boring parts while you direct things.
Let’s get into some tools you can try—and which ones I think are worth your time.
Top Vibe Coding Tools
v0 (by Vercel)
Turns prompts into React/Next.js apps. Pretty much my favorite.
Pros
Has the best taste (subjective, but I stand by it)
Great for deploying quick projects
WYSIWYG editor built in (u select a thing and then you can edit it with a familiar UI)
Import Figma files (!), and weirdly works better with them than Figma itself
You can fork code from any chat
Cons
Only for web apps
Designer Friendly: Very
Price: Free with paid options
Cursor
Code editor with AI built-in.
Pros
Agent mode that just does stuff
Works with any model: Claude, GPT, Gemini
Basically VS Code with superpowers
Cons
You still need to know a bit of code
Designer Friendly: Meh, if you know your way around code
Price: Free + paid plans
Lovable
Visual builder with AI. Cute, clean, chaotic.
Pros
Pretty UI, great defaults
Good for quick frontends
Cons
Gets verbose fast
Too eager. Adds stuff I didn’t ask for ughhh
Designer Friendly: Yes
Price: Free to try, paid for full export
Bolt
Prompt-in, web app out.
Pros
Good for small projects
Quick results
Cons
Not very customizable
Gets messy, like Lovable
Designer Friendly: Sure
Price: Free
Claude Code
Lives in your terminal. Not for the faint of heart. I believe it’s potentially the most powerful one.
Pros
Understands large codebases
Makes edits across multiple files
Feels like a real dev buddy
Cons
You need to write proper prompts
Terminal-based = Not for most designers
Designer Friendly: lol, no
Price: Free and paid tiers
Figma Make
Figma now writes code from your designs or prompts.
Pros
Super useful if you live in Figma
Quick way to go from design to code
Cons
Doesn’t do deep logic or integrations
Designer Friendly: Very
Price: Free + paid
Canva Code
Pretty similar to the other code editors. If you already use Canva, boom, now you have a simple coding tool!
Pros:
Super simple to use
You can publish and share
Part of your canva sub
Cons:
Not great for complex stuff
No integrations to databases or other stuff (but that’s also kinda cool if u just want something simple)
Quick Tips for Better Vibecoding
Use familiar tools: Tailwind, React, HTML. Helps the AI stay on track.
Use Git. Seriously. Stuff breaks.
Think like a PM: What are you building, why, who’s it for, and what vibe are you going for? Let the robot handle the rest.
That’s it… that’s the magic. You describe stuff, the robot builds, you review. It’s not cheating. It’s the new workflow.
