To convert a website into an editable design, capture the rendered page instead of taking a screenshot. A capture tool reads the page's HTML and CSS and rebuilds it as text, frames and images you can change. Pick the tool by where the design has to end up: in Figma, or back in your app's code.
A screenshot is flat: you can't change its text, spacing or colors. A capture fixes that. Figma's extension, for example, reads the code behind the page and keeps some auto layout, fonts and matching variables.
What it doesn't bring in is your design system. Figma's help center says captures "are not automatically mapped to your library components or styles." Your Button arrives as a frame with text in it. Once the redesign is approved, someone rebuilds it in code, by hand or through a second conversion.
In our calls, people describe the gap plainly. A founding design engineer at a productivity software company: "Figma is no longer the source of truth." A product and design lead at a cybersecurity company: "things just start with what's live." A product designer at a developer-tools company: "flipping between like figma and like the terminal."
If your team works in Figma, a Figma capture is the right tool (see Subframe vs Figma). If you're shipping a change to your own app, start the design where the code is.
These steps use Subframe, which keeps the capture next to your codebase. Its built-in browser, Capture and codebase connection need the desktop app, which is macOS only today; Capture is on every plan, including Free. On Windows or Linux, or working in Figma? Skip to Other ways.
In Subframe's desktop app, open a browser tab, click Connect codebase, pick your repository and click Start server: the agent starts your dev server and opens the app. Or type any URL, such as localhost:3000, staging or production. Capture works on any page built with HTML and CSS (React, Vue and Angular included), including pages behind a login. The tab's Preview mode works like any browser, so sign in first if the page needs it.
If one thing is off (padding, a color, a label), skip the capture. Click Inspect (Cmd+Shift+C), click the element, and change its props, styles, classes or content in the Inspector panel. Click Send to hand the change to the agent, or Copy prompt for an external agent like Claude Code. See how to use Claude Code for frontend design for this route.
For a new layout, section or visual direction, capture the page.
The capture lands on the canvas as an editable design. Subframe's canvas is built on HTML and CSS, so nothing gets lost in translation between the page and the design. Click any element on the captured page to change it in the Inspector, and use the Layers section to move through the page's element hierarchy.
Paste a screenshot of the page, or a design from your canvas, into Agent chat and say what you want: "Give me a few takes on this pricing section with a clearer plan comparison." For open-ended prompts like this, the agent generates 1–4 variations as real pages on a canvas, side by side. Pick one, or combine them: "the header from variation 1 with the layout from 3."
You don't have to describe good design; compare and react. Then fix the details with design control for precise edits: select an element and change it in the Inspector instead of re-prompting.
In Claude Code with the Subframe plugin (it installs the MCP server), you can ask for up to four variations and open them in Subframe. More in how to generate multiple UI design variations with AI.
With your codebase connected, open Agent chat on the design you picked; it automatically includes the design you're viewing. Subframe's docs suggest: "Implement this design in the connected codebase. Reuse the existing components and keep the current responsive behavior." The agent edits the files in your connected folder directly, using your Claude Code or Codex subscription or Subframe AI credits. From Cursor, connect Subframe's MCP server and ask it to update the page to match the design's Subframe link.
Reload the page in the built-in browser and compare it with the design. If a detail is off, Inspect it, fix it and send it to the agent.
Figma's Chrome extension is the native route into Figma. Click the extension on the page, choose Capture page (scrolled-out parts included) or Select element, and paste into Figma Design or FigJam. It binds CSS variables to Figma variables when names match, and Send to Figma Make starts a prototype from the frame (see Figma Make alternatives). Figma lists the limits: no component or style mapping yet, and pages with heavy JavaScript animation, <canvas> rendering or virtualized lists may capture imperfectly. Its Chrome Web Store listing calls capture a beta, and Figma's help pages disagree on whether it needs a paid plan. Beats Subframe when your team designs in Figma, or you're on Windows or Linux.
html.to.design is a Figma plugin plus a Chrome extension. Paste one or more URLs, pick viewports and light or dark themes, and turn on auto layout, local styles and variables, or hover states as components. For a logged-in or private page, capture it with the extension and drop the .h2d file into the plugin. Beats Subframe when you need mobile, tablet and desktop in one import, or many pages at once (bulk import is on Pro).
Builder.io Visual Copilot is a Figma plugin. Paste a URL, or grab one section with Builder's Chrome extension, including behind a login or on localhost. "Design with AI" generates redesigns in Figma, and Export Design gives you an npx command so AI writes code for your project. Beats Subframe when you want Figma plus an AI route to code, on any OS.
Alloy captures a page with its Chrome extension (logged-in pages included) or a public URL and keeps it as HTML in your browser, so menus, modals and hover states stay interactive. Edit visually or in AI chat, then export the code. Beats Subframe when you want a clickable prototype on your real product, with only an extension to install.
MagicPath turns a pasted URL into an editable design on its AI canvas, and its Web Capture extension grabs single elements as React components. Generate variants, then export React, HTML and CSS. Beats Subframe when you want to explore directions from any public page.
Browser DevTools gives you exact CSS values and SVGs from any page, free: the fallback when a converter gets something wrong.
For wider comparisons, see the best AI UI design tools and the best design tools for Claude Code.
| Tool | Design lands in | Back into your code | Your components | Logged-in pages and localhost | Cost (as of 2026-10-09) |
|---|---|---|---|---|---|
| Figma Chrome extension | Figma Design or FigJam (Chrome, any OS) | Rebuilt in code | Not mapped; variables bound by name | The page open in Chrome; Figma suggests your dev server URL | Capture in beta; may need a paid plan (Figma's docs conflict). Paid plans from $16 per Full seat per month |
| html.to.design | Figma (plugin, plus a Chromium extension) | Rebuilt in code | Not mapped; creates its own styles, variables and hover-state components | Yes, via its extension | Free: 10 imports per 30 days. Pro: $12 per user per month billed annually, $18 monthly |
| Builder.io Visual Copilot | Figma (plugin, plus a Chrome extension) | AI regenerates code from the Figma frame | Not covered in its import guide | Yes, via its extension | Import is free |
| Alloy | Alloy, as HTML in your browser | Export the code | Not covered on its page | Logged-in pages, via its extension | Capture is free; Pro $20 per user per month |
| MagicPath | MagicPath's AI canvas | Export React, HTML and CSS | Not covered on its page | Live pages via its extension; login not stated | See magicpath.ai |
| Subframe | Subframe's canvas (HTML and CSS), next to your codebase; macOS desktop app | Your coding agent edits your repo | Not covered in its capture docs; the agent can import your components from your code | Yes, in the built-in browser | Capture on every plan, including Free. Pro $20 per editor per month |
| Browser DevTools | Nowhere: values only | Copied by hand | n/a | Yes | Free |
The guides AI answers cite most for this question stop at editable layers in Figma plus a clean-up pass: rename layers, rebuild components, map tokens. Most come from the maker of one Figma plugin. Getting the redesign back into the running app is skipped, or, in Builder.io's case, done by converting it to code a second time (see best design-to-code tools).
For your own app, that last step is the job. Here are our limits, too:
Use a capture tool, not a screenshot. With Figma's extension, click Select element, then paste into Figma. In Subframe's desktop app, click Inspect, click the element, press Cmd+C, and paste it onto a canvas or into Agent chat.
Into Figma: Figma's Chrome extension, html.to.design and Builder.io Visual Copilot. Onto their own canvases: Alloy and MagicPath. Subframe's built-in browser (macOS) does both next to your codebase: Inspect edits the live app, Capture turns it into a design.
Yes. Run the app locally and capture the rendered page: in Subframe, click Start server in the built-in browser, then Capture. Alloy and MagicPath also keep it outside Figma.
Not automatically with most tools: Figma's captures are plain layers with variables bound. To work with your real components, start from their code. In Subframe's desktop app, the agent reads your codebase and recreates your theme, components and icons in Subframe.
No. A capture is a snapshot of the page. In Subframe, component sync runs one way, from Subframe to your code, and pages go back through your coding agent.
Figma's extension, html.to.design and Builder.io work with Figma and Chrome on any OS. Subframe's built-in browser, Capture and codebase features need the macOS desktop app; Windows and Linux aren't available yet.
Download Subframe's desktop app for macOS, open your running app in the built-in browser, and capture the page you want to change. Capture is on every plan, including Free. Then pick from variations side by side and have Claude Code or Codex ship the one you choose. Get started with Subframe.
Checked on 2026-10-09.
