Shiwu Huajing

---
name: shiwu-huajing
description: 十五画境——用代码做 MG 动画短视频的手艺书。用户说想要什么感觉（科技感、冲击力、高级、可爱……），你来定风格、手法和工具，做出原创短片。风格卡现有：扁平矢量、线条一笔画、等轴 2.5D、3D 质感、逐帧手绘、拼贴、液态、形变、包豪斯、复古霓虹/VHS、弥散玻璃、综艺花字、知识科普贴纸、像素风、赛博 HUD、剪纸皮影；卡里没有的风格按模板先写卡再做。内容每次都是新的，不套模板。工具按画面挑：Canvas 2D 为主，真 3D 用 Three.js，video-shotcraft 的镜头卡用 Remotion 单独渲染，已有视频直接拼进来。附脚手架（逐帧渲染、导出 MP4、配乐合成、自动体检、多段拼接、并排对比）和参考作品。用户要做动画短片、MG 动画、宣传片、片头、知识讲解动画、抖音动画开头、风格合集，或点名以上任何一种风格时使用。
---
# 十五画境 · MG 动画手艺书

这不是模板库。这里写的是**怎么从一句「我想要这种感觉」做到一支对味的片子**：每种风格靠什么被一眼认出来、关键手法的具体参数、最容易做砸的地方、做完怎么检查。风格不止卡上这些，工具也不止一种：用户要什么效果，你来分析该用哪种风格、哪些手法、哪个工具，自己写代码，做一支新片子。

模型越强，做出来越好；但只要照着流程走、用好脚手架，一般的模型也能做到「像样」。

## 先判断你走哪条路

- **能写代码、能运行命令**（Claude Code、Codex、Cursor、带代码执行的国产 Agent 等）：按「完整流程」做，自己写画面代码，用脚手架导出 MP4。
- **只能聊天、不能运行代码**：照样按流程写出完整代码（一个 HTML 文件夹），告诉用户怎么打开和导出（见 `references/02-渲染与导出.md` 最后一节）。不要说「视频已生成」。

再判断你的能力档位（拿不准就按「一般」）：
- **强**：读通用手艺 + 风格卡的全部内容，可以自己设计镜头、写着色器、做复杂角色，按需要混用 Three.js 和 Remotion 镜头卡。
- **一般**：完整流程照走，但第 1～3 步只按 `references/09-从需求到方案.md` 填简报、定一种风格、写分镜（不混风格、不用 Remotion）；手艺只读 `references/05-一般模型怎么做.md` 和对应风格卡的「最小可行做法」，直接改 `starter/` 里的骨架，**只用 Canvas 2D，一次只用 2～3 个手法，把它们做干净**，比堆一堆半成品好得多。

## 完整流程（每一步都不要跳）

