{"slug": "day-1-vibe-coding-goes-mainstream-v0-vs-lovable-vs-bolt-vs-figma-make", "title": "Day 1: Vibe coding goes mainstream — v0 vs Lovable vs Bolt vs Figma Make", "summary": "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.", "body_md": "*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.*\n\nIn 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.\n\nWhatever 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`\n\n. Four tools dominate, and they're less interchangeable than they look.\n\nv0 (Vercel) is the most developer-centric of the four. You describe a component; it generates React with shadcn/ui and Tailwind:\n\n```\nPrompt: \"A pricing card with three tiers, monthly/yearly toggle,\nthe middle tier highlighted, using shadcn/ui\"\n```\n\nWhat comes back is idiomatic code you'd plausibly write yourself:\n\n```\nexport default function PricingCards() {\n const [yearly, setYearly] = useState(false)\n\n return (\n
\n {tiers.map((tier) => (\n \n \n {tier.name}\n \n ${yearly ? tier.yearlyPrice : tier.monthlyPrice}\n \n \n {/* ... */}\n \n ))}\n
\n )\n}\n```\n\nThe 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:\n\n```\nnpx shadcn@latest add \"https://v0.dev/chat/b/abc123...\"\n```\n\nFiles land in `components/ui/`\n\n, dependencies get added to `package.json`\n\n. 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.\n\n**Use it when:** you're a React/Next.js team and want components inside your existing repo, not a separate app.\n\nLovable'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:\n\n```\n-- Lovable generates and applies this in Supabase for you\ncreate policy \"Users can read own favorites\"\n on favorites for select\n using (auth.uid() = user_id);\n\ncreate policy \"Users can insert own favorites\"\n on favorites for insert\n with check (auth.uid() = user_id);\n```\n\nThat'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.\n\nThe 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.\n\n**Use it when:** you're shipping a full-stack MVP fast and Supabase is acceptable as the backend.\n\nBolt'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:\n\n```\n# This runs in your browser tab. No Docker, no local Node.\nnpm install\nnpm run dev\n```\n\nUnlike 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.\n\nThe 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.\n\n**Use it when:** you're a developer who wants control — real terminal, model choice, framework choice — without local setup.\n\nThe 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.\n\n**Use them when:** the starting point is a design file rather than a product spec.\n\nVeracode'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.\n\nA 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.\n\n| v0 | Lovable | Bolt.new | Figma Make | |\n|---|---|---|---|---|\n| Output | React components | Full-stack app | Full project in browser | Interactive prototype |\n| Backend | BYO | Supabase (deep) | Bolt Cloud (newer) | None |\n| Model choice | No | No | Yes | No |\n| Best for | Existing React repos | MVPs | Devs wanting control | Designers |\n| Pricing model | Credits | $25/mo, message credits | $25/mo, tokens | Figma plan |\n\nVibe 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.\n\nDay 3 drops tomorrow — we'll build a working AG-UI example. See you there.", "url": "https://wpnews.pro/news/day-1-vibe-coding-goes-mainstream-v0-vs-lovable-vs-bolt-vs-figma-make", "canonical_source": "https://dev.to/ravidasari/this-runs-in-your-browser-tab-no-docker-no-local-node-5g16", "published_at": "2026-06-12 02:38:25+00:00", "updated_at": "2026-06-12 02:42:21.271499+00:00", "lang": "en", "topics": ["ai-tools", "ai-startups", "ai-products", "generative-ai", "large-language-models"], "entities": ["Karpathy", "Collins Dictionary", "Lovable", "Bolt.new", "v0", "Vercel", "shadcn/ui", "Tailwind"], "alternates": {"html": "https://wpnews.pro/news/day-1-vibe-coding-goes-mainstream-v0-vs-lovable-vs-bolt-vs-figma-make", "markdown": "https://wpnews.pro/news/day-1-vibe-coding-goes-mainstream-v0-vs-lovable-vs-bolt-vs-figma-make.md", "text": "https://wpnews.pro/news/day-1-vibe-coding-goes-mainstream-v0-vs-lovable-vs-bolt-vs-figma-make.txt", "jsonld": "https://wpnews.pro/news/day-1-vibe-coding-goes-mainstream-v0-vs-lovable-vs-bolt-vs-figma-make.jsonld"}}