HTML to Design：面向设计师和设计机构的网站改版工作流

设计通常是单向流动的：Figma 中的设计稿变成浏览器里的 HTML。但大量真实工作却是反方向进行的。客户交给你一个线上网站，请你改版。一个产品在三年的迭代中已经偏离了最初的设计稿。开发者直接用代码做了一个功能，现在设计团队需要接手。

这种反向流程——HTML to design——就是把浏览器中已有的东西还原为可编辑的设计文件。做得好的话，它能省去好几天的手工重建，并带给你比截图情绪板更好的成果：一个包含真实框架、文本、样式和组件的可用文件。

本文为设计师和设计机构梳理一套实用工作流，从最初的审查到可点击的原型，使用的是 HTML to Frames。

“HTML to design”到底指什么

这个说法涵盖所有把线上代码或网站转换为可编辑设计文件的流程。大致有三种方式：

1. 手工重建——打开网站，在 DevTools 中测量，手工重建每个框架。
2. 截图——捕获每个页面的图片，粘贴到 Figma 中作为参考。
3. 可编辑图层——把渲染后的页面转换为真实的 Figma 框架、文本、矢量和图片。

三者各有用武之地，但在成本和后续可做的事情上差异巨大。

截图作为参考没问题。对于想要从零重构的单个小页面，手工重建也仍然合理。但只要规模稍大，可编辑图层才是可扩展的起点。

这套工作流适合谁

• 进行改版、审查或拆解灵感网站的 UI/UX 和网页设计师。
• 需要在几分钟内把客户网站放进 Figma、准备改版提案的设计机构。Team 套餐通过一个许可证密钥共享五个席位。
• 需要整合生产环境中已经走样的颜色、字体和组件的设计系统团队。
• 想把 localhost 构建以 Figma 文件形式交给设计师的前端开发者。
• 需要把登录后的仪表盘或特定状态放进 Figma 做规划的产品经理和市场人员。

工作流分步说明

以下是我们推荐的顺序。你可以跳过某些步骤，但顺序很重要：每一步都建立在上一步之上。

第 1 步：审查现有内容

在导入任何内容之前，先确定哪些页面重要。对大多数网站来说，这是一份简短的清单：

• 首页；
• 一两个关键落地页或产品页；
• 价格页或结账页；
• 一个内容模板，例如博客文章；
• 属于改版范围的所有登录后页面。

同时记下你需要的状态——展开的导航菜单、带校验错误的表单、装有商品的购物车。仅凭 URL 无法到达这些状态，你需要用 Chrome 扩展来捕获。

第 2 步：导入响应式套组

现在把页面导入进来。对于公开页面：

1. 打开 HTML to Frames，选择 Multiple（多链接）。
2. 粘贴最多 10 个链接。它们会依次处理，每个页面在画布上占一行。
3. 选择 Responsive set（响应式套组）——一键获得 Desktop、Tablet 和 Mobile（Pro 和 Team 每次导入最多四个屏幕）。
4. 打开 Hide cookie banners & popups（隐藏 Cookie 横幅和弹窗），避免遮挡内容。
5. 如果打算在下一步提取设计系统，请打开 Styles & variables（Pro）。

Desktop 屏幕使用 Site width（站点宽度）：插件会测量页面真实的设计宽度，而不是猜测。通栏网站以 1920 导入且内容居中，盒式网站以其盒子宽度导入，流式网站以 1440 导入。同一个网站的所有页面使用同一宽度。

记住计数规则：一次导入 = 一个页面及其所有屏幕。五个页面的响应式套组是五次导入，而不是十五次。

首次导入后，Import linked pages（导入链接页面）让你从列表中挑选同一网站的更多页面。对于登录后的页面或 localhost，请使用 Chrome 扩展和 Send to Figma。对于只以文件形式存在的页面，请使用 Local file 导入单个 HTML 文件、整个网站文件夹或 .zip。HTML to Figma 指南详细介绍了每一种来源。

第 3 步：提取设计系统

从这一步起，导入不再只是网站的一张“照片”，而成为可用的基础。打开 Styles & variables（Pro）后，插件会创建：

• 颜色变量：来自至少使用两次的颜色以及网站的 CSS 自定义属性——--brand-primary 会变成 brand/primary——放在 Colors · <domain> 集合中（最多 96 个）。
• 文本样式（最多 48 个）。
• 阴影样式（sm、md、lg、xl）。

有两个细节让它在真实项目中实用：

• 复用。 如果你的文件中已有数值匹配的变量或样式，插件会复用它们。同一网站导入两次不会新建任何内容。
• Snap to my file's styles（对齐到我文件中的样式，Pro）。如果你已有设计系统，在没有精确匹配时，导入的颜色和文本可以对齐到你文件中最接近的样式：颜色使用感知上的 OKLab 距离，文本要求字体族和字重相同、字号相差在 10% 以内。

