【免费下载链接】page-mascotA mascot that watches the cursor and blinks when you poke it项目地址https://gitcode.com/gh_mirrors/pa/page-mascot点击查看免费下载page-mascot 是一个让吉祥物跟随光标转头、点击时眨眼的交互式页面组件每个角色由两张 3×3 精灵表驱动——而精灵表必须带真正的透明背景用 AI 生成时却经常得到一团灰白棋盘格。本文讲透棋盘格的来龙去脉、background: transparent参数的正确用法以及一套可直接复用的验证方法 为什么吉祥物必须站在真透明背景上page-mascot 的每个角色由两张图组成九种头部朝向 九种点击表情组件靠切换background-position在两张表之间跳转点击瞬间角色绝不能跳一下。要做到粘在页面任何底色上两个前提缺一不可源图是带 alpha 通道的 PNG背景真正透明组件容器自身也是透明的——src/mascot.tsx 中挂载button时显式设置了background: transparent这样页面里露出来的就只有角色本身的 alpha 区域。背景不真透明角色四周会多出一块白底或灰格放在深色页面上格外扎眼。下这张是仓库中狐狸角色的源图空白处都是真实 alpha棋盘格真相模型在假装透明这是 page-mascot 踩坑后写进文档的最重要结论见 design-rules.md透明度是图像 API 调用的属性不是提示词能求来的。在gpt-image-2.5上做的十图对照实验5 个提示词变体结果非常整齐调用方式结果参数backgroundtransparent每个提示词都返回真实 alpha参数backgroundauto每个提示词都返回不透明图背景是画出来的灰白棋盘格也就是说哪怕你在提示词里写上 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它会明确告诉你是谁screen.py 输出含义该做什么alpha: ok真实 alpha 通道直接构建alpha: MISSING (solid #02F902 background -- key.py can remove it)画在色键底上跑key.py或交给mascot.py自动处理alpha: MISSING (painted checkerboard, 32px squares -- redraw)工具给不了 alpha 却硬要了透明换路线 B 重画alpha: MISSING (opaque background)压平在白色或场景上重画无解可抠棋盘格检测器 checkerboard() 的原理也值得学它采样四角和格子间隙共 8 个背景必现区域找沿两个轴同周期重复的双色方波——正是画出来的透明的指纹。而 mascot.py 会把generate → screen → build → verify串成一条流水线并自动重试失败的那张表verify.py 再量化检查点击瞬间的身体位移≤2px、两表配色匹配度和肩部宽度变化。一切通过后两张 1080×1080 的 webp 图集才会落地到public/mascots/关键文件速查文件作用skills/page-mascot/scripts/generate.py带background参数出图透明失败自动转色键skills/page-mascot/scripts/key.py棋盘格检测 色键抠图skills/page-mascot/scripts/screen.py出图前置筛查判定 alpha 状态skills/page-mascot/scripts/verify.py点击位移、配色、肩宽三指标量化验证skills/page-mascot/reference/prompts.md三套主提示词 无透明变体skills/page-mascot/reference/design-rules.md透明失败模式的实验数据与设计依据skills/page-mascot/SKILL.md两条路线的操作手册三句话带走 ✅棋盘格是模型画出来的占位图案只有一种成因调用没开透明背景能开background: transparent就开它开不了就纯绿底 事后key.py抠图两条路线绝不混搭验收交给脚本screen.py定 alphaverify.py定手感别信缩略图。赞分享【免费下载链接】page-mascotA mascot that watches the cursor and blinks when you poke it项目地址https://gitcode.com/gh_mirrors/pa/page-mascot点击查看免费下载相关推荐【亲测免费】 探索创新透明背景生成器 —— plemeri/transparent-background探索创新透明背景生成器 —— plemeri/transparent background 在这个数字艺术与设计日益重要的时代拥有一个能够自动处理图片并提取awesome-CocosCreator 框架深度解析从基础到高级的完整解决方案awesome CocosCreator 框架深度解析从基础到高级的完整解决方案 在游戏开发领域Cocos Creator 已经成为众多开发者的首选工具而文档教程游戏开发如何用Transparent Background实现一键图像背景透明化2025超实用教程如何用Transparent Background实现一键图像背景透明化2025超实用教程 Transparent Background是一款基于InSPyR创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