1. **需求简报**：你先填一张简报表（用途、给谁看、要记住的一句话、想要的感觉、时长画幅、必须出现的东西、素材、声音），每行写判断和依据，只问 1～3 个真定不了的事。再定是**全权做**（默认，自己拍板）还是**共同创作**（用户想参与，就在简报、方向静帧、分镜三处停下来确认）。见 `references/09-从需求到方案.md`。
2. **定方案**：把用户说的感觉翻译成一种动效性格；选风格（风格卡里有的直接用，要混就一主一辅，卡里没有的先照 `references/styles/_新风格卡模板.md` 写卡）；给每件要讲的事配一个手法（十五画境自己的，或 video-shotcraft 的镜头卡）；每一镜挑工具（`references/10-工具怎么选.md`）。要做合集（每种风格一段再拼起来），再读 `references/08-单风格与合集.md`。
3. **方向静帧和分镜表**（还不写动画）：先出 2～3 个方向各 2 张静帧，挑定一个；再写分镜表，一镜一行：时间、画面、唯一的主动作、用什么做、落定后停多久、声音。规则见 `references/09-从需求到方案.md` 第 6～7 节和 `references/00-工作流程.md`。
4. **读风格卡**（用了几种风格就读几张）：`references/styles/<风格>.md`。**先读「最容易做成不像的原因」那一节**——那是对照原版总结的版式、零件和戏，照着搭骨架；再把「必备元素」逐条对到分镜表上，缺哪个补哪个。宁可零件多、画面满，不要几个元素飘在空白里。
5. **先做静帧**：用脚手架搭好页面，只做 4～6 个关键时刻的静止画面，截图自己看。构图、字号、配色、留白都过关了再加动画。
6. **再做动画**：按 `references/01-通用手艺.md` 的缓动、错峰、预备、回弹参数来，一次只动一个主体；再按 `references/07-动画手艺进阶.md` 加三层动、镜头、进退场和段间衔接（工具在 `starter/lib/motion.js`）。用 Remotion 镜头卡的镜头，按 `references/10-工具怎么选.md` 第 3 节渲好、换掉品牌和配色，再用 `lib/clip.js` 拼进来。
7. **配声音**：用脚手架的合成器写配乐和音效，卡在画面的节拍点上。
8. **体检、导出、自查**：先跑 `node tools/check.mjs`（字号、反差、平台遮挡、文字重叠、画面停住、节奏、响度），报告里的问题改完再导出 MP4；再按 `references/04-自查与评审.md` 看一遍，改掉问题再交付。改了一轮就用 `node tools/compare.mjs 旧.mp4 新.mp4` 并排比，看不出明显变好的不留。
9. **独立复查**：能开子 agent 的环境（Claude Code、Codex 等），交付前另开一个**新的**子 agent 做复查：只给它成片、分镜表和 `references/04-自查与评审.md`，不给你的聊天记录，让它抽帧看、按评审表打分、列问题。自己看自己的片子，总会替自己说好话。它提的问题改完再交付；开不了子 agent 就自己按评审表逐条查，并在交付说明里写「没做独立复查」。
10. **交付**：MP4 + 源码文件夹 + 一段说明（简报表、为什么选这个风格和这些工具、每个必备元素在哪一秒、已知的不足、字体 / 图片 / 音乐 / 镜头卡的来源清单）。

## 文件地图

| 想做什么 | 读 |
|---|---|
| 不知道怎么开始 | `references/00-工作流程.md` |
| 用户只说了感觉，怎么定风格、手法、分镜 | `references/09-从需求到方案.md` |
| 这一镜用 Canvas、Three.js 还是 Remotion，怎么拼在一起 | `references/10-工具怎么选.md` + `starter/lib/clip.js` + `starter/tools/remotion.mjs` |
| 风格卡里没有的风格 | `references/styles/_新风格卡模板.md` |
| 混风格或没有风格卡时的配色 | `starter/lib/looks.js` |
| 节奏、缓动、排版、配色这些通用手艺 | `references/01-通用手艺.md` |
| 让动画更好看：三层动、镜头、进退场、关键帧、文字动法、段间衔接 | `references/07-动画手艺进阶.md` |
| 单风格出片，或几种风格各一段拼成合集 | `references/08-单风格与合集.md` |
| 搭页面、逐帧渲染、导出 MP4、合成配乐 | `references/02-渲染与导出.md` + `starter/` |
| 别人踩过的坑 | `references/03-踩坑清单.md` |
| 做完怎么检查、怎么打分 | `references/04-自查与评审.md` + `starter/tools/check.mjs` |
| 改前改后并排比，决定留哪版 | `references/04-自查与评审.md`「并排打磨」+ `starter/tools/compare.mjs` |
| 模型不太强时的稳妥做法 | `references/05-一般模型怎么做.md` |
| 字体、图片、音乐、镜头卡能不能用，发布要注意什么 | `references/06-版权与素材.md` + `references/10-工具怎么选.md` 第 4 节 |
| 某种风格的门道 | `references/styles/<风格>.md` |
| 看看完整的代码是怎么写的 | `examples/`（参考作品：学手法，不要照抄内容） |

## 底线

- **原创**：风格要学到位——版式、零件、节奏、质感都照风格卡来，这不是抄；但主体、文案、角色、具体构图和配乐必须是自己的。品牌名用用户自己的，没有就编一个。用了镜头卡，示例品牌和示例界面都要换掉。
- **素材合法**：字体、图片、音频只用可商用的（OFL、CC0、公有领域、用户自己的）；中文字体把 OFL 的 `"Noto Sans SC"` 写在最前面；不放别人的商标和 IP 角色。交付时附来源清单，细则见 `references/06-版权与素材.md`。
- **确定性**：每一帧只由时间 t 决定（不用 `Date.now()`、不用不带种子的随机数），否则导出会抖、会对不上。
- **诚实**：没导出成功就说没成功；做不到的风格特征就写进「已知不足」。