whoops.

Claude 動態圖像教學:用 Opus 5.5 與 Remotion 把自然語言變成 MP4 行銷動畫

中文需求經 Claude 編寫可修改的 Remotion 專案,渲染為動態圖像 MP4 的概念圖
Claude 負責寫與改專案,Remotion 負責逐格渲染;成品仍須預覽驗收。

用自然語言就能做 Motion Graphics:本文拆解 Claude Opus 5.5 搭配 Remotion 的完整工作流,從 2026 年 9 月的社群作品示例、官方技能與模板、七步產出流程與靜態影格體檢,到 24 種特效中文指令表、產品比較頁動畫與品牌 Reels 兩個行銷情境,並整理 Remotion 授權邊界與生成式影片模型的分工。

本頁目錄

行銷團隊手上常有一種需求:比較表的規格要動起來、開場要有品牌動畫、活動預告要一支直式短片,但排隊等設計師或外包製作,時程掌握在別人手上。2026 年 9 月下旬開始,這條生產線多了一個新選項:用自然語言描述你想要的動態效果,讓 Claude Opus 5.5 寫出一整套 Remotion 專案,再渲染成 MP4 檔。模型產出的不是影片畫面本身,而是一份「會動的程式」,由渲染引擎逐格算出最終影片。

2026 年 9 月下旬,一支用這條路線做出的 15 秒求職作品集在社群引發討論;如今官方文件與社群資源俱全,已經收斂成可重複的工作方法。本文完整拆解它給台灣的行銷與網頁設計工作者:工具組合的原理、Claude Opus 5.5 帶來的改變、Remotion 的授權與指令、一套七步工作流、24 種特效的中文指令表,以及兩個行銷情境的完整演練。文內所有官方數字皆以 2026 年 10 月查證的官方頁面為準,工具改版速度快,採用前請再核對當日官方資料。

重點速覽

  • 這條工作路線的完整樣貌:用自然語言驅動 Claude Opus 5.5 寫出 Remotion 專案,再由 Remotion 渲染成 MP4。模型本身不生成影片畫格,生成的是會動的程式碼。
  • Opus 5.5 於 2026 年 9 月 22 日發布,官方稱輸出速度比 Opus 5 快 30% 以上、典型工作負載成本降約 40%,API 每百萬 token 輸入 4 美元、輸出 20 美元。
  • 官方公告引述的早期測試中,Opus 5.5 在「單一提示詞建遊戲」的圖形強度與完成度上得分高於其他 Claude 模型,這是視覺產出力最直接的官方側證。
  • Remotion 是用 React 寫影片的渲染引擎,官方核心概念一句話:影片是隨時間變化的影像函數。個人與 3 人以下營利組織可免費商用,4 人以上的公司或協作團隊需購買 Company License,非營利組織另具免費資格。
  • 七步工作流:列素材清單、定規格與分鏡、建專案交給模型、用靜態影格體檢版面、全片預覽、精準回饋修正、正式渲染交付。把驗收前置到靜態影格階段,是這套流程的設計重點。
  • 24 種特效指令整理成文字訊息與識別動態、換幕與鏡頭運動、版面組構與介面演示、圖形與數據動態四大組,涵蓋產品比較頁動畫與品牌 Reels 的多數需求。
  • 與生成式影片模型是互補不是取代:寫實人物與鏡頭質感可交給官方定位為「生成含音訊的電影感影片」的 Veo,品牌文字、規格圖表與介面動態交給程式化路線。

Claude 動態圖像是什麼:用自然語言驅動的程式化 Motion Graphics

從字面拆解,Motion Graphics(動態圖像)指的是文字、圖形、圖表、版面這類平面元素的動態設計,你在企業簡報開場、產品頁的規格動畫、社群短片的字卡與數字滾動裡看到的都屬於這一類。它與實拍影片的分工很清楚:實拍處理真人、場景與鏡頭敘事,動態圖像處理資訊的視覺化與節奏。

Motion Graphics 與一般影片的差別

對行銷與網頁設計工作者來說,這個差別非常實際。一般的廣告影片需要腳本、演員、拍攝、剪接,修改一個鏡頭可能要動到整段時間軸;動態圖像的內容本體是文字與形狀,每個元素的位置、顏色、出場時機都是設計決策,也因此特別適合被程式描述。一支 15 秒的比較表動畫,本質上就是「哪個元素在第幾秒、從哪裡、怎麼移動到哪裡」的清單,而這種清單正是程式碼最擅長表達的東西。

