用 AI 生图模型做 UI 设计稿，在视觉创意和排版构图上往往比直接让大模型写代码更有灵气。但在上一期分享了 GPT Image 2.5 的设计效果之后，很多同学在评论区问了同一个问题：生图模型生成的只是一张静态图片，我们能不能把它真正还原成可交互的前端代码，具体又该怎么落地？
先给出明确的结论：完全可以，而且能够做到很高的还原度。
下面这张图就是我基于前一期 GPT Image 2.5 生成的宠物俱乐部设计稿，用代码真实还原出来的网页效果。它不再是一张死图，页面里的导航、按钮和卡片都可以正常交互，无论是默认视口还是缩小页面比例，排版和原始设计稿几乎一模一样。
再看版式更复杂的狼人杀官网设计稿以及高密度的游戏内部 UI。还原后的狼人杀网站完整保留了首屏暗黑插画、斜切过渡区域与三列角色特性卡片的比例关系；而包含大量异形边框和插画图标的游戏 UI，虽然因为部分手绘装饰难以用纯 CSS 复刻而存在细微差异，但整体界面依然干净精致，完全达到了可用水准。
要把一张静态的 AI 设计稿变成这样高还原度的真实代码，只把图片丢给大模型说一句「帮我写出来」是不够的，中间需要拆解成四个具体环节来配合完成。
第一步：用视觉识别拆解布局与响应式规则
AI 将设计稿转化为代码的基础，是通过多模态视觉识别去理解整张图片的结构。把设计稿发给视觉理解能力强的模型（如 GPT-6 Astra），让它分析页面的具体实现，模型可以详细拆出顶部导航栏、首屏 Hero 区域、三列服务卡片、步骤说明和底部 CTA 等模块，并给出字体风格、手写体点缀、大致边距以及色号。
但在实际还原时，如果只让模型照着单张图片写死像素宽度，做出来的网页在真实宽屏显示器上往往会把背景也一起限宽，或者让字号和间距跟着屏幕机械缩放。因此，这一步最核心的是让模型从静态画稿中推断出「网页布局规则」。
如上图所示，通过观察设计稿里顶部 Logo、首屏文案、服务标题和第一列卡片的左边缘，可以发现它们都落在同一条稳定的左对齐线上（在 1024 像素宽的原稿中大约位于左侧 60 像素处）。明确了「背景全宽铺满、内容区居中限宽」的规则之后，AI 编写出来的 CSS 才能既保留原稿的构图层级，又符合真实桌面网页的响应式规范。
第二步：局部裁剪加图生图，重绘高清视觉素材
光靠视觉识别写布局还解决不了素材问题。设计稿里首屏的宠物狗、服务卡片里的洗护照片以及底部的插画，都是直接画在整张 UI 图里的。如果直接从 1024 像素宽的设计稿里把局部小图抠出来塞进网页，放到高分屏上就会非常模糊，而且首屏宠物狗身上还压着文字、按钮和装饰线条。
为了拿到干净、高清的独立视觉资产，我们需要借助生图模型的「图生图」能力。具体做法是让 AI Agent 先把设计稿里的目标区域（例如首屏右上角的宠物狗或单张服务配图）精确裁剪出来，将这张局部图作为参考图传给生图模型，要求它去掉上面遮挡的 UI 按钮与文字，单独重绘出一张完整的高清主体图片。页面里的其他插画和照片也按同样的流程批量提取，这样真实网页里挂载的图片就全部是清晰独立的素材文件。
第三步：用程序脚本测量精确数值，替代肉眼估算
大模型的视觉识别虽然能看懂整体布局，但在估算具体像素尺寸、卡片间距和背景色号时，往往只是凭感觉猜测，容易出现几像素到十几像素的偏差。
为了让代码还原的数据更准确，我们可以把「看图认区域」和「算具体数值」分开：先让模型标出需要测量的区域框，再调用专门编写的 Python 脚本（如 measure_reference.py）去读取像素数据。
以宠物网站的「三种服务」模块为例，脚本可以直接算出三张照片框的尺寸是 285 × 235 px、两处间距分别是 23 px 和 25 px、背景采样区的颜色中位数是 #F5F3EC。把这些精确测量出的数值交给 AI 去写 CSS 样式，初版代码的还原度就会比纯靠视觉盲猜高出一大截。
第四步：生成像素差异热图，驱动多轮自动校准
写出初版网页后，如果直接把原始设计稿和浏览器渲染截图并排发给 AI，让它自己找不同，模型往往看不出细微的比例和位置偏差。
针对这个问题，我在工作流里加入了像素差异热图比对（compare_mockup）：先用浏览器自动化工具截取当前网页的局部或首屏画面，再通过程序将它与原始设计稿叠底计算，输出一张红白对比的像素差异热图。
在这张差异热图里，凡是位置、字号或比例没对齐的地方都会被醒目的红色标出——比如一眼就能看出还原页面里的宠物狗头部轮廓比原稿偏大。AI Agent 拿到这张热图后，就能清楚定位到偏差所在，自动去调整图片缩放比例或文字边距，再重新截图、重新生成热图比对。经过几轮自动化循环校准，最终得到的网页就能和设计稿严丝合缝地对上。
实际开发中的边界与工具封装
当然，看待这套还原流程也需要保持客观：如果是结构规整的官网落地页、活动页或常规应用界面，它可以还原得非常到位；但如果设计稿里包含复杂的 3D 场景或重度手绘异形界面，仍然无法靠前端代码做到 1:1 复刻。
另外在实际项目开发中，我们也不必每次都机械追求 100% 的像素级重合。真实上线网站的视口往往比设计稿更宽，有时我们也会根据实际业务需要把顶栏调小一点，或者增删几个模块。AI 生成的 UI 设计稿最大的价值，是帮我们快速确立一套好看的视觉规范、配色方案和版式创意；有了这个底子，后续再让 Coding Agent 按需微调就会非常省力。
为了让这套流程更容易复用，我把前面提到的布局分析规则、图生图提素材流程、尺寸色值测量脚本以及像素差异热图比对工具，全部打包放进了开源 Skill draw-ui 中。如果你觉得每次手动向 AI 描述这些步骤太繁琐，直接安装这个 Skill，就能让 Agent 按标准工作流把设计稿还原成 HTML 页面或接入真实前端工程。