【終極指南】Claude Code + Remotion：0 基礎用程式碼打造專業級影片

2026 年 1 月，Remotion 發布了 Agent Skills 功能，這項技術讓 Claude Code 瞬間具備了專業影片製作能力。過去需要 After Effects 或 Premiere Pro 才能完成的動態影片，現在只需要用自然語言描述，AI 就能自動生成完整的 React 程式碼並渲染成 MP4 檔案。

這套工作流程的核心邏輯很直接：Remotion 將影片視為 React 應用程式，每一幀都是一個 React 元件，而 Claude Code 作為終端機內的 AI 編碼助手，能夠理解整個專案架構並自動撰寫符合 Remotion 規範的 TypeScript 程式碼。兩者結合後，開發者可以透過對話式開發快速迭代影片內容，省去傳統影片編輯軟體的學習曲線。

為什麼程式化影片製作值得關注

傳統 AI 影片生成工具（如 Runway、Pika）透過文字提示產生影片，但輸出結果往往不可預測、難以精確調整。Remotion 採取完全不同的策略：它讓開發者用程式碼定義每一幀的視覺元素，因此輸出結果是可預測的、可版本控制的、可批量生成的。

這種差異在商業應用場景中尤其明顯。假設電商平台需要為 500 個產品製作介紹影片，傳統方式需要逐一編輯，而 Remotion 只需建立一個模板，搭配 JSON 資料就能自動生成所有影片。根據開發者社群的實測數據，這種工作流程可將影片製作時間從數小時縮短至幾分鐘。

環境建置與安裝流程

開始之前需要確認系統已安裝 Node.js（建議版本 18 以上）以及 Claude Code 訂閱帳號。Claude Code 目前支援 Pro、Max、Teams 與 Enterprise 方案，月費從 USD 20 起（約 NTD 640,000）。

第一步是建立 Remotion 專案：

npx create-video@latest my-video

系統會提示選擇模板，初學者建議選擇 Blank 模板並啟用 TailwindCSS。安裝過程中務必勾選「Install Skills」選項，這會自動安裝 Remotion 的 Agent Skills。

如果安裝時未勾選，可以手動補裝：

cd my-video
npx skills add remotion-dev/skills

這個指令會在專案目錄下建立 .claude/skills/remotion/SKILL.md 檔案，這份文件包含了 Remotion 的核心 API 文檔、元件結構說明、動畫模式範例等資訊，讓 Claude Code 能夠撰寫符合最佳實踐的程式碼。

安裝完成後，啟動開發伺服器：

npm install
npm run dev

瀏覽器會自動開啟 Remotion Studio，預設位址是 http://localhost:3000。這個介面提供即時預覽、時間軸控制與匯出功能。

啟動 Claude Code 並建立第一支影片

在另一個終端機視窗中，進入專案目錄並啟動 Claude Code：

cd my-video
claude

首次啟動時會要求登入 Anthropic 帳號。登入後，可以直接用自然語言描述想要的影片。以下是一個實際的 prompt 範例：

建立一個 5 秒的科技公司開場動畫，公司名稱是 TechFlow。
規格要求：
- 解析度：1920x1080
- 幀率：30fps
- 背景：深色漸層，從 #1a1a2e 到 #16213e
- 動畫序列：
  1. Logo 文字 "TechFlow" 從透明度 0 淡入到 1（第 0-30 幀）
  2. Logo 加上彈跳縮放效果（第 15-45 幀）
  3. 副標語 "Build faster. Ship smarter." 在下方淡入（第 45-90 幀）
使用 Inter 字型，風格要簡潔現代。

Claude Code 會根據這份描述生成完整的專案結構，包括：

檔案	功能說明
`src/Root.tsx`	專案進入點，註冊所有 Composition
`src/TechFlowIntro.tsx`	主要影片元件
`remotion.config.ts`	Remotion 設定檔

生成完成後，Remotion Studio 會自動更新預覽。如果需要調整，可以繼續對話：