傳統做這類內容的工具是時間軸式的動畫軟體,學習曲線陡,且專案檔不易協作與版本管理。程式化路線把同樣的內容變成一份 React 專案:設計師看得到元件,工程師看得到程式碼,而現在,擅長寫程式的語言模型讓第三種角色加入,不懂程式的行銷人也能用中文描述需求,由模型產出整份專案。

為什麼是 Claude 加 Remotion:程式碼即時間軸

Remotion 官網對自己的定位一句話講完:用程式的方式做影片,以 React 建立影片與動態圖像,搭配編碼代理、批量渲染與應用程式開發。官網首頁甚至直接主打「用你的編碼代理把點子變成影片」,並強調「程式碼永遠是唯一事實來源」。這代表這條工具鏈不是社群硬湊出來的偏方,官方已明確支援代理式工作流。

程式碼即時間軸,帶來三個對行銷部門很有感的好處。第一,修改可追溯:客戶說「藍色再深一點、數字停格久一點」,對應到專案裡就是幾行程式的調整,改了什麼一目了然,不必在時間軸上憑感覺找。第二,內容可參數化:同一份專案換掉資料檔與文案,就能產出下一季的版本,比較表改規格、Reels 換活動資訊,都是同一份專案的再生,無須重做。第三,產出可版本管理:專案放在程式庫裡,誰改了什麼、什麼時候改的,都有紀錄可查。

同一份動態圖像專案接收不同資料卡後,重新產出兩個不同數值版本的示意圖
將文案與數字放在資料層,版面及動畫保留在共用專案;每版輸出仍須核對資料與畫面。

Claude 在這條鏈裡扮演的角色,是把中文的需求描述翻譯成這份 React 專案,並且在你回饋意見時持續修改它。你不需要親自寫程式,但需要會描述需求、看懂專案結構、驗收每一格畫面,這些正是後面七步工作流要建立的技能。若你要的是網頁介面裡的常駐小動畫而非影片檔,那是另一條輕量路線,本文在情境一段落會再說明兩者的分工方式。

一則社群作品示例:15 秒求職作品集

認識這條工作流,可以從一則社群作品示例看起。2026 年 9 月 25 日,X 用戶 Stephan Livera 發文,分享他用 Opus 5.5 以 Max effort 設定生成的 15 秒動態圖像作品集。他給模型的提示詞全文是:「make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.」,翻成中文大意是:做一支充滿動感的 15 秒動態圖像影片,展示你是一位多麼出色的動態設計師,就當成你履歷用的作品集,放手去做。這則貼文在社群引發轉發與討論,也示範了「用一句話徵作品集」的做法,原始貼文可以在 Stephan Livera 的 X 頁面 看到。

在作品之外,兩個收藏站把零星的作品變成了可瀏覽的靈感庫。社群網站 Prompt Motion 自述為「用 Claude Opus 5.5 製作的動態影片收藏,附上背後的提示詞與技能」,截至 2026 年 10 月查證,站上分類以 Product UI 與 Kinetic type 兩類最多,各約百件,Shapes、Particles、Charts、Music 等類別也各有數十件,分類計數會隨時間變動,引用時請以當日站上數字為準。Remotion 官方也經營 Prompt Showcase,收錄社群以 Remotion 技能搭配各種編碼代理做出的作品,包括新聞標題重點整理、地圖上的旅行路線、透明背景的行動呼籲疊加與圖表動畫,都是行銷情境可以直接借用的題型。

Claude Opus 5.5 帶來了什麼改變

依 2026 年 9 月 22 日的 Anthropic 官方發布公告,Opus 5.5 是 Claude 5.5 家族的第一款模型,官方定位它在多數工作上達到 Claude Fable 5.1 的水準,運行成本比 Opus 5 低 40%。速度面,官方稱輸出比 Opus 5 快 30% 以上;價格面,API 每百萬 token 輸入 4 美元、輸出 20 美元,比 Opus 5 低 20%,快取讀取每百萬 token 0.20 美元,低了 60%。40% 這個數字要正確理解:它出自官方在預設設定下對典型工作負載的測試,把單價調降與每項任務更省的 token 用量合起來計算,自己的實際降幅會因任務型態而不同。

