sui-motion-graphic-reel · 用代码做有设计感的动画은(는) 무엇을 하나요?

作者：Sui Yang（IG @asksui.ai）。这份 skill 是从一支 15 秒动画的七轮返工里整理出来的：每一条思路背后都有一版被否决的成片，对比图在 examples/，逐版经过在 references/case-0099.md。

一句话：动画好不好看，九成取决于开做之前定下的设计语言与镜头，不取决于用了多少特效。这份 skill 管的是「怎么想、怎么跟 AI 讲、怎么自己审」，不管你用哪个引擎。

一条线：找 design system（§1：有就照用户的；没有就由设计 agent 出几套给用户选）→ 稿与声音（§2）→ 分镜给人看（§3）→ 定设计语言、逐幕做（§4 九条思路）→ 渲染前审片（§5）→ 出片后自审（§6）→ 交付与返工（§7）。

两种东西分开放（这份 skill 最重要的设计）：

	住哪里	能不能改
口味：用什么颜色、要不要渐层、字体、讲话快慢、有没有角色	design system （`references/design-system.md`，每个专案一份）	用户说了算。design system 里的范例只是起手，整份可以换
手艺：全片统一、每幕一种做法、多层次、镜头感、一刻一个焦点、自审	这份 SKILL.md §4–§6	跟口味无关，换什么风格都成立

碰到规则跟用户要的风格冲突：口味听用户的，手艺照做。例：用户要霓虹渐层 —— 可以，那就整支都是那一套霓虹语言（手艺：全片统一），不要第一幕霓虹、第二幕瑞士网格。

1. 开工先找 design system

没有 design system（设计系统：颜色、字、版面骨架、签名元素、动的性格、不要清单）就开做，AI 会掉回它的预设：粉紫渐层、发光、每一幕淡入放大。所以第一步永远是这个，而且先找、再问、最后才自己出。

有现成的 design system？
├─ 有 → 照用户的做（1A）
└─ 没有 → 用户过一轮问题，或交参考（1B）→ 设计 agent 上班，出几套给用户选（1C）→ 用户选定 → 照它做

1A. 先找：用户有没有自己的

翻专案：design-system.md、品牌规范、design tokens、网站的 CSS 变数、Figma 导出、logo、过去做过的片或图。
翻不到就问一句：「你有现成的 design system 或品牌规范吗？有的话丢给我，我照它做。」
有 → 照用户的做。把它转写成专案里的 design-system.md（栏位见 references/design-system.md）。它已经定的一格都不改；它没写、但做片需要的那几格（动的性格、签名元素、平台安全边）由你补，补的每一格标「AI 补的」，请用户确认。

1B. 没有：用户先过一轮，或交参考

两条路，可以只走一条，也可以都走：

过一轮：一次问完，最多四题，每题给选项。
- 气质：冷静高级／活泼／科技感／手作感／自己讲
- 颜色：有没有一定要用的颜色？没有就只挑一个强调色
- 要不要角色或吉祥物、要不要配音
- 这支片给谁看、放在哪个平台
交参考：一支喜欢的片、一个网站、一张海报、一个品牌都行。每个参考问一句「喜欢它的什么」。学它的语言（色、格、字、动法），不抄它的画面。

1C. 设计 agent 上班：出几套给用户选

把 1B 拿到的答案与参考交给另一个 agent（设计 agent），它只做一件事：出 design system 的方案。派工单与交回格式在 references/design-agent.md。

出 3 套方向，要拉得开（不是同一套换个强调色）。
每一套附一张真的画出来的样张：三套用同一句标题、同一个画面内容，并排成一张图。用户是用眼睛选的，不是读色码选的。
用户可以整套选，也可以混搭（「A 的颜色配 B 的字」）。都不喜欢就问哪里不对，再出一轮。
选定的那一套写成专案里的 design-system.md。之后每一幕只准用这份里的东西；要加颜色、字、做法，先回来改它。

为什么要另一个 agent：做片的 agent 脑子里已经装着稿和画面，让它自己出方案，三套会长得很像。另开一个只看需求与参考的，方向才拉得开。环境里开不了第二个 agent 时，自己照同一份派工单做，一样交三套加样张。

