Motion Skills

用 Claude 做動態圖像（Motion Graphics）：範例、Skill 與提示詞（2026）

Claude 做動態圖像的方式是把它寫成程式碼：動態文字、圖表、Logo 片頭和示意圖動起來，再渲染成 MP4。Team 和 Enterprise 方案可以直接用 Claude Motion；其他方案在 Claude Code、Codex 或 Cursor 裡裝一個動態圖像 Skill，也能做出 Claude Motion 風格的動態效果。

Claude Motion 的方案與功能以 Anthropic 說明文章和價格頁為準，最近一次核對是 2026 年 10 月 29 日。本站為獨立網站，與 Anthropic 無關聯。

「Claude 動態圖像」指的是什麼

動態圖像（Motion Graphics）是會動的設計：文字、數字、形狀、圖示和 Logo 在畫面裡運動，而不是實拍畫面。Claude 擅長做這件事，原因只有一個：它會寫程式碼，而動態圖像本來就能用程式碼寫出來。一段動畫就是一個 HTML 頁面，裡面的文字、圖表和形狀隨時間變化；渲染器在瀏覽器裡逐格播放，把每一格存成影片。

用 Claude 做動態圖像，常見的有三種方式：

  1. Claude Motion：Anthropic 在 claude.ai 中推出的 beta 功能，提供給 Team 和 Enterprise 方案。描述一段簡短的動畫講解，附上你自己的報告、資料或圖片，在對話裡修改，再匯出 MP4。它不是影片生成模型：不會生成實拍畫面，也不會生成 AI 人物。詳情見 Claude Motion 指南。
  2. 直接給 Opus 5.5 一段提示詞：在對話或 Claude Code 裡，請它把動畫寫成 HTML、Canvas 或 Three.js 頁面。X 上大家分享的 Claude 動態短片，大多是這一種。每次執行結果都不一樣，錄製或渲染需要自己完成。
  3. 在程式設計 Agent 裡用 Skill：Claude Skill 是一個裝著說明和檔案的資料夾，Claude Code（以及 Codex、Cursor、Gemini CLI）在請求相符時載入它。動態圖像 Skill 告訴 Agent 怎麼規劃影片、用哪種風格、怎麼檢查每一格、怎麼渲染 MP4，所以每次都能維持同樣的品質。

Claude motion graphics 範例

用我們的 Skill 做的

下面每支影片都由程式設計 Agent 透過我們的某個 Skill 導演並渲染，素材真實，配樂原創。按下播放就能聽到聲音。

Motion Skills 的 Logo 片頭

我們自己的標誌：波浪線像動畫曲線一樣畫出來，橘色方塊隨後補上，名字逐字出現，配一段四個音的聲音標識。

品牌片頭 範例16:9 · 5 秒

2027 年 8 月 2 日日全食

是什麼、何時何地、全食帶經過哪些地方、路克索附近最長的黑暗、還剩幾天，以及怎樣安全觀看。

活動預告片 範例16:9 · 35 秒

日食資料出自 NASA 日食星表；護眼說明出自美國天文學會。

輝達資料中心：起飛的那個季度

依輝達自己公布的 18 個季度資料中心營收：2024 財年第二季成長 141%，此後每季都在成長，口徑變化標在圖上。

數據片 範例16:9 · 22 秒

非官方；來自輝達季度財報新聞稿。

為什麼會有四季

不是因為距離：按真實形狀畫出地球軌道，再講地軸傾斜，12 月同樣的陽光攤在 2.1 倍的地面上。

講解片 範例16:9 · 58 秒

一個數字看英文維基百科

7,254,501 篇條目做成直式卡片，附上總字數和讀取數字的日期。

圖文卡片 範例9:16 · 21 秒

出自維基百科自己的站點統計，截至 2026 年 10 月 24 日。

Plainjoint 章節套件

一個教學頻道的開場、四張落在尺規刻度上的章節卡，以及疊在素材上的章節進度條。

標題與轉場 範例16:9 · 18 秒

示範頻道，為這個例子虛構。

單品風格，每支都為一個示範產品渲染：

Brew 印刷風Motion Skills
Torque 技術藍圖Motion Skills
疫苗如何訓練身體Motion Skills
白板講解功能開關Motion Skills
逐條回應顧慮Motion Skills
方形更新日誌Motion Skills

用 Claude Motion 做的，來自 X

創作者自己發布的真實 Claude Motion 作品。點開每張卡片，可以看到影片、作者和原始貼文。