對動態圖像這種「一個專案等於一大包程式碼反覆修改」的任務,長任務能力比單次問答的聰明程度更關鍵。官方公告引述的早期測試裡,有測試者用 Opus 5.5 在一天內完成 68 萬行程式碼的遷移,也有測試者用它稽查並修復一個 20 萬行的程式庫,花了不到 3 小時,而 Opus 5 做同樣的事超過 20 小時,token 用量是 Opus 5.5 的 2.5 倍。一支品牌影片專案可能包含多個場景與為數不少的動畫元件,來回修改多輪後,程式碼量也會隨之累積;這類任務與官方個案的測試情境相近但不相同,官方個案僅供參考,動畫專案的表現仍須自行驗證。

畫面品質的官方側證則來自另一個測試:官方公告引述,有測試者讓多個 Claude 模型從單一提示詞建構一款遊戲,Opus 5.5 在圖形強度與完成度上的得分高於其他 Claude 模型。動態圖像看的正是圖形細節與收尾質感,不過這個得分來自單一提示詞建遊戲的個案,圖形表現會隨專案型態而異,你的動畫專案仍要以自己的產出驗收。代理式編碼的基準分數方面,官方自測表列 Terminal-Bench 4.0 達 66.4%,此一項目以 xhigh effort 呈現,標準誤為正負 2.6 個百分點;官方並註明,除特別標示外,所有基準結果皆以最大力度的自適應思考為預設。這些是官方自測數字,橫向比較時請保留這層認知。

取得方式分訂閱與 API 兩路。訂閱端,Claude 官方定價頁列 Pro 方案月繳 20 美元、年繳折算每月 17 美元(預付 200 美元),功能清單包含 Claude Code;Max 方案自每月 100 美元起,提供 5 倍或 20 倍用量。發布同時官方也調高了 Pro、Max、Team 與按席位計費 Enterprise 方案的五小時用量上限,並給訂閱用戶一次性、可儲存備用的用量重置。API 端,模型識別碼為 claude-opus-5-5,並已上架 AWS、Google Cloud 與 Microsoft Azure。安全評估的完整細節,官方以 System Card 形式公開,需要嚴謹引用時以該文件為準。

價格結構的細節、與前代的相容性變更、訂閱額度的完整調整內容,站上已有 Claude Opus 5.5 完整解析深入整理,本文不再重複,僅聚焦它與動態圖像工作流的交集:更快的輸出讓迭代節奏變快,更低的成本讓大量試錯可行,而專案的成品品質,靠的是後續工作流裡逐格驗收的紀律。

Remotion 快速認識:用 React 寫影片的渲染引擎

Remotion 是這條路線的渲染端,官方網站的第一句話就是「用程式做影片」。起手式是一行指令:npx create-video@latest,這會建立一個完整的影片專案,接下來所有畫面、動畫與音訊都在這個專案裡以 React 元件定義。它同時提供開發預覽環境與正式渲染指令,從草稿到輸出一條龍都在同一份專案裡完成。

核心概念:影格、fps 與「影片是影像的函數」

官方文件的基礎概念頁把 Remotion 的核心想法講得很白:給你一個影格編號與一張空白畫布,你用 React 在上面渲染任何想要的內容。官方金句是「A video is a function of images over time」,影片是隨時間變化的影像函數。實作上,每秒影格數與畫面尺寸透過 useVideoConfig() 取得,元件依影格編號決定每個元素當下的位置、大小、透明度,渲染器把每一格都算出來,串成影片。

給非工程師的翻譯是這樣:動畫的每一格畫面,都是照著同一套規則畫出來的,而這套規則就是程式碼。第 30 格的時候標題在哪裡、數字滾到多少、卡片翻到哪一面,全部寫得清清楚楚。這讓時間的調整有明確的施力點:你說「數字定格時間延長半秒」,模型改的是規則裡的一個時間參數,重渲染後每一格都照新規則重算;不過參數變動仍可能連動到相關場景,修改後仍須回頭檢查受影響的段落。官方範例使用 TypeScript 的 tsx 檔案撰寫,不過交給 Claude 之後,你幾乎不需要直接碰這些檔案。

從自然語言到影片:官方代理技能與提示詞模板

Remotion 官方對編碼代理的支援不是口頭喊喊。官方代理技能文件明寫,Remotion 維護一組 Agent Skills,定義在 Remotion 專案裡工作的最佳實作,適用於 Claude Code、Codex、Kimi Code 或 Cursor 這類代理。技能內容涵蓋建立專案與合成、動畫、排版、字體與時間軸標記的寫法、地圖動畫,以及把影片功能做成產品的模式;建立新專案時可以選擇載入。對使用者來說,這代表代理可以參考官方整理的最佳實作來產出程式碼,生成結果仍須親自預覽與驗收。