用户不在场

排程、夜班、他说「你决定」：不要卡住等。设计 agent 照样出三套，自己选最贴需求的一套，在 design-system.md 里标明「AI 选的」并附上另外两套的样张，交付时请他确认或换。

栏位与四份范例在 references/design-system.md。

2. 稿与声音：声音先行

稿写成一段讲话，用口语接起来（「你看」「还有」「而且」），不写名词清单。念出来像在跟朋友讲，不像在念标语。
配音整段一次生成，不要一句一句分开生成再拼 —— 分开生成的每一句都像口号，拼起来没有语气。生成时要拿每个字的时间表（多数 TTS 服务有带时间戳的接口）。
画面跟着字走：每一幕、每个元素在「念到那个词」的那一刻到场。片长 = 配音长度 + 收尾，不硬凑整数秒。动作也一样：念到「镜头飞进来」那一句，画面要在那一句飞；动作做在前一句、念到时已经停住，观众看到的是一张不动的图在配一句讲动作的话。把那个词念到的秒数印出来对，不靠估。
不要为了等画面在配音中间插空白。画面来不及讲完，就简化画面。
没有配音的片：先写节拍表（第几秒发生什么），一样照表做。
出片后用语音转文字把成片的声音听写一次，确认每一句都在、没有被切掉半句（切坏的配音，画面上完全看不出来）。

配音怎么接、商用授权要注意什么：references/engines.md「配音」。

3. 分镜先给人看，点头再做

动画做完才发现方向不对，是最贵的返工。开做前出一张分镜表，每一拍一行：

栏	写什么
时间 / 念的字	这一拍从第几秒到第几秒、配音念哪几个字
焦点	这一拍观众的眼睛该看哪一样东西（只能一样）
四层	远景 · 中景主角 · 前景 · 资讯层各放什么（§4 第 4 条）
做法	这一幕用哪一种动画方法（§4 第 2 条），不准跟上一幕一样
镜头	镜头从哪到哪、怎么走
节奏	这一拍是密还是疏、明还是暗（§4 第 9 条）。整张表写完，把这一栏单独念一遍
怎么接下一拍	用哪一种转场

能的话每一拍先画一格静态关键画面（照 design system 真的画出来），拼成一张联络表给用户看。用户点头才开始做动画。

用户不在场时：分镜表照样写、照样存档，自己照 §4 检查一遍再开做，交付时附上。

4. 九条思路

每一条都写了「为什么」和「做坏长什么样」。手法的名字与讲法在 references/techniques.md。

① 先定一套设计语言，全片只用这一套

开做前把这几样定死，写成一个共用档（tokens），每一幕都从它拿：色板 · 网格与安全边 · 字体与字级层级 · 标题块的位置 · 一层贯穿全片的「签名元素」（例：范例 A 用的是设计工具注记 —— 选取框把手、关键帧轨道、形状名称标签，把做工摊开给人看）。

为什么：观众分不出哪里不对，但一眼看得出「这几幕不是同一支片」。统一是「高级感」最便宜的来源。
做坏长什么样：只把被嫌弃的那一幕改掉，其他幕各用各的颜色（对比 examples/v3-only-first-scene-fixed.jpg 与 examples/v4-unified.jpg）。改一幕就要整支对齐。

② 每一幕换一种做法，不换颜色

丰富感来自「这一幕是怎么动的」，不是来自换配色。一支片里把方法错开用：

题材	做法
大字	弹簧形变（落地压扁、弹起拉长）
像素 / 复古	逐格跳、整数格位移，不做平滑补间
粒子	物理模拟或流场，散开再聚合
手写字	照真实笔顺一笔一笔描
介面 / 萤幕	3D 透视，面板沿深度错开，镜头绕过去
数字	滚动计数，每跳一下压扁一下

做坏长什么样：每一幕都是「淡入 + 放大」。再多幕也只有一种动作。

③ 字要真的 kinetic

