JeecgBoot AI专题研究 | 从一张 AI 界面图到可运行网页与可编辑设计稿，图、代码、Figma 三角互转全流程
一张"好看但没用"的图
GPT Image 2 这一代生图模型画界面的水平，已经到了让设计师都会多看两眼的程度：卡片的阴影层次、图表的配色、表格的行高，乍一看和 Dribbble 上的作品没什么区别。很多产品经理和独立开发者开始直接用它出原型——描述一句"做一个中文 SaaS 后台，左侧导航、顶部四个指标卡、下面是趋势图和订单表"，几十秒就能拿到一张像模像样的界面。
问题也随之而来：它只是一张 PNG。前端没法直接用，设计师没法在上面改间距，业务方说"把这个按钮挪到右边"，你只能重新抽卡，祈祷下一张别把其他地方也改了。图再好看，进不了交付流程，价值就打了折扣。
所以真正要解决的是"出图之后怎么办"。拆开来看，一张 AI 界面图有三个落地方向：
- 变成能跑的 HTML，可以在浏览器里点、可以给人演示；
- 从 HTML 再反向生成 Figma 设计稿，图层清晰，方便设计师二次加工；
- 跳过代码，直接把图变成可编辑的 Figma 文件。
下面这张图就是本文用来演示的素材，是让模型直接生成的一张中文 SaaS 后台界面：
接下来按"图 → 代码 → 设计稿"的顺序，把三条链路逐一走一遍。
三条链路的全景
先给一张总图，免得后面看着看着迷路。三个节点分别是 UI 图、HTML 代码、Figma 可编辑稿，每条边对应一个工具：
- 图 → HTML：交给编码智能体（Codex，或者 Claude Code）看图写代码；
- HTML → Figma：用 Figma 插件 html.to.design 把网页"拍"成图层；
- 图 → Figma：用 Figma 插件 Codia 直接识别图片，生成可编辑节点；
- Figma → 代码（反方向）：通过 Figma MCP 让编码智能体读取设计稿结构再写代码。
链路一：UI 图交给 Codex，生成可运行 HTML
这是最常用、也是最"立竿见影"的一条。做法很直接：把界面图拖进 Codex 的对话框，配一段写清楚约束的提示词，发出去等几分钟。
如果只想要一个纯静态单页，用于演示或评审，可以用下面这段提示词：
请根据这张 UI 截图生成一个尽可能像素级接近的单页 HTML。
要求：
- 使用 HTML + CSS，不依赖外部 UI 框架
- 固定画布尺寸为 1440x1024
- 尽量匹配字体大小、颜色、间距、圆角、阴影
- 所有图标用内联 SVG 或 CSS 近似实现
- 文案必须与截图一致
- 输出完整可运行的 index.html
- 颜色、字号、间距先整理成 CSS 变量，再在样式中引用
如果项目本身是 React + Tailwind 技术栈，希望拿到的代码能直接拆进工程里复用，换成这一段：
请把这张 UI 截图还原为 React + Tailwind 页面。
要求：
- 组件化实现
- 视觉上尽可能接近截图
- 使用 lucide-react 近似图标
- 不要使用图片切片，除非背景图无法用 CSS 实现
- 保持 1440px 桌面布局，并补一个移动端响应式版本
- 先列出拆分的组件清单，再输出代码
两段提示词背后的思路是一样的：把模型最容易自由发挥的地方提前钉死。画布尺寸固定了，布局就不会忽宽忽窄；规定不用 UI 框架，就不会冒出一堆和截图风格不搭的默认组件；规定图标用 SVG 近似，就避免了随手塞一张外链图片。
实际跑下来，后台管理类界面的还原效果相当不错：侧边栏、指标卡、表格这些规整的块结构，Codex 基本能做到"一眼看过去差不多"。但要说设计稿级别的 100% 一致，目前还不稳定——字重差一档、图表曲线形状不同、某个卡片的内边距多了 4px，这类细节偏差几乎每次都有。原因也不难理解：单张位图里并没有"这个间距是 24px"的信息，模型只能估。
顺带一提，这件事不是 Codex 的专利。Claude Code 同样支持直接读图，把截图路径丢给它、配上同样的提示词，也能产出 HTML 或 React 页面。哪个用得顺手就用哪个，提示词基本可以通用。
链路二：HTML 反向转成可编辑的 Figma 设计稿
拿到 HTML 之后，往往还会遇到另一种需求：设计师想在 Figma 里接着调，或者团队要把这套界面沉淀进组件库。这时就需要把网页"倒灌"回设计工具。
最省事的办法是 Figma 插件 html.to.design。把 HTML 部署到一个能访问的地址（本地起个静态服务、或者丢到任意静态托管上都行），在 Figma 里打开插件，粘贴网页链接，选好视口宽度，导入。插件会把 DOM 结构转成 Figma 的 Frame 和图层，文字是真文字、矩形是真矩形，可以直接改。
这条链路的好处是：HTML 本身是结构化的，所以转出来的图层层级比较规整，命名也大致能对应到 DOM 节点。缺点是 Auto Layout 不一定完美，嵌套很深的 flex 布局有时会被拍平成绝对定位，需要设计师再整理一遍。
另一条路是借助 Figma MCP。它本来的用途是让编码智能体读取 Figma 设计稿的结构化数据（节点、样式、变量），从设计稿精准生成代码；配合可写入的 MCP 工具，也能让智能体反过来往 Figma 里创建内容。对于已经在用 Codex 或 Claude Code 的团队，这条路可以把"写代码"和"出设计稿"放进同一个对话里完成。
链路三：Codia 插件，图片一步到 Figma
如果压根不需要代码，只是想让那张 AI 图变成能编辑的设计稿，那就直接用 Figma 插件 Codia：
- 在 Figma 文件里打开插件面板，搜索 Codia，选择绿色图标的那个；
- 点"上传图片"，选择 AI 生成的界面图；
- 点"到 Figma"，等待识别完成。
几十秒后画布上会出现一份可编辑的界面：文字可以改，色块可以换颜色，图标和卡片也被拆成了独立节点。把原图和生成结果并排放在一起比对，整体布局和配色几乎一致，细节上（比如图表里的折线、个别图标）会有些出入，手动修一下就行。
它本质上是"视觉识别 + 图层重建"，相当于把链路一和链路二合并成一步，适合赶提案、赶评审，先要一份能改的稿子再说的场景。
三条链路怎么选
把三条路放在一张表里对比：
| 链路 | 输入 | 输出 | 还原度 | 适用场景 | 成本 |
|---|---|---|---|---|---|
| 图 → HTML（Codex / Claude Code） | 单张 UI 图 + 提示词 | 可运行的 HTML / React 代码 | 中高，规整的后台页效果好，像素级细节不稳 | 快速 Demo、交互演示、给前端做起点 | 智能体订阅或 API 调用费，单页几分钟 |
| HTML → Figma（html.to.design） | 可访问的网页链接 | Figma 图层 | 高，几乎等于网页本身的样子 | 页面已经有了，需要补设计源文件、沉淀规范 | 插件有免费额度，超出按次或订阅付费 |
| 图 → Figma（Codia） | 单张 UI 图 | 可编辑 Figma 稿 | 中高，布局配色准，图表和图标需修 | 只要设计稿、不要代码；赶提案 | 插件有免费额度，多用需订阅 |
一个简单的判断标准：最终交付物是代码，就走链路一；最终交付物是设计稿，就走链路三；两样都要，就先一后二。先一后二的好处是代码和设计稿同源，后面改起来不会两边对不上。
提高还原度的几个技巧
单张 AI 图天然信息不足，想让模型"抄"得更准，就要主动把缺失的信息补上：
- 先给 design tokens。 主色、辅色、背景色的色值，字号阶梯（12/14/16/20/24），圆角（8px）、阴影参数，提前写进提示词。模型不用再从像素里猜颜色，整体色调会稳很多。
- 先定栅格和字号。 明确"侧边栏 240px、内容区 24px 内边距、12 列栅格、卡片间距 16px"，布局类偏差能少一大半。
- 分区域截图。 一整张 1440×1024 的图信息密度太高，可以把侧边栏、指标卡区、图表区、表格区分别截出来，一块一块还原，最后拼装。每次只关注一块，细节准确度明显提升。
- 先列组件清单，再写代码。 让模型先输出"这个页面由哪些组件组成、每个组件有哪些状态"，确认没问题再动手写。这一步相当于让它先做一遍设计走查，漏组件、错层级的情况会少很多。
- 能拿到 Figma 源文件就别用图。 如果目标真的是"一模一样"，设计稿通过 Figma MCP 提供的精确数值，永远比从图里估出来的可靠。
别忽略的坑：AI 图里的"像但不真"
这是最容易被忽视、也最容易在评审时翻车的地方。
生图模型画的是"看起来像界面"的图，而不是"按规范设计的界面"。图里的中文文案可能有错别字、生造词，或者数字前后对不上（比如订单总数和分页数矛盾）；图标看上去像某个常见图标，实际上是模型拼出来的四不像，在任何图标库里都找不到。
转成代码或 Figma 之后，这些问题会被原样继承下来，甚至因为"已经是正式产物"而更难被发现。建议转换完成后专门做一轮人工校对：
- 文案逐条过一遍，把占位数据换成真实或合理的示例数据；
- 图标统一替换成项目实际使用的图标库（lucide、Ant Design Icons 等），不要保留模型画的近似 SVG；
- 检查颜色对比度和字号，AI 图为了好看经常用浅灰小字，真实使用时可读性不够。
对低代码开发意味着什么
这套流程对低代码团队也有现实意义。以往需求沟通最费劲的环节是"业务方说不清想要什么样"，现在可以先用 AI 出几版界面图，转成 HTML 让业务方在浏览器里点一点、挑一版，确认之后再到 JeecgBoot 里用 Online 表单或设计器把真正的页面搭起来。原型阶段用 AI 快速试错，落地阶段用低代码保证数据、权限、流程这些"看不见的部分"可靠，两者各管一段，返工会少很多。
总结
AI 生成的 UI 图，本身只是起点。用 Codex 或 Claude Code 把它变成 HTML，就有了能演示的页面；用 html.to.design 把 HTML 导回 Figma，就有了能沉淀的设计源文件；用 Codia 直接把图转成 Figma，则适合只要设计稿、追求速度的场景。三条链路互相补充，组合起来就形成了"图、代码、设计稿"之间的闭环。
同时也要清楚它的边界：单张位图缺少精确数值，像素级还原目前还做不到稳定；图里的文字和图标需要人工把关。把 design tokens、栅格、组件清单这些"规范信息"提前喂给模型，再配合一轮人工校对，才能让 AI 出的界面真正走进交付流程。
本文为 JeecgBoot AI 专题研究系列文章。
