AI生成HTML一键转Figma设计稿的完整流程

最近发现了一个方法，把 AI生成的 HTML 页面直接转换成可编辑的 Figma 设计稿，整个过程不到 1 分钟，直接改写了我的工作流。

📌 先说为什么需要这个：

现在用Claude、ChatGPT、Cursor这些AI工具生成网页太方便了，你描述需求后很快就会帮你生成一个完整的HTML页面出来。

但问题是，AI写代码很快，但是写出来的效果和你想要的有很大差异，在它基础上改设计就很难受。调间距得翻CSS，改颜色得找样式名，想拖个元素位置还得切到代码里改。

那如果可以直接把这个HTML页面变成Figma设计稿呢？文字能改、图层能选、布局完整保留的那种。

就是今天说的这个工具——Web to Design，一个Chrome插件 + Figma插件的双插件组合。

操作步骤：

① 用浏览器打开AI生成的HTML文件

Claude、Cursor或者任何AI工具生成的HTML，保存到本地，直接用Chrome打开就行。

② 使用 Web to Design Chrome 插件导出

页面打开后，点击浏览器里的Web to Design插件，选择「导出整个网页（Export Full Page）」，它会自动提取页面的结构、样式、文字、图片资源，打包生成一个 .w2d 文件。

③ 在 Figma 中导入

打开 Figma，运行 Web to Design 插件。

导入刚才生成的 .w2d 文件，等待几十秒，就能得到一个可编辑的 Figma 文件。

整个页面的布局、文字、图片基本都会保留下来，不用再一点点重新搭页面。

💡

✅ AI生成网页后，想继续在Figma里精修设计细节

✅ Cursor / Claude生成的页面，需要转成设计稿交付给团队

✅ 拿到一个HTML模板，想快速在Figma里二次设计改版

✅ 前端页面反向编辑——线上页面想改设计稿但手头没有源文件

📊

之前拿到AI生成的HTML，如果想把它的设计还原到Figma里，基本得手动重画。文本框一个个建，颜色一个个吸，间距一个个量，一个中等复杂度的页面少说一两个小时。

现在走这个流程，

省下来的时间拿去调设计、想方案，比对着代码改样式舒服太多了。

🔗

Chrome商店搜「Web to Design」装浏览器插件，Figma社区搜同名装Figma插件，两个配合使用。

如果操作过程中遇到问题，欢迎评论区留言，我看到都会回复～