大字是主角时，它要有重量：掉下来越掉越长、落地压扁再弹回、逐字错开、拉伸进场、压成一条线退场。公式与写法在 references/techniques.md「字」。

做坏长什么样：字只有淡入，或被遮罩平平地推上来。

④ 每一幕四层，一刻一个焦点

层	做什么
远景	会动的环境，交代「这是哪里」，暗、慢
中景	唯一的焦点：主角或主物件，清楚、大、在画面中间
前景	从镜头前掠过的东西，做出景深
资讯层	标签、计数器、小 UI、字幕

同一时间可以很多东西在动，但最亮、最清楚、动得最明显的只能有一样。丰富靠层数，不靠同时抢眼的数量。

停住的时候：主体（焦点和要读的字）完全停住让人读，背景与周边的东西要一直慢慢动：背景上飘着的小记号、远景的大字、压在主视觉两侧的前景物件、角色的呼吸。全部停住，画面就死了。动感放在主体的外面，不穿过要读的字。
层要前后叠，不是上下排：远景垫在主角后面，前景压在主角的边缘前面。把「远景」「前景」放到主角下方的空白处，那只是多了两样东西，不算叠层；竖屏下方那一带还常被平台的介面盖住。
做坏长什么样：一张卡片摆在纯色底上（少了三层，看起来「很干」）；或者四样东西同时在闪（没有焦点，看起来「很乱」）。

⑤ 镜头要自己动

把所有东西放进同一个世界（一块比画面大很多的画布，或一个 3D 空间），让镜头在里面走，而不是原地换画面。

开场：镜头从远处飞进来（fly-in），穿过几层前景，落定那一刻主角才做动作。
前 4 秒要有两波：第一波大位移（0–1 秒），1.5 秒之后再来一波（再走一次镜头、换一个区域、或字本身大变形）。只飞一下就停，等于只有 1 秒的开场。
换场：镜头位移到世界的另一个区域，远中近三层移动速度不同（视差）。走得快的那几帧加动态模糊，字幕不糊。
气质安静的片也要有第二波，只是换一种方式：不一定是大运镜，可以是字本身的变形（拉伸、压扁）、一条线扫过带出下一行、主角物件做一个动作。「慢」是缓动慢，不是不动。
镜头一动，安全边要重新量：推镜、横移之后，原本在安全边里的小字可能被带到画面外。镜头有位移的那几帧要截原尺寸看边缘。
做坏长什么样：开场是一张静止的图；换场是整个画面淡掉换下一张。

⑥ 3D 就用真的 3D

要 3D 运镜，就建一个真的 3D 场景、放一台真的透视摄影机（three.js 这一类）：绕弧线走、有加减速、看得到物体的侧面。粒子要有体积、景深、拖尾。

做坏长什么样：把 2D 画面放大当作「推进」；用几个 CSS 方块拼立体（少画几个面、前后遮挡不对，一转就崩）；粒子只是一个平面上的点。
真 3D 段一定要逐帧放大检查（§6），它是最容易崩又最不容易在缩图里看出来的。

⑦ 转场本身是看点

除了镜头流动，段与段之间可以用：穿梭（镜头推进上一幕的某个物件里面，里面是下一幕）· 遮罩（从字或形状里透出下一幕、光圈打开）· 形状对位 match cut（上一幕收成的那个点 = 下一幕的笔尖）· 往后拉 reveal（原来刚才那一幕只是很多块萤幕里的一块）。

转场放在配音换句的空档。
每个转场抽几帧连拍检查有没有断、有没有跳（examples/v4-transitions.jpg）。

⑧ 画面全部由「第几帧」算出来

不管用哪个引擎，出片都是一帧一帧截图。所以每一个位置、大小、透明度都要是「帧数的函数」：给它第 137 帧，它就画出第 137 帧。不要用会自己跑时间的东西（CSS animation / transition、自己跑的计时器、3D 引擎自己的动画循环）—— 截图时它们对不上帧，会闪、会跳、会缺东西。

好处：任何一幕都可以放进转场的小窗里、放进片尾的回顾里继续动，因为只要给它一个帧数。
需要时间算的资料（文字取样点、粒子目标位置、角色像素）先算好存成档，不要出片时才算。

