最近一直在用 Cursor 和 Claude 开发网页，最大的感受就是：AI 确实把开发效率拉高了。

以前一个需求可能要排期三天，现在很多时候一天半左右就能完成，尤其是页面搭建这一块，速度提升很明显。

不过实际用下来，我发现还有一个环节一直不太顺。

就是 AI 生成的 HTML，怎么继续在 Figma 里做设计优化？

AI 写代码确实很快，但生成出来的页面和最终想要的效果，通常还是有一点差距。

如果继续让 AI 修改，它有时候会越改越偏；如果自己改，就只能回到代码里。

调间距要找 CSS，换颜色要定位样式，调整布局还要改 HTML 结构。

后来我换了一种流程：先把 HTML 转成可编辑的 Figma 文件，根据需求把页面调整后，再给到AI做修改，效果比预想中的好。

我用的是 Web to Design（Chrome 插件 + Figma 插件），整个转换过程不到一分钟。

具体步骤：

1. 直接打开AI 生成的 HTML 文件（这里以一个登录页面为例）

2. 打开Chorme -  Web to Design 插件，它提供了两种导出方式

✅ 导出完整页面

✅ 选择区域导出

根据需求选择一个导出方式，插件会自动提取页面结构、样式、文字和图片资源，并生成一个 .w2d 文件。

3. 打开 Figma，运行 Web to Design 插件，导入 .w2d 这个文件，等几十秒，直接可以拿到一份可编辑的设计稿。

导入后布局、文字、图片基本都在，还原度基本在90%左右，简单页面可以做到100%还原，图层可以选中、文字可以直接改，不用再手动重建。

这个流程我主要用在几个场景：AI 生成的草稿需要精修后交付；线上页面没有源文件但要做改版设计；拿到 HTML 模板做二次设计；前端同事自己出设计稿的时候。

以前要把一个 AI 生成的页面还原到 Figma，中等复杂度的页面大概一两个小时，文本框、颜色、间距都得手动对。现在转换这一步不到一分钟，后面直接在 Figma 里调细节。

不过这个工具并不是百分之百还原所有内容。

像复杂动画、特殊字体、部分响应式状态，以及少量特殊组件，导入之后还是需要手动调整。

但如果你的目标是快速得到一份可编辑的 Figma 文件，而不是从零开始搭页面，它确实能省掉大量重复工作。

Chrome 商店搜索 Web to Design 安装浏览器插件，再到 Figma Community 搜索同名插件安装即可，两者配合使用就能完成整个转换流程。

如果你也在用 Cursor 或 Claude 做网页开发，不妨试试这套工作流，说不定也能帮你节省不少时间。操作过程中遇到问题，欢迎评论区留言，我看到都会回复～