一、为什么 AI 出的图不能直接进 UI
AI 出图是独立构图：每张图各画各的，它不知道旁边还有 19 个图标要摆成一排。于是问题高度一致：
- 画布尺寸不统一：512 和 380 混着来，进引擎后要逐个手动改。
- 主体占比和重心乱飘：有的撑满画布、有的只占中间一小块，摆进格子一眼看出是拼的。
- 边缘脏色：透明图边缘一圈像素的 RGB 混着原背景色（常见一圈白雾）。在白色预览页面上完全看不出来，放进深色 UI 就是一圈灰白毛边。
- 只有一档尺寸：@3x 缩到 @1x 会糊，@1x 放大到 @3x 更糊，两边的设备总有一边是糊的。
- 体积失控：一张 1024×1024 的 PNG 动辄 2–4 MB，几十个图标就能把包体顶上去。
浏览器和多数抠图工具保存像素时，RGB 通常已经和背景做过混合——越透明混得越多。所以「透明」的地方 alpha 是 0，但 RGB 可能还是白的。放进深色 UI 时会先露出一圈灰边，这就是"脏边"，必须专门修，只靠去背解决不了。
二、五步流水线
-
去背：拿到干净的透明通道
纯色底 / 绿幕用快速抠图，关键参数是容差：默认 18 太宽，会把绿色衣服一起吃掉，绿幕场景建议 6。复杂画面（毛发、半透明纱）用 AI 抠图，它会跑在独立线程里，不会把页面卡住。火球、魔法阵这类半透明光晕别用普通抠图——那样光晕会被截成硬边，要用按色距算连续透明度的做法。
-
规整：整批按同一套规则重算
这一步是「统一」的来源。要点：按视觉重量而不是外框统一大小（细剑和方盾缩到看起来一样重，而不是外框一样大）、按重心居中（细长物体不再显偏）、修掉边缘脏色（只改 RGB 不动 alpha，形状完全不变）、再补统一描边与投影。整套图共用一套参数、逐张独立计算，这才是"一套"。
-
分类型：容器走九切，图标走多尺寸
这是最容易搞混的一步。面板、按钮、对话框、进度条这类"容器"要做九宫格，一张图适配所有尺寸；图标、logo、角色头像不能九切（切了会把中间拉变形），只能等比缩放导出多档。判断标准很简单：有边框、中间是纯色或规则纹理 → 九切；有具体形象 → 缩放。
-
导出：一次出齐所有档位
从最大档的源图开始往小缩（宁可源图偏大，也不要从小的往上放大）。常见组合：iOS 三档（1x/2x/3x）、Android 五档（mdpi 到 xxxhdpi）、favicon/ICO 一次出多个尺寸、小游戏纹理链按 2 的倍数递减。具体对照表见另一篇。
-
压缩：按内容决定，别一刀切
UI 图压缩的机会比想象中大，但要看内容：色块多、渐变少、规则纹理的图，转 WebP 常常能省 70%–90%，而且拉到 quality=1.0 走的是无损 WebP，纯色/规则内容下比 q=0.99 的有损还小；照片、复杂渐变、带噪点的图收益就小得多。工具会给每张图的节省比例和差异度，先看数字再决定。
一个反直觉的实测结论同一张规则色块图，WebP quality=0.99 是 11632 B，quality=1.0 反而只有 2962 B——因为 1.0 走的是无损通道，对纯色和规则内容极友好。所以单调性只在 1–99 之间成立，跨到 100 会反弹。想要"接近无损"，直接选 100，别选 99。
三、两条常见分支
做像素风 UI
顺序很关键：先降色，再做描边，最后整数倍放大。描边必须做在像素网格上（降色之后、放大之前），否则放大后描边会变成锯齿状的一圈。放大一定要用最近邻，用双线性插补会把 6 色调色板插出 329 种颜色，像素味全没了。
做会动的 UI（按钮流光、图标呼吸）
从视频或录屏里抽帧，再拼成精灵图或 GIF。关键是帧率别贪：UI 动效 12–15 fps 通常就够，帧率翻倍体积也翻倍。抽完帧同样要走一遍上面的流水线（去背→规整→压缩）。
四、收尾清单
- 整批图标的外框极差 ≤ 1.2 倍、面积极差 ≤ 4 倍，摆进格子才看不出拼凑。
- 放到深色背景上检查一遍边缘，确认没有白雾/灰边。
- 尺寸能被 4 整除，图集每个格子外留 2px padding，避免缩放时串图。
- 容器类已设好九切四边内边距；图标类已出齐 @1/2/3x。
- 总包体过一遍压缩，看每张的节省比例和差异度，再决定要不要转 WebP。
常见问题
AI 一次出 20 张，能不能整批处理？
能，而且应该整批处理——"统一"的前提就是共用一套参数。逐张手动调，最后一定对不齐。批量处理都在浏览器本地跑，几十张没问题。
去背之后还要去脏边，两个是一回事吗？
不是。去背决定哪里透明（alpha），去脏边修的是透明像素的颜色（RGB）。AI 出的图即使 alpha 完全正确，边缘一圈的 RGB 也常常混着原背景色，必须单独修。
图片会上传到服务器吗？
不会。帧工坊是纯前端工具，所有处理在你的浏览器内存里完成，图片不经过任何服务器。这也是它能一直免费的原因。
先压缩还是先导出多尺寸？
先导出多尺寸，再压缩。压缩是有损步骤，把它放在最后，才能保证每一档都是从原始最大图重算出来的，而不是"压过一遍再缩放"。