企业官网建设流程全解析

page-mascot 是一个让吉祥物跟随光标转头、点击时眨眼的交互式页面组件，每个角色由两张 3×3 精灵表驱动——而精灵表必须带真正的透明背景，用 AI 生成时却经常得到一团灰白棋盘格。本文讲透棋盘格的来龙去脉、background: transparent参数的正确用法，以及一套可直接复用的验证方法 🎯

为什么吉祥物必须站在"真透明"背景上

page-mascot 的每个角色由两张图组成：九种头部朝向 + 九种点击表情，组件靠切换background-position在两张表之间跳转，点击瞬间角色绝不能"跳一下"。

要做到"粘在页面任何底色上"，两个前提缺一不可：

1. 源图是带 alpha 通道的 PNG，背景真正透明；
2. 组件容器自身也是透明的——src/mascot.tsx 中挂载<button>时显式设置了background: 'transparent'，这样页面里露出来的就只有角色本身的 alpha 区域。

背景不真透明，角色四周会多出一块白底或灰格，放在深色页面上格外扎眼。下这张是仓库中狐狸角色的源图，空白处都是真实 alpha：

棋盘格真相：模型在"假装"透明

这是 page-mascot 踩坑后写进文档的最重要结论（见 design-rules.md）：透明度是图像 API 调用的属性，不是提示词能求来的。

在gpt-image-2.5上做的十图对照实验（5 个提示词变体）结果非常整齐：

也就是说，哪怕你在提示词里写上 "PNG WITH A REAL ALPHA CHANNEL. The background must be genuinely transparent, not white" 这样的大写强调，只要调用没开透明参数，模型就"画"一张 Photoshop 的透明占位图给它——它知道图应该是透明的，只是发不出 alpha 通道。作者实测 290 张图里只有 15 张带 alpha，默认值就是 opaque。

更麻烦的是棋盘格无法事后补救：它的方格会伸到角色轮廓边缘底下，任何抠图算法都分不清"格子"和"角色"。key.py 检测到这种图会直接报错拒绝处理，而不是硬抠。

正确姿势：两条路线，绝不混搭

page-mascot 把这件事拆成了互斥的两条路线（prompts.md）：

路线 A：工具支持透明输出

在调用里设置background: "transparent"，提示词照常用。generate.py 的draw()就是先带透明参数发起请求；若老模型拒绝该参数则退回重画。

提示词里仍保留 "fully transparent background" 字样——这不是求 alpha，而是防止模型给空格子发明一个背景场景。参数开对时这句话毫无副作用。

路线 B：工具不能输出 alpha → 色键（chroma key）

反过来走：提示词中完全不提透明，改要一整个纯色高饱和背景（纯绿#00FF00，角色本身是绿色则换品红#FF00FF），画完再用 key.py 事后去掉：

• 色键色必须远离角色自身配色，白、灰、黑统统不行——奶油色口鼻和黑色描边会被连背景一起抠掉；
• key.py在 CIE Lab 色空间做距离判断，只删除与图像边缘连通的同色区域（绿色青蛙画在绿底上也是安全的）；
• 边缘半透明像素会做"反预乘"去绿边，避免轮廓残留一圈色晕。

⚠️ 一个经典翻车：提示词里"求透明，做不出就用绿底"式的骑墙写法——只要"透明"二字出现，棋盘格就回来了。两套提示词是替代关系，永远不要叠加使用。

验证方法：screen.py 一眼判定四种背景

生成后别靠肉眼验收，跑一下 screen.py，它会明确告诉你是谁：

棋盘格检测器 checkerboard() 的原理也值得学：它采样四角和格子间隙共 8 个"背景必现"区域，找沿两个轴同周期重复的双色方波——正是"画出来的透明"的指纹。

而 mascot.py 会把generate → screen → build → verify串成一条流水线并自动重试失败的那张表；verify.py 再量化检查点击瞬间的身体位移（≤2px）、两表配色匹配度和肩部宽度变化。一切通过后，两张 1080×1080 的 webp 图集才会落地到public/mascots/：

关键文件速查

三句话带走 ✅

1. 棋盘格是模型"画"出来的占位图案，只有一种成因：调用没开透明背景；
2. 能开background: "transparent"就开它；开不了就纯绿底 + 事后key.py抠图，两条路线绝不混搭；
3. 验收交给脚本：screen.py定 alpha，verify.py定手感，别信缩略图。