Vibecoding Without the Cringe

The Shift

Designers can now ship working software. Not mockups, not prototypes-that-are-actually-mockups — actual running code. The tools that made this possible in 2025–2026 are Stitch, Lovable, V0, and Cursor. Each does something different, and most people use them wrong.

Here's what I've learned working with designers who've adopted these tools.

Stitch by Google — The New Default for 0-to-1

Stitch is Google's AI-native design tool, built on Gemini. You describe an interface in plain text (or upload a napkin sketch), and it generates a complete UI with layout, typography, color, and interactive prototyping — then exports to Figma or clean HTML/CSS. It launched at Google I/O 2025 as a rebrand of Galileo AI and got a major upgrade in March 2026.

Why it matters for designers:

Concept to prototype in minutes. The gap between "I have an idea" and "I have an interactive prototype" used to be days. Stitch compresses that into a single session. One reviewer reported cutting their concept-to-prototype phase from two days to about three hours.
Real design sense. Unlike most AI tools, Stitch handles tonal hierarchy, spacing, and visual balance instinctively. Outputs feel like an actual first draft, not a Bootstrap template.
Figma export that doesn't suck. Designs arrive with proper Auto Layout, named layers, grouped components, and editable text — not flat images. Refinement in Figma is about polishing, not restructuring.
DESIGN.md — the bridge to developers. Stitch creates a DESIGN.md file capturing your design decisions, component specs, and styling rules. Developers can feed this to Claude Code or Cursor. It's like CLAUDE.md but for design.
Interactive prototyping built-in. "Stitch" screens together, click Play, and preview the full user flow. No separate prototyping tool needed.
Free. 350 monthly generations in Standard mode, 200 in Experimental mode. Pro plan at $20/mo for unlimited. For comparison, Galileo AI used to charge $39/mo for 300 generations.

Where it falls short:

Layout variety is limited — outputs can look similar across variations.
Complex multi-screen flows (5+ screens) still need human structuring.
Code export is HTML/CSS only — no React or SwiftUI yet.
It's a Google Labs experiment. Google's track record with product longevity is... mixed.

The honest assessment: Stitch is the fastest path from idea to interactive prototype. Start here for exploration and stakeholder demos, then take the Figma export into your real workflow. The DESIGN.md output is genuinely useful for developer handoff.

Lovable — When It Works, When It Doesn't

Lovable generates full-stack web apps from descriptions. You describe what you want, it builds a React + Tailwind app with routing, state, and backend integration.

Where it shines:

Stakeholder demos. Instead of a Figma prototype that kinda-sorta shows the interaction, you hand someone a URL. They click around in a real browser. This changes conversations.
Internal tools. Need a dashboard for your team? A form that saves to a database? Lovable builds these in minutes.
Design exploration. Try three different approaches in the time it takes to build one in Figma.

Where it falls apart:

Production code. Lovable output is a starting point, not a deployment. The code is verbose, the component structure is flat, and it doesn't follow whatever conventions your team uses. Always hand it to a developer for cleanup.
Design systems. It doesn't know your tokens, your component library, or your spacing scale. You can tell it to use Shadcn/ui (it does by default), but anything custom requires significant iteration.
Complex state. Multi-step flows, real-time updates, optimistic UI — the more complex the interaction, the more you'll fight with the output.

The honest assessment: Lovable is best for disposable prototypes and internal tools. If you're building something users will see, it's a starting point that saves your dev team 2–3 hours of scaffolding.

V0 — The Component Generator

V0 by Vercel generates individual UI components. It's more focused than Lovable — you get one polished component, not a whole app.

What it's good for:

Exploring visual approaches quickly. "Show me four different ways to build a pricing table."
Generating Shadcn/ui-compatible components that drop into a Next.js project.
Design system additions — new component types that match your existing visual language.

What it's not:

A layout tool. It generates components, not pages.
A design tool replacement. You're still thinking in Figma, you're just using V0 to shortcut the implementation step.

My take: V0 is most valuable when you already know what you want and just need it built. The less ambiguity in your description, the better the output. If you're still exploring the design, stay in Figma.

Cursor — The Bridge

Cursor is where designers cross into code. It's a VS Code-based editor with AI built into every interaction. For designers, the killer feature is Cmd+K — select some code, describe what you want to change in plain English, and it rewrites it.

What designers actually use it for:

Tweaking styles. Colors, spacing, typography — the things you want to adjust after seeing the real implementation, not a mockup.
Design system work. Editing component files directly. Changing a button variant, adjusting a card's border radius, updating color tokens.
Content updates. Text, images, copy changes. Stuff that doesn't need a developer.

The learning curve is real but short. You need to understand: files have a structure, components have props, and Tailwind classes map to CSS. That's about two hours of orientation. After that, Cmd+K and natural language get you surprisingly far.

Don't use Cursor for: Building new features from scratch, complex state management, anything that touches data fetching. That's developer territory.

What Vibecoding Actually Produces

"Vibecoding" — describing what you want and letting AI write the code — works. But the output has a specific quality profile that you should understand:

Visually: Usually 80–90% of what you wanted. AI is good at layout, spacing, color, and standard UI patterns. It struggles with nuance — subtle animations, custom hover states, the exact "feel" of an interaction.

Structurally: Usually flat and verbose. AI generates everything inline rather than extracting reusable components. Fine for prototypes, problematic for production.

Responsively: Inconsistent. AI tools default to desktop layouts and often produce mediocre mobile behavior. Always specify mobile behavior explicitly or review on a phone-width viewport.

The fix for all of these: Iterate. The first output is a draft. Spend 2–3 rounds refining — "make the gradient more subtle," "extract this into a component," "fix the mobile layout." This is faster than trying to get perfection in one shot.

Design Systems and AI

The biggest friction point: getting AI tools to respect your design system.

What works:

Put your design tokens (colors, spacing, typography) in your CLAUDE.md or Cursor rules. AI tools will reference them.
Use Shadcn/ui as your component base. Both V0 and Lovable generate Shadcn-compatible code by default, which means less translation.
Keep a tokens.css or Tailwind config that's the source of truth. When AI generates blue-500, you change it to brand-primary once and it learns.

What doesn't work:

Expecting AI to understand your Figma tokens automatically. The bridge between Figma variables and code variables is still manual.
Custom component APIs. If your <Button> has a variant="ghost-destructive" prop, AI won't know about it unless you tell it.

The Handoff Is Different Now

The old flow: Design in Figma → Spec in Zeplin/Figma Dev Mode → Developer rebuilds from scratch → Designer reviews → "Can you move that 4px left?"

The new flow: Design in Figma → Prototype with Lovable/V0 → Refine in Cursor → Developer takes working code as starting point → Designer reviews and tweaks directly in Cursor.

The difference: designers are now handing developers working code instead of pictures of code. The developer's job shifts from "build this from a mockup" to "clean up and integrate this working prototype." That's a fundamentally different conversation.

Collaborating with AI-using developers:

Add design tokens to the repo's CLAUDE.md so AI tools generate consistent code across the team.
Share V0/Lovable links instead of static mockups. Interactive beats static every time.
Use the dev server (npm run dev) to review changes live in the browser.

Don't upload proprietary designs or real customer data to AI tools. Use team accounts where available.