设计稿转代码是 AI 编码的刚需场景，但反方向的需求同样真实存在：把已上线的网站还原成可编辑的 Figma 设计稿——竞品分析、设计重构、设计系统回填，都需要"网页变设计稿"这条通道。BuilderIO/figma-html（html.to.design）做的就是这件事：输入任意网址，插件抓取页面并把 HTML 元素转成 Figma 原生图层——文字还是文本层、容器还是 frame、样式属性一一对应，得到的不是截图而是可编辑的 Figma 设计。约 3.7k Star，配套 Chrome 扩展与 Figma 插件双形态。本文按"概述 → 工作机制 → 功能面 → 使用 → 对比 → 总结"组织全文。
1、概述
figma-html 由 Builder.io（可视化开发平台厂商）出品，README 一句话定位："Convert any website to editable Figma designs"——把任意网站转成可编辑的 Figma 设计。仓库约 3.7k Star、362 Fork，提供两个使用形态：Chrome 扩展（负责抓取页面）与 Figma 插件（负责把数据写入 Figma 画布），二者配合完成"网页 → 设计稿"的全链路。
它的价值主张很直接：设计师拿到一个网站，想基于它做改版或分析——以前只能截图拼贴或对着浏览器手工重画；figma-html 把这个过程自动化为"输入网址、数秒出稿"，且产物是结构化的 Figma 图层。
2、工作机制
链路分三步：
- 抓取：Chrome 扩展加载目标页面，遍历 DOM 树，采集每个元素的计算样式（computed style）——布局、颜色、字体、边框、圆角、阴影
- 转换：把 DOM 结构映射为 Figma 节点树——div / section 转 frame、文本节点转 text、img 转图片层，样式属性翻译成 Figma 属性
- 写入：Figma 插件接收转换结果，在画布上生成完整图层结构
关键设计在第二步的映射规则：HTML 的盒模型与 Figma 的自动布局（Auto Layout）语义不同，转换器需要把 flex / grid 布局合理翻译为 Figma 的 frame 嵌套与约束。仓库本身就是这套映射规则的参考实现——这也是它对开发者的独特价值：想理解"HTML 与 Figma 的结构互转"怎么写，这就是开源样本。
3、功能面
核心能力与选项：
- 整页抓取：输入 URL 抓取完整页面，支持滚动长页
- 元素级导入：Chrome 扩展里可选中页面的局部区块导入，不必整页
- 响应式多断点：同一页面可按不同视口宽度分别抓取，生成多套设计稿
- 图片处理：页面图片以 Figma 图片层导入，保留原图链接
- 文本保留：文本导入为可编辑文本层（非图片化），字体样式对应转换
- 隐私模式：抓取在本地浏览器完成，不上传页面数据
边界也要知道：动态加载内容依赖扩展执行时的页面状态；部分复杂 CSS（滤镜、混合模式的某些值）在 Figma 中无精确对应，会取近似值；iframe 跨域内容的抓取受限。
4、使用
两条路径，推荐 Chrome 扩展 + Figma 插件组合：
1. 安装 Chrome 扩展（html.to.design）
→ 打开目标网站，扩展图标选取整页或局部区块
2. 安装 Figma 插件（html.to.design）
→ Figma 里运行插件，导入已抓取的内容
3. 产物：结构化 Figma 图层，直接编辑
开发者视角：仓库源码即"HTML to Figma"引擎的参考实现。本地跑起来后可以定制转换规则（比如把特定 class 映射为你的设计系统组件），Builder.io 自家的可视化编辑器也基于同源技术。
5、横向对比
"网页与设计稿互通"赛道的方向图：
| 方案 | 方向 | 形态 | 优势 |
|---|---|---|---|
| figma-html（html.to.design） | 网页 → Figma | Chrome 扩展 + Figma 插件 | 产物可编辑、局部导入、多断点 |
| TalkToFigma | Agent 读写 Figma | MCP + 插件 | AI 批量改稿、自动化 |
| Framelink MCP | Figma → 代码数据 | MCP | 设计转代码的精确还原 |
| 截图拼贴（土法） | 网页 → 参考图 | 手工 | 零成本但不可编辑 |
选型建议：
- 竞品分析、设计重构、把线上状态拉回设计稿 → figma-html
- AI 改稿与设计自动化 → TalkToFigma
- 设计稿转代码 → Framelink MCP
- 组合玩法：figma-html 把竞品页面转成 Figma 稿 → 用它做改版设计 → Framelink 拉数据还原代码——三条工具串成完整工作流
6、总结
figma-html（html.to.design）是 Builder.io 开源的"网页转可编辑 Figma 设计"工具（约 3.7k Star）：Chrome 扩展抓取页面计算样式，Figma 插件把 DOM 结构映射为原生图层——文本可编辑、容器成 frame、样式属性一一对应；支持整页与局部导入、多响应式断点、本地抓取不上传。仓库源码同时是"HTML 与 Figma 结构互转"映射规则的开源参考实现。
它适合三类场景：竞品界面分析（把对手的页面变成可拆解的设计稿）、设计与实现的回填对照（上线页面 vs 最新设计稿的差异检查）、以及给设计系统做素材采集（从真实网页提取可复用样式）。边界方面：动态内容、跨域 iframe、部分复杂 CSS 效果存在转换近似；重度使用的抓取行为要遵守目标站点的服务条款；它解决"网页变设计稿"，反方向（设计稿变代码）需要另外的工具。对于设计与代码之间的双向翻译需求，它补上了长期缺失的"从线上回流设计"这一段。
