跳到正文

Figma 插件 · Chrome 扩展 · MCP

任意网页，变成真正的 Figma 图层。

HTML to Frames 能把在线 URL、本地 HTML、Chrome 标签页和 AI 生成的代码转换为可编辑、响应式的 Figma 框架——自动布局（Auto Layout）经过逐一校验，设计稿永远不会错位。

获取插件安装 Chrome 扩展

Free 方案：每月 10 次导入。无需账号，无需信用卡。

即将上架 Figma Community

  • Auto Layout，经过校验
  • 桌面 · 平板 · 手机
  • 变量与样式
  • 组件与悬停状态

五种导入方式，同样干净的结果。

  • Link粘贴任意公开网址。
  • Multiple一次最多 10 个链接，所有方案均可用。
  • Local fileHTML 文件、网站文件夹、.zip 或粘贴的代码。
  • Browser需要登录的页面、localhost、展开的菜单。
  • AI 工具Claude、Cursor 以及任意 MCP 客户端。

工作原理

四步完成：从 URL 到 Auto Layout 框架

这就是插件的真实流程——和你在 Figma 里使用的面板完全一样。

Redesign — Figma

yoursite.com — Desktop (1440)

Tablet (768)

Mobile (390)

已导入 3 个框架

77 个框架中 60 个应用了 Auto Layout · 23 个颜色变量 · 19 个文本样式 · 10 个组件

  1. 01

    粘贴链接

    也可以拖入文件夹、粘贴代码、发送 Chrome 标签页，或让 AI 工具直接推送页面。

  2. 02

    选择屏幕

    桌面端按网站自身的设计宽度打开——实测而非猜测。点一下即可加上平板和手机。

  3. 03

    导入

    隔离的浏览器会像普通访客一样渲染页面，隐藏 Cookie 横幅并加载懒加载内容。

  4. 04

    立即编辑

    框架、文本、矢量和图片一并到位，附带自动布局、变量、文本样式和组件。

2 px

自动布局会与浏览器自身的布局逐一比对，误差容限 2 px。

86–97%

在我们测试的真实网站中，获得自动布局的框架占比。

10

一次 Multiple 导入可包含的链接数——Free 方案同样可用。

4

Pro 方案每次导入的屏幕数：桌面、笔记本、平板和手机。

数据来自我们在真实网站上的测试——不是营销话术。

自动布局引擎

绝不破坏设计的自动布局（Auto Layout）

大多数转换工具只是猜一个布局然后碰运气。HTML to Frames 先按像素级精度搭建页面，再由内向外处理：根据浏览器实测的几何信息推断堆叠、换行、间距、内边距和对齐方式，应用 Auto Layout 后逐一校验每个子元素的位置。只要有元素偏移超过 2 px，就改用更简单的方案；如果仍然不行，该框架就保留精确的绝对位置并配上合理的约束。结果页面甚至会告诉你某个框架为什么保留了绝对定位。

  • 居中内容设为 Center；等宽卡片设为 Fill
  • 设置了最大宽度的容器在缩放时保持居中
  • 绝对定位的框架会获得 Stretch、Scale、Center 或 Min/Max 约束
  • 诊断列表会说明每个保留绝对定位的框架的原因
阅读更多
1. 绝对定位图层2. 推断堆叠结构3. 应用 Auto Layout4. 2 px 以内校验
Auto Layout · horizontal · gap 24 · padding 32
Δ 0 px
Δ 0 px
Δ 0 px

功能

原本要手工重建的一切，都替你完成

HTML to Frames 按浏览器的排版方式读取页面，再按设计师的搭建方式写出 Figma 图层。

经过校验的自动布局

行、堆叠和网格都会变成 Auto Layout。每个框架应用后都会校验——不匹配就回滚。

Responsive set（响应式套装）

一次导入即得桌面、平板和手机三个屏幕，并行抓取，并排摆放。

实测网站宽度

桌面端按页面真实的设计宽度打开——通栏布局为 1920，盒式网站则取内容盒宽度。

变量与样式