把彈跳效果做得更明顯一點，增加一些 overshoot。背景加上緩慢移動的粒子效果。

這種迭代式開發是 Claude Code 的核心優勢。每次修改後，開發者可以立即在 Remotion Studio 預覽結果，不滿意就繼續調整，直到達到預期效果。

Remotion 核心概念解析

要有效運用這套工作流程，需要理解 Remotion 的幾個核心概念：

Composition 是 Remotion 的基本單位，相當於一個獨立的影片項目。每個 Composition 定義了影片的尺寸、時長與幀率：

<Composition
  id="intro"
  component={IntroVideo}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={720}
/>

useCurrentFrame() 是最常用的 Hook，它回傳當前正在渲染的幀數。所有動畫邏輯都建立在這個數值之上：

const frame = useCurrentFrame();
const opacity = frame / 30; // 前 30 幀淡入

interpolate() 用於將幀數映射到動畫數值。例如，讓元素在第 0-60 幀之間從透明變為不透明：

const opacity = interpolate(
  frame,
  [0, 60],
  [0, 1],
  { extrapolateRight: 'clamp' }
);

extrapolateRight: 'clamp' 確保數值不會超過設定範圍，這是 Remotion 動畫的常見模式。

spring() 提供物理式彈跳動畫，讓動態效果更自然：

const scale = spring({
  frame,
  fps,
  config: { damping: 100, stiffness: 200, mass: 0.5 }
});

Sequence 用於時間排序，讓不同元素在指定時間點出現：

<Sequence from={0} durationInFrames={90}>
  <Scene1 />
</Sequence>
<Sequence from={90} durationInFrames={90}>
  <Scene2 />
</Sequence>

進階技巧：動態 Props 與模板化

當影片需要支援多種變體時，可以透過 Props 實現模板化。請 Claude Code 重構程式碼：

把影片改成可接受動態 Props：
- companyName (string) - 取代 "TechFlow"
- tagline (string) - 副標語文字
- primaryColor (string) - 主要漸層色
- secondaryColor (string) - 次要漸層色
加上 Zod schema 做型別驗證。

Claude Code 會生成如下結構：

import { z } from 'zod';

export const introSchema = z.object({
  companyName: z.string().default('TechFlow'),
  tagline: z.string().default('Build faster. Ship smarter.'),
  primaryColor: z.string().default('#0f0c29'),
  secondaryColor: z.string().default('#24243e'),
});

type IntroProps = z.infer<typeof introSchema>;

export const Intro: React.FC<IntroProps> = ({
  companyName,
  tagline,
  primaryColor,
  secondaryColor,
}) => {
  // 影片邏輯
};

這樣就能在 Remotion Studio 的 Props 面板中輸入不同參數，快速預覽各種變體。

渲染與匯出影片

預覽滿意後，使用以下指令渲染影片：

npx remotion render intro out/video.mp4

渲染過程會顯示進度，完成後影片會存放在 out/ 目錄。常用的渲染參數包括：

參數	說明
`--codec h264`	使用 H.264 編碼（預設）
`--codec h265`	使用 HEVC 編碼，檔案更小
`--quality 80`	設定品質（1-100）
`--scale 0.5`	縮小解析度，加速測試渲染

對於需要大量渲染的場景，Remotion 也支援 AWS Lambda 雲端渲染，可以平行處理大幅縮短渲染時間。

Prompt 工程最佳實踐

根據開發者社群的經驗，以下幾個原則能顯著提升 Claude Code 的輸出品質：

描述具體的視覺元素而非抽象概念。「做一個有科技感的動畫」太模糊，應該改成「深藍色背景上有白色發光的網格線，緩慢向畫面右側移動」。

分解複雜場景為多個步驟。與其要求 Claude Code 一次生成完整的 3 分鐘產品影片，不如拆成「開場動畫」「功能展示 1」「功能展示 2」「結尾 CTA」等多個 Composition，分別開發後再組合。

提供參考資料。如果要製作特定產品的介紹影片，可以提供產品頁面 URL 或功能文件，讓 Claude Code 抓取內容後自動生成相關素材。

