本文由 AI 协助生成:素材、实测数据与个人观点来自本人,行文与结构由 AI 参与整理。
博客右下角那只小人,是我熬了一晚上调出来的。
过程不算优雅:一开始自己拿 SVG 手绘,画到第三版发现自己画的是”倒着的半圆”;后来改走 AI 出图 + 像素处理,又被”白边””错位””眨眼闪白”轮番教育。最后能跑起来,靠的不是某个神奇的提示词,而是把工程约束提前写进提示词里。
这篇就当个备忘,顺便把踩过的坑记下来。
一、提示词的四段式
一套能用的桌宠素材,我最后拆成四个独立需求:
| 用途 | 关键约束 |
|---|---|
| 三视图 | 正面/侧面/背面并列、同比例、透明背景 |
| 正面自然垂手 | 手臂 15–20°、腋下有缝、禁止 T-pose |
| 转身序列 | 5 帧 0°→90°,角度逐帧递增、脚底同线 |
| 行走循环 | 4 帧、90° 侧视、步幅小且自然 |
抽一个看,正面垂手那条的核心长这样:
1 | 二头身 Q 版小人,正面平视,透明背景(alpha 通道,无任何背景元素)。 |
配套的负面词才是真正干活的部分:
1 | white background, solid background, checkerboard pattern, ground shadow, |
经验:正面/负面要成对写。 你只写”手臂自然下垂”,它大概率给你一个标准 T-pose 设定图;你必须明确写”不要 T-pose、手臂不要贴住躯干”。提示词不是许愿池,是需求文档。
二、四个我踩过的坑
坑 1:透明背景 ≠ 白底
“透明背景”这个词模型经常听不懂,直接给你一张纯白底。白底也能用,但你得自己抠——而如果角色是白发 + 白袍,抠图会把人抠出白边,边缘全是混了背景色的像素。
我的解法是”最近不透明色扩散”:对半透明边缘像素,用邻近的实色去替换它,而不是简单调 alpha。处理前后边缘平均色从 (252,247,250) 收敛到 (229,225,229),才勉强看不出白圈。
坑 2:两次生成不可能像素一致
这是最贵的一课。
我先出了一张正视图,又出了一张同角色的闭眼图,兴冲冲想拿闭眼图做眨眼帧——结果两张图腿长不一样。按脸对齐,身体错位;按轮廓对齐,脸被拉伸变形。用户一眼就看出来”高了半条腿”。
结论很简单粗暴:AI 生成的两次结果,不存在”同一张画的两种状态”。 想要眨眼,别指望重新生成,去用 img2img / 局部重绘(inpaint),只重绘眼部,其余锁死。
坑 3:配准锚点选哪个
如果只能硬凑两张图,锚点选择决定成败:
- 按眉毛对齐 → 半径拉变形(眉毛位置在不同生成里最不稳定)
- 按轮廓 IoU 对齐 → 全图最像,但身高会被宽度/发量带偏
- 按眼球中心对齐 → ✅ 眼睛对得最准,而且只替换眼部时,身体根本不需要对齐
最后一版的做法:只替换眼睛,掩膜 = 底图眼球轮廓的凸包 → 外扩 3px → 羽化 1.5px。验收标准写得死死的:
掩膜之外,与底图的逐像素差异必须为 0。
实测 0 像素,这样身体、头发、眉毛在结构上不可能被动到。
坑 4:眨眼闪白
第一版眨眼是直接换 <img> 的 src。结果每次眨眼,画面会白闪一下——因为新图还在解码时,元素是空的,页面底色直接透出来。
改成两张图叠放,只切 opacity,并且闭眼帧提前预载,问题消失。
顺带一个反直觉的坑:CSS 透明度变化在 headless 截图里根本抓不到(连把 src 换成纯红都不刷新画面),只能去读 getComputedStyle().opacity 采样峰值来验证。所以我前半程的”我以为改好了”有一半是假的。
三、上线之后还有一层
素材改完不等于用户能看到新版本——CDN 对 /images/* 常见是 7 天缓存,同名文件覆盖不会生效。这次我连续三次”修好了”其实都卡在这。
最后给所有素材 URL 加了内容指纹:
1 | var ASSET_V = '?v=20261030t'; |
四、一句话总结
提示词负责”生成得像”,工程负责”用得起来”。
AI 出图现在很能打,但它不知道你要做的是171×310 像素、带透明通道、能叠在网页角落、每 5 秒眨一次眼的小人。这些约束,得由你翻译成人话写进提示词,剩下的部分——抠图、配准、掩膜、缓存——才是真正决定”能不能上线”的地方。
完整的实现参数我记在站点的 BLOG_GUIDE 4.6.2 里了,万一以后忘了怎么调,翻那份就行。
五、附录:可直接抄的提示词
下面四份是我实际跑通的那一套,按「一次只让模型干一件事」的思路拆开的。
说明:具体到哪个角色、什么发色服装、要不要做某个特殊动作,这些和我的私活强绑定的细节我都用
xx代替了——留白的地方换成你自己的设定即可,结构不用动。任务描述越具体(比如“给我来一段跑步”“拿剑摆个姿势”),模型越容易崩,这也是我把它们虚化的原因。
5.1 三视图设定稿
1 | 二头身 Q 版小人,角色三视图设定稿:正面 / 正侧面 / 背面 并列排布在同一张画布上, |
1 | white background, solid background, checkerboard pattern, ground shadow, |
5.2 正面自然垂手(主形象)
1 | 二头身 Q 版小人,正面平视,透明背景(alpha 通道,无任何背景元素)。 |
1 | white background, solid background, checkerboard pattern, ground shadow, |
5.3 转身序列(5 帧)
1 | 同一角色,xx 视角的转身序列,5 帧横向等距排列:0°(正面)、22.5°、45°、67.5°、90°(正侧面)。 |
1 | only one view, duplicated identical frames, front view repeated, inconsistent scale, |
5.4 行走循环(4 帧)
1 | 二维游戏行走循环,4 帧横向排列,90° 正侧视角,同一角色。 |
1 | run, sprint, jump, tilt body, motion blur, duplicated frames, |
几句话补充:
- 三视图和垂手正视图是刚需,直接决定后面抠图和配准的难度;转身、行走这两组是加分项,做不出来手绘补也行。
- 帧数越多越容易崩(5 帧里出现两张一模一样的视角是家常便饭)。真要序列帧,我的做法是一帧一图 + img2img 锁形象,别指望一次出整条序列。
- 每条正面词都要配一条负面词,尤其是
T-pose和arms merged with torso这两句,少了就等着收 T 字怪。