把 GA4 營收資料做成動畫故事@analyticsnerd
把程式碼庫最新的三個功能做成視覺化更新日誌@nateparrott
附利潤率圖表的財務 AI 產品講解@drewfallon12
用日語講解 Claude Dashboards 與 Motion@ryu_f_web

給 Opus 5.5 一段提示詞做的

Opus 5.5 只憑一段提示詞、不用任何 Skill，從零寫成一個 HTML 頁面的動畫。

一個 HTML 檔案裡的動態文字和立體鉻金屬結@Z0llan
一支 90 秒的液態鉻作品集短片@kloss_xyz
「沒有最大的質數」：機械裝置演繹歐幾里得@Gdgtify
圖解今年大型語言模型的進展@nummanali

更多作品依場景和製作方式分類，見作品庫。

做動態圖像的 Claude Skill

「Claude，把這個做成動畫」和一支能直接發布的影片之間，差的就是一個動態圖像 Skill。它帶著風格、節奏規則、檢查流程和渲染方法，Agent 不必每次都從一張白紙開始。我們的 Skill 分兩種。

單品風格：一種風格只做一件事，長度從幾秒到半分鐘：一個標題、一段 Logo 片頭、印刷風或藍圖風的發表影片、用剪紙或白板講清一個想法。每款 $4.90，也可以用方案全部解鎖。

動態文字標題

踩著節拍佔滿整個畫面的標題。

付費
文字動態16:9 / 9:16 / 1:1

Logo 片頭片尾

你的 Logo 被切成條帶，踩著節拍拼合在一起。

付費
品牌片頭16:9 / 1:1 / 9:16

半調印刷發表影片

把你的發表印出來：色版晃動著套準，網點會呼吸，你的真實截圖在重拍落下時完成打樣。

付費
發表片16:9 / 9:16 / 1:1

藍圖發表影片

你的真實畫面先畫成一張技術圖紙，標出各項功能，再變成實物。

付費
發表片16:9 / 9:16

剪紙風講解片

一個想法，用剪紙層層展開：步驟卡片像立體書一樣彈起。

付費
講解片16:9 / 9:16 / 1:1

白板講解片

一個想法，邊講邊手繪：步驟逐一畫出、連起來，再做總結。

付費
講解片16:9 / 9:16 / 1:1

完整版 Skill：製作某一種片型的整支影片，內建多種風格：搭配你剪輯的標題與轉場、品牌片頭、數據影片、講解影片、直式短片或圖文卡片。

完整版 Skill

標題與轉場

做出和你的剪輯相配的開場、章節卡和轉場。

付費

內建風格: 動態文字 · 章節轉場 · 復古像素

完整版 Skill

品牌片頭

先學會你的品牌一次，再用它做 Logo 動畫和開場。

付費

內建風格: 標誌動效 · 立體產品 · 動態文字

完整版 Skill

數據片

從你的數字裡找到故事，按真實比例畫出來。

付費

內建風格: 數據故事 · 模組網格 · 雜誌拼貼

完整版 Skill

講解片

理清一個概念的結構，讓講的東西本身動起來。

付費

內建風格: 原理圖解 · 系統圖 · 扁平世界 · 剪紙 · 雜誌拼貼 · 手繪白板

完整版 Skill

直式短片

從腳本或一個點子到 9:16 短片，第一秒就有鉤子。

付費

內建風格: 動態文字 · 雜誌拼貼 · 復古像素 · 數據故事

完整版 Skill

圖文卡片

一句金句、一則評價或一個數字，讓人停下滑動。

付費

內建風格: 動態文字 · 雜誌拼貼 · 模組網格

所有 Skill 都在 Skill 商店。想先試試，Motion Director 是免費 Skill，用 Google 登入即可使用，能做一支 10–20 秒、任何類型的影片，風格可選動態文字、數據故事或白板。

用 Claude Code 或 Codex 做動態圖像

