如何駕馭 Agent 做出好看的 Motion Graphics

Agent 現在已經能寫出會動的畫面，但「會動」和「好看」之間，差的是導演的工作。這篇整理我開發 Mografy、帶課、接品牌動畫案時，反覆驗證過的八個技巧。

常見的失敗長這樣：所有元素同時淡入、全部用線性速度、每一段時間都一樣長、畫面沒有主次、文字小到手機上看不清。這些都不是 agent 不會寫程式，而是沒人告訴它判斷標準。

所以整篇只有一個核心觀念：把你腦中的設計判斷，變成 agent 讀得懂、量得到、能自己檢查的東西。

技巧一：先分鏡，再動畫

不要一開口就叫 agent「做一支 15 秒的品牌影片」。它會在一次回覆裡同時決定構圖、節奏、文案和轉場，任何一項不對，你都得在程式碼裡挖，改分鏡比改程式便宜十倍。

我的固定流程是：先讓 agent 寫文字分鏡（storyboard.md），我確認後，再做成視覺分鏡（HTML 或 PNG），最後才寫動畫。接品牌案時，這份分鏡也是先給客戶過的東西。

一份好的分鏡，每個鏡頭至少要有：

• 秒數區間（例如 0.0–2.4s）
• 畫面上有什麼、誰是主角
• 主角怎麼進場、怎麼離場
• 文案與字級
• 接到下一個鏡頭的轉場方式

可以直接這樣下指令：

先不要寫程式。根據這份 brief，寫一份 storyboard.md：
每個鏡頭列出時間區間、畫面內容、主角元素、進出場方式、文案、轉場。
總長 15 秒，9:16。寫完停下來等我確認。
最後那句「寫完停下來」很重要，它讓你有機會在最便宜的階段修正方向。

技巧二：把風格寫成文件，不要每次重講

如果每支影片都在 prompt 裡重新描述「藍色、簡潔、有科技感」，agent 每次的理解都會不一樣。把風格寫成一份檔案（style.md 或 tokens），讓每個場景都引用它，風格才會穩定。

除了顏色和字體，最常被忘記的是動態 token：多快、用什麼曲線、間隔多少。這些才是影片「手感」的來源。

# style.md
color:
 bg: #0E0F12
 primary: #4F7CFF
 text: #F2F2F2
type:
 display: Noto Sans TC 700, 96px
 body: Noto Sans TC 400, 36px
motion:
 fast: 200ms   # 小元素、icon
 base: 450ms   # 一般進場
 slow: 900ms   # 大標、鏡頭移動
 enter: easeOutCubic
 exit: easeInCubic
 stagger: 60ms  # 同一組元素的錯開間隔
 hold: 1.2s    # 重點畫面至少停留

有了這份檔案，你的回饋就能變成「把 hold 改成 1.6s」，而不是「重點那邊再久一點」。改一個值，整支影片一起變。

技巧三：用動畫原則和數字當共同語言

「更有活力」「再高級一點」對人來說有意義，對 agent 來說是擲骰子。把形容詞翻譯成動畫原則和具體數字，它才有辦法照做，你也才知道它有沒有做到。

幾個常見的翻譯方式：

• 更有活力 → 進場加 8–12% overshoot，再彈回 1.0
• 太亂、太吵 → 同時在動的元素不超過 2 組，其他先靜止
• 太平、沒重點 → 主標比其他元素晚 200ms 進場，停留 1.2s 以上
• 感覺很機械 → 改用 easeOut 進場、easeIn 離場，禁止 linear
• 太僵硬 → 加跟隨動作：子元素比父元素晚 80ms 停下
• 節奏太平均 → 鏡頭長度改成長短交錯，例如 2.4s / 1.2s / 3.0s

動畫的 12 項基本法則裡，做 motion graphics 最常用到的是這幾個：緩入緩出（slow in / slow out）、預備動作（anticipation）、跟隨與重疊（follow through）、時間節奏（timing）、誇張（exaggeration）、次要動作（secondary action）。

建議把這些原則連同你的偏好數值寫進 skill，讓 agent 每次動手前都先讀過。

我在 Mografy 的 skill 裡就放了 12 原則、分鏡、鏡頭與轉場等參考，目的就是讓它在動手前已經有一套判斷標準。

技巧四：讓 agent 看得到自己的成果

Agent 寫完程式卻看不到畫面，就像閉著眼睛剪片。最有效的一招，是讓它能自己算繪、自己截圖、自己對照分鏡。

我會要求它在每次修改後做這三件事：

1. 算繪出影片，或至少算出關鍵影格
2. 在固定時間點截圖，例如每個鏡頭的開頭、中間、結尾
3. 拿截圖對照分鏡，列出「和分鏡不符的地方」，修完再回報

改完之後，在 0.5s、2.4s、6.0s、結尾各截一張圖，
逐張對照 storyboard.md，列出不符合的地方並修正，
全部符合再告訴我。

這也是我把 Mografy 做成「純時間函式」的原因：每一幀都只由時間決定，所以任何時間點都能精準截出來檢查。Mografy 的 server 在更新播放器前會先用 headless Chromium 試算繪一次，出錯就不會把壞掉的畫面推到你眼前。

就算你不用 Mografy，值得為你的工具建立同樣的迴圈。讓 agent 先自己抓掉明顯的問題，你的眼睛才能留給真正需要品味的判斷。

技巧五：回饋要用時間碼，一次只改一件事

「整體再順一點」會讓 agent 把整支影片都動一遍，結果原本好的地方也壞了。好的回饋有三個要素：在哪裡（時間碼或鏡頭編號）、改什麼（具體數值）、什麼不要動。

同一件事，兩種說法的差別：