更進一步,官方還提供了 Prompt to Motion Graphics 的 SaaS 入門模板,一個以 Next.js 建立的起始專案,讓終端使用者以自然語言描述動畫,應用程式即時生成並預覽,支援對話式迭代修改,並具備聰明編輯功能:模型自行決定要做局部修改還是整段重寫。這個模板原本是給想做影片生成產品的團隊用的,但它揭示的互動模式,正是個人工作流裡你與 Claude 的相處方式:先描述、再看、再調,把大改動留給結構問題,小修小補用局部編輯處理。

七步工作流:把驗收前置的產出節奏

把工具鏈換成可執行的流程,以下七步是本文建議的工作流:個別指令與功能依據官方文件,整體編排則是本文的整理。先記住節奏原則:這條路的時間應該花在「看畫面與給回饋」,而不是反覆渲染整支影片等它跑完。渲染一張靜態圖的成本遠低於渲染整支影片,因此整套流程刻意把驗收前置——版面問題在第四步的靜態影格階段就攔下來,正式渲染只留給定案的版本。

步驟一:把素材與資料整理成清單

先不要打開任何工具,把要上畫面的東西列清單。品牌端的標準配備:標誌的 SVG 或高解析 PNG 檔、品牌色碼(含主要色與輔助色,以實際色值明確指定,避免用形容詞描述)、指定字型名稱或字體檔。內容端的配備:要上畫面的所有文字(標題、標語、行動呼籲)、要動態呈現的數字與資料(規格表、占比、成長率),以及每個數字的出處。數字出處這一項最常被忽略,卻是後續驗收的依據:寫清楚每個數字來自哪份資料,之後核對畫面時才有標準答案。素材集中放進代理可讀取的同一個資料夾,並列出檔名與用途。

步驟二:規格與分鏡先定案

規格先定案,避免做到一半改畫面比例。四個必填欄位:畫面尺寸、每秒影格數、總長度、以及每一幕的內容與秒數。本篇建議的示範設定:直式 1080×1920 給 Reels 與短影音、橫式 1920×1080 給官網嵌入與簡報、每秒影格數 30、總長度 15 至 30 秒,實際規格可依投放平台與用途調整。分鏡用文字表即可,一行一幕,寫清楚該幕的標題、出現的元素與收尾畫面。這張表就是你與模型之間的合約,之後的修改都以此為基準,模型偏離需求時,重新提供分鏡表並指出偏離之處,修改後再次核對。

步驟三:建專案,把需求與素材一併交給模型

用一行指令 npx create-video@latest 建立 Remotion 專案,把步驟一的素材資料夾放進專案,接著把需求描述、分鏡表與素材清單一起交給 Claude。描述需求時把握三個要點:講清楚觀眾與用途(投放廣告與官網嵌入的節奏感不同)、講清楚品牌限制(色碼、字體、標誌用法)、講清楚每一幕的重點,特效細節留給模型發揮。讓模型先產出專案結構與幾個核心元件,確認方向後,再逐步展開其他場景。

步驟四:用靜態影格做版面體檢

這一步的概念,是先渲染代表影格來檢查版面。依照 官方靜態影格文件,用 npx remotion still 指令可以渲染單張靜態圖,--frame 旗標指定影格編號,預設輸出 PNG,也可選擇 jpeg、webp 或 pdf 格式。做法:從每一幕挑一到三個關鍵影格,通常是開場定格、文字最密的那一格、圖表長完的瞬間與收尾畫面,逐一渲染成圖檔,攤開來檢查。

看什麼?一份檢查清單:字級在縮圖狀態下是否仍可讀(社群動態裡你的影片常常只有名片大小);文字與元素是否壓到畫面邊界;品牌色是否與色碼一致;畫面上的數字是否與資料表完全相同;深色背景上的文字對比是否足夠;直式版面的上下是否預留了空間。渲染單張靜態圖的成本遠低於整支影片,先透過代表影格提早發現其中的版面問題;但抽查無法保證排除其他影格的錯字與遮擋,完整預覽與成品驗收時,仍須檢查文字、數字及遮擋。

步驟五:完整預覽,檢查節奏與連續性

版面通過後,在 Remotion Studio 裡預覽整支影片的動態表現。這階段看的不是單格畫面,而是節奏與連續性:元素出場的先後順序是否配合敘事、轉場是否突兀、數字滾動的速度是否能讓人讀完、每一幕停留的時間是否足夠吸收資訊。預覽時把分鏡表放在旁邊逐幕打勾,是有助抓漏的做法:模型偶爾會漏做某一幕的某個元素,這類遺漏靠整體印象不一定注意到,對照清單逐幕檢查則能補足。把看到的問題逐條記下來,標注大約發生在第幾秒,這份清單就是下一步的修改依據。預覽時建議用與最終觀眾相同的裝置尺寸看一次:手機上預覽直式內容,桌機上預覽橫式內容,感受才會準。

