最近给客户做了几个 HTML 展示页。

设计稿图片是 AI 出的，最省事的做法：直接丢给模型，让它照着图写成 HTML。

你大概率也尝试过。

也大概率，翻过车。

设计稿看着像真产品。

代码一跑起来，立刻像十年前的模板站：字重发闷，间距散开，插画糊成一片，logo 还变形。

这时候很多人会怪模型代码能力不行。

我更倾向于另一个判断：问题通常出在任务拆分上。

你让模型一次完成三件事：读懂页面结构，复刻视觉样式，还要临时画出复杂资产。

前两件它能做得不错，第三件很容易把页面拖垮。

核心认知：UI 还原要拆成三层看 —— 结构、样式、资产。

结构和样式交给 HTML/CSS。
logo、插画、产品图、3D 视觉这类东西，单独当成图片资产处理。
后面再通过截图、对比、修正，把误差一点点压下去。

这套流程跑起来后，页面会明显少一点"AI 糊出来"的味道。

1. 先把任务拆开

很多人给模型的指令只有一句：

根据这张图生成 HTML。

这句话太宽了。

它同时包含三类任务：

• 识别页面结构
• 复刻视觉样式
• 生成复杂视觉资产

模型看图、认布局、估字号、写 flex/grid，都还可以。

它真正容易出问题的地方，是把本该作为图片处理的东西，硬塞进代码里。

比如设计稿中间有一张空状态插画。

你让模型照图写 HTML，它可能会用 CSS 画几个圆、几段渐变，或者塞一段抽象 SVG。

最后得到的东西，轮廓像插画，细节像临时拼出来的几何块。

模型未必笨。
只是你把"生成素材"的任务塞进了"写代码"的通道。

更合理的做法，是提前告诉它：

• 哪些元素要写成代码
• 哪些元素只需要留位置
• 哪些元素后面单独生成成图片

这一层拆清楚，后面才有得调。

2. SaaS 空状态页面：哪些该写代码，哪些该做资产

拿一个 SaaS 空状态页面看。

左侧栏、菜单、顶部区域、卡片、按钮、文字层级、空状态容器 —— 这些都适合用 HTML/CSS 复刻。

它们的本质是布局、颜色、字号、间距、边框和圆角。

但有两类东西不要硬画：

• 左上角的 logo
• 中间的空状态插画

它们属于视觉资产。

如果硬让模型用 CSS 或 SVG 画，结果大概率会变形。

你想要的是 logo，它给你一个"有点像 logo 的符号"。

你想要的是插画，它给你一坨颜色接近的形状。

我一般会这样处理：

1. 先把整体 HTML 搭出来，logo 和插画的位置用灰色占位块放着
2. 单独裁出 logo 和插画区域，作为参考图
3. 用图生图生成高清资产，处理好透明底，再替换回页面

判断法则：把它拿掉以后，页面结构还成立吗？

logo 拿掉，导航栏还是导航栏。
插画拿掉，空状态容器还是空状态容器。
它们是贴上去的视觉层，不属于页面骨架本身。

这类东西，别交给 CSS 硬撑。

3. Landing page 的右侧插画，要单独处理

再看 Landing page。

右侧那张大插图，很多人会直接从原始设计稿里裁下来用。

刚放进去好像还行，一放大就糊。

原因很简单：原图是一整张页面，分辨率分散在整张画面里。

插画只是其中一块。

你裁出来的局部，本来就达不到高清素材的标准。

不要对着低清局部继续放大。
放大只会把模糊放得更大。

更好的链路是：

1. 局部裁图：把插画所在区域裁出来，当参考
2. 图生图重画：保留风格、构图和主色，重新生成一张高清插画
3. 背景处理：如果插画要叠在页面背景上，就做透明底

透明底有两种办法：

• 接口支持 alpha 通道：直接生成透明背景 PNG，省事
• 第三方渠道不支持透明通道：用绿幕。让模型生成纯绿色背景的插画，再用程序把绿色扣掉

逻辑不复杂：遍历像素，只要绿色明显高于红色和蓝色，并且超过阈值，就把这个像素的 alpha 设成 0。

from PIL import Image
import numpy as np

img = Image.open("asset_green.png").convert("RGBA")
arr = np.array(img)
r, g, b = arr[:, :, 0], arr[:, :, 1], arr[:, :, 2]

# 绿色明显占主导的像素，判定为背景，置为透明
mask = (g > 100) & (g > r * 1.4) & (g > b * 1.4)
arr[:, :, 3][mask] = 0

Image.fromarray(arr).save("asset_transparent.png")

阈值要看实际图片调。

边缘有时还要羽化，不然会出现硬边。

绿幕不好看，但它适合后处理。

白底也能扣，遇到浅色插画更容易误伤。

很多 UI 还原翻车，问题不在布局，而在资产。

4. 完整流程：6 步跑一遍

前面讲的是判断。

落到执行，可以按这 6 步走。

4.1. 第 1 步：视觉拆解

先别写代码。

让模型只看图，输出一份页面地图。

先只做拆解，暂时不要结果。

可以这样问：

仔细观察这张 UI 设计稿，不要写任何代码，只输出以下信息：

1. 页面整体布局：几栏、各栏占比、主要区域划分。

2. 从上到下、从左到右的组件清单。

3. 配色：主色、背景色、文字色、强调色，给出近似 HEX。

