研究对象：Figma 插件 html.to.design — by ‹div›RIOTS（ID 1159123024924461424，2022-10 上架）。它把任意网页的 HTML/CSS 转换成完全可编辑的 Figma 图层。本报告回答四个问题：它到底是怎么工作的、质量边界在哪、为什么 Figma 要买它的技术、在 2026 年的 AI 设计工作流中处于什么位置。
只读这一页也能用。
来自 Figma 社区页与官方文档的一手信息。
| 项目 | 内容 |
|---|---|
| 名称 / ID | html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css) · Figma 插件 ID 1159123024924461424 |
| 开发商 | ‹div›RIOTS（法国，2019 年创立，CEO Georges Gomes；2021-06 获 XAnge 领投 300 万美元 Pre-Seed） |
| 上架时间 | 2022-10-04 · 当前版本 401（2026-08-06 更新） |
| 定位 | 把任意网页（URL / HTML 文件 / HTML+CSS 代码 / 邮件 .eml/.msg）转换为完全可编辑的 Figma 设计 |
| 核心引擎 | code.to.design（官方称「HTML-to-Figma engine」，同时驱动 html.to.design / code.to.design / story.to.design，并对外提供 API） |
| 输入方式 | ① URL（公开页面）② Chrome 扩展捕获（含登录后页面，导出 .h2d/.make/剪贴板）③ .html/.htm/.mhtml/.zip 文件 ④ 邮件文件 ⑤ Editor 标签页直接粘贴 HTML+CSS 代码 ⑥ MCP（AI 客户端远程调用） |
| 输出能力 | 可编辑文字图层、Auto Layout Frame、图片、本地 Text/Color Styles、明暗主题、桌面/平板/手机多视口 |
| 里程碑 | 2022-12 破 10 万用户 → 2023-04 破 25 万（进入 Figma Top 30）→ 2025-09 技术被 Figma 收购 → 2026-01 破 200 万 → 2026-02 成为社区点赞第一插件 |
| 依赖权限 | 插件：dynamic-page 文档访问，网络域含 *.divriots.com / *.to.design / *.googleapis.com / fal.media / replicate.delivery（AI 图像相关）。扩展：debugger / activeTab / scripting / webNavigation 等（第三方评级"高危影响"权限） |
‹div›RIOTS 是一家 8 人左右的法国前端工具公司（巴黎 + 荷兰子公司），2019 年由 Georges Gomes、Francois Valdy、Gregory Quinio 创立。创立初期的主张是"代码是设计的事实源"——先是做 WebComponents.dev、Components.studio、Backlight.dev 等代码侧设计系统平台，2022 年起把重心转向 Figma 插件，反方向打通「现实世界的网页 → 设计工具」。2025 年是其战略转折年：一次性发布 12 个导入插件（office/image/illustrator/cad/psd/visio……覆盖 40+ 文件格式），6 月关停全部自有 IDE 产品线，9 月把最核心的转换引擎卖给 Figma，年底全线用户破 300 万。2026 年 2 月起为 Google Labs 的 Stitch 提供"导出到 Figma"能力，5 月推出反向插件 figma.to.code（Figma 设计 → HTML），6 月推出统一订阅 ‹div›RIOTS ONE。
这个轨迹可以概括为一句话：一家做"代码侧设计系统"的公司，最终靠"把整个 Web 塞进 Figma"活了下来，并把引擎卖给了 Figma 本尊。
理解它"是什么"，先看它"怎么把浏览器里的东西变成 Figma 节点"。
Figma 的画布不接受 HTML。插件要做的，是把浏览器渲染后的世界「翻译」成 Figma 的节点模型（Frame / Text / Rectangle / Vector / Image）。html.to.design 的做法是：在真实浏览器环境中加载页面，让 CSS 完成计算（得到每个元素的最终 computed style 与几何布局），然后沿 DOM 树逐节点翻译成 Figma 等价物，序列化为 Figma 模型交给插件写入画布。官方技术说明与插件权限声明（转换由 html.to.design 后端完成、模型临时存于 Google Storage 供插件下载）共同勾勒出这条管线：
依据：官方插件权限声明（后端转换 + Google Storage 临时存储）、官方文档「powered by code.to.design」、扩展 Chrome Web Store 权限列表（debugger 权限）。综合推断，管线步骤 ②③ 的具体实现细节未开源。
| 网页侧 | Figma 侧 | 还原情况 |
|---|---|---|
| 文本节点 <p>/<h1>… | Text 图层 | 完整 可编辑、字体/字号/字重/对齐映射；有版权的字体被替换为可用字体 |
| flex / grid 容器 | Auto Layout Frame | 较好 flex 映射成熟；复杂 grid 嵌套在长页面/仪表盘场景退化（见 §04） |
| 颜色 / 字体集合 | Local Styles | 完整 自动创建文本与颜色样式，可直接用于后续设计 |
| <img> / 背景图 | Image 填充 | 完整 Pro 版自动抓取更高分辨率版本（可得时） |
| SVG 图标 / 形状 | Vector 图层 | 较好 部分 SVG 栅格化处理 |
| :hover 等伪类 | 变体（有限） | 部分 仅基本 hover 效果可保留（第三方评测称可转为 component variant） |
| CSS animation / JS 动画 | — | 丢失 静态快照，不捕获动画（官方文档明示） |
| 交互逻辑 / 表单行为 | — | 丢失 属于"设计证据"范畴之外 |
html.to.design 对网页做的事，相当于编译器的反编译：源码（HTML/CSS/JS）是"高级语言"，浏览器渲染结果是"机器码"，Figma 节点模型是"反编译出的结构"。反编译产物保真但不保源——你能得到一份结构清楚、可直接编辑的设计稿，但拿不回原始的组件语义、设计意图与工程逻辑。期待"一键转换出干净设计系统"的用户，误解的是编译的方向，而不是工具的质量。
同一个引擎，两条输入通路，隐私与能力属性完全不同。
依据：插件 Figma 社区页 Network Access 声明（一手）、Chrome Web Store 扩展权限与描述（一手）、firefox-stats 权限评级（第三方）。
2026 年扩展的两个更新显著缩短了路径（官方博客，一手）：Copy to clipboard——捕获后直接 ⌘V 粘贴进 Figma 画布，完全跳过插件窗口；Download as .make——导出 Figma Make 原生格式，把真实网页直接变成 Figma Make（AI 原型工具）的可迭代起点。扩展还内置了对 ChatGPT、Bolt、Lovable 等 AI 工具输出页面的直接捕获支持。
官方宣传与第三方实测之间的地带，才是真实的能力边界。
目前公开的系统性横向评测很少。下图为 2026 年一篇中文第三方评测（CSDN/Drawflare）对 4 款工具在三类页面上的还原度打分。必须标注：这是单一来源的目测评分，且该文作者同时推广评测中的另一款工具「Web to Design」，存在利益倾向——数据只作量级参考（"复杂页面普遍退化"这个方向性结论），不作精确依据。
来源：CSDN《花了三天时间，我把市面上 4 款网页转 Figma 工具全测了一遍》（2026）。该文推广竞品 Web to Design，html.to.design 的相对名次可能被压低。
综合官方文档与社区实践，导入后建议按顺序做五步清理——这套动作决定了导入产物是"能用的起点"还是"图层垃圾场"：
| 步骤 | 动作 | 目的 |
|---|---|---|
| 1 | 核对字体与文本换行 | 替换字体后的度量变化会导致换行点漂移，先修文本再谈布局 |
| 2 | 扁平化单子元素容器 | 删除"只包着一个孩子"的冗余 Frame，图层树立刻瘦一圈 |
| 3 | 重建 Auto Layout 约束 | 对要继续编辑的区域补齐/修正 Auto Layout，绝对定位的残留区域改为约束布局 |
| 4 | 把复用区块提升为组件 | 导航栏、卡片、按钮手动做成 Component + Variant——引擎不会替你做这件事 |
| 5 | 整理 Local Styles | 导入时自动生成的颜色/文本样式去重、命名，纳入团队设计系统 |
四年时间里，它从 Figma 社区的一个工具变成了 Figma 官方能力的一部分。
来源：‹div›RIOTS 官方博客公司新闻时间线（一手）、Figma 社区页（一手）、用户数口径辨析见 §11。
freemium 单插件 → 40+ 格式全家桶 → ONE 统一订阅。
| 方案 | 价格 | 核心内容 |
|---|---|---|
| FREE | $0，无需注册 | 每 30 天最多 10 次导入；URL 导入、扩展捕获、多视口、明暗主题、缺失字体下载 |
| PRO | $18/用户/月（月付） $12/用户/月（年付） | 无限导入（fair use：上限 1000 次/月）、高清图片、批量 URL 导入、一键重导入、优先支持 |
| PRO for Teams | 席位制 | 多成员 license 分配与集中管理；印度/俄罗斯银行卡用户也只能走此通道 |
| code.to.design API | 按量洽谈 | 把同一转换引擎 API 化对外供应，面向大批量/自动化场景 |
注意口径：官方首页写"10 次/30 天"，官方文档另一处写"12 free imports a month"（疑为旧文案未同步）；第三方媒体还有"$15/月""$19/月"等过时或四舍五入的说法。以官方 pro-plan 文档的 $18/$12 为准。
‹div›RIOTS 的打法是把 html.to.design 验证过的「X → 可编辑 Figma 图层」模式复制到一切文件格式：anything.to.design 聚合页收纳了 image / office / illustrator / psd / cad / visio / corelDRAW / eps / xps / story（Storybook）/ data / figma.to.website 等 40+ 格式的导入插件，以及反向的 figma.to.code。2026-06 推出 ‹div›RIOTS ONE 统一订阅，多插件场景比单独订阅省最高 66%。商业逻辑清晰：单插件是获客漏斗，格式矩阵 + ONE 订阅是变现结构，被 Figma 收购的引擎是技术护城河与品牌背书。
从"人手动导入网页"到"AI Agent 自动把网页送进 Figma"。
插件主页目前最醒目的新能力是 Import via MCP（官方称"Fastest MCP server"）：Claude Desktop、Cursor 等 MCP 客户端可以直接调用 html.to.design 的导入能力，让 AI Agent 自动完成"给一个 URL → 设计稿出现在 Figma 画布"，支持批量 URL 自动化。配合扩展对 AI 工具输出（ChatGPT / Bolt / Lovable / v0 等）的捕获支持，完整的 AI 工作流闭环是：
依据：插件主页与官方博客（一手）、BeBranded 工作流分析（二手）。MCP 文档页在抓取时不可达，server 的具体 tool 清单未能从一手来源核实，此处仅陈述官方宣传的能力范围。
"网页 → Figma"赛道的主要玩家与各自的真实差异。
| 工具 | 模式 | 定价 | 差异化与短板 |
|---|---|---|---|
| html.to.design （‹div›RIOTS） | 闭源插件+扩展+MCP | 免费 10 次/30 天 Pro $18/$12 月 | 生态最全：扩展捕获登录页、.h2d/.make/剪贴板、MCP、邮件导入；引擎被 Figma 收购背书。短板：闭源、云转换的隐私顾虑、免费额度低 |
| HTML to Figma （Builder.io） | 开源插件 | 免费自托管 商业版功能门控 | 唯一主流开源方案，可私有部署（数据不出内网），与 Builder.io 设计转代码管线协同。短板：转换质量与生态整合弱于 html.to.design |
| Codia AI | Vision AI 重建 | 按量付费，免费层有水印 | 强项是"截图/图片 → 设计"的 AI 重建家族（11 个工具）；网页转换精度在横评中垫底，功能入口繁多 |
| dMaya HTML to Figma | 免费网页转换器+插件 | 宣称永久免费无限 | 2026 年新玩家，明确以"免费无限制"打 html.to.design 的付费墙；headless Chromium 渲染、未兼容区域降级为光栅并标记。短板：新、可靠性未经时间验证 |
| Figma 官方能力 （Make 导入/First Draft） | 平台内置 | 随 Figma 订阅 | Make → Design 画布导入用的是同款（收购自 divriots）引擎；官方路线意味着第三方插件的独占窗口在收窄 |
用之前值得知道的全部"坑"，按严重程度排列。
| 级别 | 风险 | 说明与对策 |
|---|---|---|
| 高 | 私有页面数据出端 | 用扩展捕获登录后页面时，若走"直接发送到插件"路径，页面数据经 Firebase 中转；捕获内部系统/SaaS 后台意味着把企业 UI 与数据送到了第三方基础设施。对策：敏感场景只用 .h2d 本地文件路径，或改用开源私有部署方案。 |
| 高 | debugger 级浏览器权限 | 扩展请求 debugger/activeTab/webNavigation 等权限（第三方评级为"高影响"）。这类权限可读取页面渲染内容，装在全员浏览器里需要过安全评审。对策：按最小必要原则分发，不做全员默认安装。 |
| 中 | "图层垃圾"反模式 | 导入产物是转换引擎的视角，不是设计系统的视角：冗余容器、绝对定位残留、无组件语义。直接把它当设计系统起点会制造设计债务。对策：执行 §04 的五步清洗，导入只当"起点"不当"终点"。 |
| 中 | SPA / 复杂页面退化 | 无 SSR 的客户端渲染应用可能导入不完整；Grid 重度页面还原度显著下降。对策：导入前确认页面已完全加载；复杂页面分段导入；导入后与浏览器逐屏核对。 |
| 中 | 字体版权替换 | 商业字体被自动替换，文本度量漂移。对策：导入后第一时间核对换行与字重，补齐团队持有授权的字体。 |
| 低 | 长页面拖垮 Figma | 每个图层都占内存，超长落地页在免费版下可能卡死。对策：按区块分次导入；导入前裁掉页脚/装饰区。 |
| 低 | 合规与版权边界 | 导入他人网站做竞品基准属行业普遍实践，但把他人设计直接改皮复用有版权风险；导入行为本身也会被目标站点日志记录。对策：内部研究用途明确边界，不直接搬运视觉资产。 |
以下为观点判断，非行业共识，已尽量标明置信度。
传统设计流程是 Figma → 代码；现实世界大量 UI 诞生于代码（遗留系统、AI 生成页面、运营快速上线）。html.to.design 是"代码 → Figma"方向最成熟的产品化实现。AI 越多地产出 UI，这个反向通道就越有价值——Figma 收购引擎、Google Stitch 选它做导出，都是同一逻辑的注脚。
把它当竞品分析、改版起点、design drift 审计、AI 上下文捕获工具，回报极高；把它当"一键生成设计系统"的工具，必然失望——这不是工具缺陷，而是反编译的本质约束。对它的正确预期决定了使用体验的上下限。
对 ‹div›RIOTS：卖引擎换来续命与背书，但 Figma 官方迟早把同类能力做进平台（已在发生），第三方插件的独占期有限。对 Figma：花小钱拿到了被 200 万用户验证过的转换管线，补齐 Make 的"落地画布"短板。这是双赢，但双赢里 Figma 赢得更多。
个人设计师/小团队：直接用，免费额度足够试，重度使用再上 Pro。企业内部系统导入：优先评估 Builder.io 开源自部署，或 html.to.design 严格走 .h2d 本地路径并过安全评审。AI 工作流自动化：MCP 路线值得接入，Claude/Cursor 均官方支持。
按证据类型分组；标注抓取日期 2026-09-20。
html.to.design/docs 最新版本为准。