Claude 程式碼動畫怎麼做？從 Prompt 拆出 Motion Design Skill
- 別只收藏 Prompt，從作品反推動畫規格，整理成可重複使用的 Skill。 -
最近看到一個很有意思的 GitHub 專案：awesome-opus5-5-videos。
截至 2026 年 9 月 29 日，專案 README 列出 475 個 Prompt 檔，並從中精選 100 個案例展示。它的特別之處，是把動畫成品和創作者分享的 Prompt 放在一起，讓人有機會研究這些作品是怎麼被描述、再被做出來的。
先補上一個容易誤會的地方：這不是 475 份都完整公開的 Prompt。專案也註明，有些創作者只分享了部分 Prompt，或只留下原始貼文連結。至於 Claude 產生的實作程式碼，也不一定附在每個案例裡；如果創作者沒有另外公開，你可以重跑 Prompt，再觀察自己得到的 HTML、Canvas、SVG 或 Three.js 程式碼。
我最近也一直在研究 Claude 用「寫程式」做動畫。看得越多，我越覺得這個集合真正值得看的，不是能不能一次複製大量 Prompt，而是我們可以從成品回頭研究：一句動畫需求，如何變成有時間、有物件、有動作的可執行規格？
這些案例走的是程式碼動畫路線
這批作品不是把一句描述直接交給影片模型，再由模型輸出一段影片。依專案的說明，創作者會請 Claude Opus 5.5 把動畫寫成程式；常見做法包括 HTML、Canvas、SVG 和 Three.js。瀏覽器負責執行動畫，若需要影片檔，再把播放畫面錄製或輸出成影片。
可以先用這個流程理解：
Prompt → Claude 寫動畫程式 → 瀏覽器執行 → 需要時錄成影片
因此，Claude 在這個流程中同時接到導演、動畫師和前端工程師的工作：它要理解畫面、安排動作，也要把想法轉成瀏覽器能執行的程式。
一支動畫可以拆成畫面、動作與聲音
從案例可以看出，程式碼動畫大致有三個互相配合的部分：
| 部分 | 常見技術 | 主要負責的內容 |
|---|---|---|
| 畫面怎麼畫 | Canvas、SVG、Three.js、GLSL | 文字、圖形、粒子、3D 場景、材質與光影 |
| 畫面怎麼動 | CSS Animation、GSAP、JavaScript timeline | 元素何時出現、移動路徑、縮放、速度與緩動 |
| 聲音與節奏 | Web Audio API 或音訊素材 | 音效、節拍與畫面轉場的搭配；也可以完全不加聲音 |
有些作品把樣式、動畫與程式包進單一 HTML，打開瀏覽器就能預覽；要分享成影片時，再另外錄製播放結果。重點不是一定要採用哪個框架，而是讓畫面、動作和節奏彼此對得上。
好的動畫 Prompt 更像一份 Motion Design 規格
寫程式做動畫時，cinematic、dramatic lighting 或 epic 這類形容詞仍能傳達美術方向，但通常不足以告訴模型一支動畫要怎麼走。更有用的資訊是時間、物件、動作和輸出方式。
先安排時間，再描述每段畫面
例如，想做一支 10 秒的科普動畫，可以先列出節奏：
| 時間 | 畫面與動作 |
|---|---|
| 0–2 秒 | 主視覺淡入，主題物件由小放大 |
| 2–4 秒 | 標題從側邊滑入，停在畫面安全區 |
| 4–7 秒 | 圖表逐步成長，重點數字依序出現 |
| 7–10 秒 | 鏡頭拉遠，收束成結尾畫面 |
這比只說「做一支很有電影感的動畫」更能讓模型掌握段落長度、先後順序和畫面轉換。
說清楚畫面有哪些物件
把文字、圖表、角色、圓形或背景元素列出來，並說明它們的位置、大小關係和視覺層級。若標題要優先被讀到，可以直接交代標題與圖表不要互相遮擋，重要內容要留在畫面中央的安全範圍。
描述物件如何移動
除了「要出現什麼」，還要指定誰先動、往哪裡移動、移動多久、是否放大或淡出，以及動作要急促還是平滑。這些都是動畫規格的一部分，能幫助模型把靜態構想轉成有節奏的畫面。
補上風格與輸出條件
最後再補色彩、字體感受、比例、背景、是否需要聲音，以及希望怎麼預覽。若想快速在瀏覽器查看，可以要求輸出單一 HTML 檔；如果結果要再剪輯，也要先想好影片比例和結尾如何銜接。
為什麼不該只複製 Prompt？
只收集提示詞，很容易變成「看過很多範例，卻不知道怎麼自己改」。更有效的讀法是把成品、原始 Prompt 和自己重跑後的程式碼對照起來：
- 先看成品： 留意它為什麼順、哪裡吸引你，以及畫面如何轉場。
- 再看 Prompt： 找出創作者如何描述時間、構圖、物件與動作。專案也提醒，有些檔案只提供節錄或原始貼文。
- 自己重跑一次： 觀察模型選了什麼技術、如何切分動畫，以及結果和原始成品有哪些差異。
- 一次只改一個條件： 例如配色、文字、速度或畫面比例，才看得出修改造成的差異。
- 整理有效規則： 記下哪些描述能穩定改善節奏、版面或可讀性。
先挑和自己用途相近的案例就好。README 目前精選的分類包括 Motion Graphics、Explainers、3D Scenes，以及 Games & Interactive。若目標是做 AI 科普短片，可以先從 Explainers、Typography 和 Data Visualization 類型找靈感，不需要依序研究所有案例。
把反覆驗證過的方法整理成 Animation Skill
當你研究過一批相似作品，就可以把有效的方法整理成自己的 Skill。它不只是保存一段長 Prompt，而是說明 Agent 每次接到任務時要如何完成工作，例如：
- 輸入與目標： 影片主題、觀眾、時長、比例和發布平台。
- 畫面規格： 場景、物件、文字層級、構圖與色彩方向。
- 時間軸： 每段的開始與結束時間、動作順序、轉場和節奏。
- 實作與輸出： 選擇 Canvas、SVG、CSS 或 Three.js 等合適方式，交付可預覽的檔案。
- 驗收方式： 檢查文字、時間軸、畫面比例、播放效果與需要修正的地方。
等這些規則經過幾次實際製作與修正，你就可以把文章、課程或數據內容交給 Agent，再要求它依照自己的 Explainer Animation Skill 開始規劃。模型和工具可能改變，但你整理出的判斷方法、範本與驗收步驟仍然可以繼續累積。若你也在整理 Skill 與 Agent 工作方式，可以延伸閱讀從 Skill 到 Agent Harness和Codex Skill 與 Plugin 的差異。
新手可以怎麼開始？
- 從專案中挑三個和自己目標相近的案例。
- 先完整看完成品，再讀它附的 Prompt 或原始貼文。
- 用相同 Prompt 跑一次，觀察模型實際產生的程式和動畫。
- 每次只改一個變數，記錄畫面和節奏怎麼變。
- 把反覆有效的規則整理起來，再逐步形成自己的 Skill。
最後要建立的，不是「我收藏了多少 Prompt」，而是自己能否把作品拆成規格，再把有效做法整理成可重複使用的 Library、Skill 和 Workflow。這才是這批程式碼動畫案例最值得研究的地方。
專案連結：awesome-opus5-5-videos。專案 README 指出，影片與 Prompt 歸原創作者所有，並在各案例連回原始來源；公開可看不等於可以任意重用素材。
常見問答 (FAQ)
Q1：這些案例是 Claude 直接生成影片檔嗎？
不是。專案介紹的是 Claude 先把動畫需求寫成程式，再由瀏覽器執行；若需要影片檔，還要錄製或輸出播放結果。
Q2：專案裡的 475 個 Prompt 都能看到完整內容嗎？
不一定。截至 2026 年 9 月 29 日，README 列出 475 個 Prompt 檔，但也說明部分創作者只分享節錄或原始貼文。每個案例可取得的資訊要以該項目的連結為準。
Q3：研究案例時，為什麼還要自己重跑 Prompt？
專案提供案例和創作者分享的提示詞，但不保證每筆都附上生成後的完整程式碼。自己重跑後，才能檢視實際實作方式，並比較它與原始成品的差異。
Q4：Prompt 和 Animation Skill 有什麼不同？
Prompt 通常描述一次任務的需求；Animation Skill 則把可重複的方法整理成流程，包含輸入、規格、實作方式和驗收步驟，讓 Agent 能依同一套方法處理不同內容。
