---
name: sketch-animation-video
description: 使用 HyperFrames 制作简笔画/手绘线稿动画短视频。适用于简笔画动画、白板风、线稿动效、3-10 秒解释型片段，强调“无字幕可懂”的动作叙事、可复用模板与自检修复闭环。
disable-model-invocation: true
---

# 简笔画动画视频 Skill（HyperFrames）

用于生产「简笔画 / 手绘线稿」风格短视频（3-10 秒）。
核心目标：**信息表达优先**、**动作语义清晰**、**可快速迭代**。

## 1) 适用场景（触发词）

当用户出现以下需求时使用：

- 简笔画动画、手绘动画、白板风、线稿风
- 3-5 秒开场、功能解释、概念隐喻动画
- 希望通过动作直接表达含义（不依赖长文本）
- 需要 HyperFrames 可预览、可校验、可导出 MP4

---

## 2) 技术栈（统一）

- **HyperFrames**：编排与渲染（`data-*` 时序属性）
- **HTML + CSS**：布局与视觉（纸张底、网格、线稿样式）
- **SVG**：人物、图标、符号、道具等简笔画元素
- **GSAP**：时间线动画（入场/传递/激活/输出/收尾）
- **命令**：`npm run dev`、`npm run check`、`npm run render`

建议版本：

- `hyperframes@0.5.x`
- `gsap@3.14.x`

---

## 3) 风格与叙事原则

### 视觉风格

- 米白纸背景 + 低对比网格纹理
- 深色线条为主（推荐 `stroke-width: 8~13`）
- 强调色控制在 2~3 种
- 保持手绘感，避免过重 UI 卡片感

### 叙事优先级

1. **先表达语义，再追求美观**
2. **无字幕可懂**：隐藏说明文本后，观众仍能看懂核心含义
3. **动作隐喻优先**：对照 / 因果 / 冲突 / 结果

### 典型表达范式

- “效率提升”：`传统流程忙碌出汗` vs `AI 流程悠闲产出`
- “统一方法”：`输入 -> 总控 -> 输出`
- “成本结构”：`高成本项打叉` + `主要成本高亮`

---

## 4) 动效节奏模板（4 秒参考）

- `0.0~0.8s`：场景与主体入场
- `0.8~1.8s`：信息传递（元素飞入/交换）
- `1.8~3.0s`：核心激活（发光、弹性、喷发）
- `3.0~4.0s`：收尾稳态（轻呼吸，不突兀）

> 对 8~16 秒场景：按同逻辑扩展，不要平均铺满动作，保留“重点动作”与“停顿”。

---

## 5) 可复用组件建议

- `paper-grid`：纸张网格背景
- `person-*`：人物组
- `input-*`：输入元素（音符/词条/卡片）
- `core-*`：核心模块（大脑/控制台/总控）
- `output-*`：输出元素（视频条/结果卡）
- `fx-*`：强调元素（星芒、汗滴、回环箭头）

命名要求：同一语义组使用统一前缀，便于批量动画与重构。

---

## 6) 必做实现规范（避免踩坑）

### A. 元素 ID 规范

对会进入时间线或可能被后续编辑的节点，加稳定 `id`（例如 `id="scene-01-main"`），避免 Studio 警告 `studio_missing_editable_id`。

### B. transform 冲突规范

如果 CSS 用了 `transform: translateX(-50%)`，GSAP 再动画 `y/scale` 时会覆盖 transform。

建议改法：

- 用 GSAP 的 `xPercent: -50` 替代 CSS 的 `translateX(-50%)`
- 或使用 `fromTo` 明确保留同一 transform 语义

### C. 文案开关规范

若需要“辅助口播提示文案”，必须做成可控开关，不要硬编码在最终导出里。

### D. 删除元素后检查

删除节点后同步检查 GSAP 选择器，避免出现空选择器（如 `""`）导致运行时报错。

---

## 7) 交付流程（必须执行）

1. 明确目标：时长、比例、语义重点、是否保留角标
2. 先做静态 Hero Frame，再接 GSAP 时间线
3. 执行 `npm run check`
4. 导出 `npm run render`
5. 抽检截图并修复（见第 9 节）
6. 向用户回报：改动点 + 最新成片路径

---

## 8) 质量标准（验收）

- 画面在 3-10 秒（或目标时长）内表达完整
- 主体不遮挡、不过界、不过度拥挤
- 线稿风格一致（线宽、轮廓、颜色逻辑一致）
- 动画节奏自然，不生硬、不抢读
- **无字幕可懂**（关键）
- `check` 通过后再宣称完成

---

## 9) 视觉抽检与自主修复闭环

产出 MP4 后必须做截图抽检，不只看命令通过。

### 抽检步骤

1. 抽取至少 4 帧关键截图（建议 `20% / 45% / 70% / 90%`）
2. 检查：结构、节奏、线稿质量、语义清晰度
3. 有问题就改 HTML/CSS/SVG/GSAP 并重跑 `check + render`
4. 复检通过后再交付

### 修复优先级

1. 结构（位置、层级、比例、裁切）
2. 线稿（轮廓识别、粗细统一、节点形态）
3. 语义（谁在做什么、为什么、结果如何）
4. 动效（时长、缓动、错峰、运动路径）
5. 细节（颜色、阴影、点缀）

### 汇报格式

- 发现的问题（若有）
- 执行的修复动作
- 最新成片路径
- 是否通过抽检

---

## 10) 通用提示词模板（中文）

下面这组模板用于稳定触发“先结构、后动效、可验收”的产出方式，比口语化一句话更可控。

### 模板 A：基础单场景（3-5 秒）

「请做一个 **3-5 秒** 的简笔画动画，比例 **[16:9 / 3:4 / 9:16]**。  
主题是 **[一句话主题]**。  
画面流程：**输入元素出现 -> 进入核心模块 -> 输出结果**。  
风格要求：米白纸背景、深色线稿、强调色不超过 3 种。  
限制：不依赖长字幕，观众静音看画面也能理解主要含义。  
交付：先给静态构图，再补 GSAP 时间线，最后执行 `check` 和 `render`。」  

### 模板 B：对照叙事（8-12 秒）

「请做一个 **8-12 秒** 的简笔画对照动画。  
左侧是 **传统流程**，右侧是 **智能流程**，需要清楚体现效率差异。  
两侧都要有完整动作链路（开始 -> 处理 -> 结果），并在中段形成明显对比。  
风格统一为手绘线稿，线宽和颜色逻辑一致。  
限制：字幕只做辅助，核心信息必须靠动作表达。  
交付：提供关键帧抽检结果（20%/45%/70%/90%）和修复说明。」  

### 模板 C：可复用组件导向（适合批量场景）

「请按可复用组件方式制作简笔画动画：  
组件前缀使用 `paper-*`、`person-*`、`input-*`、`core-*`、`output-*`、`fx-*`。  
时长 **[X 秒]**，目标语义是 **[目标语义]**。  
先完成静态 Hero Frame，再补入场、传递、激活、收尾四段动效。  
必须保证：无越界、无遮挡、无空选择器报错、可通过 `check`。  
最终输出 MP4，并附上“问题 -> 修复 -> 成片路径 -> 是否通过抽检”的汇报。」  