颜色变成以网站 CSS 令牌命名的变量；字体和阴影变成样式。已存在的会直接复用。

组件与悬停

重复的卡片、按钮和菜单项会变成组件及其实例；悬停效果变成变体。

浅色 + 深色模式

一次导入，两种模式：一个同时包含 Light 和 Dark 值的变量集合，外加每个屏幕的深色副本。

可直接做原型

链接保持可点击，导入的页面相互链接，固定页头和滚动区域在演示模式下都能正常工作。

字体映射

缺少字体？只需选一次替代字体——会按网站记住。

隐私优先设计

结果只交付一次，从不写入磁盘。上传的文件在导入完成后立即删除。

查看全部功能
HTML to Frames result: Auto Layout, color variables, text styles and components

懂设计系统

导入结果直接融入你的设计系统

使用超过一次的颜色会变成变量——如果网站本身有 CSS 自定义属性，就按其命名，例如 brand/primary。字体排版变成文本样式，重复的阴影变成阴影样式。开启 Snap to my file's styles（对齐到文件样式）后，与你的设计几乎相同的颜色和字体会映射到你自己的变量和样式上，导入的内容看起来就像是在你的文件里搭建的一样。

  • 每个网站最多 96 个颜色变量和 48 个文本样式
  • 复用文件中已存在的变量和样式
  • 浅色 + 深色抓取到同一个集合，包含两种模式
  • 组件带有 Default / Hover 变体和悬停交互
阅读更多
Desktop, tablet and mobile in one import
Import from a link, several links, local files, a Chrome tab or AI tools
Prototype-ready: links, navigation between pages, sticky headers

为穿梭于网页与 Figma 之间的人打造

产品与 UI 设计师

从真实网站而不是截图开始改版。几秒钟就能审查间距、字体和颜色。

设计公司

当天就能把客户现有网站导入 Figma 做提案。Team 方案提供 5 个席位。

设计系统团队

找出产品实际使用的每一种颜色和文本样式，并映射到你的变量。

前端开发者

把 localhost 或预发布环境的成果以可编辑 Figma 框架的形式交给设计师。

AI 构建者

把 Claude Code、Claude Desktop 或 Cursor 生成的 UI 直接发送到你的 Figma 文件。

学生

逐层拆解优秀网站，学习它们是如何搭建的。

HTML to FigmaHTML to designHTML to canvasHTML to frameWebsite to FigmaURL to Figma

可编辑图层胜过截图和手工重建

截图手工重建HTML to Frames
可编辑文本否是是
Auto Layout否是，手工完成是，经过校验
变量与样式否手工完成自动生成或复用
平板与手机需单独截图多花数小时一次导入
单页耗时几秒数小时几秒到一分钟

价格公道，含首发优惠

免费起步。Pro 首发价每月 $7 无限导入——早期用户永久保留该价格。

Free

在真实项目上试用所有导入来源。

$0永久免费
获取插件
  • 每月 10 次导入
  • 每次导入 1 个屏幕
  • Multiple 导入——最多 10 个链接
  • Link、本地文件、Chrome 扩展、AI 工具
  • 经过校验的自动布局（Auto Layout）
  • 实测网站宽度
  • 字体映射
  • 原型链接

Pro

首发价

无限导入和完整工具集，直接在 Figma 内购买。

$7$9每月
在 Figma 中获取 Pro
  • 无限导入（合理使用上限 1,000 次 / 月）
  • 每次导入最多 4 个屏幕
  • 样式与变量
  • Snap to my file's styles（对齐到文件样式）
  • 组件与悬停变体
  • 浅色 + 深色变量模式
  • 自定义宽度
  • 详细图层、参考截图、额外等待

Team

5 个席位

Pro 的全部功能，供整个团队使用，只需一个许可证密钥。

$22$29每月
联系我们
  • 包含 Pro 全部功能
  • 一个许可证密钥含 5 个席位
  • 无限导入（合理使用上限 5,000 次 / 月）
  • 席位可在成员之间转移
查看价格

你的页面不是我们的数据

