前两期我分享了如何用 GPT Image 2 生成稳定的 UI 设计稿：固定左侧栏和大体风格，生成很多次都保持一致，同时不会抑制模型的创造力。
这一期讲下一步：怎么把生成好的设计稿图片还原成 HTML 代码。上一期有同学在留言里说，设计稿做出来了，但自己复现的效果不好。
哪些元素代码写不出来
现在的 AI 模型把设计稿复现成 HTML，靠的就是多模态能力：通过视觉识别查看图片里的布局、配色和元素大小，再转成 HTML 代码，这个过程没有什么玄学。但有一些元素它很难真正复现出来。
我用一个 SaaS 平台的空状态页面设计稿来说明。
这张页面里大部分元素可以 1 比 1 复刻，但左上角的 Logo 和中间的空状态插画是代码写不出来的。传统开发流程里，这些图本来就是设计师单独提供的素材。
针对这个问题，我这两天把之前写的一个 Skill 优化了一下。先看效果：这是用 GPT-5.5 复现出来的页面，还原了大约 90%，大致布局一致，Logo 和空状态插画也和原稿一样。
SaaS 后台这个场景还算简单。再看一张 Landing Page 设计稿，同样是 GPT 生成的。
这张稿子难的地方更多：Logo 没法生成，hero 区域右侧的插图没法生成，装饰性的流线用 SVG 画比较困难，还有很多第三方厂商的图标也没办法让代码画出来。这是优化后的 Skill 复现出来的效果，这些元素全部分离出来并放回了页面。
剩下的布局、文字、卡片这些部分，让代码不断微调，怎么样都能接近原稿。
素材分离的流程
这个 Skill 的思路是：让 AI 自己识别图片里哪些元素代码实现不了，把它们分离出来单独处理。我把流程整理成了一页说明。
整个流程分六步：
- 拿到原始设计稿，记录画布尺寸；
- 分离元素，判断哪些用代码实现、哪些属于素材，比如品牌符号、插画和带微妙质感的图形；
- 先用代码把页面骨架搭出来；
- 对素材区域做局部裁图，再通过图生图生成干净的单个素材；
- 把生成好的素材放回原始页面；
- 后验校验，对比原稿逐项修正。
局部裁图这一步不需要裁得很精确。现在的 AI 生图模型一致性已经很强，即使裁出来的图带一些边缘的无关信息，图生图也能去掉；也可以把整张图交给它，说明要保留哪一部分。
以刚才的 SaaS 页面为例，它会把其他 UI 都用代码实现，然后把空状态插画和 Logo 提取出来，各自单独调用一次图生图。
一张完整设计稿里有两个素材，就要单独生成两次图。这一步没办法避免，因为直接从设计稿里把图截出来是很糊的。
Landing Page 右侧的插图也是同样的处理方式，但我最开始生成的是一张带绿幕的图。
为什么要带绿幕：目前只有 OpenAI 官方的调用方式可以生成带透明通道的图，其他渠道都没办法直接生成完全透明背景的图。用第三方渠道时，先生成绿幕图，再由 Skill 里的一个 Python 程序把背景抠掉。抠出来的图完全看不出痕迹。对于 Logo 这种比较细的线条，就不抠绿幕了，让它直接生成白底图，同样能轻松地从背景里剥离出来。
使用这个 Skill 时不需要关心这些过程。它识别完图片之后，自己就知道哪些素材需要单独图生图、用哪种方式抠图。
后验校验机制
AI 生成素材、把 HTML 写出来、把图片填进去之后，还需要让它自己判断做得准不准确。字重比原稿重了很多、文字换行和原稿完全不符，这类问题代码判断不出来，AI 自己也发现不了，最好的办法还是让它通过图片去对比。
这里有两个机制。一个是把原始图片和实现截图放在一起左右对比，让 AI 自己查看偏差，比如右侧黑色更深、字重更重，只要关注点落在这个位置，它还是能够发现的。另一个是把两张图去色后标成红色叠在一起，对比整体布局偏差：如果元素完全错位，说明实现出来的页面和原稿差距比较大。
这一步需要把实现的网页截图，所以电脑上要安装 Agent Browser 这一类的自动化浏览器工具，这些知识我也放进了 Skill 里。另外，对 AI 模型的视觉理解能力不能要求太高，总有一些它视觉上看不出来的点，这种时候只能我们用文字向它描述，或者把对应区域的图裁出来单独给它。
Codex 的内置生图工具
还有一个变化：Codex 现在自己带有生图工具，不需要配置任何外部生图平台，它就能直接生成图片，用的模型就是 GPT Image 2。
我对比过，同一个需求用外部的 GPT Image 2 生成和用它内置工具生成，效果是一致的。所以现在在 Codex 里使用这个 Skill，它不会主动调用外部平台，而是优先调用本地的内置工具，一整套流程都在 Codex 内部完成。
安装方式
这次更新还增加了一个新的 reference，就是前面讲的如何把设计稿还原成 HTML 的完整知识，AI 读完之后就知道怎么分离和处理素材。
仓库是 oil-oil/draw-ui，包含生成 UI 设计稿和把设计稿还原成 HTML 两部分能力。安装命令：
npx skills add oil-oil/draw-ui
也可以把仓库地址直接发给 Agent，让它自己安装。