善用截圖回饋。當動畫效果不如預期時，截圖說明問題比文字描述更有效。例如：「游標位置不對，應該要在按鈕正上方」。

常見問題與解決方案

技能未載入：如果 Claude Code 似乎不理解 Remotion 語法，執行 /skill 確認技能是否已安裝。若未顯示，重新執行 npx skills add remotion-dev/skills 並重啟 Claude Code。

動畫閃爍：Remotion 要求所有動畫必須由 useCurrentFrame() 驅動，不支援 CSS transitions 或 CSS animations。如果使用了這些語法，渲染時會產生不可預期的結果。

字型未載入：使用 @remotion/google-fonts 套件載入 Google Fonts：

import { loadFont } from '@remotion/google-fonts/Inter';
const { fontFamily } = loadFont();

影片過長導致記憶體不足：對於超過 10 分鐘的影片，建議使用 --frames-per-lambda 參數搭配 Lambda 渲染，或將影片拆分成多個片段後合併。

授權與商業使用

Remotion 採用雙重授權模式。個人與 3 人以下團隊可免費使用，4 人以上的營利組織需要購買企業授權，費用從每月 USD 25 起（約 NTD 800,000）。授權細節可參考 Remotion 官方定價頁。

Claude Code 則需要有效的 Anthropic 訂閱，Pro 方案月費 USD 20，Max 方案月費 USD 100（約 NTD 3,200,000），後者提供更大的 token 配額與 Opus 模型存取權限。

適用場景與限制

這套工作流程特別適合以下場景：

需要批量生成的模板化影片（產品展示、數據報表）
資料驅動的動態視覺化（即時更新的統計圖表）
品牌一致性要求高的系列內容
開發者主導的內容創作團隊

但對於以下需求，傳統影片編輯軟體可能更適合：

需要大量實拍素材的影片
複雜的調色與視覺特效
非技術背景的獨立創作者

延伸資源

想要更深入學習這套工作流程，以下資源值得參考：

Remotion 官方文檔：remotion.dev/docs
Andrew Ng 與 Anthropic 合作的 Claude Code 免費課程
Vibe Coding 開發模式完整指南
AI Agent 工具生態系總覽

關於作者

Ewan Mak｜Tenten 數位策略顧問

專注於 AI 開發工具與現代化 Web 技術的研究與應用。長期追蹤 Agentic Coding 生態系發展，協助企業導入 AI 輔助開發流程。

作者觀點：Claude Code + Remotion 這套組合代表了「程式化內容創作」的重要里程碑。過去，影片製作被視為創意工作者的專屬領域；現在，具備基礎程式能力的人都能透過 AI 輔助快速產出專業水準的動態影片。這不僅降低了創作門檻，更重要的是讓影片製作變得可程式化、可自動化、可規模化。對於需要大量視覺內容的企業而言，這是一個值得認真評估的技術方向。

若您正在評估 AI 輔助開發工具的導入策略，或希望建立程式化影片製作的工作流程，歡迎預約諮詢與 Tenten 團隊討論最適合您團隊的解決方案。

Hey, I'm Skye, and I believe every creator deserves the tools to turn their imagination into reality.

【終極指南】Claude Code + Remotion：0 基礎用程式碼打造專業級影片

為什麼程式化影片製作值得關注

環境建置與安裝流程

啟動 Claude Code 並建立第一支影片

Remotion 核心概念解析

進階技巧：動態 Props 與模板化

渲染與匯出影片

Prompt 工程最佳實踐

常見問題與解決方案

授權與商業使用

適用場景與限制

延伸資源

Claude Code 與 Remotion：AI 驅動的程式化影片製作新時代

用 Remotion 結合 AI 工具生成廣告影片：實戰工作流程解析

Midjourney 長影片生成完全指南

Sora 2：當 AI 成為你的專屬導演

數據驅動內容創作：影視颶風十年1100萬粉絲的成長洞察

iPhone ProRes Log：專業行動攝影的全新境界