sketch-animation-video

Name: sketch-animation-video
Author: topo-ai

39stars7forks

How to install sketch-animation-video?

topo-ai/ai-video-skills/sketch-animation-video

$npx -y skills add topo-ai/ai-video-skills --skill sketch-animation-video

Installs into the current project.

Summary

使用 HyperFrames 制作简笔画/手绘线稿动画短视频。适用于简笔画动画、白板风、线稿动效、3-10 秒解释型片段；默认简笔画 + 简短画面字；具象物体须主动网络检索参考图并临摹线稿，以逼真可辨认为主、拒绝默认抽象；动效以 GSAP 为主时间线，可选 Anime.js 微动效（须 seek 驱动）；可复用模板与自检修复闭环。

Files · 1

View on GitHub

SKILL.md

1	# 简笔画动画视频 Skill（HyperFrames）
2
3	用于生产「简笔画 / 手绘线稿」风格短视频（3-10 秒）。
4	核心目标：信息表达优先、动作语义清晰、具象造型逼真可辨、可快速迭代。
5
6	## 1) 适用场景（触发词）
7
8	当用户出现以下需求时使用：
9
10	- 简笔画动画、手绘动画、白板风、线稿风
11	- 3-5 秒开场、功能解释、概念隐喻动画
12	- 希望通过动作 + 少量画面字表达含义（默认不交付「纯动画无字」）
13	- 需要 HyperFrames 可预览、可校验、可导出 MP4
14
15	---
16
17	## 2) 技术栈（统一）
18
19	- HyperFrames：编排与渲染（`data-*` 时序属性）
20	- HTML + CSS：布局与视觉（纸张底、网格、线稿样式）
21	- SVG：人物、图标、符号、道具等简笔画元素
22	- GSAP（主）：场景时间线（入场/传递/激活/输出/收尾）
23	- Anime.js（可选）：独立微动效、SVG 点缀、从示例迁移的 seek 驱动动画；与 GSAP 分工，不替代主时间线
24	- 命令：`npm run dev`、`npm run check`、`npm run render`
25
26	建议版本：
27
28	- `hyperframes@0.5.x`
29	- `gsap@3.14.x`
30	- `animejs@4.0.x`（仅在使用 Anime.js 时引入）
31
32	### 动效库选型
33
34	\| 场景 \| 推荐 \|
35	\|---\|---\|
36	\| 整段场景编排、多元素错峰、对照叙事 \| GSAP \|
37	\| 单个 SVG/DOM 点缀、弹性/旋转/描边等短动效 \| Anime.js \|
38	\| 用户指定 Anime.js 或提供 Anime.js 示例 \| Anime.js（按 `skills/animejs/SKILL.md` 改造为 seek 驱动） \|
39	\| 同一片段既要编排又要点缀 \| GSAP 管主链，Anime.js 管局部；避免同一 `transform` 被两套库同时写 \|
40
41	Anime.js 接入细则见同仓库 `skills/animejs/SKILL.md`（`autoplay: false`、`window.__hfAnime` 注册、有限时长）。
42
43	---
44
45	## 3) 风格与叙事原则
46
47	### 视觉风格
48
49	- 米白纸背景 + 低对比网格纹理
50	- 深色线条为主（推荐 `stroke-width: 8~13`）
51	- 强调色控制在 2~3 种
52	- 保持手绘感，避免过重 UI 卡片感
53
54	### 叙事优先级
55
56	1. 先表达语义，再追求美观
57	2. 画面字 + 动画，缺一不可（默认）：至少包含短标题 + 一句说明（或等价信息层：标签 / 关键词 / 步骤号）。纯线稿动效不能作为唯一信息载体——观众静音扫一眼也要知道「这一段在讲什么」。长口播字幕由剪辑叠加时，画面字仍建议保留「钩子级」短文案。仅当用户明确要求「成片不要任何画面字、只靠口播」时，才改为纯隐喻，并须用更直白、可辨认的主体造型补足语义。
58	3. 动作承担强化与记忆点：对照 / 因果 / 冲突 / 结果；动画与文字分工——字说清「是什么」，动效说清「关系/过程」。
59
60	### 简笔画造型：逼真可辨为主，禁止默认「抽象符号画」
61
62	- 总原则：以画得形象、看得懂是什么为先，不要用圆角方块、单弧、火柴棍等几何抽象顶替真实物体（除非用户明确要求极简图标风）。
63	- 参考图来源（执行方主动，不必等用户投喂）：凡是人物、动物、食物、器械、产品外观、建筑体块等需要像的内容，执行方须自行使用网络检索（多关键词、多图交叉比对；优先百科/新闻/品牌官网/图库等可追溯来源），看清真实比例与关键结构后，再临摹进 SVG（先抓外轮廓与识别特征，再减笔），禁止无参考凭印象硬编坐标。
64	- 用户已提供照片 / 指定链接时：以用户素材为最高优先级，网络图仅作补充校验。
65	- 视角：用户未指定时，由执行方根据辨识度、构图、与文案/动线的避让自行选择正视、侧视、四分之三等；若物体非对称强烈（如锤头、车侧影），优先选最能看出特征的角度。
66	- 复杂对象（产品、界面、器械）：允许略多几笔或轻辅助线，但必须仍以「像」为先；宁可少动效也要先把轮廓临摹对。
67	- 抽检：遮住标题后，主体仍应可辨；若像「图标不像实物」，回到参考图改轮廓，而不是改文案糊弄过去。
68
69	### 典型表达范式
70
71	- “效率提升”：`传统流程忙碌出汗` vs `AI 流程悠闲产出`
72	- “统一方法”：`输入 -> 总控 -> 输出`
73	- “成本结构”：`高成本项打叉` + `主要成本高亮`
74
75	---
76
77	## 4) 动效节奏模板（4 秒参考）
78
79	- `0.0~0.8s`：场景与主体入场
80	- `0.8~1.8s`：信息传递（元素飞入/交换）
81	- `1.8~3.0s`：核心激活（发光、弹性、喷发）
82	- `3.0~4.0s`：收尾稳态（轻呼吸，不突兀）
83
84	> 对 8~16 秒场景：按同逻辑扩展，不要平均铺满动作，保留“重点动作”与“停顿”。
85
86	---
87
88	## 5) 可复用组件建议
89
90	- `paper-grid`：纸张网格背景
91	- `person-*`：人物组
92	- `input-*`：输入元素（音符/词条/卡片）
93	- `core-*`：核心模块（大脑/控制台/总控）
94	- `output-*`：输出元素（视频条/结果卡）
95	- `fx-*`：强调元素（星芒、汗滴、回环箭头）
96
97	命名要求：同一语义组使用统一前缀，便于批量动画与重构。
98
99	---
100
101	## 6) 必做实现规范（避免踩坑）
102
103	### A. 元素 ID 规范
104
105	对会进入时间线或可能被后续编辑的节点，加稳定 `id`（例如 `id="scene-01-main"`），避免 Studio 警告 `studio_missing_editable_id`。
106
107	### B. transform 冲突规范
108
109	如果 CSS 用了 `transform: translateX(-50%)`，GSAP 再动画 `y/scale` 时会覆盖 transform。
110
111	建议改法：
112
113	- 用 GSAP 的 `xPercent: -50` 替代 CSS 的 `translateX(-50%)`
114	- 或使用 `fromTo` 明确保留同一 transform 语义
115
116	### C. 画面文案与开关规范
117
118	- 默认：成片包含精简画面字（小标签 + 标题 + 一句说明），与简笔画分区排版（常见：上文下画），时间轴上宜先出字再出线稿动效，避免「只有动效不知道讲什么」。
119	- 若用户要求剪辑时叠自己的字幕、希望成片零画面字：再做成显式开关（如 CSS 类 / 变量）或单独导出「无字版」；无字版须相应加强主体可辨认性（见上文「要像」），并通过用户确认。
120
121	### D. 删除元素后检查
122
123	删除节点后同步检查 GSAP / Anime.js 的 `targets` 选择器，避免出现空选择器（如 `""`）导致运行时报错。
124
125	### E. Anime.js 与 HyperFrames 适配
126
127	仅在需要时使用 Anime.js，并遵守以下约定（详见 `skills/animejs/SKILL.md`）：
128
129	- 初始化阶段同步创建动画，设置 `autoplay: false`
130	- 将每个实例 `push` 到 `window.__hfAnime`
131	- 使用有限 `duration` / 循环次数，禁止依赖墙钟或无限循环
132	- 与 §B 相同：`transform` 勿在 CSS 与 Anime.js 间互相覆盖；居中位移优先用动画属性或包装层
133	- 复杂场景编排仍用 GSAP；不要把整段简笔画叙事全部塞进 Anime.js timeline
134
135	---
136
137	## 7) 交付流程（必须执行）
138
139	1. 明确目标：时长、比例、语义重点、是否保留角标
140	2. 具象线稿前置：凡须画「像」的主体，先完成网络参考图检索 → 定视角 → 临摹定稿（见 §3），再进入静态排版；勿先动 GSAP 再在糊轮廓上修修补补。
141	3. 先做静态 Hero Frame，再接 GSAP 主时间线（局部点缀按需补 Anime.js，并注册 `window.__hfAnime`）
142	4. 执行 `npm run check`
143	5. 导出 `npm run render`
144	6. 抽检截图并修复（见第 9 节）
145	7. 向用户回报：改动点 + 最新成片路径（必要时附一句所选视角与参考来源类型，便于复核）
146
147	---
148
149	## 8) 质量标准（验收）
150
151	- 画面在 3-10 秒（或目标时长）内表达完整
152	- 默认含短画面字：标题 + 一句说明（或与用户约定的等价信息层）；无字版须为显式需求并加强造型可读性
153	- 主体不遮挡、不过界、不过度拥挤
154	- 线稿风格一致（线宽、轮廓、颜色逻辑一致）；人物/物品须逼真可辨，非抽象几何符号；造型须经过参考图临摹路径（见 §3），非空想
155	- 动画节奏自然，不生硬、不抢读；字与动效层级清晰（字可读优先）
156	- `check` 通过后再宣称完成
157
158	---
159
160	## 9) 视觉抽检与自主修复闭环
161
162	产出 MP4 后必须做截图抽检，不只看命令通过。
163
164	### 抽检步骤
165
166	1. 抽取至少 4 帧关键截图（建议 `20% / 45% / 70% / 90%`）
167	2. 检查：结构、节奏、画面字是否说清主题、线稿质量、造型是否像参考对象、语义清晰度
168	3. 有问题就改 HTML/CSS/SVG/GSAP（及 Anime.js，若使用）并重跑 `check + render`
169	4. 复检通过后再交付
170
171	### 修复优先级
172
173	1. 结构（位置、层级、比例、裁切）
174	2. 线稿（轮廓识别、与参考图是否一致可辨、粗细统一、节点形态）
175	3. 语义（谁在做什么、为什么、结果如何）
176	4. 动效（时长、缓动、错峰、运动路径）
177	5. 细节（颜色、阴影、点缀）
178
179	### 汇报格式
180
181	- 发现的问题（若有）
182	- 执行的修复动作
183	- 最新成片路径
184	- 是否通过抽检
185
186	---
187
188	## 10) 通用提示词模板（中文）
189
190	下面这组模板用于稳定触发“先结构、后动效、可验收”的产出方式，比口语化一句话更可控。
191
192	### 模板 A：基础单场景（3-5 秒）
193
194	「请做一个 3-5 秒的简笔画动画，比例 [16:9 / 3:4 / 9:16]。
195	主题是 [一句话主题]。
196	画面流程：输入元素出现 -> 进入核心模块 -> 输出结果。
197	风格要求：米白纸背景、深色线稿、强调色不超过 3 种。
198	画面字：必须有短标题 + 一句说明，与动效分区；具象物体由执行方自行网络检索参考图并临摹线稿（见 §3）。
199	限制：不靠长段落小字；静音扫一眼能懂主题。
200	交付：先给静态构图，再补 GSAP 时间线，最后执行 `check` 和 `render`。」
201
202	### 模板 B：对照叙事（8-12 秒）
203
204	「请做一个 **8-

