html.to.design: import any website into Figma

html.to.design is a Figma plugin that converts any website into an editable design. It is an accelerator for design work (competitive benchmarks, redesigns, moodboards) and a context capture tool for AI-assisted development: feeding real HTML to Claude Code or Cursor instead of a vague prompt. With its MCP integration, it connects directly to AI agents and fits into a complete Figma to Webflow workflow.

html.to.design is a Figma plugin used by more than 2.6 million people. Its core function is simple: you paste a website URL, and the plugin generates the corresponding Figma layers. Editable text, images, page structure, local styles created automatically. It is already a valuable tool for designers doing benchmarks, redesigns, or moodboards.

But in 2026, with the rise of AI-assisted development (Claude Code, Codex, Cursor), the tool takes on a new dimension. By capturing the clean HTML/CSS of an existing website, you get a file that can be fed directly to an AI as development context. Instead of describing a design in a text prompt and getting an approximate result, you give the AI a concrete starting point. This article covers both use cases, explains how to use the tool in practice, and shows how html.to.design fits into a Figma to Webflow workflow.

‍

What is html.to.design

html.to.design is a Figma plugin developed by divRIOTS. It converts any website into a fully editable Figma design. The process is straightforward: you paste a website URL into the plugin, choose the viewport (desktop, tablet, mobile) and theme (light or dark), and the plugin generates the corresponding Figma layers. Text is editable, images are imported, and text and color styles are automatically created as local styles in Figma.

The plugin is available for free on the Figma community, with approximately 2.6 million users and 39,000 likes. In addition to the plugin, divRIOTS offers a Chrome extension that can capture private pages or pages behind a login (the Figma plugin can only capture publicly accessible pages). A built-in editor also allows importing raw HTML/CSS directly, without going through a URL. This is useful when you want to import an isolated component or a specific code block rather than an entire page.

‍

Design side: an accelerator for redesigns and benchmarks

The most immediate use of html.to.design is design work. The plugin eliminates several hours of manual work in the upstream phases of a web project.

Competitive benchmarking

Capturing competitor websites in Figma to analyze their structure, layout, and visual direction is a classic use case. With html.to.design, you import a site in seconds instead of taking screenshots, cropping them, and organizing them manually. The result is a Figma file with separate layers: you can select any block, measure spacing, extract colors and typography, and compare the structure of multiple sites side by side in the same file. For a mockup benchmark, it is a considerable time saver during the research phase.

Starting point for a redesign

When a redesign project starts from an existing site, importing that site into Figma with html.to.design gives you an editable starting point instead of building from scratch. The team can modify text, rearrange blocks, test new visual hierarchies, and compare before and after directly in Figma. This is faster than manually rebuilding every page, especially when the existing site has many pages and variations.

Moodboards and asset recovery

Importing multiple reference sites into the same Figma file allows building a collaborative moodboard where the team can comment and give feedback directly on real elements, not static screenshots. The plugin also lets you extract visual components (section structures, grids, text hierarchies) to reuse as inspiration in a new project. For teams working with a structured design system, it is a quick way to collect visual references before designing the components.

‍

AI side: capturing HTML to feed Claude Code

This is the least covered use case in existing articles about html.to.design, yet it is the one gaining the most value in 2026. Beyond the visual conversion to Figma, the plugin allows capturing the clean HTML/CSS of a website. That HTML can be used as context for AI-assisted development tools.

The principle is straightforward. You capture the HTML of an existing page (via the plugin or the Chrome extension), and you feed it to Claude Code, Codex, or Cursor as a starting point to recode the page in a different framework, adapt the design, add features, or transpose the site to a different environment. The advantage is fundamental: instead of describing a design in natural language (which often produces an approximate result), you give the AI a real HTML file. The AI has concrete context: the page structure, CSS classes, element hierarchy, text, images. The result is far more accurate and faithful than what a text prompt can produce.

