Remotion 影片導演

Remotion 影片導演 是做什麼的？

一個互動式技巧，透過專家討論、場景設計與經過實戰驗證的 Remotion 模式，引導使用者從「我需要一支影片」到產出包含音樂的 MP4 檔案。

使用時機

當使用者出現以下情況時，觸發此技巧：

• 想要使用 Remotion 製作影片
• 需要產品展示、產品發表影片、常態內容範本、行銷影片或敘事性開場
• 說出「我需要一支影片」、「為……製作一支影片」、「建立 Remotion 影片」、「以程式碼製作影片」
• 想要釐清要製作什麼影片或如何組織影片結構
• 已有 Remotion 專案並希望獲得專家審查

與官方 Remotion 技巧的關係

官方的 remotion-dev/skills 套件教導 Claude Remotion API（37 個規則檔案涵蓋動畫、音訊、字幕、轉場等）。此技巧則負責處理其上的創意與策略層：

• 官方技巧：「我要如何使用 interpolate()？」（技術參考）
• 影片導演：「我該製作什麼影片？它的流程該怎麼走？」（創意流程）

如果已安裝官方 Remotion 技巧，請利用它來處理 API 的特定細節。如果沒有，此技巧中的 references/remotion-patterns.md 和 references/component-library.md 也提供了足夠的 Remotion 知識來建構正式等級的影片。

---

四階段工作流程

階段 1：策略框架

目標：透過對話了解使用者需求，然後集結專家觀點。

關鍵：此階段是互動式的。一次只問一個問題，並等待回答。不要一次拋出所有問題，或在沒有使用者輸入的情況下自動繼續。

步驟 1 - 探索（對話式）

從一個開放的提問開始：

「這支影片的目的是什麼？告訴我你的想法、誰會觀看，以及你希望他們看完後做什麼。」

等待使用者的回答。然後根據遺漏的資訊提出有針對性的後續問題：

• 如果對象不明確：「誰會觀看這支影片？（客戶、團隊、投資人、社群媒體？）」
• 如果期望的行動不明確：「看完後，你希望觀眾做什麼？（註冊、了解某件事、分享？）」
• 如果沒有提及限制條件：「有什麼我該知道的限制條件嗎？例如：時長、品牌色、現有素材、截止日期？」
• 如果他們提到了產品：「可以提供產品/介面的截圖嗎？」

在了解目的、對象、期望行動與限制條件之前，請勿繼續進行。

步驟 2 - 創意方向

呈現創意方向選項，並請使用者選擇：

風格	感覺	最適合
極簡/賈伯斯風格	黑色背景、戲劇性停頓、每幀一個想法、Impact 字型	產品發表、重大想法、主題演講
數據豐富/彭博風格	深藍色背景、動畫圖表、密集但有條理	會議回顧、報告、儀表板
溫暖/敘事風格	溫暖色調、個人引言、襯線字體點綴	課程介紹、團隊故事、社群
終端機/駭客風格	深色程式碼主題、打字機效果、全等寬字型	技術展示、開發者工具、工程
自訂	使用者描述或提供參考截圖/影片	任何特定需求

「哪種風格方向最適合你的影片？或者分享你看過且喜歡的影片截圖。」

等待回答。

閱讀 references/video-archetypes.md 以取得所選方向的完整規格（顏色、字型、動畫風格、節奏規則）。

步驟 3 - 參考資料輸入（選擇性）

「你有沒有想要我模仿的參考影片、截圖或視覺風格？（如果沒有請跳過）」

如果使用者提供了參考資料，請分析它們的：色板、字型、動畫速度、版面密度、整體氛圍。將這些融入創意簡報中。

等待回答或跳過確認。

步驟 4 - 專家小組組成

根據選定的原型（來自 references/video-archetypes.md）和創意方向，從 references/expert-definitions.md 中組成一個 3-4 人的專家小組。

產出專家觀點 - 針對每位專家，產出 2-3 句話：

• 一個具體建議
• 一個需要注意的風險

保持簡潔。以簡短的圓桌討論形式呈現。僅需突顯專家們意見分歧的地方（這表示使用者需要做出決定）。

步驟 5 - 創意簡報

將所有資訊整合為結構化的簡報：

## 創意簡報

**目的**：[一句話]
**對象**：[對象是誰、他們在意什麼]
**核心訊息**：[觀眾應該記住的「一件事」]
**期望行動**：[觀眾下一步該做什麼]
**時長**：[秒]（以 30fps 計算共 [幀] 幀）
**創意方向**：[所選風格 - 極簡/賈伯斯風格、彭博風格等]
**情緒弧線**：[例如：好奇 -> 證明 -> 信心 -> 行動]

## 音訊策略
- 音樂：[環境/歡快/戲劇性/稀疏] 來自 Pixabay
- 旁白：[有/無]
- 音樂情緒：[符合創意方向的描述]

