Clawd Animation

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) 中的完整动画逻辑

1. 更新 `` 和 info 文字
2. 如果需要新的颜色，添加到 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 文件，零外部依赖
• 所有精灵数据内联在 `` 中
• 使用 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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: YiShu5
• Source: YiShu5/claude-skills
• License: MIT

Install and usage instructions live in the source repository linked above.