Why don't other web-to-Figma tools handle AI-generated apps well?

AI app builders (Lovable, Claude Code, Bolt, v0, Cursor, etc.) ship modern React-based apps with aggressive client-side rendering. The HTML returned on first request is a near-empty shell — the actual UI paints after JavaScript executes. Server-side capture tools (Figma plugins that paste URLs) fetch from outside your browser and often catch the empty intermediate state, producing flat images. Export to Figma reads the DOM after JS has finished painting in your Chrome tab, so the same kind of app produces editable layers.

Does this work with Lovable preview URLs (lovable.app)?

Yes. Open the Lovable preview URL in Chrome, click the extension, paste into Figma. Lovable's React-based output captures as editable layers with the actual fonts, colors, and spacing applied. Lovable is one of the AI builders Export to Figma is specifically tested against.

Does this work with Claude Code (Anthropic) apps?

Yes. Whether Claude Code generated a single-page app, a multi-page React build, or a more complex application — if it renders in Chrome, Export to Figma captures it. The same heavy client-side rendering pattern applies, and the extension reads the final painted state.

Does this work with v0 (Vercel) generated apps?

Yes. v0's UI is React + Tailwind + ShadCN-heavy by default, which the extension handles cleanly. Open the v0 preview URL or your deployed Vercel URL in Chrome and capture.

Does this work with Bolt.new apps?

Yes. Bolt's StackBlitz-hosted preview URLs capture normally. Open the Bolt preview URL in Chrome, capture, paste into Figma.

Does this work with Cursor agent-generated apps?

Yes — Cursor builds full applications you preview in the browser. If you can see it in Chrome, you can capture it. Cursor's outputs often use the same React/Next.js stack as the other AI builders.

What gets preserved vs. what doesn't?

Preserved: typography (font family, size, weight, line height), colors and gradients, images at original resolution, layout (CSS flex/grid → Figma auto-layout), layer hierarchy. Not preserved: animations, hover/focus states (unless triggered before capture), JavaScript-driven behavior, the React component structure (we get rendered output, not source).

Why would I want an AI app in Figma in the first place?

Because the AI builders produce working code that often needs design polish. Typography may be approximate. Spacing is whatever the model guessed. Color palettes may not match your brand. Component hierarchy is sometimes weird. Once the app is in Figma, you can iterate on design quality independently of code, hand off to a brand designer, or share with stakeholders who don't have access to your dev environment.

How is this different from a Figma plugin that pastes URLs?

Figma plugins like html.to.design, Anima Web Capture, and the free 'HTML to Figma' plugins all fetch URLs from their own servers — outside your browser session. For AI-generated apps specifically, this means they often see the empty HTML shell before React renders, then rasterize whatever's visible. The result lands in Figma as a flat image rather than editable layers. A Chrome extension reads the resolved DOM after JS has painted, which is exactly what AI app builders need.

Export Lovable & Claude Code Apps to Figma — Editable Layers

What this is

You built an app with Lovable, Claude Code, Bolt.new, v0.dev, or Cursor. It's working in the browser. Now you want to polish the visual design in Figma — clean up spacing, swap colors, restructure components, run it past a designer, or hand it off to a brand team.

The problem: AI app builders produce code, not Figma files. The bridge between them has been broken — until now.

Export to Figma is a Chrome extension that captures your running Lovable, Claude Code, Bolt, v0, or Cursor app and pastes it directly into Figma as fully editable layers. Fonts, colors, spacing, images — all preserved. One click, no setup.

Why AI builders broke every existing web-to-Figma tool

This is the technical reason the existing tools (Figma plugins from html.to.design, Anima, Magicul, the older free plugins) all struggle on AI-generated apps:

The architectural mismatch

AI app builders produce modern React apps — usually with Next.js or Vite, often with Tailwind and component libraries like ShadCN or MUI. These are heavy client-side rendering apps. The HTML returned by the server on first request is almost empty — it contains scripts but very little actual content. By the time you're looking at the app in your browser, JavaScript has fetched data, hydrated the React tree, and painted the actual UI.

Where Figma plugins capture

Figma plugins that accept URLs do their fetching server-side, outside your browser. The plugin's server makes an HTTP request, gets back the empty HTML shell, and tries to convert it. Result: a Figma file with very little in it, often rasterized into a flat image of whatever the server's headless browser managed to render before timing out.

Where Chrome extensions capture

Export to Figma runs inside your Chrome tab. By the time you click capture, the React app has finished hydrating, fetched its data, and painted the full UI. The extension reads the resolved DOM — exactly what you see — and produces Figma layers from that.

