Aryanban/remotion-video-director

Remotion 影片導演

一個互動式技能，引導使用者從「我需要一部影片」到產出附有音樂的 MP4，其過程包含專家思辨、場景設計與經過驗證的 Remotion 模式。

使用時機

當使用者有以下情況時觸發此技能：

• 想要使用 Remotion 創作影片
• 需要產品展示、發布影片、定期內容模板、行銷影片或敘事開場
• 說出「我需要一部影片」、「為...製作影片」、「建立一個 Remotion 影片」、「將影片視為程式碼」
• 想要在思考要製作什麼影片或如何架構影片時獲得協助
• 已經有一個 Remotion 專案並希望獲得專家審查

與官方 Remotion 技能的關係

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

• 官方技能：「我該如何使用 interpolate()？」（技術參考）
• 影片導演：「我應該製作什麼影片，以及它應該如何流暢進行？」（創意過程）

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

---

四階段工作流程

第一階段：策略框架

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

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

步驟 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 | ... | Xs   | ...  |

## 資料模型（若適用）
[哪些是參數化的 vs. 硬編碼的 - 可重複使用的模板結構]

## 視覺風格
- 主題: [創意方向名稱]
- 背景: [顏色]
- 顏色: [主色、強調色、輔助色]
- 字體排版: [標題字型、內文字型、等寬字型]
- 動畫感覺: [明快/溫和/戲劇性/打字機]

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

等待確認或調整。

---

第二階段：場景設計

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

步驟 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 - 資料架構

如果影片是數據驅動的（定期報告、多變體行銷）：

• 設計每次渲染之間會改變的 config 物件
• 確定哪些保持不變（視覺模板） vs. 哪些會變化（內容）
• 向使用者展示 config 形狀並確認

範例模式（來自 WeeklyIntro）：

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

步驟 8 - 使用者確認

呈現完整的場景腳本。

「準備好建置了嗎，還是想要調整什麼？」

等待確認。

---

第三階段：建置

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

關鍵：絕對不要執行任何會啟動互動式 CLI 精靈或提示輸入的指令。這包括 npx create-video、npx remotion init、npm init，或沒有參數的 npx remotion render。始終手動建立檔案，並在 CLI 指令中明確傳遞所有參數。

步驟 9 - 建立專案

手動建立 Remotion 專案結構（切勿使用 scaffolding 精靈 - 請參考第三階段標題）：

<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 - 建置場景

根據第二階段的腳本，建置每個場景元件。使用 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 - 它可能會啟動一個互動式 compositon 選擇器。始終明確指定入口檔案和 composition ID：

# 渲染最終 MP4 - 始終指定入口點 + composition 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

開啟影片供使用者審查。

---

第四階段：審查

目標：透過專家審查和使用者反饋，反覆優化影片直到準備好發布。

步驟 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 專案時

跳過第一至二階段的建立。專注於審查現有程式碼、提出改進建議，或加入新的場景/compositions。

當使用者想要快速製作影片（不需深思熟慮）時

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

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

完整執行第一至二階段。將創意簡報和腳本輸出為文件。跳過第三階段。

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

使用成長行銷原型類型。設計變體矩陣（每個變體有哪些變化）。建立一個基礎影片，然後展示如何參數化