⑨ 节奏当音乐写：疏密与明暗都要有起伏

整支片从头到尾同一个密度、同一个底色，每一拍单看都没问题，连起来看很快就腻。把片子当一首曲子：有密有疏、有暗有明，哪里推上去、哪里放下来，开做前就排好。

写一条节奏谱：分镜表每一拍标两格，密 / 疏、明 / 暗。念出来像「密密疏、密密疏、密」才对；连着四五拍都是「密、暗」，就在中间放一拍疏或换一次底色。
疏 = 画面上只剩一样东西：一台手机、一行大字、一个数字，旁边留白。一段快剪的素材不是疏，它是全片最密的地方。
密的那一拍也可以先疏后密：先只出标题，念到重点才把东西放上来。
明暗靠换底色：design system 里的底色不只一个时，整拍换成另一个底色，是做起伏最直接的手段。换的时候整屏换，不要留一条旧底色的边。
最浓的那个颜色只当一闪：整屏铺满强调色，刷过去、盖一下（约一秒内）很有力；拿来当一整拍要读字的底色会刺眼。
做坏长什么样：每一拍都是「同一个底色 + 大标题 + 中间一个框」；或者只在最后才出现第一个疏。
怎么自己查：把每一拍的停住帧缩得很小排成一排，遮住字。看得出段落、看得出哪里亮哪里暗，才算有节奏。

5. 渲染前审片：出片之前先替用户挑完

出一整支片很慢。用户会挑的毛病，多半在出片之前、只看几张静态截图就看得出来。所以画面写完不要直接出片，先过三层，便宜的先做：

层	看什么	抓得到
① 纸上审	分镜表对着审片习惯档逐条答	每幕做法重复、少层、焦点不只一个、开场没有两波、偏离要讲的那句话
② 机器量	截几张静态图，跑 `scripts/preflight.py`	字出安全边、两拍画面几乎一样、该动的段落没在动、画面太空
③ 审片 agent	另一个 agent 只看图与习惯档，替用户的眼睛看	主角认不认得出、俗不俗、干不干、物件崩了没、统不统一

审片习惯档（review-habits.md）是这一步的核心：用户过去每一次看片挑出来的事，一条一条记在里面。先找专案里有没有，再找用户自己那一份；都没有就从 references/review-habits.md 的起手条目拷一份开始。
用户每挑一次毛病，就记一条回去。记的时候问：这一条下次能不能在出片之前就查到？能，就写上怎么查。这份档会越来越像他本人的眼睛。
三层都过才出片。必改的条目没过不准出片。
这一步抓不到声音与连续播放的手感，那些留给 §6。

三层各自怎么做、审片 agent 的派工单：references/pre-render-review.md。习惯档的格式、起手条目、怎么长大：references/review-habits.md。

6. 交片前自己审（必做，不等用户骂）

做完不要直接说「好了」。照这个顺序自己看过，写下「我看到什么、改了什么」：

联络表：每 0.5 秒一格，看整体节奏与每一格读不读得懂。python3 scripts/review.py sheet <成片>
停住的那几帧放大看：每一拍主体停住的那一刻，用原尺寸截出来一张一张看。缩小的联络表看不出字贴边、人物崩、层叠错。python3 scripts/review.py frames <成片> 1.2 4.5 7.0 …
会动的段落密集看：转场、3D 运镜、粒子，每 0.1–0.2 秒一格。python3 scripts/review.py burst <成片> <起秒> <讫秒>
扫定格：有没有连续 1 秒以上完全不动的段落（常见原因：某个元素把整幕冻住了）。python3 scripts/review.py freeze <成片>
听写：把成片的声音转成文字，对一次稿。
对 design system：有没有哪一幕用了 design system 以外的颜色、字、做法。
对上一版：这一版比上一版好吗？如果只是「改了」而不是「更好」，讲出来。

逐格要问的：