The concrete use cases are numerous. Transposing a WordPress site to Webflow by giving the captured HTML to Claude Code as a structural reference. Recoding an existing site in a different framework (from custom HTML to Next.js, or from Squarespace to Webflow) while keeping the page structure as a base. Adapting a template by preserving the structure but changing the design. Extracting reusable components from a site's source code to rebuild them cleanly. In each of these cases, html.to.design functions as a "context capture" tool: the more concrete the context given to the AI, the better the result.

‍

The MCP integration: connecting html.to.design to your AI agents

html.to.design has an MCP (Model Context Protocol) server compatible with Claude Desktop and Cursor. This integration goes beyond manual imports: from an AI agent, you can ask html.to.design to import a website into Figma automatically, without opening the plugin manually.

What this enables in practice: importing a site into Figma directly from Claude Desktop or Cursor, automating batch imports (multiple URLs in a single command), and generating designs with AI then sending them to Figma. It is a complete loop: AI captures a site via MCP, the design arrives in Figma, the team iterates in Figma, then exports to Webflow via the classic workflow or via the Webflow MCP connector + Claude. The MCP integration positions html.to.design as a link between AI agents and Figma, in an ecosystem where MCP connectors are multiplying.

‍

Limitations to know

html.to.design is a useful tool, but it has limitations worth knowing before integrating it into a production workflow.

The plugin does not capture CSS or JavaScript animations, with the exception of some basic hover effects. Sites that are heavily JavaScript-dependent (client-side rendered React or Vue applications, SPAs without server-side rendering) can cause rendering issues and produce incomplete or visually incorrect imports. Very long pages can freeze Figma, especially on the Free plan, because each layer consumes memory.

The result is a visual snapshot, not a structured design system. A site's components do not automatically become reusable Figma components: each block is a set of flat layers. Building a real design system from an import requires manual structuring work in Figma. Import quality also depends on the cleanliness of the source code. A site with clean, semantic CSS will produce a much better result than a site with generated code, heavy inline CSS, or poorly structured HTML.

On pricing, the Free plan allows up to 10 imports per month (rolling 30-day limit). The Pro plan at 18 dollars per month offers unlimited imports (fair use), high-resolution images, multi-URL import, one-click re-import, and premium support. The Chrome extension and MCP integration are available on all plans.

‍

How to integrate it into a Figma to Webflow workflow

In a Figma to Webflow design and development workflow, html.to.design comes in upstream, during the research and preparation phase.

The complete workflow works in three steps. First, you capture reference sites or the current site with html.to.design. This gives you an editable Figma file with the structure, text, images, and styles of the source site. It is the starting point for a benchmark, a redesign, or a structural analysis. Second, the team iterates on the design in Figma: modifying hierarchy, adjusting components, creating new pages, working on the design system. Third, the design is exported to Webflow, either via the classic Figma to Webflow workflow or via Claude Code with the captured HTML as development context.

For benchmarks, it is a considerable time saver compared to manual screenshots organized in a Google Drive. For redesigns, it is an editable starting point that avoids rebuilding every page from scratch in Figma. For AI-assisted development, it is a context capture tool that makes Claude Code and Cursor work more accurately and reliably.

‍

Conclusion

html.to.design is a simple tool that solves two concrete problems. The first is capturing existing sites for design work: competitive benchmarks, redesign starting points, collaborative moodboards. The second is capturing real HTML as context for AI-assisted development, a use case that gains value as Claude Code, Codex, and Cursor become daily production tools.

With the MCP integration, html.to.design fits into the connected AI agent ecosystem. In a Figma to Webflow workflow, it is a measurable time saver during the upstream phase: research, benchmarking, reverse engineering. BeBranded uses html.to.design in its benchmark and redesign workflow, in combination with Figma, Claude Code, and Webflow. If you are preparing a redesign or a benchmark and want to structure your research phase, get in touch for an initial conversation.