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

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:

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.

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.