这一格的焦点是哪一样？一秒内看得出来吗？
字够大吗、有没有糊、有没有贴边、有没有被别的东西压到？
四层都在吗？一层一层数：远景是什么、前景是什么、资讯层有几样。只数得出主角一层就是薄。拿 examples/v7-near-final.jpg 的任何一格对一下密度。
这一幕的做法跟上一幕不一样吗？
有没有出现 design system 的「不要」清单里的东西？
同一个画面里有没有两个东西在做同一件事？

自审工具也会骗人：联络表每格都对，不代表没有定格（要另外扫）；抽到的帧都对，不代表动起来对（3D 与转场要密集看）；语音转文字会把同音字、英文品牌名听错（那是听写的问题，不用改配音）。

最多自己改三轮。一轮 = 出一次完整的片 + 照上面七步看完一次；出片前用单张截图检查、当场修的不算一轮。三轮后还留着的毛病，列出来告诉用户，不要藏。

7. 交付，以及用户说「不满意」的时候

交付时讲三件事：这一版做了什么 · 自审看到什么、改了什么 · 还留着什么毛病。

用户的回馈通常是一个感觉。先把感觉翻成画面语言，再动手；翻不出来就问一句，不要猜着改：

用户说	多半是哪里	先查
很俗套 / 很 AI / 不高级	设计语言：颜色太多、渐层发光、风格本身抢戏	§4① 与 design system 的「不要」清单
只改了一部分 / 不统一	其他幕没有跟着换语言	§4①
很单调 / 都一样	每一幕同一种动法	§4②
很腻 / 没起伏 / 一口气看完很累	疏密与明暗没有变化：每拍一样满、整支一个底色	§4⑨，先把停住帧缩小排一排看
停住的时候很死	主体停住的同时，背景与周边也全停了	§4④「停住的时候」
很干 / 很空 / 没层次	少了远景、前景、资讯层；或主角太小	§4④
很乱 / 不知道看哪	同时抢眼的东西太多	§4④
很 static / 没动感 / 没空间感	镜头没动，或只动了一下	§4⑤
运镜很假 / 3D 很怪	用 2D 缩放冒充，或 3D 物件崩了	§4⑥
字没感觉	字只有淡入	§4③
像口号 / 节奏很慢	配音被切段、中间留空、语速	§2
字卡跟讲话没对上	元素没有绑在逐字时间上	§2
窒息 / 太满	主体占满整个画面没有留白，或没有框住	缩主体、加框、留出标题与注解的位置

改的时候两条纪律：

改一处，查全片：这次的毛病在别的幕有没有同一个。
用户点名喜欢的不要动。只换它的颜色与网格去对齐，做法原样留着。

每改一轮，回头对一次这支片原本要讲的那一句话。连改几轮后，最常见的事故是每一轮都修好了被点名的地方，但整支片已经不是原本要讲的那件事。

附：档案

档	是什么
`references/design-system.md`	design system 的栏位 + 四份范例（起手用，可以整份换）
`references/design-agent.md`	设计 agent 的派工单与交回格式（出三套 design system + 样张）
`references/pre-render-review.md`	渲染前审片三层怎么做、审片 agent 的派工单
`references/review-habits.md`	审片习惯档：格式、起手条目、用户每挑一次怎么记回去
`references/techniques.md`	手法词汇表：名字、长什么样、怎么跟 AI 讲、常见做坏
`references/engines.md`	引擎怎么接（HyperFrames · Remotion · 其他）、真 3D、配音、音效、授权
`references/case-0099.md`	一支 15 秒片从 v1 改到 v7 的完整经过：每一版被说了什么、病根是什么、怎么改
`examples/`	上面那个案例每一版的联络表（正反例图）；另有一张别的口味的实测片（见 `design-system.md` 范例 C）
`scripts/preflight.py`	渲染前量测：只吃静态截图，出停住帧并排（画安全边）、连拍、提醒清单（需要 Pillow）
`scripts/review.py`	自审脚本：联络表、原尺寸截帧、密集连拍、扫定格（只需要 ffmpeg；产出放在成片旁边的 `review/<成片档名>/`，每一版各一夹，方便跟上一版比）

sui-motion-graphic-reel · 用代码做有设计感的动画