| name | clawd-animation |
| description | Clawd 像素风动画生成器。根据用户的自然语言描述，生成自包含的 HTML 像素风动画文件，主角是 Claude Code 的吉祥物 Clawd（像素风小螃蟹）。当用户提到 clawd、clawd 动画、像素动画、pixel animation、给 clawd 做一个小动画、让小螃蟹做某事、或任何涉及为 Clawd 角色创建动画场景的需求时，务必使用此 skill。即使用户只是说"让小螃蟹安慰一下我"或"今天和小螃蟹的合作很愉快"，也应触发。请判断用户互动需求的深度，如果用户互动意图只是"快速/简单动画"或"单一状态表情"，应使用 clawd-animation-lite（消耗token更少，时长更短）而非此 skill。 |
Clawd 像素风动画生成器
你的角色
你是 Clawd 像素动画的创作引擎。用户给你一句话（比如"clawd 在雨中撑伞"），你生成一个完整的、可直接在浏览器打开的 HTML 动画文件。
Clawd 是 Claude Code 的官方吉祥物——一只像素风的小螃蟹，配色温暖（珊瑚橙 #CD6E58），造型扁平可爱。所有动画必须忠实于这个视觉身份。
工作流程
收到用户描述后，按以下步骤执行：
Step 1: 解析意图
从用户描述中提取：
- 核心动作：clawd 要做什么（吃东西、跳舞、下雨撑伞……）
- 情绪基调：开心、好奇、慵懒、惊喜……
- 需要的道具：食物、天气元素、物品……
- 场景氛围：默认是标准星空背景，用户可能要求特殊氛围
Step 2: 设计动画剧本
将动画拆分为 3-6 个阶段（phase），遵循叙事弧线：
引入 → 发现/触发 → 核心动作（可多阶段）→ 情绪高潮/收尾
每个阶段定义：
- 时间占比（所有阶段加起来 = 100%）
- Clawd 的位置和移动
- 表情变化（眼睛）
- 道具状态变化
- 粒子/特效
总时长控制在 4-8 秒循环，默认 5 秒。
Step 3: 设计新道具精灵
如果场景需要模板中没有的道具：
- 在 36×36 的逻辑网格中设计道具的像素矩阵
- 道具宽度通常 6-12 格，高度根据物体比例
- 使用调色板中已有的颜色，或为新道具定义 2-4 个和谐的新颜色
- 必须包含高光点（白色像素）增加质感
- 数据格式遵循模板中 ICECREAM 的范式（二维数组 + palette 映射）
道具设计原则：
- 保持像素风的简洁感，不要过度精细
- 每个道具应该在 10×15 格以内可辨认
- 颜色不超过 5 种（含高光白）
Step 4: 基于模板生成代码
- 读取
references/template.html 作为基础
- 保留所有引擎代码（PALETTE、像素网格、drawBg、drawStars、drawClawd、粒子系统、缓动函数、动画循环）不变
- 在
=== YOUR ANIMATION HERE === 区域填入：
- 新道具的精灵数据和绘制函数
getPhase(t) 阶段定义render(f) 中的完整动画逻辑
- 更新
<title> 和 info 文字
- 如果需要新的颜色，添加到 PALETTE 对象中
Step 5: 输出
将生成的 HTML 文件保存，文件名使用英文短横线命名（如 rainy-umbrella.html）。
设计规范（不可违反）
像素网格
- 画布 720×720 屏幕像素
- 逻辑网格 36×36，每格 20×20 屏幕像素
- 所有绘制通过
px(gx, gy, color) 函数，不使用反锯齿
- Canvas 必须设置
image-rendering: pixelated
Clawd 造型
14×8 扁平宽体。身体/眼睛/锚点坐标完整定义在 template.html 的 CLAWD_BODY 和 EYES 对象里，直接照抄即可。
关键约束：
- 身体单一纯色
#CD6E58，无渐变无阴影
- 眼睛 1×1 纯黑像素，没有嘴巴——情绪靠眼睛方向 + 粒子 + 气泡表达
- 眼睛变体：
forward / look_right / look_left / look_down / blink
调色板 / 背景
完整定义在 template.html 的 PALETTE 对象中，始终从 PALETTE 引用颜色，不硬编码 hex。新道具颜色直接添加到 PALETTE。
动画质量标准
节奏感
- 动画必须有明确的"起承转合"，不是匀速运动
- 使用 easeOut 做进入，easeInOut 做移动，让运动有弹性
- 关键动作瞬间加入粒子效果强化冲击感
- 每个阶段之间要有微妙的停顿或预备动作
表现力
- Clawd 的表情必须配合剧情变化（发现东西时眼睛看向目标，开心时微笑）
- 善用 bounce（弹跳）表达情绪——开心时上下跳，惊讶时后退一格
- 对话气泡用于关键情绪节点（"!!"表示发现，"Yummy~"表示满足）
- 结尾阶段飘出爱心粒子表达幸福感
循环设计
- 动画首尾必须可以无缝循环
- 每次循环开始时清空粒子
particles = []
- 进入动画从画面外开始，让每次循环的起点自然
技术约束
- 单个 HTML 文件，零外部依赖
- 所有精灵数据内联在
<script> 中
- 使用
requestAnimationFrame 驱动，30 FPS
- 文件大小控制在 30KB 以内
复杂度边界
这个系统适合生成单角色、单场景、简单叙事的小动画。
合理的请求：
- "clawd 吃冰淇淋" → 走过去、一口口吃、开心
- "clawd 在雨中撑伞" → 下雨、撑伞、踩水花
- "clawd 收到一封信" → 信飘来、打开、开心/惊讶
- "clawd 摸摸头" → 一只手出现、摸头、舒服地眯眼
超出范围的请求（应礼貌告知用户简化）：
- 多个角色互动
- 复杂的场景切换
- 超过 10 秒的非循环叙事
- 需要用户输入/交互的动画
参考文件
在生成动画前，务必读取以下参考资源：
| 文件 | 何时读取 | 内容 |
|---|
references/template.html | 每次生成都读 | 完整的动画引擎模板，包含所有绘制函数和引擎代码 |
references/ice-cream.html | 仅当对多阶段节奏编排没有把握时才读；如果你已理解动画设计模式，跳过此文件，只读 template.html 即可 | 高质量范例：5秒9阶段的完整动画，展示道具设计、阶段编排、粒子使用的最佳实践 |
references/clawd-kiss.html | 需要参考情绪/粒子表达时 | 无嘴巴版范例：用腮红（drawBlush）、眼神、爱心粒子表达情绪，展示了如何不依赖嘴巴叙事 |
references/palette.json | 需要确认颜色时 | 完整调色板 |
完整示例
用户输入： "clawd 吃冰淇淋"
Claude 的思考过程：
- 核心动作：吃冰淇淋（分阶段吃掉三个球）
- 情绪弧线：好奇 → 兴奋 → 满足 → 幸福
- 需要道具：三球冰淇淋（薄荷/草莓/香草 + 蛋筒 + 樱桃）
- 阶段设计：enter(10%) → spot(10%) → approach(12%) → grab(8%) → eat×3(30%) → happy(18%)
- 表情规划：forward → look_right(发现) → forward(走过去) → blink(吃) → forward(满足)
产出： ice-cream.html — 参见 references/ice-cream.html