步驟六:精準回饋與局部迭代

回饋給 Claude 時,精準是唯一的紀律。不要說「感覺不夠順」,要說「第二幕的規格列進場太快,延遲錯開拉大到每列多 0.1 秒,全部到位的時間點不變」。指定位置(第幾幕、哪個元素)、指定現象(什麼時候發生)、指定期望(改成什麼樣子),並要求只修改該段相關的元件,不動其他部分。官方 SaaS 模板裡的聰明編輯設計,讓模型自行決定局部修改或整段重寫,在個人工作流裡你同樣握有主導權:結構性的問題(幕的順序、資訊架構)可以要求重寫該幕,細節問題堅持局部調整。每輪修改後,先回到步驟四把受影響的影格重新渲染檢查;若修改涉及時間與節奏,再回到步驟五完整預覽,確認節奏與連續性,避免改 A 壞 B。

靜態影格檢查文字數字與邊界,完整預覽檢查節奏轉場與遮擋,修改後回到受影響檢查的圖解
靜態抽查抓版面與資料,完整預覽看節奏與連續性;局部修改後,重查受影響的影格與段落。

步驟七:正式渲染與成品交付

驗收全部通過後,正式輸出。依 官方渲染文件,用 npx remotion render 渲染影片,預設的 H.264 編碼直接輸出 .mp4 檔,H.264 的預設品質值為 CRF 18,可先以預設值試輸出,再依成品品質與檔案大小調整。有特殊需求時,Remotion 支援六種編碼:h264(預設)、h265、vp8、vp9、av1 與 prores,其中 prores 適合要進後製軟體再處理的素材。渲染入口也不只指令列:Studio 裡有渲染按鈕,開發端有 Node.js 的伺服器端渲染 API,大規模或自動化場景可以走 Lambda 或 GitHub Actions,這對「每週固定產出一支」的團隊特別有用,把渲染掛進自動化流程,人只負責審畫面。

行銷與網頁設計的兩個應用情境

工具與流程都清楚了,用兩個行銷部門真實會遇到的需求把它們串起來。以下情境為了說明流程而設計,數字與規格皆為示意,重點是拆解的方法可以直接搬到你的專案。

情境一:產品比較頁動畫

場景:你家是 SaaS 服務,官網上有張三方案比較表,業務團隊想要一支 20 秒左右的動畫版,放進銷售簡報與投放素材。素材清單:三個方案的規格表(固定欄位例如儲存空間、專案數、支援管道)、幾個想強調的關鍵數字、品牌色與標誌。分鏡可以這樣排:開場標題定調問題,接著規格列依序亮起建立比較感,關鍵數字滾動跳出差異,然後推薦方案的卡片翻轉凸顯,收在行動呼籲。寫成分鏡表交給模型時,一行一幕大致長這樣:

左右捲動檢視完整表格

幕次秒數畫面重點搭配的特效
第一幕0 至 3 秒標題定調「挑方案比的是什麼」標題逐字上浮
第二幕3 至 9 秒三個方案的規格列依序亮起卡片依序滑入
第三幕9 至 14 秒兩個關鍵數字滾動放大差異數字滾動定格
第四幕14 至 18 秒推薦方案翻面凸顯卡片翻轉
第五幕18 至 20 秒行動呼籲與品牌標誌收尾色塊擦拭轉場

這個情境最能發揮程式化路線的參數化優勢。規格表在專案裡是一份資料檔,下一季改了方案內容,換資料重渲染就是新一支影片,不必重做專案。版面把關時特別注意兩件事:規格欄位名稱在每一幕要保持完全相同(比較表最忌諱前後用詞不一致),以及數字滾動的定格值要跟資料檔逐位核對。若這支影片要嵌回比較頁本身,記得留意檔案體積與靜音自動播放的瀏覽器慣例;至於頁面常駐的介面微動畫,例如按鈕回饋與圖示動態,交給 Lottie 這類網頁動畫方案更輕省,兩者各司其職。

情境二:品牌 Reels 與活動預告