页面在隔离的沙盒浏览器中渲染。结果只向你的插件交付一次，随即删除——从不写入磁盘。上传的文件在导入完成后立即清除。无 Cookie、无统计分析、无广告。

我们如何处理数据

博客

全部文章
CSS to Figma Auto Layout

CSS to Figma Auto Layout：Flexbox 与 Grid 转自动布局指南

Flexbox 和 Figma 自动布局（Auto Layout）看起来相似，但并不是同一种模型。这篇技术指南把 CSS 属性映射到自动布局设置，解释校验为何重要，并告诉你如何编写能够干净导入的 CSS。

10 分钟阅读localhost to Figma

Localhost to Figma：用 Chrome 扩展把任意页面导入 Figma

有些页面无法通过 URL 导入：你的 localhost 构建、需要登录的仪表盘、此刻正展开的菜单。免费的 HTML to Frames Chrome 扩展直接从你自己的浏览器捕获这些页面，并将其转换为可编辑的 Figma 图层。

9 分钟阅读AI to Figma

AI to Figma：通过 MCP 将 Claude 和 Cursor 生成的 UI 导入 Figma

AI 编程工具几分钟就能做出可运行的 UI，但设计师仍然需要在 Figma 里使用它。本文介绍如何通过 MCP 将 Claude Code、Claude Desktop 或 Cursor 连接到 HTML to Frames，得到可编辑图层，而不是截图。

9 分钟阅读

常见问题

联系支持

它是一款 Figma 插件，能把网页转换为真正可编辑的 Figma 图层。你可以导入在线 URL、一次最多 10 个链接、本地 HTML 文件或网站文件夹、粘贴的代码、用 Chrome 扩展抓取的标签页，或由 AI 工具通过 MCP 发送的 HTML。页面会以框架的形式导入，包含文本、矢量和图片，并带有自动布局（Auto Layout）、变量、样式和组件。

不是。每个标题都是可编辑的文本图层，每个图标都是矢量，每个区块都是一个框架。只有非 HTML 的内容——iframe 中的地图、WebGL 场景或没有封面的视频——才会以该区域的图片形式放置，页面其余部分完全可编辑。

插件应用 Auto Layout 后，会将每个子元素的位置与浏览器布局进行比对，误差容限 2 px。如果某个框架不吻合，会尝试更简单的布局，或保留绝对位置并加上约束。在我们对真实网站的测试中，86–97% 的框架获得了自动布局；其余框架会列出原因。

可以，使用免费的 HTML to Frames Chrome 扩展。它在你自己的浏览器中抓取标签页——包括已登录的后台、localhost、内网、展开的菜单和已填写的表单——然后通过剪贴板或 Send to Figma 发送到插件。

桌面端按网站实测的设计宽度，笔记本 1280、平板 768、手机 390，Pro 还支持自定义宽度。Responsive set 一键导入桌面、平板和手机。Free 每次导入包含 1 个屏幕；Pro 和 Team 最多 4 个。

Free 每月 10 次导入。Pro 无限导入（合理使用），首发价每月 $7，原价 $9，在 Figma 内购买。Team 首发价每月 $22，原价 $29，含 5 个席位，共享许可证密钥。1 次导入 = 1 个页面及其全部屏幕。

页面在隔离的浏览器中渲染，向你的插件交付一次后即从内存中删除——从不写入磁盘。上传的文件在导入完成后删除。插件不会读取你的 Figma 文件，我们也不会从 Figma 获取你的姓名或邮箱。

可以。在插件的 AI 标签页中连接 Claude Code、Claude Desktop、Cursor 或其他 MCP 客户端。之后你的 AI 工具就能调用 import_html 或 import_url，页面会落到你打开的 Figma 文件中，并按你自己的方案导入。

别再手动重画网页了。

粘贴一个链接，几秒钟就能得到真实、可编辑、响应式的 Figma 图层。免费起步——每月 10 次导入。

获取插件安装 Chrome 扩展

无需信用卡。Pro 直接在 Figma 内购买。

即将上架 Figma Community