This is why the same kind of AI-generated app produces flat images through a Figma plugin and editable layers through Export to Figma. Same source, completely different capture architecture.

Quick start

1. Build your app with any AI builder

Lovable, Claude Code, Bolt.new, v0.dev, Cursor, Vercel — anything that produces a previewable web app.

2. Open the preview URL in Chrome

The live preview URL — something.lovable.app, v0.dev/preview/..., stackblitz.com/..., or your deployed app. Whatever URL renders the app you want to design against.

3. Wait for the app to fully load

Let the React tree finish hydrating and any data fetches complete. This usually takes 1–3 seconds. If you click capture too early, you'll capture an intermediate state.

4. Click the Export to Figma extension

Pin the extension to your Chrome toolbar after install. One click captures the page. To capture just one element (a card, a modal, a nav), hover over that element first to select it.

5. Paste into Figma

Cmd+V on Mac, Ctrl+V on Windows. Your app appears as editable Figma frames with real fonts, real colors, real auto-layout.

6. Now design

This is the unlock. The captured layers are editable Figma — you can:

Tweak typography (replace the AI-guessed font with your brand font).
Swap colors (replace the AI-picked palette with your design tokens).
Restructure layers (extract reusable components, build variants).
Iterate spacing (apply your design system's 8px grid, fix the weird AI spacing).
Hand off to a brand designer with a real Figma file, not a screenshot.

Per-tool notes

Lovable

Lovable apps run at something.lovable.app. Open the preview URL, wait for the app to load, capture. Lovable produces React + Tailwind + ShadCN apps by default, which capture cleanly. If your Lovable app has authentication, sign in first in Chrome and the captured view reflects the logged-in state.

Claude Code (Anthropic)

Claude Code generates apps in a project workspace; you preview them at the local dev URL or wherever you've deployed. Open the preview URL in Chrome, wait for the app to paint, capture. Claude Code outputs vary in framework choice but the capture mechanism is the same.

Bolt.new

Bolt's previews run on StackBlitz infrastructure at URLs like stackblitz.com/... or the project's specific preview URL. Open the preview URL directly (rather than the editor view) for the cleanest capture. The Bolt preview is a full React app, captures as editable layers.

v0.dev / v0 (Vercel)

v0 generates React components and full apps with Tailwind + ShadCN as the default stack. The preview URLs at v0.dev/preview/... capture directly. For deployed v0 apps, capture the Vercel URL the same way.

Cursor

Cursor isn't strictly an AI app builder in the sense Lovable/Bolt/v0 are — it's an IDE with AI agents. But it builds full apps you preview in the browser. Whatever your Cursor-built app's preview URL is, capture that. The capture mechanism is the same.

What gets preserved

Element	Preserved?
Typography (font family, size, weight, line height)
Colors, gradients, borders, shadows
Images at original resolution
Spacing and layout (CSS flex/grid → Figma auto-layout)
Layer hierarchy and naming
Text content (editable in Figma)
ShadCN / MUI / Tailwind component output
Authentication-gated screens (with login)
Animations	(Figma is static)
Interactive states (hover, focus, active)	(unless triggered before capture)
React component structure	(rendered output only)
JavaScript behavior

Designer workflows that use this

"Build, capture, polish" loop

Build a rough version with Lovable or v0.
Capture it to Figma.
Refine spacing, typography, color in Figma.
Hand the polished Figma to your developer for the production pass.

This loop skips the "rebuild from scratch in Figma" step that used to consume hours.

Stakeholder review files

Your CEO wants to see "where the new feature is at." A localhost URL doesn't help. A Figma file does. Capture the AI-generated UI to Figma, share the Figma link, get async feedback in comments. Same fidelity as a screenshot tool, but the layers are editable so you can iterate quickly based on the feedback.

Design handoff in reverse

Most design handoff docs assume designer → developer. With AI tools, you're often going developer (or PM, or founder) → designer. Export to Figma is the cleanest way to give your design team a real Figma file to start from, not a screenshot or a Loom recording.

Component library extraction

You like the buttons, cards, and nav patterns that v0 or Lovable generated for one project. Capture them, save them as components in your design system, reuse across other projects.

Pre-production polish before launch

Build with Lovable in a day. Capture to Figma. Spend two days in Figma fixing typography, refining spacing, applying brand colors. Hand the polished Figma back to engineering. Ship a designed product, not an AI-generated rough draft.

Pricing

Free: 10 captures per month, forever, no credit card.
Pro: $1/month during the launch promo. Unlimited captures.

If you're shipping more than 10 AI-generated apps per month, Pro pays for itself the first month. If you're shipping fewer, the free tier is plenty.