你需要一個程式設計 Agent（Pro 或 Max 方案裡的 Claude Code，或者 Codex、Cursor、Gemini CLI）、Node.js 22 或更新版本、FFmpeg 和 Google Chrome。不需要 API 金鑰。

  1. 一句話安裝 Skill。 在一個資料夾裡開啟 Agent，貼上：

    Read https://claude-motion.com/skills/motion-director/install.md and follow it to install the "motion-director" skill, then make a first video with it.

    Agent 會執行一條指令 npx motion-skills install motion-director；第一次執行時，在瀏覽器裡用 Google 登入即可。

  2. 說明用途，指出素材。 例如：「根據 CHANGELOG.md 裡的 2.0 更新說明，幫我們的產品影片做一段 15 秒的 16:9 片頭標題。品牌色在 brand.css 裡。」Skill 會列出畫面上要出現的每個字和數字，並註明出處。

  3. 確認關鍵格。 動手之前，它會先選好風格和配色，給你看一格畫面。改一格比改一整支影片快得多。

  4. 讓它製作、檢查、配樂。 它用 HTML 和 GSAP 寫出動畫，檢視自己渲染的畫面，逐行對照你的素材檢查，再寫一段原創配樂。

  5. 用白話提出修改。 「Logo 多停一下」「換成我們的綠色」。它只改那一處，再重新渲染。

  6. 拿到檔案。 要發布就用 MP4；要疊在剪輯軟體裡的素材上，就用帶透明通道的 MOV；也能匯出 GIF 和 WebM。

在 Codex 裡，這個 Skill 放在 ~/.agents/skills/，在 Cursor 裡放在 .cursor/skills/；安裝指南會把它放到你的 Agent 讀取的位置。每一步的詳細過程，以及一支真實影片從需求說明到最後一次修改的經過，見如何用 Claude Code 製作影片。其他 Agent 見用 Codex、Cursor 或 Gemini CLI 製作影片。

Claude 動態圖像提示詞

如果你比較想寫提示詞而不是裝 Skill，Claude Motion 提示詞頁收錄了附預覽的風格提示詞，每條都標明在哪裡執行：Claude Motion 提示詞和 Opus 5.5 提示詞。好的動態圖像提示詞要說清楚：誰來看、在哪裡看、多長、用哪些內容、怎麼收尾。例如給 Claude Motion 的：

為[誰來看，例如：在 YouTube 上看我們產品影片的觀眾]做一段 15 秒的 16:9 動態文字標題。只用這些文字：[你的標題，例如「更快上線」]、[你的副標題，例如「2.0 版」]。每個節拍一個詞，用我們的顏色[例如黑色和萊姆綠]，不用圖庫圖片。最後停在標題上，維持兩秒。

把 [方括號] 換成你自己的文字即可。用 Skill 要寫的更少：給它素材和一句話就好，其餘的都在 Skill 裡。

常見問題

Claude 能做動態圖像嗎？

能。Claude 把動態圖像寫成程式碼（會動的文字、圖表、形狀和 Logo），再把程式碼渲染成影片。在 Team 和 Enterprise 方案的 Claude Motion 裡，可以直接從 claude.ai 匯出 MP4；在 Claude Code、Codex 或 Cursor 裡，動態圖像 Skill 會在你的電腦上渲染出 MP4。

有做動態圖像的 Claude Skill 嗎？

有。動態圖像 Skill 是程式設計 Agent 載入的一個裝著說明和檔案的資料夾，例如我們的單品風格（動態文字標題、Logo 片頭、發表影片）和完整版 Skill（標題與轉場、品牌片頭、數據影片）。Motion Director 是免費 Skill，用 Google 登入即可使用。

用 Claude 做動態圖像，一定要有 Claude Motion 嗎？

不用。Claude Motion 是 beta 功能，只提供給 Team 和 Enterprise 方案。Pro 或 Max 方案可以用 Claude Code 加動態圖像 Skill，做出同類動畫並在自己電腦上渲染；Free 方案可以在 Codex、Cursor 或 Gemini CLI 裡使用這個 Skill。

做出來的東西能放進 Premiere、Final Cut 或 CapCut 裡用嗎？

能。Skill 可以渲染 MP4，也可以渲染帶透明通道的 MOV，用來把標題、下方字幕條和片頭疊在你自己的畫面上。GIF 和 WebM 也能匯出。

要花多少錢？

Motion Director 免費。每個單品風格或完整版 Skill 售價 $4.90，或透過方案取得全部 Skill：每月 $9.90、每年 $79，或一次付清 $169 的創始終身方案。不用積分；唯一的用量是你的 Agent 本身的用量。

Claude 能做有真實畫面或真人的動態圖像嗎？

不能。Claude Motion 不會生成實拍畫面或人物，我們的 Skill 也不會：它們讓文字、圖表、形狀、你的截圖和照片動起來。需要實拍鏡頭，就自己拍，再把動態圖像疊在上面。

延伸閱讀

Claude 是 Anthropic, PBC 的商標。作品庫中的影片歸原作者所有。