• 「開頭太慢」→ 鏡頭 1 從 3.0s 縮到 2.0s，後面整體往前移，其他鏡頭長度不變
• 「Logo 出來不夠帥」→ 2.4s 的 logo 進場改成 scale 0.8→1.05→1.0，450ms，easeOutBack
• 「字看不清楚」→ 鏡頭 3 副標字級 36→48px，背景加 40% 黑色遮罩，其他文字不動

另外兩個習慣也很有用：

• 一次只改一個面向：先修節奏，確認後再修顏色，最後才修細節。同時改三件事，你分不出是哪一個讓它變好或變壞。
• 滿意的版本先存起來：用 git commit 或另存檔案。Agent 偶爾會在後續修改中把好的部分改壞，有存檔就能直接退回。

技巧六：參考影片要拆開來給

丟一句「做得像蘋果發表會那樣」，agent 只能靠刻板印象猜。真正有用的是把參考影片拆成可描述的節奏，再交給它。

拆一支參考影片時，我會看這幾件事：

• 鏡頭長度：平均幾秒切一次？哪裡突然變快或變慢？
• 轉場方式：硬切、推移、遮罩、縮放，還是用同一個元素串場？
• 文字進場：整行、逐詞、逐字？從哪個方向？有沒有模糊或位移？
• 畫面密度：一個畫面放幾個元素？留白多少？
• 鏡頭運動：有沒有推近、平移、景深？
• 聲音對位：重點動作有沒有卡在音樂拍點上？

最實用的做法，是把參考影片逐秒寫成一條時間軸，連同幾張關鍵截圖一起給 agent。例如：「0–0.6s 黑畫面，0.6s 主標逐詞往上浮入，每詞間隔 80ms；1.8s 硬切到產品特寫，鏡頭緩慢推近 5%」。

這樣它學到的是節奏與手法，而不是照抄畫面。

技巧七：中文字要另外照顧

Agent 的排版直覺大多來自西文。直接讓它排中文，常見的問題是：字體掉回系統預設、標點出現在行首、逐字動畫把詞拆散、直排時標點方向錯誤。

做中文影片時，我會在 style 檔或 prompt 裡明確寫下：

• 指定字體與粗細：例如 Noto Sans TC 700 / 400，並確認字體真的有載入，而不是靠系統替代
• 行高放寬：中文標題約 1.2–1.3，內文約 1.5–1.6
• 斷行規則：標點不落行首，一個詞不要被拆到兩行
• 以詞為單位做動畫：逐詞進場通常比逐字好讀，例如「動態設計」整組進，而不是「動」「態」「設」「計」各自跳
• 直排另外處理：標點要轉向或改用直排標點，英數字決定要橫躺還是轉正
• 字級寧大勿小：9:16 手機畫面裡，內文低於約 32px 就很難一眼讀完

Mografy 的 extras 裡有一個 cjk.ts，專門處理中文橫排、直排與字體子集，就是因為這些問題每次都會遇到，乾脆做成現成的工具給 agent 用。

技巧八：把做對的東西沉澱成 skill 和模板

Agent 不會記得你上一支影片學到什麼。

每次做出滿意的結果，就把它變成下次可以直接讀的東西，否則你永遠在從零開始調整。

我會沉澱三種東西：

• 原則：這次發現的規則，例如「標題進場一定要比內容早 200ms」，寫進 skill
• 反例：agent 常犯的錯，例如「不要讓所有元素同時淡入」，也寫進 skill。寫清楚不要做什麼，往往比寫要做什麼更有效
• 元件與模板：滿意的場景整理成可重用的元件，例如數字跳動、logo 揭示、字卡轉場，下次直接套用再改參數

這也是 Mografy 用一份共用 skill 驅動 Claude Code 和 Codex 的原因：判斷標準集中在一個地方，換哪個 agent 都讀同一套規則。Mografy Templates 也是同樣的思路，把好看的鏡頭變成大家可以直接拿去改的起點。

不想公開的風格校準，就留在自己的本機 skill 裡。重點不是分享，而是讓你的品味可以被累積。

結語：你是導演，agent 是很快的動畫師

Agent 讓「做出來」變得很便宜，但「做得好看」仍然需要有人做判斷。你的工作從手動拉關鍵影格，變成定義標準、拆解參考、精準回饋，再把每次學到的東西累積下來。

關於 Mografy

這篇提到的技巧，都是我在做 Mografy 時一路踩出來的。Mografy 是一個開源、免費、在本機執行的 2D motion graphics 工作區，一句話形容就是：Claude 負責創作，Mografy 負責呈現。

你在 Claude Code 或 Codex 裡描述想要的影片，agent 寫出場景，Mografy 即時預覽、檢查、輸出。上面幾個技巧，在 Mografy 裡都已經變成內建流程：

• 分鏡先行：skill 會先寫 storyboard.md，確認後才動手做動畫
• 動畫原則：12 項基本法則、鏡頭與轉場、分鏡寫法，都寫進同一份 skill，Claude Code 和 Codex 共用
• render → review：每個場景都是「時間的純函式」，任何一幀都能精準截圖；更新播放器前會先用 headless Chromium 試算繪一次
• 中文排版：extras 裡的 cjk.ts 處理橫排、直排與 Noto CJK 字體子集
• 可重用的起點：內建 16 個元件場景，加上 Mografy Templates 的現成鏡頭可以直接改

做好的影片可以輸出成 MP4、WebM、Lottie 或 SVGA，也能依場景生成配樂、加入 Three.js 3D 圖層。

開始只要三步：git clone、pnpm install、mografy dev，播放器就會打開。

• 官網與教學：mografy.app
• 原始碼（MIT 授權）：github.com/zz41354899/mografy
• 社群討論：Mografy Discord

如果你用這套流程做出了作品，歡迎到 Discord 分享，也歡迎直接告訴我哪裡還不夠好用。