团队经常要给"原设计源缺失或过时"的网站做改版。生产页面常常是 UI 的唯一准确版本，手工把它描进 Figma 每屏成本几天。
Website 转 Figma 解决这个问题。把 Codia AI 指向一个 URL（或粘贴 HTML/CSS），就能拿到可编辑 Figma 文件——Frame、文字图层、组件、设计 Token。设计师可以从生产页面开始审计、改版、文档化、抽取设计系统，而不是从零重建。
本指南覆盖完整画面：何时用 Website 转 Figma，何时用截图转 Figma 或 HTML 转 Figma；落地页 / SaaS / 电商 / 营销站的分场景技巧；截图准备；转换后的清理。
何时用
适用场景：
- 原 Figma 源缺失或过时，生产是事实来源。
- 改版起点，需要现状的可编辑基线。
- 审计 Figma 源与生产的偏差。
- 竞品研究，需要可编辑参考而不是截图。
- 把生产 UI 文档化回 Figma，用于设计系统工作。
- 从现有页面抽取设计系统。
- 接手一个营销站，需要把它带入 Design Ops 治理。
Website 转 Figma vs 截图转 Figma vs HTML 转 Figma
三种工作流意图重合，输入与权衡不同：
| 工作流 | 输入 | 最适用于 |
|---|---|---|
| Website 转 Figma | 在线 URL | 浏览器能访问；想要源级版式信息（计算后的 CSS、真实字体名）。 |
| 截图转 Figma | PNG/JPG | 无法访问页面（付费墙、内部系统、已下线、只有一张图）。 |
| HTML 转 Figma | 原始 HTML/CSS | 你有源码、追求最高保真。常见于工程主导工作流。 |
多数团队会混用：在线站用 URL、灵感板与受限页面用截图、工程主导转换用源码。
工作流
- 选 URL 与视口。 桌面 / 平板 / 移动哪个断点——按要响应式覆盖的每个断点分别采集。
- 准备页面。 关掉 Cookie 横幅、弹窗、聊天小工具，按需登录或登出，等字体与懒加载图片到位。
- 关键状态单独采集。 默认转换只覆盖"当前可见状态"。导航展开、Modal 打开、空状态、价格切换、悬浮卡、移动菜单、登录态——按独立任务采集。
- 跑转换。 Codia AI 分析版式、字体、配色、图标、图像、组件结构。
- 打开 Figma 结果。 每个视口是独立 Frame。
- Review（清单见下）。
- 组件化重复章节——导航、Hero、功能卡、Footer、CTA 块。
分场景技巧
营销落地页
- 长页面分段转（Hero / 功能 / 社证 / 价格 / FAQ / Footer），每段 Auto Layout 更干净。
- Hero 插画与装饰渐变可能以位图来出——团队需要可改时换设计系统的矢量。
- 价格表请单独聚焦采集：滚动到表格，只转那一块。
- A/B 测试变体分别转，在 Figma 里并排放置便于 review。
SaaS App 屏
- 真实产品屏经常含用户数据——用 demo 账号或空状态采集。
- 侧栏、顶栏、Modal 跨屏复用。先转一屏，组件化框架，再转其余复用同框架的页面。
- 空状态、错误状态、加载状态在 Figma 源里通常缺，值得专门采集。
- 密集数据网格与表格，见 截图转 Figma 的仪表盘技巧。
电商站
- 商品图廊以图片占位形式来出——换真实商品图。
- 规格选择、尺寸选择、数量步进器是组件化的好候选。
- PDP / 购物车 / 结算一起转，让设计系统覆盖完整购买流程。
竞品研究
- 把竞品落地页转成可编辑 Figma 参考，团队能分析结构、文案、版式、视觉层级，而不是只看平面截图。
- 多个竞品采集放进同一 Figma 文件做并排 review。
- 这些采集是灵感与分析，不是 1:1 复制。发布前一定按自家品牌重做。
把生产 UI 文档化回 Figma
- 转生产产品里高流量页面，一页一页来。
- 把恢复的配色与字体样式映射到 Figma 库；报告会标记不在系统里的配色 / 样式。
- 这是关闭"Figma 源 vs 生产"漂移的基础。
转换后该清理什么
把导入当作高质量可编辑稿。过一遍：
- 字体。 Web 字体首次打开会替换——映射到设计系统字体。
- 文字样式。 把临时样式换成设计系统 Token。
- 图标。 位图图标换成你库里的 SVG 资产。
- 背景图。 裁剪正确；装饰背景需要时换成系统素材。
- 重复章节。 卡片、导航、按钮、Footer 转为 Figma 组件。
- 响应式约束。 跨断点的 Frame 重建 Auto Layout。
- 第三方小工具。 聊天气泡、Cookie 横幅、分析叠加层不属于设计系统——剥掉。
- 颜色 Token。 恢复的色值映射到设计系统颜色 Token。
常见坑
采集错视口。 1440px 不会告诉你 375px 的样子。按你真正关心的断点一个个采。
忘记关弹层。 Cookie 横幅、聊天小工具、Hotjar 调查都会被采进来，多出清理工作。先关。
采集个性化状态。 真实用户数据、姓名、内部工具——登出或用 demo 账号。
一张长滚动截图。 长页面分段采更好。
忽略交互状态。 菜单、Modal、悬浮卡、空状态默认不在转换里。按独立任务采。
把转换当做设计。 输出是基线。设计工作是后续的清理、组件化、改版判断。
API 与批处理
个人设计用插件与 Web 应用即可。批量页面转换（代理在改造 200 个客户站、内部团队文档化整个产品表面、Design Ops 跨市场做品牌审计），用 Visual Struct API——接受 URL，采集页面，返回结构化 JSON 供下游工具消费。
批量端点支持大批量 URL 摄入，处理完成时 Webhook 回调。
常见问题
任意网站都能转 Figma 吗？
多数可见网页都能拿到可用的可编辑稿。高度动态的 App、Canvas 重的页面（3D / WebGL）、个性化屏需要更多清理。屏蔽自动采集的站点请走截图工作流。
会捕获响应式版式吗？
只采你指定的视口。需要响应式覆盖时分别采桌面、平板、移动。
交互状态会被采集吗？
只采可见状态。菜单、Modal、悬浮卡、空状态请按独立任务采集。
转换后的文件包含真实代码吗？
不包含——Figma 是设计工具，不是代码源。要从网站到代码，可以走 Website → Figma → Figma 转代码，或用截图直接走 截图转代码。
用于竞品研究合适吗？
非常合适。Figma 里的可编辑参考比平面截图更利于分析与改版规划——但请视为灵感而不是 1:1 复制。
鉴权后页面怎么办？
用登录态浏览器或临时 demo 账号。客户敏感数据绝不应进采集输入。
能整站一次性转吗？
个人设计请一页一页转。整站采集（几十到几百页）用 Visual Struct API 批量端点。