場景:品牌經營直式短影音,需要每週產出一支帶有品牌感的 Reels,內容輪替於活動預告、成果分享與產品亮點。直式 1080×1920 的規格下,動態圖像特別適合三種題型:標誌開場搭配標語的識別動畫、把月度成果數字做成長條生長與數字滾動的資料卡、以及活動資訊的字卡輪播。直式版面有一個必守的設計原則:畫面上下要預留空間,避開平台介面與帳號資訊的遮蔽範圍,重要文字置中偏上,這在分鏡階段就要寫進規格,免得渲染後才發現字被蓋掉。

量產的關鍵是範本化。把識別動畫、資料卡、字卡輪播做成三個可複用的場景元件,每週的產出就變成換文案、換數字、換活動資訊,重新渲染即可。這種週更節奏正好用得上前面七步工作流裡的「靜態影格體檢」:範本改版一次搞定之後,每週先抽查新資料與版面的代表影格,再完整預覽並驗收輸出成品。短影音的整體策略、腳本結構與平台經營方法,站上的 短影音行銷指南 有完整討論,動態圖像是你執行面上的產能武器。

24 種動態特效中文指令表

這張表的 24 條指令,是我們按用途重切四組整理的中文說法,直接描述你想要的動態效果,補上品牌色、字體與秒數等脈絡後交給 Claude 即可。四組分別是:文字訊息與識別動態 5 條、換幕與鏡頭運動 6 條、版面組構與介面演示 6 條、圖形與數據的動態 7 條。每一條都附上把關重點,分屬工作流的兩道檢查:版面與資料正確性(字級可讀、對比足夠、貼齊網格、數字格式)在第四步的靜態影格階段核對;速度、節拍與循環(進場節奏一致、殘影收尾乾淨、音樂同步無縫)要到第五步的完整預覽才能確認。特效指令下下去之後,就看這些地方有沒有做到位。

文字訊息與識別動態(5 條)

左右捲動檢視完整表格

中文指令說法適合的內容把關重點
標題文字一次一個字淡入,並輕微上浮到定位開場標語、章節字卡每字間隔一致,標點不可跳到行首
句子像被逐字敲出來,句尾游標閃爍客戶心聲、貼文引用事先指定斷行位置,避免中文標點在行首
一個關鍵詞先放大佔滿畫面,再縮小落進標題裡主打賣點、促銷關鍵字縮小後字級仍可讀,移動路徑走直線
一段文字淡出的同時另一段淡入,位置不動中英對照、新舊訊息替換兩段行高一致,換字瞬間不跳版
飄散的粒子收攏,聚合成標誌或文字品牌收尾、識別開場聚合完成瞬間乾淨銳利,不留雜點

換幕與鏡頭運動(6 條)

左右捲動檢視完整表格

中文指令說法適合的內容把關重點
卡片以縱軸翻面,正面規格、背面說明方案對照、前後比較翻面途中文字提前換面,不可出現鏡像反讀
前一幕整體向左推出,後一幕接著進場章節切換、資訊分頁推移速度統一,兩幕交界不露白
畫面緩慢放大,聚焦到某個區塊從全貌導引到單一賣點放大後邊緣不出現破碎或失真
從特寫慢慢拉開,揭示完整版面結尾總覽、全案展示拉遠後所有元素仍對齊網格
元素快速移動時帶上方向性殘影節奏快的促銷片段殘影長度與速度成比例,停住時收乾淨
一個品牌色塊掃過畫面,掃過處換成下一幕品牌轉場、章節標題擦拭方向全片統一,邊緣平整無鋸齒

版面組構與介面演示(6 條)

左右捲動檢視完整表格

中文指令說法適合的內容把關重點
多張卡片從畫面右側依序滑入定位規格比較、功能列表相鄰元素延遲固定,全部到位總時長可控
散落各處的區塊各自滑動到格線上組成版面服務總覽、流程圖最終停格完全貼齊網格,間距一致
畫面切成宮格,格子按順序亮起填滿產品線總覽、團隊介紹亮起順序配合文字或旁白節奏
分頁標籤的底色滑塊移動到選中的項目功能切換、方案導覽滑塊寬度隨文字長度自適應
模擬滑鼠移動、點擊與選單展開的完整操作操作教學、介面導覽游標路徑走曲線,點擊帶回饋動畫
手機外框內的畫面向上捲動,帶出各區內容App 介紹、響應式展示捲動速度與停留節點配合字幕

圖形與數據的動態(7 條)

左右捲動檢視完整表格