如果网站支持深色模式，请选择 Light + Dark（Pro）。页面会以两种配色方案分别捕获，你会得到一个带有 Light 和 Dark 模式的变量集合，外加每个屏幕的深色副本。注意 Figma Free 文件每个集合只允许一个模式，因此在这类文件中会跳过深色模式并给出提示。

最终输出是网站实际使用内容的真实清单——这往往是整个审查中最有价值的成果。在一个集合里看到一长串几乎相同的灰色，比任何幻灯片都更能说明为什么需要整合。

第 4 步：把重复内容变成组件

打开 Components & hover states（组件与悬停状态，Pro）后，重复结构——卡片、按钮、菜单项——会变成组件和实例，并保留文本和图片覆盖。带有悬停外观的元素会变成包含 Default 和 Hover 变体的组件集，外加一个悬停时触发的原型交互。主组件统一放在 Components · <site> 框架中。

这样你就得到一份可以整理的组件清单。常见的后续操作：

• 把近似重复的按钮组件合并为一个带变体的组件集；
• 按你的命名规范重命名组件；
• 在已有对应组件的地方，把实例替换为你自己组件库中的组件。

第 5 步：在真实结构上迭代

现在开始设计。由于布局以嵌套框架导入，并在插件能够校验之处使用自动布局（Auto Layout），修改时的表现就像在你自己搭建的文件中一样：

• 编辑标题，看堆叠自动重排；
• 修改某个区块的间距或内边距；
• 替换一个颜色变量，看所有用到它的地方同步更新；
• 调整框架尺寸，让 Fill 和 Center 发挥作用。

在我们对真实网站的测试中，大约 86–97% 的框架推断出了自动布局。保留绝对定位的框架会获得合理的约束，结果页面会列出框架为何保留绝对定位。自动布局详解对此有深入说明。

一个好习惯：把原始导入单独放在一个页面上作为**“改版前”**，复制一份用于改版。如果需要一个隐藏、锁定的图片图层与线上页面并排对比，可在导入时打开 Reference screenshot（Pro）。

第 6 步：制作原型

导入的页面已经部分连好了：

• 链接保持可点击（Open link）。
• 已导入页面之间的链接会变成 Navigate 交互，因此多页导入开箱即是可点击的流程。
• 固定和吸顶头部以及横向滚动区域在演示模式下可正常工作。
• 第 4 步生成的悬停变体自带悬停交互。

这意味着在客户演示中，你可以把“改版前”原型和“改版后”原型并排展示，而无需从零连线。

第 7 步：保持同步

网站一直在变化。每个导入的框架都保存了来源 URL，因此当线上页面变化时，Re-import 只需一键。由于会复用已有的变量和样式，重新导入不会让文件中充满重复项。

实际使用场景

设计机构的改版提案

设计机构竞标改版项目时，需要快速把客户当前的网站放进 Figma。把关键页面作为响应式套组导入，提取设计系统，在展示任何新创意之前，你就有了一个基于事实的“这是你们目前的情况”章节——附带真实的颜色和字体清单。Team 套餐共享五个席位，多位设计师可以使用同一个许可证。参见 website to Figma 和改版指南。

设计与代码偏差审查

导入生产环境的页面，放在原始设计稿旁边。间距、颜色和字体上的差异会逐图层显现，生成的变量也会揭示有多少不在色板中的颜色悄悄混了进来。

开发者构建的功能

开发者在 localhost 上做了一个功能原型。用 Chrome 扩展捕获，发送到 Figma，设计师就能在与产品其他部分相同的文件中打磨它。

AI 生成的页面

如果起点是 Claude 或 Cursor 生成的 HTML，通过 MCP 连接助手，页面就会进入你已打开的插件。参见 AI to Figma。

学习与拆解

学生可以导入制作精良的网站，逐个图层研究区块如何组织、字体如何分级、间距如何重复。

客户项目中的隐私考量

设计机构经常导入客户网站，因此数据如何处理很重要。页面在隔离的沙盒浏览器中渲染；结果只交付一次，随后从内存中删除，绝不写入磁盘。上传的本地文件会在导入完成后立即删除。插件不会读取你的 Figma 文件内容。完整政策见安全页面。

开始使用

判断这套工作流是否适合你，最快的方法是在你正在处理的一个真实页面上试试。Free 每月包含 10 次导入；Pro 增加了上文介绍的设计系统和组件功能。在价格页对比套餐，浏览文档，或在替代方案页面了解与其他工具的比较。