Remotion 影片
使用 Remotion 建立動畫短影片（1080x1920）。六種影片類型，每種都遵循研究後再動畫的工作流程。
為何選擇 Remotion
Remotion 渲染的是程式碼，而非像素。AI 能原生理解程式碼 — 改變一個透明度變數是明確無歧義的，相較於決定光柵畫面中哪些像素構成「標題」則否。程式碼也意味著：解析度獨立的輸出、可重複使用的元件、即時預覽，以及基於 Git 的版本控制。
先決條件
此技能需要 Remotion 最佳實踐技能。開始前，請檢查專案是否已安裝 Remotion 技能。若未安裝，請指示使用者執行：
npx skills add remotion-dev/skills
詳情請參閱 Remotion Agent Skills 文件。
類型選擇
根據使用者的輸入決定影片類型：
| 使用者提供 | 影片類型 | 載入參考檔案 |
|---|---|---|
| 一個主題（教學或解釋） | 教育解說 | education-explainer.md |
| 一個產品 URL | 產品展示與發表 | product-demo.md |
| 一個 Google 商家 / 地圖連結 | 客戶見證 / 社會證明 | testimonial.md |
| 一個說話人頭影片檔案（9:16） | 虛擬人像 + 動畫疊加 | avatar-overlays.md |
| 一個 CSV 或資料檔案 | 資料視覺化儀表板 | data-viz.md |
| 一個頻道 / 品牌 / 社群 URL | 下方三分之一 / 疊加 | lower-thirds.md |
僅載入相關的類型參考檔案，加上 defaults.md 以取得共享設定（安全區、字型、動畫規則、視覺風格）。
額外參考檔案（按需載入）
並非每支影片都需要這些檔案。僅在情況需要時才載入：
- integrations.md — 當使用者需要 Playwright（網頁爬取）、Lottie 動畫、3D 素材、配音或 AI 生成圖片時載入。部分整合需要 API 金鑰 — 務必先詢問使用者。
- advanced-patterns.md — 當使用者想要時間滑桿、每個合成的控制項、從目錄批次產生多支影片、透明渲染、自訂轉場或基於 Git 的儲存工作流程時載入。
共同工作流程
所有類型都遵循相同的兩步驟模式：
步驟 1：研究 / 爬取 / 分析
根據影片類型收集資訊（研究主題、爬取網站、爬取評論、轉錄影片或分析資料）。呈現發現結果及建議的場景大綱。在撰寫程式碼之前等待使用者批准。
步驟 2：設計與動畫
獲得批准後，將所有場景建構為 Remotion React 元件。遵循 defaults.md 中的動畫規則：
- 彈簧入場（
damping: 200），無線性移動 - 相關項目交錯 8-12 影格
- 場景之間使用
TransitionSeries搭配 12 影格淡入淡出轉場 - SVG
stroke-dashoffset用於圖表/流程圖繪製 interpolate()+tabular-nums用於計數動畫- 粒子效果用於慶祝/結尾時刻
步驟 3：潤色（選擇性）
在影片正確播放後，提供加入控制項的選項：
- 時間滑桿 — 請參閱 advanced-patterns.md 了解如何為合成加入即時控制
- 整合功能 — 請參閱 integrations.md 了解 Lottie 動畫、3D 效果、配音等
預覽
建置完成後，啟動 Remotion Studio：
npx remotion studio
設計原則
- 每個場景都需要清晰的視覺隱喻 — 圖表、流程圖、圖示、逐步動畫
- 不要出現文字牆 — 資訊密集、動感優美、節奏明快
- 風格介於 Kurzgesagt 與 Fireship 之間：讓複雜概念變得視覺直觀
- 預設情況下所有圖形都以 SVG 元件建置；Lottie 和 3D 可透過 integrations.md 使用
- 尊重安全區域（請參閱 defaults.md）— 邊緣附近不要放置重要元素
致謝
基於 Sabrina Ramonov 的影片提示以及 Remotion AI 影片剪輯教學 的製作見解。改編為具有可設定預設值與漸進揭露功能的 Agent Skill。