1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | page-mascot |
| 作者/维护者 | nilbuild（Kamran Ahmed） |
| 来源链接 | https://github.com/nilbuild/page-mascot |
| 许可证 | MIT |
| GitHub Stars | 671（GitHub API） |
| Forks | 61（GitHub API） |
| 最新版本 | 0.1.0（package.json） |
| 安装方式 | npm i page-mascot（组件）+ npx skills add nilbuild/page-mascot --skill page-mascot --global --yes（技能） |
2. 功能介绍与亮点
page-mascot 让 agent 把跟随鼠标转头、点击会反应的卡通吉祥物放到网页上。核心是两张 3×3 精灵图集——九个头部朝向、九种表情——组件靠切换 background-position 完成动画，不依赖动画库。
- 现成角色库：内置 52 个已绘制角色，挑一个下载两张图集即可用，零依赖零配置。
- 按需生成新角色：描述想要的外观（或上传照片），技能调用图像模型画出两张图集并自动校验两图角色特征是否一致，避免转头时“跳脸”。
- 六种画风：彩色、水墨、素描、riso、纸感、像素，切换风格不影响对齐关系。
- 无障碍细节：无精细指针设备时自动关闭追踪，动效遵循
prefers-reduced-motion，提供屏幕阅读器标签。 - 仓库 2026-09-14 创建，评估时仍持续提交与合并社区 PR。
3. 适用场景
所属分类：前端与设计
- 个人博客、作品集网站想加一个有辨识度的互动小彩蛋，吸引访客停留
- 产品官网希望有跟随光标、点击有反馈的品牌吉祥物，且不想引入完整动画库
- 前端开发者想“一句话描述外观”生成专属网站角色，而非从头手绘精灵图
4. 跨 Agent 兼容性
- Claude Code：原生支持——SKILL.md 明确写明通过
OPENAI_API_KEY调用 OpenAI images API 绘制，专为无内置画图工具的 Claude Code 准备。 - Codex：原生支持——SKILL.md 指出 Codex 自带图像生成工具，可直接走“自行绘制”分支。
- OpenClaw / Hermes Agent：原生支持基础安装与“使用现成角色”路径——官方安装工具
npx skills add明确列两者为支持平台；绘制自定义角色走通用OPENAI_API_KEY路径，未见平台专门说明。
5. 推荐理由
它把“给网站加一个像素级对齐、能互动的吉祥物”这件需要美术功底加动画经验的事，压缩成一句话描述加一次安装。现成角色库覆盖大多数“随便挑一个好看的”需求，开箱即用；定制角色时，自动生成与自动校验对齐的流程也接管了最容易出错的环节（两张图集角色特征对不上）。对初中级用户是少见的“零代码可跑、想深入定制也有完整脚本可查”的前端小技能。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | 671 stars 处于 200–1k 区间，但已有 ≥3 个独立来源活跃讨论：第三方技术博客正面评价、两个社区衍生项目（无框架移植版、应用内吉祥物注明“受本项目启发”） |
| 可用性 | 9 | 现成角色路径零配置（复制两张图或 npm i 即可），文档完整；定制角色需 OPENAI_API_KEY 但脚本与容错说明齐全；仓库持续提交，维护活跃 |
| 安全性 | 9 | 纯前端组件 + 本地 Python 脚本，无异常外发；唯一网络请求是用户自配 OPENAI_API_KEY 调官方 OpenAI API，及从作者 CDN 下载图集，均在 SKILL.md 中如实说明；MIT 协议可审计 |
安全检查清单：
① Shell 命令：仅执行 Python 图像处理脚本（PIL/numpy/scipy）与 curl 下载静态资源，权限范围明确，无扣分
② 联网外发：仅在用户配置 OPENAI_API_KEY 后联网调用官方 OpenAI API；使用现成角色路径完全离线，无扣分
③ 凭据存储：OPENAI_API_KEY 由用户以环境变量提供，技能不持久化存储，无扣分
④ 可疑指令：通读 SKILL.md 与全部脚本，未发现夹带推广、隐蔽外发或 prompt injection 迹象
⑤ 作者信誉：知名开源开发者（roadmap.sh 作者），2013 年注册老账号，无造假迹象
⑥ License：MIT，明确
⑦ 维护时间：仓库创建于评估当周并持续活跃提交，无弃置风险
综合评分 = (7+9+9)/3 = 8.33
7. 跟同类 Skills 相比的优势
| Skill | 定位 | 与 page-mascot 的差异 |
|---|---|---|
| sprite-gen | 面向独立游戏开发者，批量生成 2D 角色的状态齐全动画精灵图集，替代逐帧手绘 | 服务游戏开发场景，产出面向游戏引擎的完整状态机精灵图；page-mascot 专注网页互动组件，产出物是即插即用的 React 组件加两张对齐图集，不涉及游戏状态机 |
| oil-motion | 面向缺乏 AI 视频与 WebGL 经验的前端开发者，为产品页角色互动、数据演示做响应式动画 | 依赖 AI 视频生成与 WebGL 合成管线，适合更复杂的动效演示场景；page-mascot 用静态精灵图切换实现动画，无需 WebGL，安装与运行成本更低，专注“光标追踪+点击反应”这一单一互动模式 |
page-mascot 的差异化在于场景极窄但打磨很细——不追求通用动画能力，只把“跟随光标转头的吉祥物”从角色设计到组件集成做成一次性可交付的闭环。
8. 用户评价
- Dr. Prahlad G. Menon（技术博客 themenonlab.blog，2026-09-15）：称该项目“纯粹令人愉悦而非纯粹实用”；称赞集成简洁（三行代码启动）、自然语言生成定制角色的体验，以及无障碍与触屏降级等细节。
- 社区衍生项目：已有一个无框架 HTML/JS 移植版本（保留原精灵图协议，去除 React 依赖），以及至少一个应用内吉祥物功能明确注明“受本项目启发”，设计思路已被复用。
9. 其他补充
仓库同时维护在线演示页（koboyo.com/page-mascot），可预览全部 52 个现成角色与六种画风，供挑选参考。
10. 安装使用方式
使用现成角色（推荐，零依赖）：
npm i page-mascot从演示页选一个角色，下载其两张图集到项目静态资源目录（如 public/mascots），再引入组件：
import { Mascot } from 'page-mascot'
<Mascot
directions="/mascots/fox-directions.webp"
reactions="/mascots/fox-reactions.webp"
/>安装 Agent 技能（对话式生成/绘制新角色）：
npx skills add nilbuild/page-mascot --skill page-mascot --global --yes安装后在支持的 agent 中触发 /page-mascot，一句话描述想要的角色外观即可，例如 /page-mascot a chibi otter with chocolate-brown fur。若 agent 无内置图像工具（如 Claude Code），需先设置：
export OPENAI_API_KEY=sk-...绘制路径还需本机 Python 3 安装 PIL、numpy、scipy（脚本会提示安装）。
11. 注意事项
- 既不用支持内置画图的 agent、也未配置
OPENAI_API_KEY，则无法生成自定义角色，只能用现成角色库或手动粘贴提示词到其他绘图工具。 - 触摸设备追踪效果自动关闭，是刻意的降级设计而非缺陷。
- 版本号为 0.1.0，属早期项目，API 后续可能调整。