如何用 Claude Code 製作影片（逐步教學，2026）
可以。Claude Code 能製作影片：它把動畫寫成程式碼，並在你自己的電腦上渲染出 MP4。常見做法有 Remotion 的 Agent Skills、HyperFrames，或使用 Skill，例如 Motion Skills 裡能規劃、作曲並渲染整支影片的完整版 Skill。Claude Code 包含在 Claude Pro 和 Max 方案中，而且不需要 Claude Motion；Claude Motion 是 Claude 中另一項 beta 功能，只在 Team 和 Enterprise 方案提供。
下面依序介紹：四種做法的對照、用免費的 Motion Director 從安裝到產出 MP4 的逐步流程，以及一支真實影片從需求說明到最後一次修改的完整過程。
已於 2026 年 10 月 29 日對照 Claude 的價格頁、Claude Code 快速入門、Remotion 的程式設計 Agent 指南和 HyperFrames README 核實。
Claude Code 製作影片的四種方式
| 做法 | 你要寫什麼 | 得到什麼 | 設定 | 費用 |
|---|---|---|---|---|
| 一段提示詞交給 Opus | 不用寫；Claude 寫出 HTML 動畫 | 在瀏覽器中播放動畫的頁面；需自行錄製或渲染 | 無 | 你的 Claude 方案 |
| Remotion + 它的 Agent Skills | React 元件，由 Claude 撰寫 | MP4，來自一個可保留的 Remotion 專案 | npx create-video，再執行 npx remotion skills add |
Remotion 自己的授權（見其授權頁） |
| HyperFrames | HTML、CSS 和 GSAP，由 Claude 撰寫 | MP4，在無頭 Chrome 中用 FFmpeg 渲染 | npx hyperframes init，或它的 Claude Code 外掛 |
開源（Apache 2.0） |
| Motion Skills 完整版 Skill | 你的素材和一句話 | 一整支影片：視覺方向、原創配樂、檢查、MP4 | 下文的一句話安裝 | Motion Director 不收費；每個 Skill $4.90，或購買方案 |
一段提示詞交給 Opus 是看看 Claude 能做出什麼動畫的最快方式：要求「為我的 App 做一段 15 秒的動畫標題，做成一個 HTML 檔案」，然後打開它。每次執行的結果都不同，要轉成 MP4 得自己處理。我們的 Claude Motion 提示詞頁收錄了大家分享、正好用於這種做法的提示詞。
Remotion 是用 React 製作影片的成熟框架。依照它的程式設計 Agent 指南，先用 npx create-video --yes --blank my-video 建立專案，用 npx remotion skills add 加入它的 Agent Skills，用 npm run dev 預覽，再在第二個終端機視窗啟動 Claude Code。它適合想完全掌控每個元件的開發者。在工作中使用前，請先查看 Remotion 的授權。 它的 Agent 技能和完整版 Skill 有什麼不同，請見Remotion 的 Agent 技能與 Motion Skills 比較。
HyperFrames 由 HeyGen 推出，是一個開源框架，能把「HTML、CSS、媒體和可跳轉播放位置的動畫」轉成 MP4 檔案。可以把它安裝為 Claude Code 外掛，或用 npx hyperframes init my-video 建立專案，再用 npx hyperframes render 渲染。我們早期的動效模板（現在作為範例保留）就是以它為基礎製作的。兩個引擎的對照，請見 HyperFrames 與 Remotion 比較。
Motion Skills 完整版 Skill 由 Agent 載入。你不用寫元件：把專案、筆記、數據或腳本交給它，說明影片的用途即可。它會選定一個視覺方向並給你看一張關鍵影格，用程式碼寫出影片、為影片作曲、檢查每一格畫面，再用我們的開源引擎 motion-skills（mo）渲染出 MP4。本指南接下來都採用這種做法。
需要準備什麼
- Claude Code，需要 Claude Pro 或 Max（Team、Enterprise 或 Claude Console 帳號也可以；Free 方案不包含）。
- Node.js 22 或更新版本。
- FFmpeg（macOS 上執行
brew install ffmpeg）。 - Google Chrome。 渲染器會以無頭模式操作它。
引擎在第一次渲染時會透過 npx 自動安裝，不需要任何 API 金鑰。Skill 的第一步 mo doctor 會檢查這三項，並指出缺少什麼。Skill 存放位置的詳細說明，請見如何安裝 Agent Skills。
用 Motion Director 逐步製作
Motion Director 免費，用 Google 登入即可使用。它能製作一支 10–20 秒、任何片型的影片：一則發表預告、一個令人印象深刻的數字、一個概念的講解，或一段直式短片的開場。
1. 用一句話安裝
在一個資料夾（你的專案或空資料夾）中開啟 Claude Code，貼上：
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.
Claude Code 會讀取這份指南並執行一個命令：npx motion-skills install motion-director。第一次執行時，瀏覽器會開啟一個頁面：用 Google 登入，並核准終端機中顯示的代碼。想自己在終端機操作？每個 Skill 頁面都提供 Claude Code、Codex、Cursor 和 Gemini CLI 的命令：按下 複製安裝提示詞，再開啟 命令列安裝 分頁。
2. 提供素材
說明影片的主題，並指出要用哪些素材：所在的程式碼儲存庫、README、CHANGELOG、試算表、連結或腳本。例如：
根據 README.md 和 CHANGELOG.md 中的 2.0 說明，為這個 App 做一支 15 秒的發表預告。16:9，用在我們的網站上。
Skill 會建立一份 sources.md：列出影片中可能出現的每一句文字、每個數字和名稱，以及它們來自哪個檔案或網址。它只會詢問會影響影片的事項（播放位置、長度、你的品牌），並寫上預設值。還沒有素材？它會使用 Skill 附帶的範例 changelog，並說明這一點。
3. 選一個方向
動手製作之前，Skill 會為你的影片提出三個方向，每個方向一句話說明，再配一張按它自己的風格和配色做出的畫面（Motion Director 提供動態文字、數據故事或白板）。你選一個，也可以混搭（「用第二個的配色、第一個的構圖」）；如果你說過「直接做」，它會挑最有力的一個，並告訴你選了哪個。接著它為這個方向寫一份簡短的構想稿：開場鉤子在何時出現、重點在何時落在最強的節拍上，以及結尾停留的畫面。這就是你的分鏡確認：修改一張畫面，比修改一支完成的影片快得多。
4. 讓它製作、檢查並配樂
它把影片寫成一個 index.html（HTML 和 GSAP），然後檢查自己的作品：整支影片的縮圖總覽、用 mo check 找出錯誤、用 mo audit 確認畫面上每一行文字都有來源，並打開關鍵時刻的靜態畫面查看、修正問題。它會寫一段原創配樂，帶有一個為你的主題設計的簡短動機。它聽不到聲音，所以會告訴你它寫了什麼。
5. 提出修改
看完渲染結果，用日常語言說出要改什麼：「Logo 出現得太晚」、「用我們的綠色」、「最後一行停久一點」。Skill 會在對應的位置和時間點做最小幅度的修改，然後重新渲染。也可以執行 mo studio 開啟即時預覽，按 C，點選你指的那一格畫面，直接在那裡寫下修改。
6. 取得 MP4
最後一次渲染的檔案會放進你的專案，並附上路徑、長度和格式、一行關於風格和音樂的說明，以及一份 handoff.md。想要該片型的完整影片時（30–90 秒的發表影片、講解片或數據影片），對應片型的完整版 Skill 可以從同一個資料夾接著做。
真實案例：「Claude Code 三步上手」
這支 29 秒的影片用我們的功能演示片 Skill 製作。它的運作方式和 Motion Director 相同，只是影片更長、風格更多。
安裝、在專案裡啟動、問第一個問題：依官方 quickstart，版本號是真實輸出。
功能演示片 範例16:9 · 29 秒
非官方展示，並非 Anthropic 製作或認可。
需求說明。「一支 30 秒、16:9 的新手引導演示片，對象是使用 Claude Pro 或 Max 方案、但從未用過 Claude Code 的人，在我們的網站和入門電子郵件中播放：安裝、在專案中啟動、向它提問。只使用官方快速入門；不要捏造命令或輸出。」素材是 Claude Code 公開的快速入門和設定頁面，以及一次真實執行 claude --version 的結果。
方向。 Skill 提出三個方向：一個大終端機搭配步驟軌、一條橫跨彩色區塊無限延伸的命令列，以及一張顯示每個命令影響範圍的系統圖。它選了終端機：「訊息是一個工作流程，介面是終端機，所以最有力的證明就是以大字打出真實的命令」。它也事先點出風險：沒有真實的工作階段截圖可用，因此那個畫面必須看得出是簡化版，影片中也標註了「版面已簡化」。
規劃。 一份以 112 BPM 小節編排的構想稿：安裝、啟動、提問，接著在高潮處呈現範例回答，結尾卡是安裝命令。畫面上每個字都能在 sources.md 中追溯到快速入門；版本那一行是真實輸出。
修改。 第一次渲染後，mo qa 顯示步驟 1 後面有 3 秒、步驟 2 後面有 2 秒沒有必要的停頓。步驟 2 和 3 往前移，高潮也提早了一個小節，所以影片長 29 秒而不是 30 秒。
這支影片的原始檔，包括它的方向、構想稿和資料來源，都作為範例隨功能演示片 Skill 一起提供。
為你的片型選擇完整版 Skill
Motion Director 刻意限制在 20 秒以內。要做完整影片，每個片型都有專屬的完整版 Skill，內建各自的風格：
- **發表推廣：**發表影片、功能演示、比較影片、品牌介紹、活動宣傳、App 商店預覽。
- **教學講解：**講解片、課程、論文講解、時間軸、數學講解。
- **社群創作：**直式短影片、真人出鏡影片、標題與轉場、社群卡片。
- **工作匯報：**數據影片、團隊進度更新、工作階段重播、配旁白的簡報、投資人更新。
每個完整版 Skill 售價 $4.90，或透過方案取得全部 Skill：每月 $9.90、每年 $79，或一次付清 $169 的創始終身方案。請見價格。
疑難排解
- 「FFmpeg not found」或「Chrome not found」。 執行
mo doctor（npx --yes motion-skills doctor），它會指出缺少什麼。macOS 上執行brew install ffmpeg；Google Chrome 請從 Google 官方下載安裝。 - Claude Code 沒有使用這個 Skill。 安裝後開啟新的 Claude Code 工作階段，讓它讀取新的 Skill，再重新提出要求並指名：「使用 motion-director 這個 Skill」。
- 沙箱阻擋了瀏覽器或本機伺服器。 Skill 的畫面檢查兩者都需要。Claude Code 詢問時請核准，不要讓它跳過檢查。
- 影片超過 20 秒。 Motion Director 會做出最精華的 20 秒，並告訴你哪個完整版 Skill 能做完整影片。
不用 Claude Code？
同樣的 Skill 也能在 Codex、Cursor 和 Gemini CLI 中使用，這也是 Claude Free 方案適用的做法。各個 Agent 把 Skill 放在哪裡，請見如何安裝 Agent Skills。如果你找的是 Claude Motion 本身，請見 Claude Motion 不在你的方案裡？。 這幾個 Agent 的分步說明和各自讀取的資料夾，請見用 Codex、Cursor 或 Gemini CLI 製作影片。
常見問題
Claude Code 能製作影片嗎？
可以。Claude Code 能把動畫寫成程式碼，並在你的電腦上渲染成 MP4。常見做法有 Remotion 的 Agent Skills（React）、HyperFrames（HTML 和 GSAP），或使用 Skill，例如 Motion Skills 裡能規劃、作曲並渲染整支影片的完整版 Skill。Claude Code 包含在 Claude Pro 和 Max 方案中。
用 Claude 製作影片需要 Claude Motion 嗎？
不需要。Claude Motion 是 Claude 中另一項 beta 功能，只在 Team 和 Enterprise 方案提供。Pro 或 Max 方案上的 Claude Code 搭配 Skill，就能做出同類以程式碼構建的動畫，並在你自己的電腦上渲染。
需要安裝什麼？
Node.js 22 或更新版本、FFmpeg 和 Google Chrome。motion-skills 引擎在第一次渲染時會透過 npx 自動安裝，不需要任何 API 金鑰。
是免費的嗎？
Motion Director 用 Google 登入即可免費使用，能製作 10–20 秒的影片。每個完整版 Skill 售價 $4.90，或透過方案取得全部 Skill：每月 $9.90、每年 $79，或一次付清 $169。不用積分；唯一的用量是你的 Claude 方案本身的用量。
我的影片會離開我的電腦嗎？
影片在你的電腦上製作和渲染。渲染完成時，引擎會告訴 claude-motion.com 是哪個 Skill 進行了渲染、是否成功，不涉及影片的任何內容；設定 MOTION_SKILLS_TELEMETRY=0 即可關閉。
資料來源
- Anthropic，Claude pricing（哪些方案包含 Claude Code）
- Anthropic，Claude Code quickstart
- Remotion，Coding agents
- HeyGen，HyperFrames on GitHub
本指南為獨立內容，與 Anthropic、Remotion 或 HeyGen 均無關聯。Claude 是 Anthropic, PBC 的商標。內容已於 2026 年 10 月 29 日對照上述頁面核實。