4. 字体层级：标题、正文、辅助文字的大致字号和字重。

5. 间距和圆角风格：紧凑还是宽松，大圆角还是小圆角。

6. 复杂视觉资产：logo、插画、产品图、3D 图等，需要单独生成，别用代码画。

做完视觉拆解，你手里会有一张施工图。

后面每一块交给谁，清楚很多。

4.2. 第 2 步：资产分离

根据页面地图，把元素分成两堆。

代码负责：

• 导航
• 按钮
• 表格
• 卡片
• 输入框
• 普通图标
• 文字排版
• 分割线
• 标签

图片负责：

• logo
• 复杂插画
• 产品截图
• 人物图
• 3D 图
• 品牌主视觉
• 空状态图

分类准则：拿掉它，页面结构还成立吗？

成立 → 多半是资产。
不成立 → 多半是结构。

这里分错，后面会一直跑偏。

模型硬画资产，页面会变廉价；把普通 UI 也拿去生图，又会增加抠图和替换成本。

4.3. 第 3 步：先搭 HTML 骨架

第一版不要追像素级。

先把布局骨架搭出来：整体用 flex 或 grid 定比例，各区域按原图排列摆上，填入基础颜色、字号、行高和圆角。

资产位置用灰色占位块标出来，尺寸也写上。

这版只看结构：左右比例对不对，内容顺序对不对，主要区域有没有错位。
骨架歪了，细节调再多也没用。

4.4. 第 4 步：生成并替换资产

把第 2 步分出来的资产，一个个走"裁参考图 → 图生图重画 → 处理透明底"的流程。

生成时要带风格约束，比如：

扁平插画风格，主色 #4F46E5，线条简洁，背景纯绿色，用于后续抠图。

资产做好后，再替换掉灰色占位块。

这里要按占位块尺寸摆，别让图片把布局撑开。

很多页面看着廉价，根源常常在资产：插画分辨率低、logo 变形，或者资产风格和页面不在一个系统里。

4.5. 第 5 步：浏览器截图

把 HTML 放进真实浏览器渲染，然后截图。

用 Playwright 就行，重点是视口宽度要和设计稿一致。

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": 1440, "height": 900})
    page.goto("file:///path/to/index.html")
    page.screenshot(path="render.png", full_page=True)
    browser.close()

一定要看截图。
代码里看不出字重是否发闷，也看不出行高是否太松。
按钮宽了 8px，插画低清，阴影太脏 —— 这些都要等渲染后才露出来。

4.6. 第 6 步：对比和修正

把原始设计稿和浏览器截图放在一起看。

两种办法可以一起用：

• 左右并排：让模型逐区域指出差异
• 叠加差异图：把两张图缩到同尺寸后半透明叠加，或者用 ImageChops.difference 算像素差

对比的价值，是把问题变得可定位。

不要只说"不像"——这句话没法执行。

你要补具体描述：

• 标题字重太高，改成 medium
• 这里换行位置不对，应该一行放下
• 右侧插图偏大，缩到 80%
• 两个按钮之间间距太松，收窄到 12px

描述越具体，模型改得越准。

继续修 → 继续截图 → 继续对比。
质量就是在这个循环里出来的。

5. 复现不像，通常落在 6 类误差里

页面不像，不要急着重写。

先归类。

AI 容易发现大错位，但经常忽略廉价感。

廉价感通常来自字重、间距、密度和资产质量。
这几样需要人盯。
你不指出来，它可能会觉得已经差不多了。

6. 后验机制才是质量来源

AI 写完代码后，并不知道自己渲染出来像不像。

在代码层面，很多问题是隐形的：字重偏高，行高偏松，按钮宽了几个像素，插画分辨率不够。

这些都要等页面跑起来才看得见。

流程里一定要有后验机制：

渲染 → 截图 → 对比 → 修正

第一版代码只是起点。

真正的还原质量，来自后面的反复校准。

别把 UI 还原当成一次性生成任务。
把它当成一轮又一轮的误差收敛。

7. Skill 自动化了哪些重复动作

上面这套流程，手动跑一遍很烦。

裁图、图生图、抠图、替换、截图、拼对比图，再把结果喂回模型。

做一次还行，做多了就想把它封起来。

我把它整理成了一个 Skill，主要自动化这些动作：

• 识别页面里哪些资产需要单独生成
• 对局部区域做图生图
• 对绿幕或白底资产做抠图
• 把资产替换回 HTML
• 用浏览器截图
• 生成左右对比图和布局差异图
• 让模型基于截图继续修正

后面我会整理好放到 GitHub 开源分享给大家。

Skill 没有魔法。
它更像一套流程外壳，把重复劳动包起来。
流程没想清楚，工具只会更快地产出一版粗糙页面。

8. Codex 内置生图会让这件事轻一些

最早我以为，图生图环节必须接外部渠道。

后来发现，Codex 里已经内置了生图工具。

在 Codex 环境下，可以优先用它自己的工具生成图片，不一定要额外配置外部平台。

具体工具名以发稿时实际可用的为准，这里不写死版本号。

这点不改变方法，只是让资产处理少折腾一点。

9. 今晚可以直接用的检查清单

如果你手上正好有一张 AI 生成的 UI 设计稿，先别急着问"帮我生成 HTML"。

先问这 5 个问题：

能回答这 5 个问题，复现效果通常会好很多。

因为你不再赌模型一次猜对。
你是在带着它校准。