People who liked this also viewed

6 picks

Type

sketch-animation-video

39stars7forks

View on GitHub

How to install sketch-animation-video?

topo-ai/ai-video-skills/sketch-animation-video

$npx -y skills add topo-ai/ai-video-skills --skill sketch-animation-video

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# 简笔画动画视频 Skill（HyperFrames）
2
3	用于生产「简笔画 / 手绘线稿」风格短视频（3-10 秒）。
4	核心目标：信息表达优先、动作语义清晰、具象造型逼真可辨、可快速迭代。
5
6	## 1) 适用场景（触发词）
7
8	当用户出现以下需求时使用：
9
10	- 简笔画动画、手绘动画、白板风、线稿风
11	- 3-5 秒开场、功能解释、概念隐喻动画
12	- 希望通过动作 + 少量画面字表达含义（默认不交付「纯动画无字」）
13	- 需要 HyperFrames 可预览、可校验、可导出 MP4
14
15	---
16
17	## 2) 技术栈（统一）
18
19	- HyperFrames：编排与渲染（`data-*` 时序属性）
20	- HTML + CSS：布局与视觉（纸张底、网格、线稿样式）
21	- SVG：人物、图标、符号、道具等简笔画元素
22	- GSAP（主）：场景时间线（入场/传递/激活/输出/收尾）
23	- Anime.js（可选）：独立微动效、SVG 点缀、从示例迁移的 seek 驱动动画；与 GSAP 分工，不替代主时间线
24	- 命令：`npm run dev`、`npm run check`、`npm run render`
25
26	建议版本：
27
28	- `hyperframes@0.5.x`
29	- `gsap@3.14.x`
30	- `animejs@4.0.x`（仅在使用 Anime.js 时引入）
31
32	### 动效库选型
33
34	\| 场景 \| 推荐 \|
35	\|---\|---\|
36	\| 整段场景编排、多元素错峰、对照叙事 \| GSAP \|
37	\| 单个 SVG/DOM 点缀、弹性/旋转/描边等短动效 \| Anime.js \|
38	\| 用户指定 Anime.js 或提供 Anime.js 示例 \| Anime.js（按 `skills/animejs/SKILL.md` 改造为 seek 驱动） \|
39	\| 同一片段既要编排又要点缀 \| GSAP 管主链，Anime.js 管局部；避免同一 `transform` 被两套库同时写 \|
40
41	Anime.js 接入细则见同仓库 `skills/animejs/SKILL.md`（`autoplay: false`、`window.__hfAnime` 注册、有限时长）。
42
43	---
44
45	## 3) 风格与叙事原则
46
47	### 视觉风格
48
49	- 米白纸背景 + 低对比网格纹理
50	- 深色线条为主（推荐 `stroke-width: 8~13`）
51	- 强调色控制在 2~3 种
52	- 保持手绘感，避免过重 UI 卡片感
53
54	### 叙事优先级
55
56	1. 先表达语义，再追求美观
57	2. 画面字 + 动画，缺一不可（默认）：至少包含短标题 + 一句说明（或等价信息层：标签 / 关键词 / 步骤号）。纯线稿动效不能作为唯一信息载体——观众静音扫一眼也要知道「这一段在讲什么」。长口播字幕由剪辑叠加时，画面字仍建议保留「钩子级」短文案。仅当用户明确要求「成片不要任何画面字、只靠口播」时，才改为纯隐喻，并须用更直白、可辨认的主体造型补足语义。
58	3. 动作承担强化与记忆点：对照 / 因果 / 冲突 / 结果；动画与文字分工——字说清「是什么」，动效说清「关系/过程」。
59
60	### 简笔画造型：逼真可辨为主，禁止默认「抽象符号画」
61
62	- 总原则：以画得形象、看得懂是什么为先，不要用圆角方块、单弧、火柴棍等几何抽象顶替真实物体（除非用户明确要求极简图标风）。
63	- 参考图来源（执行方主动，不必等用户投喂）：凡是人物、动物、食物、器械、产品外观、建筑体块等需要像的内容，执行方须自行使用网络检索（多关键词、多图交叉比对；优先百科/新闻/品牌官网/图库等可追溯来源），看清真实比例与关键结构后，再临摹进 SVG（先抓外轮廓与识别特征，再减笔），禁止无参考凭印象硬编坐标。
64	- 用户已提供照片 / 指定链接时：以用户素材为最高优先级，网络图仅作补充校验。
65	- 视角：用户未指定时，由执行方根据辨识度、构图、与文案/动线的避让自行选择正视、侧视、四分之三等；若物体非对称强烈（如锤头、车侧影），优先选最能看出特征的角度。
66	- 复杂对象（产品、界面、器械）：允许略多几笔或轻辅助线，但必须仍以「像」为先；宁可少动效也要先把轮廓临摹对。
67	- 抽检：遮住标题后，主体仍应可辨；若像「图标不像实物」，回到参考图改轮廓，而不是改文案糊弄过去。
68
69	### 典型表达范式
70
71	- “效率提升”：`传统流程忙碌出汗` vs `AI 流程悠闲产出`
72	- “统一方法”：`输入 -> 总控 -> 输出`
73	- “成本结构”：`高成本项打叉` + `主要成本高亮`
74
75	---
76
77	## 4) 动效节奏模板（4 秒参考）
78
79	- `0.0~0.8s`：场景与主体入场
80	- `0.8~1.8s`：信息传递（元素飞入/交换）
81	- `1.8~3.0s`：核心激活（发光、弹性、喷发）
82	- `3.0~4.0s`：收尾稳态（轻呼吸，不突兀）
83
84	> 对 8~16 秒场景：按同逻辑扩展，不要平均铺满动作，保留“重点动作”与“停顿”。
85
86	---
87
88	## 5) 可复用组件建议
89
90	- `paper-grid`：纸张网格背景
91	- `person-*`：人物组
92	- `input-*`：输入元素（音符/词条/卡片）
93	- `core-*`：核心模块（大脑/控制台/总控）
94	- `output-*`：输出元素（视频条/结果卡）
95	- `fx-*`：强调元素（星芒、汗滴、回环箭头）
96
97	命名要求：同一语义组使用统一前缀，便于批量动画与重构。
98
99	---
100
101	## 6) 必做实现规范（避免踩坑）
102
103	### A. 元素 ID 规范
104
105	对会进入时间线或可能被后续编辑的节点，加稳定 `id`（例如 `id="scene-01-main"`），避免 Studio 警告 `studio_missing_editable_id`。
106
107	### B. transform 冲突规范
108
109	如果 CSS 用了 `transform: translateX(-50%)`，GSAP 再动画 `y/scale` 时会覆盖 transform。
110
111	建议改法：
112
113	- 用 GSAP 的 `xPercent: -50` 替代 CSS 的 `translateX(-50%)`
114	- 或使用 `fromTo` 明确保留同一 transform 语义
115
116	### C. 画面文案与开关规范
117
118	- 默认：成片包含精简画面字（小标签 + 标题 + 一句说明），与简笔画分区排版（常见：上文下画），时间轴上宜先出字再出线稿动效，避免「只有动效不知道讲什么」。
119	- 若用户要求剪辑时叠自己的字幕、希望成片零画面字：再做成显式开关（如 CSS 类 / 变量）或单独导出「无字版」；无字版须相应加强主体可辨认性（见上文「要像」），并通过用户确认。
120
121	### D. 删除元素后检查
122
123	删除节点后同步检查 GSAP / Anime.js 的 `targets` 选择器，避免出现空选择器（如 `""`）导致运行时报错。
124
125	### E. Anime.js 与 HyperFrames 适配
126
127	仅在需要时使用 Anime.js，并遵守以下约定（详见 `skills/animejs/SKILL.md`）：
128
129	- 初始化阶段同步创建动画，设置 `autoplay: false`
130	- 将每个实例 `push` 到 `window.__hfAnime`
131	- 使用有限 `duration` / 循环次数，禁止依赖墙钟或无限循环
132	- 与 §B 相同：`transform` 勿在 CSS 与 Anime.js 间互相覆盖；居中位移优先用动画属性或包装层
133	- 复杂场景编排仍用 GSAP；不要把整段简笔画叙事全部塞进 Anime.js timeline
134
135	---
136
137	## 7) 交付流程（必须执行）
138
139	1. 明确目标：时长、比例、语义重点、是否保留角标
140	2. 具象线稿前置：凡须画「像」的主体，先完成网络参考图检索 → 定视角 → 临摹定稿（见 §3），再进入静态排版；勿先动 GSAP 再在糊轮廓上修修补补。
141	3. 先做静态 Hero Frame，再接 GSAP 主时间线（局部点缀按需补 Anime.js，并注册 `window.__hfAnime`）
142	4. 执行 `npm run check`
143	5. 导出 `npm run render`
144	6. 抽检截图并修复（见第 9 节）
145	7. 向用户回报：改动点 + 最新成片路径（必要时附一句所选视角与参考来源类型，便于复核）
146
147	---
148
149	## 8) 质量标准（验收）
150
151	- 画面在 3-10 秒（或目标时长）内表达完整
152	- 默认含短画面字：标题 + 一句说明（或与用户约定的等价信息层）；无字版须为显式需求并加强造型可读性
153	- 主体不遮挡、不过界、不过度拥挤
154	- 线稿风格一致（线宽、轮廓、颜色逻辑一致）；人物/物品须逼真可辨，非抽象几何符号；造型须经过参考图临摹路径（见 §3），非空想
155	- 动画节奏自然，不生硬、不抢读；字与动效层级清晰（字可读优先）
156	- `check` 通过后再宣称完成
157
158	---
159
160	## 9) 视觉抽检与自主修复闭环
161
162	产出 MP4 后必须做截图抽检，不只看命令通过。
163
164	### 抽检步骤
165
166	1. 抽取至少 4 帧关键截图（建议 `20% / 45% / 70% / 90%`）
167	2. 检查：结构、节奏、画面字是否说清主题、线稿质量、造型是否像参考对象、语义清晰度
168	3. 有问题就改 HTML/CSS/SVG/GSAP（及 Anime.js，若使用）并重跑 `check + render`
169	4. 复检通过后再交付
170
171	### 修复优先级
172
173	1. 结构（位置、层级、比例、裁切）
174	2. 线稿（轮廓识别、与参考图是否一致可辨、粗细统一、节点形态）
175	3. 语义（谁在做什么、为什么、结果如何）
176	4. 动效（时长、缓动、错峰、运动路径）
177	5. 细节（颜色、阴影、点缀）
178
179	### 汇报格式
180
181	- 发现的问题（若有）
182	- 执行的修复动作
183	- 最新成片路径
184	- 是否通过抽检
185
186	---
187
188	## 10) 通用提示词模板（中文）
189
190	下面这组模板用于稳定触发“先结构、后动效、可验收”的产出方式，比口语化一句话更可控。
191
192	### 模板 A：基础单场景（3-5 秒）
193
194	「请做一个 3-5 秒的简笔画动画，比例 [16:9 / 3:4 / 9:16]。
195	主题是 [一句话主题]。
196	画面流程：输入元素出现 -> 进入核心模块 -> 输出结果。
197	风格要求：米白纸背景、深色线稿、强调色不超过 3 种。
198	画面字：必须有短标题 + 一句说明，与动效分区；具象物体由执行方自行网络检索参考图并临摹线稿（见 §3）。
199	限制：不靠长段落小字；静音扫一眼能懂主题。
200	交付：先给静态构图，再补 GSAP 时间线，最后执行 `check` 和 `render`。」
201
202	### 模板 B：对照叙事（8-12 秒）
203
204	「请做一个 **8-

People who liked this also viewed

6 picks

Type