Day 1: Vibe coding goes mainstream — v0 vs Lovable vs Bolt vs Figma Make

By early 2026, "vibe coding" — describing software in natural language and accepting AI-generated output — had become a mainstream development workflow, with Collins Dictionary naming it Word of the Year and tools like Lovable and Bolt.new reaching $20M and $40M ARR respectively. Four platforms now dominate the space: v0 (Vercel) generates idiomatic React components that install directly into existing codebases via the shadcn registry, while Lovable builds full-stack apps with deep Supabase integration that automatically creates database tables, auth, and row-level security policies. Bolt distinguishes itself by running a full Node.js environment in the browser via WebContainers, offering model selection and a real file tree, though its token-based pricing has drawn user criticism.

This is Day 2 of my 6-part series on how LLMs rewrote the user interface over the past year. Day 1 covered why the chat box hit its limits. In early 2025, Karpathy tweeted about coding by "fully giving in to the vibes" — describing what you want in English and accepting what the model produces. It was half a joke. By the end of the year, "vibe coding" was Collins Dictionary's Word of the Year, Lovable had hit $20M ARR in two months a $6.6B valuation by early 2026 , and Bolt.new reached $40M ARR in six. Whatever you think of the name, the workflow is real: a meaningful share of new frontends now start as a prompt, not a create-next-app . Four tools dominate, and they're less interchangeable than they look. v0 Vercel is the most developer-centric of the four. You describe a component; it generates React with shadcn/ui and Tailwind: Prompt: "A pricing card with three tiers, monthly/yearly toggle, the middle tier highlighted, using shadcn/ui" What comes back is idiomatic code you'd plausibly write yourself: export default function PricingCards { const yearly, setYearly = useState false return <div className="grid gap-6 md:grid-cols-3" {tiers.map tier = <Card key={tier.name} className={tier.featured ? "border-primary shadow-lg" : ""} <CardHeader <CardTitle {tier.name}</CardTitle <span className="text-3xl font-bold" ${yearly ? tier.yearlyPrice : tier.monthlyPrice} </span </CardHeader {/ ... /} </Card } </div } The detail that matters most for real teams: v0 components install via the shadcn registry, so they drop into an existing codebase like any other block: npx shadcn@latest add "https://v0.dev/chat/b/abc123..." Files land in components/ui/ , dependencies get added to package.json . That's the difference between a demo tool and a workflow tool. Since the February 2026 update, v0 also has Git integration, a VS Code-style editor, and database connectivity — it's quietly become a full platform. Use it when: you're a React/Next.js team and want components inside your existing repo, not a separate app. Lovable's pitch is the whole app, not the component. Its killer feature is deep Supabase integration: ask for "user accounts with saved favorites" and it doesn't just generate client code — it creates the tables, configures auth, and writes the row-level security policies: -- Lovable generates and applies this in Supabase for you create policy "Users can read own favorites" on favorites for select using auth.uid = user id ; create policy "Users can insert own favorites" on favorites for insert with check auth.uid = user id ; That's a real differentiator — RLS is exactly the kind of thing non-experts silently get wrong. Since late 2025, Lovable Cloud provisions a Supabase backend for every workspace automatically. The trade-off is opinionation. You don't choose the model, the stack is fixed React + shadcn + Supabase , and deviating from its patterns means fighting the tool. Want Firebase or your own API? Wrong tool. Use it when: you're shipping a full-stack MVP fast and Supabase is acceptable as the backend. Bolt's technical foundation is the most interesting: WebContainers, StackBlitz's tech for running a full Node.js environment inside the browser . No local setup, but you get a real file tree, a terminal, and an editor: This runs in your browser tab. No Docker, no local Node. npm install npm run dev Unlike Lovable, Bolt lets you pick your model Claude Sonnet or Opus, with adjustable reasoning depth and your framework. Bolt V2 and Bolt Cloud 2025 bolted on databases, auth, edge functions, and hosting, though that stack is newer and less battle-tested than Lovable's Supabase integration. The recurring complaint: token burn. Bolt charges per token, and a complex app with many iterations gets expensive in a way Lovable's per-message credits don't. Use it when: you're a developer who wants control — real terminal, model choice, framework choice — without local setup. The fourth lane comes from design tools. Figma Make turns existing Figma designs into interactive prototypes — ideal when the design already exists and you want it to move , but not built for apps you'll maintain long-term. Google Stitch the former Galileo AI, acquired and rebadged with Gemini is the design-exploration play: generate many UI directions fast, then take the winner elsewhere to build. Use them when: the starting point is a design file rather than a product spec. Veracode's 2025 GenAI Code Security Report found 45% of AI-generated code contains at least one OWASP Top 10 vulnerability . That's not a reason to skip these tools — it's a reason to treat their output like a pull request from an enthusiastic junior dev: review the auth flows, check what's exposed client-side, and never assume the generated RLS policy is the right RLS policy. The tools that auto-configure security Lovable's RLS setup are responding to exactly this — but auto-configured is not the same as audited. A practical heuristic I've settled on: vibe-code the surface , hand-write the boundary . Generated UI components are low-risk. Generated auth, payments, and data-access layers need human eyes, every time. | v0 | Lovable | Bolt.new | Figma Make | | |---|---|---|---|---| | Output | React components | Full-stack app | Full project in browser | Interactive prototype | | Backend | BYO | Supabase deep | Bolt Cloud newer | None | | Model choice | No | No | Yes | No | | Best for | Existing React repos | MVPs | Devs wanting control | Designers | | Pricing model | Credits | $25/mo, message credits | $25/mo, tokens | Figma plan | Vibe coding changed who builds interfaces, but the output is still a conventional app — a human prompts, code gets committed, users get the same static UI. The bigger shift of the past year is agents generating UI at runtime, per user, per request — no developer in the loop at all. That's generative UI, and it comes in three architectural generations. Day 3 drops tomorrow — we'll build a working AG-UI example. See you there.