title: "AI 画出了设计稿，但你改不了——这条死胡同，有人用 3 分钟绕过去了" description: "GPT-Image-2 生成的 UI 设计稿是张死图，Figma MCP 部署复杂还限次数。一条绕过 MCP 的 3 步工作流，让 AI 设计稿变成可编辑的 Figma 文件。" tags: ["AI设计", "Figma", "GPT-Image-2", "工作流", "html.to.design"]
AI 画出了设计稿，但你改不了——这条死胡同，有人用 3 分钟绕过去了
你见过一个厨师做出一桌好菜，但自己尝不了吗？
AI 生图工具现在就是这种状态。GPT-Image-2 能在 10 秒内生成一个看起来像模像样的 APP 首页设计，渐变、圆角、卡片布局一应俱全——但它是张 PNG。你没法改字号，没法调间距，没法把蓝色换成品牌色。设计师拿到这张图，要么照着重画一遍，要么截图当参考，本质上跟拿一张照片没区别。
AI 设计的瓶颈，从来不是生成，是编辑。
一条被忽视的捷径
很多人知道 Figma 开放了 MCP 接口，可以让 AI Agent 直接操作画布生成可编辑图层。听起来很美，但实际用起来：
- 部署 MCP Server 需要配置 Node 环境、申请 API Token、处理权限白名单
- 企业版 Figma 的 Admin 控制台可能直接封掉插件运行权限
- API 调用有次数限制，批量生成容易撞墙
这不是捷径，是另一条弯路。
但 Figma 官方在 Chrome 商店上线了一个插件——html.to.design（by ‹div›RIOTS），它做的事情简单粗暴：把任何网页变成可编辑的 Figma 文件。
这个能力恰好补上了 AI 设计工作流里缺失的那一环。
三步走通：从 AI 出图到 Figma 可编辑
① 装插件，开一个开关
从 Chrome 商店安装 html.to.design 插件，登录 Figma 账号授权。有一个容易漏掉的设置：进入 chrome://extensions → 点击插件详情 → 打开「允许访问文件网址」。不开这个，本地 HTML 文件捕获会失败。
② AI 出图 + 代码还原
用 GPT-Image-2 生成你想要的 UI 设计截图。然后把截图丢给 Codex（或任何能写前端代码的 AI），让它用 HTML/CSS 还原这个设计。
这步的关键不是还原得多完美，而是能打开的网页文件就行。Codex、Claude、Cursor 都能做，甚至让 GPT 直接写代码也行。最后你在 Chrome 里打开这个 HTML 文件，确认布局和视觉基本对得上。
③ 一键捕获，粘贴即编辑
在 Chrome 里打开 html.to.design 插件，选择「捕获页面」，等 1-2 秒。然后切到 Figma，随便找个 Page，Ctrl+V 粘贴。
设计稿就变成可编辑的图层了。 文字可以改，颜色可以调，组件可以拆。从一张死图到可编辑设计稿，全程不超过 3 分钟。
为什么这条路线比 MCP 更实用
| 维度 | Figma MCP 方案 | html.to.design 方案 |
|---|---|---|
| 部署难度 | 需配 Node 环境 + Token + 权限 | 装个 Chrome 插件 |
| 调用限制 | API 有次数上限 | 免费版每月有限额，Pro 版 $18/月无限 |
| 企业兼容性 | 可能被 Admin 策略封禁 | Chrome 插件，独立运行 |
| 输出质量 | 直接生成 Figma 图层 | 经过 HTML 中转，图层结构更完整 |
| 适用场景 | Agent 自动化批量生成 | 人工操作，单次高质量转换 |
MCP 方案适合需要 Agent 全自动跑批量的场景。但对于大多数设计师和开发者来说，你一天也就转几张图，手动操作 3 分钟远比折腾半天部署环境划算。
代价清醒：别指望 100% 还原
这条路线不是银弹，有几个现实问题需要知道：
转换精度有上限。 html.to.design 官方文档明确说了，HTML 转 Figma 是 "best-effort" 过程。iframe、伪元素、部分 CSS 动画无法识别。复杂响应式布局可能出现错位，需要手动微调。
免费版有额度。 每月导入次数有限，重度用户需要升级 Pro 版（$18/月或 $10/月按年付）。如果你只是偶尔用用，免费额度够用。
代码还原质量决定最终效果。 AI 生成的 HTML/CSS 质量参差不齐。如果还原的网页本身就歪了，转到 Figma 里也是歪的。这步是整个流程的瓶颈，建议多试几个 AI 工具对比还原效果。
不是所有设计都适合这条路。 插画类、3D 渲染类的设计稿，HTML 还原几乎不可能，这条路走不通。它最适合的是UI 界面类设计——卡片、列表、导航、表单这些结构化布局。
趋势判断：AI 设计的竞争焦点正在转移
2025 年大家卷的是"一句话生成 UI"，2026 年风向变了——谁能把 AI 生成的东西变成可编辑的，谁就赢了。
Figma 在 Config 2026 上发布了 Code Layers、Figma Agent、Motion 三大功能，核心逻辑都是让 AI 的输出不再是"死图"，而是可以直接在设计工具里修改的活图层。Google Stitch、Pixso AI 也在往同一个方向走——在画布里生成，在画布里编辑。
html.to.design 这条工作流，本质上是在官方方案成熟之前的一个"民间补丁"。它不完美，但它现在就能用，而且 3 分钟就能跑通。
等 Figma Agent 和 Code Layers 全面开放后，这条路线可能会被官方方案替代。但在那之前，这是把 AI 设计稿从"只能看"变成"能改"的最短路径。
💡 工具链接
- html.to.design 插件：Chrome 商店搜索 "html.to.design"
- html.to.design Figma 插件：Figma Community 搜索 "html.to.design by ‹div›RIOTS"
- 替代方案：Copy web to Figma（免费无限制）、Codia Web2Figma（AI 增强转换）
暂无评论。