An html.to.design Alternative for Components and Code
html.to.design is the best way to bring a whole website into Figma. Pluck copies the one component you want into Figma, into a prompt for Cursor or Claude, or into your design library.
html.to.design, from ‹div›RIOTS, is the most popular way to turn a website into Figma layers: a Figma plugin and browser extension with more than two million users. It imports whole pages at desktop, tablet and mobile widths, builds auto layout, creates Figma styles from the page, and can bring previews from AI builders like Lovable and v0 into Figma.
Pluck overlaps on one thing, getting real UI from a website into Figma, and then goes somewhere else. Pluck is a Chrome extension built around one click on one component, and the same pluck can become a Figma paste, a structured prompt for an AI coding tool, or plain HTML. Everything you pluck is kept in a library you can mix on a board to generate new designs.
If your work ends in Figma and you want whole pages with auto layout, html.to.design does more of that than Pluck. If your work ends in code, or you collect pieces from many sites, read on.
Choose Pluck if
- You want one component (a pricing table, a navigation bar, a card) rather than a whole page.
- Your next step is code: you paste into Cursor, Claude, Lovable, Bolt or v0.
- You want an AI tool to get the responsive behaviour too: prompts describe the layout at each of the page's breakpoints.
- You collect references from many sites and want them kept, with their styles, in one library.
- You want unlimited copies for $10 a month.
Stay with html.to.design if
- Your work ends in Figma and you want whole pages imported.
- You want auto layout, Figma styles from the page, and desktop, tablet and mobile frames in one import.
- You need font mapping, hover states as component variants, or light and dark themes.
- You want to import public pages by URL without an extension, or bring Lovable and v0 previews into Figma.
Pluck and html.to.design, side by side
| Feature | Pluck | html.to.design |
|---|---|---|
| Built for | Pluck: Getting real UI into AI coding tools, Figma and a design library | html.to.design: Turning websites into editable Figma designs |
| What you capture | Pluck: One element, a section or the whole page, picked with a click | html.to.design: Whole pages by URL, or the whole page or a selection with the extension |
| Outputs | Pluck: An AI prompt written for your framework and styling (React, Vue, Svelte, Solid or Qwik; Tailwind, CSS Modules and more); Figma layers; HTML; or a save to your Studio library | html.to.design: Figma layers (through the plugin, a file or the clipboard), or a file for Figma Make |
| Figma output | Pluck: Editable text, shapes and fills, each positioned exactly as on the page; no auto layout | html.to.design: Auto layout (optional), Figma styles, hover states as variants, font mapping |
| Screen sizes | Pluck: Prompts describe the layout at each of the page's breakpoints; Figma copies are one width | html.to.design: Desktop, tablet and mobile in one import, plus light and dark themes |
| Pages behind a login | Pluck: Yes | html.to.design: Yes, with the extension |
| Library | Pluck: Every pluck is saved to your Studio library with its screenshot, source page and style data | html.to.design: Imports live in your Figma files |
| Generating new designs | Pluck: Studio boards: connect plucks into prompts and generate with hosted models or your own Codex | html.to.design: Brings designs made by AI builders into Figma; doesn't generate its own |
| Agents | Pluck: MCP server: agents search your library, read plucks and work on boards | html.to.design: MCP server that brings UI generated by coding agents into Figma |
| Browsers | Pluck: Chrome | html.to.design: Chrome, Edge, Brave, Opera, Arc and other Chromium browsers |
| Price | Pluck: Free: 50 plucks a month. Unlimited from $10/month | html.to.design: Free: 10 credits a month. ‹div›RIOTS ONE Pro from $20 per seat per month for 1,000 credits |
One component, three destinations
Pluck starts with a click on the thing you want: a button, a card, a pricing section, or the whole page if that's what you need. Then you choose where it goes. Copy as Figma pastes it as editable layers. Copy as prompt gives an AI coding tool the element's structure, computed styles, assets and responsive behaviour in a form it can rebuild in your stack. Copy as HTML gives you the markup.
Whichever you choose, the pluck is also saved to your library, so the navigation bar you copied last month is still there, with its styles, when you need it again.
Built for the code side
Most people who pluck a component aren't going to redraw it in Figma. They're going to build it, usually with an AI tool, and a screenshot is a poor brief for that. A Pluck prompt carries the exact fonts, colours, spacing and breakpoints, so Cursor or Claude can match the original instead of approximating it.
html.to.design's agent support goes the other way: its MCP server brings UI that coding agents generate into Figma. Both are useful; they serve different directions of the same handoff.
Where html.to.design is better
For work that lives in Figma, html.to.design is the more complete tool. It builds auto layout, creates Figma styles from the page, imports desktop, tablet and mobile widths at once, maps missing fonts, turns hover states into component variants and links imported pages together. It can import public pages straight from a URL, and its extension runs in most Chromium browsers.
Pluck's Figma paste is faithful but flat: every layer is positioned exactly where it was, without auto layout, at one width. If you're rebuilding a whole site in Figma, that difference matters.
Using both
They fit together well. Import the pages you're redesigning into Figma with html.to.design, and use Pluck for the pieces you borrow from other sites, for anything headed to an AI coding tool, and for keeping a library of references you can generate new designs from.
Related guides
How to Clone Any Website to Figma (2026 Guide)
Convert any live webpage into editable Figma layers in seconds. The fastest workflows to clone a website to Figma — with no plugins, no screenshots, and no rebuilding from scratch.
Why Screenshots Make Bad Prompts (and What to Paste Instead)
A screenshot tells an AI coding tool what a component looks like, not what it is. What gets lost, why output drifts, and what to give the model instead.
Questions about Pluck and html.to.design
Pricing
Start free. Credits power hosted image generation; local Codex is always free.
$0/mo
Free forever
- 50 plucks per month, prompt or Figma
- Studio boards and library
- Free generation with your own Codex
$100/yr
2 months free
- 1,000 credits every month
- Unlimited plucks
- Hosted generation, every model
- Credit top-ups
$290/yr
2 months free
- 3,500 credits every month
- Unlimited plucks
- Priority generation queue
- Credit top-ups
Securely processed by Polar
$790/yr
2 months free
- 10,000 credits every month
- Unlimited plucks
- Priority generation queue
- Largest upload limits