---
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: 设计新道具精灵
 
如果场景需要模板中没有的道具：
1. 在 36×36 的逻辑网格中设计道具的像素矩阵
2. 道具宽度通常 6-12 格，高度根据物体比例
3. 使用调色板中已有的颜色，或为新道具定义 2-4 个和谐的新颜色
4. 必须包含高光点（白色像素）增加质感
5. 数据格式遵循模板中 ICECREAM 的范式（二维数组 + palette 映射）
 
道具设计原则：
- 保持像素风的简洁感，不要过度精细
- 每个道具应该在 10×15 格以内可辨认
- 颜色不超过 5 种（含高光白）
 
### Step 4: 基于模板生成代码
 
1. 读取 `references/template.html` 作为基础
2. 保留所有引擎代码（PALETTE、像素网格、drawBg、drawStars、drawClawd、粒子系统、缓动函数、动画循环）不变
3. 在 `=== YOUR ANIMATION HERE ===` 区域填入：
   - 新道具的精灵数据和绘制函数
   - `getPhase(t)` 阶段定义
   - `render(f)` 中的完整动画逻辑
4. 更新 `<title>` 和 info 文字
5. 如果需要新的颜色，添加到 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 的思考过程：**
1. 核心动作：吃冰淇淋（分阶段吃掉三个球）
2. 情绪弧线：好奇 → 兴奋 → 满足 → 幸福
3. 需要道具：三球冰淇淋（薄荷/草莓/香草 + 蛋筒 + 樱桃）
4. 阶段设计：enter(10%) → spot(10%) → approach(12%) → grab(8%) → eat×3(30%) → happy(18%)
5. 表情规划：forward → look_right(发现) → forward(走过去) → blink(吃) → forward(满足)
 
**产出：** `ice-cream.html` — 参见 `references/ice-cream.html`