中文指令說法適合的內容把關重點
統計數字從 0 平滑滾動到目標值再定格成果數據、價格、百分比位數與千分位格式固定,定格無殘影
長條圖的長條由基線長到目標高度月度成果、占比比較座標軸刻度在結果畫面出現,長條不越圖頂
折線像被筆慢慢畫出來,沿途長出資料點趨勢報告、成長曲線線條走向與資料一致,資料點時機配合
圓餅圖從十二點鐘方向順時針展開預算分配、流量組成展開順序固定,標籤不互相重疊
元素隨音樂節拍規律地縮放或位移活動預告、社群短影音節拍對上音檔實際時間,循環無縫
地圖上路線向前推進,依序落下地點標記服務範圍、展店故事標記順序與路線一致,地名清晰可讀
環形進度條順時針填滿到目標比例達成率、專案進度起點角度固定,中心數字與環同步

使用這張表的方法:挑選符合分鏡需求的指令,串進你的場景描述,並且每次都補上三件事:這個特效發生的確切時間範圍、它作用的元素是哪一個、它結束後畫面停在什麼狀態。指令表是詞彙庫,不是固定台詞,同一條「數字滾動」用在開場是氣勢、用在結尾是證據,位置與節奏由你的分鏡決定。

與生成式影片模型的定位差異與組合流

很多人會把這條路線與生成式影片模型放在一起比較,但兩者其實在解不同的問題。生成式影片模型走的是文字直接生成畫面的路,以 Google 的 Veo 為例,Google DeepMind 的 Veo 頁面對它的定位是生成含音訊的電影感影片,強項在寫實人物、物理質感與鏡頭語言。程式化路線的強項則完全不同:因為每一格畫面都是程式照規則畫出來的,品牌名稱、規格數字、圖表刻度這些「不能出錯的內容」,正確性由程式碼與資料檔把關,無須仰賴模型對畫面的詮釋。

選擇的判準可以列成三問。內容主體是真人、實景或需要電影感鏡頭嗎?官方將 Veo 定位在生成含音訊的電影感影片,這類需求適合交給它。內容主體是品牌文字、規格比較、數據圖表或介面演示嗎?程式化路線把每個字與每個數字交給程式與資料明確控制,仍須核對輸入資料與輸出成品。內容之後需要頻繁修改或按資料批量再生嗎?程式化專案改資料重渲染的特性,適合需要按資料反覆產出的專案。回答完這三問,多數行銷素材的歸屬就很清楚,而且兩者可以是同一個專案的兩個工項。

兩者也可採用組合的方式:用生成式模型產出寫實的背景素材或情境片段,再用 Claude 加 Remotion 把品牌字卡、規格圖表與介面動態疊上去,前者負責氛圍與質感,後者負責精確與一致。反過來的組合也成立,先在程式化專案裡做出圖表動畫,輸出後進剪輯軟體與實拍素材混剪。生成式模型那一側的提示詞寫法,包含時間軸、運鏡與連續性三個變數的完整框架,站上的 AI 影片提示詞指南有深入教學,兩篇搭配使用就是完整的影片產線。要留意的是,各家生成式模型的規格與版本更動很快,具體數字請以各官方頁面當日資料為準。

生成式模型的情境背景加上 Remotion 的文字與圖表圖層,合成一個影片畫面的示意圖
生成素材提供情境,程式圖層控制字卡與數據;輸入內容與合成成品都要核對。

授權與商用注意事項

這條工作流的成本結構有三塊:Claude 端的訂閱或 API 費用、Remotion 端的授權、以及素材端的權利金。Claude 端前面已經算過,多數個人與小團隊走每月 20 美元的 Pro 訂閱就涵蓋 Claude Code 的使用。Remotion 端要特別留意規模條款:依 官方授權頁,個人、最多 3 名員工的營利組織與非營利組織,可免費使用 Remotion 製作商業影片;授權也對「正在評估 Remotion 是否合適、且尚未商業使用」的使用者提供免費評估資格,確認合適之後再依組織規模決定授權方式;但 4 人以上的公司或協作團隊必須購買 Company License。授權條款也明定,修改 Remotion 程式碼後轉售或再授權是禁止的,而且官方已預告 5.0 版起授權將有些微調整,正式導入前請以授權頁當日條款為準。

如果你的用途是搭建自動化的影片生成服務,官方另有 Remotion for Automators 方案,按每次渲染 0.01 美元計費、每月最低 100 美元,適合批量渲染與自動化產製的場景。素材端的三項自查則在渲染前完成:字體的授權範圍是否涵蓋影片與廣告投放用途(螢幕字體與嵌入授權是兩回事)、音樂與音效是否取得商用授權、產品截圖與第三方圖示是否有使用權。影片內容由你全權負責,這三項是動態圖像專案容易踩到的漏洞。

