使用時機
在以下情況使用此技能：
- 從頭開始創作新的 Remotion 影片
- 為某個內容資產產生影片簡報變體
- 修改現有的 Remotion 合成
- 除錯 Remotion 動畫或渲染問題
- 處理任何 Remotion 特有的 API 或組件
影片創作流程
創作新的 Remotion 影片時，請遵循以下 8 個步驟。第 2 步會根據簡報和冷門受眾最佳化從目錄中選出 3-5 個概念。第 4 步和第 5 步是核准關卡。在兩個關卡都通過之前，請勿撰寫任何程式碼。
如需完整的流程文件（包含範本和決策矩陣），請參閱 references/video-creation-process.md。
步驟 0：品牌識別
在進行任何創意工作之前，先識別品牌。詢問使用者：「這支影片是為哪個品牌製作的？」
如果該品牌在下方有預設設定，直接使用即可。無需進一步詢問品牌問題。
如果該品牌未在列表中，請要求使用者提供品牌網站網址或品牌指南。提取以下資訊：背景色、主要強調色、次要強調色、文字顏色、字體系列以及主題（淺色/深色）。如果沒有品牌指南，至少要求提供：主要顏色、背景色和字體偏好。
步驟 1：創意簡報
在任何創意工作開始前收集並鎖定以下資訊：
目的：[這支影片存在的理由]
觀眾：[誰在看]
核心訊息：[一句話]
內容類型：[blog-post, case-study, webinar, podcast, lead-magnet, product-update, tool-launch, industry-report, event-recap, client-testimonial, playbook, template, ai-demo, custom-gpt]
渠道：[將在哪些管道發佈]
行動呼籲：[觀眾下一步該做什麼]
來源素材：[要參考的檔案、組件或網址]
語氣：[描述感覺的詞語]
品牌：[從步驟 0 取得的品牌名稱]
步驟 2：概念選擇（建議 3-5 個概念）
鎖定創意簡報後，分析簡報並為此特定使用案例選出最佳的影片概念。請勿提供一組固定的變體。請參考 references/concept-catalog.md 中的概念目錄。
目錄中包含 18 個核心概念、8 個視覺風格修飾符和 5 個冷門受眾鉤子模式。 在提出建議之前，請務必閱讀該目錄。
選擇流程
-
根據簡報對概念評分。 針對目錄中的每個概念，評估：
- 該概念的「最佳適用」是否與內容類型相符？
- 核心訊息能否在 15-30 秒內以此結構傳達？
- 該概念是否符合目標時長和尺寸？
- 簡報是否提供了該概念所需的數據/視覺元素？
-
套用冷門受眾過濾器。 針對每個已評分的概念，評估：
- 一個完全沒有背景知識的觀眾能否在開頭 3 秒內理解其價值？
- 該概念是否在開場節拍中創造出引人注目的視覺動態？
- 該概念是否避免了需要預先了解品牌、產品或問題領域？
- 如果概念本身會自然地在前段展示成果或數據點（例如指標計數器、動態資訊圖表、前後對比），則對於冷門受眾來說，它天生就比需要鋪陳時間的敘事型概念更強勢。
-
選擇鉤子模式。 針對每個推薦的概念，從目錄中配對一個鉤子模式：
- 包含數據的內容 → 成果優先
- 產品上市與工具 → 模式中斷
- 思想領導力與教育 → 好奇心缺口
- 建立信任的內容 → 社會證明鉤子
- 競爭與定價內容 → 損失規避
-
以單頁簡報形式呈現 3-5 個推薦概念。 每個概念需包含：
- 概念名稱（來自目錄）及一句話描述
- 為何適合這份簡報（1-2 句，須參考具體內容和受眾）
- 推薦的鉤子模式與開場節拍描述
- 逐場景表格（根據目錄範本，並針對此內容客製化）
- 選擇性的視覺風格修飾符（若能強化該概念）
-
為推薦進行排名。 標記出最佳推薦，並說明原因。
-
使用者選擇一個（或兩個概念的混合體）。 在進入步驟 3 之前，鎖定所選的概念。
冷門受眾最佳化規則
這些規則適用於所有概念推薦，並在衝突時覆蓋內容類型的預設值：
- 預設假設：冷門受眾。 除非簡報明確說明觀眾是已知的（例如再行銷、既有使用者、電子報訂閱者），否則假設品牌認知度為零。
- 冷門受眾的開場場景要求：
- 視覺模式中斷（動態、色彩對比或比例變化）
- 文字內容需命名一個觀眾無需知道品牌就能識別的問題或成果
- 場景 1 中不要出現品牌識別（將品牌卡牌留到場景 2 或之後）
- 冷門受眾的鉤子模式限制： 使用模式中斷、成果優先或損失規避。除非該統計數據/主張無需品牌背景就能普遍理解，否則避免使用好奇心缺口。
- 概念靈活性： 如果目錄中沒有任何概念能很好地符合針對冷門受眾的簡報，則建立混合體或改編現有概念。目錄是起點，而非限制。
步驟 3：格式與規格
根據簡報和所選變體，使用格式決策矩陣來解決：
| 渠道 | 尺寸 | 時長 |
|---|---|---|
| LinkedIn/Instagram 動態 | 1080x1080 | 15-30s |
| 網站/簡報 | 1920x1080 | 15-60s |
| Reels/TikTok/Stories | 1080x1920 | 15-60s |
| 電子郵件 (GIF) | 600x600 或 800x450 | 5-10s |
預設 FPS：30。只有在需要流暢動態時才使用 60。
尺寸：[寬]x[高]
時長：[X] 秒 ([X * fps] 幀)
FPS: 30
合成 ID：[PascalCase]
循環：[是/否]
輸出格式：[mp4, gif, webm]
所選概念：[概念 ID（來自目錄），或混合體]
步驟 4：場景分解（核准關卡）
在撰寫任何程式碼之前，先定義每個場景。使用所選變體的場景範本作為起始結構，然後針對具體內容進行客製化。
呈現場景表格以供核准。
場景表格格式：
| # | 名稱 | 時間 | 文字稿 | 動畫 | 目的 |
|---|---|---|---|---|---|
| 1 | 鉤子 | 0-3s | 確切文字 | 動態描述 | 存在的理由 |
時間指南：
| 時長 | 場景數量 | 平均每個場景 |
|---|---|---|
| 10s | 3-4 | 2.5-3.3s |
| 15s | 4-6 | 2.5-3.75s |
| 30s | 8-12 | 2.5-3.75s |
| 60s | 12-20 | 3-5s |
在繼續之前，鎖定文字稿、時間安排和敘事結構。
步驟 5：視覺設計（核准關卡）
在實作之前鎖定以下項目：
調色盤（最少需要的角色）：
- 背景色、主要強調色、次要強調色
- 主要文字、次要文字、第三層文字
- 邊框/分隔線
品牌主題預設（用於已知品牌，跳過顏色問題）：
| 品牌 | 背景色 | 主要強調色 | 次要強調色 | 主要文字 | 次要文字 | 字體 | 主題 |
|---|---|---|---|---|---|---|---|
| FunnelEnvy | #FFFFFF / #1a1a2e（終端） | #3B82F6（藍色） | #8B5CF6（紫色） | #000000 | #6B7280 | Inter, system | 淺色 |
| Reform | #FFFFFF / #1a1a2e（終端） | #48EC80（綠色） | #EDE630（黃色） | #000000 | #6B7280 | Inter, system | 淺色 |
| GrowthNode | #0f0a1a（所有場景） | #8B5CF6（紫色） | #3B82F6（藍色） | #FFFFFF | #a1a1aa | Inter, system | 深色 |
| MIA | #F7F4FA / #1c1422（深色） | #F1DE71（黃色） | #7184F1（紫色） | #1c1422 / #f7f4fa（深色） | rgba(28,20,34,0.62) | system-ui, -apple-system, Segoe UI | 淺色 |
MIA 強調色調色盤：藍色 #71C4F1、紫色 #7184F1、粉紅色 #F171C4、綠色 #71F19E
自訂品牌：如果品牌未在上面列出，請根據步驟 0 提供的品牌網站或指南來定義顏色。填寫相同的角色：背景色、主要強調色、次要強調色、主要文字、次要文字、字體、主題。
字體排印學：字體系列、字重層級、目標解析度下的尺寸。
動畫風格：彈簧（彈跳/平滑/乾脆）、線性或基於淡入淡出。選擇一種主導風格。
事實來源：如果要符合現有設計，請參考來源檔案。
步驟 6：架構決策
AI 代理根據場景複雜度來決定：
| 條件 | 方法 |
|---|---|
| 少於 15 個場景 | 單一檔案 |
| 15 個以上場景或可重複使用的部分 | 多檔案，使用 scenes/ 目錄 |
| 跨場景共享的元件 | 使用透明度信封的持久圖層 |
始終使用集中的時間常數（const T = { ... }）。
步驟 7：實作
根據鎖定的決策來撰寫程式碼。所有動畫都必須遵守 Remotion 規則（請參閱下方的技術參考）。
步驟 8：輸出文件
生成一份參考文件，內容涵蓋：規格、所選變體、預覽/渲染指令、場景分解、調色盤、時間設定、架構說明、迭代指南。
技術參考
請閱讀個別規則檔案以了解 API 細節和程式碼範例。
核心動畫與時間設定
- rules/animations.md - 動畫基礎。所有動態透過
useCurrentFrame()驅動。無 CSS 轉場 - rules/timing.md -
interpolate()、spring()、緩動函數、彈簧設定 - rules/sequencing.md -
<Sequence>和<Series>用於時間設定、延遲和時長控制 - rules/trimming.md - 修剪開頭（負數
from）和結尾（durationInFrames） - rules/transitions.md -
<TransitionSeries>搭配淡入淡出、滑入、擦除、翻轉、時鐘擦除
媒體
- rules/assets.md - 使用
staticFile()處理public資料夾中的素材 - rules/videos.md -
<Video>搭配修剪、音量、速度、循環、音高 - rules/audio.md -
<Audio>搭配修剪、音量、速度、音高 - rules/images.md -
<Img>組件（確保在渲染前載入） - rules/gifs.md - 使用
<AnimatedImage>處理 GIF/APNG/AVIF/WebP - rules/fonts.md - 透過
@remotion/google-fonts使用 Google 字體，透過@remotion/fonts使用本地字體
文字與字幕
- rules/text-animations.md - 打字機效果、單字高亮模式
- rules/measuring-text.md -
measureText()、fitText()、fillTextBox() - rules/display-captions.md - TikTok 風格字幕、逐字高亮
- rules/import-srt-captions.md - 使用
parseSrt()解析.srt檔案 - rules/transcribe-captions.md - Whisper.cpp、Whisper Web、OpenAI API
合成與中繼資料
- rules/compositions.md -
<Composition>、<Still>、<Folder>、defaultProps - rules/calculate-metadata.md - 動態時長、尺寸和 props
進階
- rules/3d.md - 搭配 React Three Fiber 使用
<ThreeCanvas> - rules/charts.md - 透過
useCurrentFrame()驅動動畫的 SVG/D3.js 圖表 - rules/lottie.md - 搭配
@remotion/lottie使用<Lottie>組件 - rules/tailwind.md - TailwindCSS（不可使用
transition-*或animate-*類別）
媒體工具 (Mediabunny)
- rules/extract-frames.md - 在指定時間點提取影片幀
- rules/can-decode.md - 檢查影片/音訊的可解碼性
- rules/get-video-duration.md - 影片時長（秒）
- rules/get-video-dimensions.md - 影片寬度和高度
- rules/get-audio-duration.md - 音訊時長（秒）
佈局
- rules/measuring-dom-nodes.md - 使用
useCurrentScale()進行精確測量
參考資料
- references/concept-catalog.md - 概念目錄，包含 18 個核心概念、8 個視覺風格修飾符、5 個冷門受眾鉤子模式、選擇標準和內容類型親和性矩陣
- references/video-creation-process.md - 完整流程文件，包含範本、決策矩陣和詳細指南
硬性規則
以下規則適用於所有 Remotion 程式碼。違反將導致輸出結果不正確。
- 所有動畫都由
useCurrentFrame()驅動。禁止使用 CSS 轉場、Tailwind 的animate-*或transition-*類別，以及 React Three Fiber 的useFrame() - 使用 Remotion 組件（
<Img>、<Video>、<Audio>），而非原生 HTML 元素 - 使用
staticFile()處理public/資料夾中的所有素材 - 時間以秒為單位：乘以來自
useVideoConfig()的fps以獲得幀數 - 禁止使用第三方動畫庫來驅動動態（停用它們的動畫，改用
useCurrentFrame()） - 每個概念都必須不言自明。一個在無任何背景知識下瀏覽的觀眾，應能僅從影片本身理解其價值。沒有任何場景應依賴外部知識。文字稿必須獨立完整地承載訊息。除非簡報另有說明，否則始終假設受眾是冷門的。