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