## 場景順序
| # | 場景 | 時長 | 目的 |
|---|-------|----------|---------|
| 1 | ...   | X秒      | ...     |

## 資料模型（若適用）
[什麼是可參數化的 vs 什麼是硬編碼的 - 可重複使用的範本結構]

## 視覺風格
- 主題：[創意方向名稱]
- 背景：[顏色]
- 顏色：[主色、強調色、次要色]
- 字型：[標題字型、內文字型、等寬字型]
- 動畫感覺：[流暢/溫和/戲劇性/打字機]

「這是創意簡報。在我們設計場景之前，有什麼需要調整的嗎？」

等待確認或調整。

---

階段 2：場景設計

目標：將簡報轉化為詳細的逐場景腳本。

步驟 6 - 場景設計

針對序列中的每個場景，指定：

• 內容：確切的文字、資料、視覺元素
• 元件：要使用哪些可重複使用的元件（來自 references/component-library.md）
• 動畫：進場/出場動畫、以幀為單位的時間點
• 轉場：所有場景之間使用交叉溶解（8-12 幀）

閱讀 references/remotion-patterns.md 以了解重要的 Remotion 限制與進階樣式模式。

場景聚焦規則：每個場景必須服務一個與核心訊息相關的想法。如果某個場景與核心訊息無關，請刪除它。聚焦的少量場景永遠優於分散的多數場景。

幀數預算：規劃整個時間軸：

const TIMING = {
  scene1: { start: 0, dur: 6 },   // 鉤子
  scene2: { start: 6, dur: 10 },  // ...
  // 總和必須等於 composition 的 durationInFrames / fps
};

步驟 7 - 資料架構

如果影片是資料驅動的（常態報告、多變體行銷）：

• 設計在不同渲染之間會變更的設定物件
• 識別哪些是保持不變的（視覺範本）vs 哪些是會變化的（內容）
• 向使用者展示設定的形狀並確認

範例模式（來自 WeeklyIntro）：

const weekData = {
  weekLabel: "3月3日 - 3月9日",
  heroNumber: 312,
  heroLabel: "新註冊數",
  // ... 每週會變更的欄位
};

步驟 8 - 使用者確認

呈現完整的腳本。

「準備好要建置了，還是想調整任何東西？」

等待確認。

---

階段 3：建置

目標：建立 Remotion 專案並渲染第一個版本。

重要：絕對不要執行任何會啟動互動式 CLI 精靈或提示輸入的命令。這包括 npx create-video、npx remotion init、npm init，或是不帶參數的 npx remotion render。總是以手動方式建立檔案，並將所有引數明確傳遞給 CLI 命令。

步驟 9 - 建構專案

手動建立 Remotion 專案結構（請勿使用建構精靈 – 參閱階段 3 標題）：

<project>/
├── src/
│   ├── Root.tsx
│   ├── Video.tsx           # 或 <VideoName>.tsx
│   ├── theme/
│   │   ├── colors.ts
│   │   ├── fonts.ts
│   │   └── springs.ts
│   ├── scenes/
│   │   ├── Scene1Hook.tsx
│   │   └── ...
│   ├── components/
│   │   ├── FadeIn.tsx
│   │   └── ...
│   └── data/
│       └── config.ts       # 如果用於資料驅動
├── public/
│   ├── music.mp3           # 背景音樂
│   └── illustrations/      # 如果使用背景圖片
├── package.json
├── tsconfig.json
└── remotion.config.ts

安裝相依套件：pnpm install

步驟 10 - 建置場景

根據階段 2 的腳本建立每個場景元件。使用 references/component-library.md 中的元件。

關鍵建置規則（來自 references/remotion-patterns.md）：