從哪裡開始

不要拿真實專案當第一次練習。給自己一個 10 秒、兩幕的小題目:第一幕標誌搭配一句標語用逐字上浮進場,第二幕一個數字從 0 滾動到 100 收尾。走完七步:列素材、寫分鏡、建專案、渲染關鍵影格檢查版面、預覽節奏、做一輪局部修改、輸出 MP4。這個小練習會讓你完整經歷所有關卡、把手感建立起來,之後真正的比較表動畫與品牌 Reels,只是同一套流程的放大。

收在三個最影響產出的觀念:把時間花在影格把關,省下反覆渲染的等待;回饋給模型時講位置、講現象、講期望,堅持局部修改;把專案當範本經營,讓每一次產出都成為下一次的起點。做到這三件事,自然語言就真的是你的動態設計工具,而這條生產線的產能上限,取決於你的分鏡想像力,而不是排隊等設計師的耐心。

常見問題

用 Claude 做動態圖像,可以直接輸出 MP4 嗎?
可以。Claude 負責寫出 Remotion 專案,輸出端用 npx remotion render 指令渲染,預設的 H.264 編碼直接產出 .mp4 檔,預設品質值為 CRF 18,可先以預設值試輸出,再依成品品質與檔案大小調整。需要進後製軟體的素材可改用 prores 等編碼,Remotion 共支援 h264、h265、vp8、vp9、av1、prores 六種;大量或自動化渲染也可走 Lambda 或 GitHub Actions。
需要會寫程式嗎?
不必親自寫,但要有三個基本能力:用終端機執行建立專案與渲染指令、看得懂專案裡哪個檔案對應哪一幕、逐格驗收畫面。程式本體由 Claude 產出與修改,Remotion 官方也維護給 Claude Code、Codex、Kimi Code、Cursor 等代理使用的 Agent Skills,供代理參考官方整理的最佳實作,生成結果仍須預覽與驗收。
一定要用 Claude Opus 5.5 嗎?
不一定,Remotion 的代理技能適用多種編碼代理,但 Opus 5.5 是可考慮的選擇:官方公告引述的測試中,它在單一提示詞建遊戲的圖形強度與完成度上得分高於其他 Claude 模型,並有單日完成 68 萬行程式碼遷移的長任務紀錄;這些結果出自遊戲圖形與程式遷移等特定測試,實際動畫專案的表現仍以自己的專案驗證為準。
跟生成式影片模型差在哪?
生成式影片模型從文字生成影片;以 Google Veo 為例,官方定位是生成含音訊的電影感影片,強項在人物、物理質感與鏡頭語言。Claude 加 Remotion 走程式化路線,每一格由程式照規則畫出,品牌文字、規格數字與圖表可由程式與資料明確控制,仍須核對輸入資料與成品,且改資料就能重渲染。兩者也可組合使用:生成式素材當背景,程式化路線疊上字卡、圖表與介面動態。
做出來的影片可以商用嗎?
可以,但要分兩層檢查。工具端,Remotion 官方授權明定個人、最多 3 名員工的營利組織與非營利組織可免費用於商業影片製作,尚未商業使用的評估期使用者也可免費試用,4 人以上的公司或協作團隊需購買 Company License,且 5.0 版起授權將微調,導入前以官方授權頁為準。素材端,字體、音樂、圖示與產品截圖的授權範圍要自行確認涵蓋影片與投放用途。
整條工作流的成本大概怎麼算?
三個區塊:Claude 端走訂閱的話,Pro 方案月繳 20 美元(年繳折算每月 17 美元、預付 200 美元)已含 Claude Code,重度用量可上自每月 100 美元起的 Max 方案,走 API 則每百萬 token 輸入 4 美元、輸出 20 美元;Remotion 端符合免費授權資格者無須支付授權費(運算與雲端渲染費用依環境另計),自動化批量渲染另有每次 0.01 美元、每月最低 100 美元的方案;素材端依選用的字體與音樂授權計價。

Whoops 巫普斯科技有限公司

專注技術 SEO、GEO/AEO 與 AI 搜尋實務。本站文章以可驗證資料、公開來源與實作觀察整理而成。

關於 Whoops編輯守則服務內容

想把這篇的方法用在自己的站上?

SEO 健檢、GEO/AEO 引用優化、網頁設計諮詢——把文章裡的方法落地到你的網站。