• 所有動畫都使用 useCurrentFrame() + interpolate()/spring() – 絕對不要使用 CSS 轉場
• 永遠鉗制插值：{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
• useCurrentFrame() 是相對於最近的 <Sequence>，而非全域時間軸
• 每個場景之間使用交叉溶解（8-12 幀的包絡線；例外：終端機/駭客風格適合硬切）
• 每個元素都必須有進場動畫 – 絕對不要在剪輯點上靜止出現

進階樣式規則（來自 references/remotion-patterns.md）：

• 字型多樣性：混合使用標題字型 + 內文字型 + 等寬字型（不要到處用 Inter）
• 極端尺寸對比：標題 72-96pt，內文 20-24pt
• 將重要的問題/標題垂直置中
• 每張投影片內文最多 15-20 個字，標題投影片 7 個字（賈伯斯風格）
• 將文字保持在畫面上方 85% 的範圍內
• 為確保可讀性，最小字型為 24px
• 邊距保持 80-120px

步驟 11 - 音訊整合

閱讀 references/music-and-audio.md 以取得完整的音訊指南。

「想加入背景音樂嗎？我建議瀏覽 pixabay.com/music/ 尋找與 [所選創意方向] 風格相符的免版稅曲目。分享下載連結或檔案，我就會用合適的音量曲線來整合它。」

等待使用者回應。

如果使用者提供音樂：

1. 下載/儲存到 public/music.mp3
2. 加入帶有淡入/淡出音量曲線的 <Audio> 元件
3. 在資料量大的場景中降低音樂音量（0.30 -> 0.15）
4. 如果音軌比影片長，使用 startFrom 播放結尾段落

如果使用者想要旁白：

1. 根據場景內容產生旁白腳本（約每秒 3 個字）
2. 使用者自行錄製或使用 ElevenLabs
3. 整合音樂閃避功能（旁白期間音樂降至 0.10-0.12）

如果使用者跳過音訊：使用 --muted 標記渲染。

步驟 12 - 渲染與預覽

重要：總是傳遞進入點檔案以避免互動提示。 絕對不要執行單純的 npx remotion render – 它可能會啟動互動式合成選擇器。總是指定進入檔案與合成 ID：

# 渲染最終 MP4 - 總是指定進入點 + 合成 ID
npx remotion render src/Root.tsx <CompositionId> out/<name>.mp4 --codec=h264 --crf=18

# 如果沒有音訊：
npx remotion render src/Root.tsx <CompositionId> out/<name>.mp4 --codec=h264 --crf=18 --muted

為使用者開啟影片以供審查。

---

階段 4：審查

目標：透過專家審查與使用者回饋來持續改進影片，直到準備好發布。

步驟 13 - 多位專家審查

在使用者看過影片後，執行來自 references/expert-definitions.md 的審查協議。

產出一份評分表（完整範本請參閱 references/expert-definitions.md）：

| 面向                     | 優先級 | 分數 |
|--------------------------|--------|------|
| 鉤子清晰度（前 3-5 秒） | 關鍵  | ?/5  |
| 核心訊息傳達            | 關鍵  | ?/5  |
| 節奏 / 動感            | 高    | ?/5  |
| 視覺可讀性              | 高    | ?/5  |
| 目標行動明確            | 高    | ?/5  |
| 對象契合度              | 中    | ?/5  |

加入 2-3 個特定類型的面向（例如，極簡/賈伯斯風格的「視覺高級感」、如果有加入音樂則「影音和諧度」、資料報告的「設定可重複使用性」）。

每位專家從其角度進行審查，包括攝影指導針對視覺構圖，以及音樂總監針對音訊（如果有加入音樂）。綜合整理為：

1. 優勢 – 哪些地方做得好
2. 改進項目 – 具體、可執行的變更
3. 結論 – 原樣發布、需要再修改一次、或需要大幅重做

詢問使用者要套用哪些改進項目。

步驟 14 - 使用者審查與迭代

專家審查能找出技術問題，但只有使用者知道影片是否感覺對了。

「現在你看過影片和專家審查了 – 你的看法是什麼？

1. 哪些場景表現良好？
2. 哪些場景需要修改？（如果可能，請截圖特定影格）
3. 有任何文字、時間點或視覺問題嗎？
4. 有沒有遺漏或應該刪除的部分？」

等待使用者的回饋。

當使用者提供回饋時：

1. 肯定他們喜歡的部分（強化方向）
2. 列出你會根據他們的筆記進行的具體變更
3. 進行變更 – 編輯場景元件、調整時間點、修正文字
4. 重新渲染並呈現更新後的影片
5. 再次詢問：「有沒有更好？還有其他需要調整的嗎？」

重複這個循環直到使用者滿意。典型的影片需要 1-3 輪的改進。

常見的回饋模式與處理方式：

• 「太快了」→ 將場景時長增加 30-50%，加入更多戲劇性停頓
• 「文字太多」→ 拆分場景，每幀減少到 7 個字（賈伯斯風格）
• 「感覺不夠高級」→ 切換到極簡/賈伯斯風格方向，增加留白
• 「音樂不搭」→ 嘗試不同的 Pixabay 曲目，調整音量曲線
• 「調性不對」→ 重新審視創意方向，調整色板與動畫速度
• 「場景 X 令人困惑」→ 簡化到一個想法，加入視覺層級

---

改編指南

當使用者已經有 Remotion 專案時

跳過階段 1-2 的建構。專注於審查現有程式碼、建議改善，或加入新的場景/合成。

當使用者想要快速製作影片（不需討論）時

將階段 1 壓縮為：在一個問題中同時詢問影片類型 + 創意方向。挑選前 2 位專家，產出簡短腳本。快速進入建置階段。仍然詢問音樂。

當使用者只想要概念（不需程式碼）時

完整執行階段 1-2。將創意簡報與腳本輸出為文件。跳過階段 3。

當使用者想要多變體影片時

使用成長行銷原型。設計變體矩陣（每個變體中什麼會改變）。建立一個基礎影片，然後展示如何參數化……

[因翻譯而截斷]