Remotion + Resemble.ai 技能
使用此技能來建立專業的 AI 配音影片，結合 Remotion 的程式化動畫與 Resemble.ai 的自然語音合成。
使用時機
當使用者想要建立以下內容時，請使用此技能：
-
教學課程影片 - 研究主題並建立動畫解說
- 範例：「為三年級學生建立關於蝴蝶生命週期的教學影片」
-
SaaS 操作示範 - 透過動畫 UI 展示軟體功能
- 範例：「建立一個影片，示範如何使用 Notion 的資料庫功能」
-
產品發表公告 - 使用動態圖像的宣傳影片
- 範例：「建立一個發表影片，宣布我們新的 AI 搜尋功能」
-
教學 / 引導影片 - 含滑鼠游標動畫的逐步指南
- 範例：「建立一個教學影片，展示如何在我們的應用程式中設定專案」
-
社交媒體宣傳影片 - 用於廣告的短而有力的動態文字影片
- 範例：「為我們的健身應用程式建立一個 15 秒的 Instagram 廣告」
-
應用程式 / 產品展示影片 - 動態文字結合浮動 UI 模型
- 範例：「建立一個宣傳影片，展示我們的加密貨幣交易所介面」
-
登陸頁面揭示影片 - 具有設計工具美學的網頁動畫
- 範例：「建立一個影片，展示我們新的 SaaS 登陸頁面設計」
影片製作流程
對於所有影片類型，請遵循此流程：
1. 理解 → 2. 研究 → 3. 腳本 → 4. 場景 → 5. 音訊 → 6. 動畫
步驟 1：理解需求
確認：
- 影片類型： 教學課程、SaaS 示範、產品發表、教學/引導、社交宣傳、應用程式展示、登陸頁面揭示或 AI 解說？
- 目標受眾： 年齡、專業程度、使用情境
- 調性： 教育性、專業、活力、俏皮、戲劇化、極簡
- 長度： 超短 (5-15 秒)、短 (30-60 秒)、中 (1-3 分鐘)、長 (3-5 分鐘)
- 格式： 寬螢幕 16:9 (1920x1080)、正方形 1:1 (1080x1080)、直立 9:16 (1080x1920)
- 視覺風格： 暗色戲劇化、柔和漸層、簡潔極簡、設計工具美學
步驟 2：研究（適用於教學和示範）
對於教育內容：
- 搜尋準確、最新的資訊
- 使用可靠的來源（官方文件、教育網站）
- 收集關鍵事實、統計數據或要說明的步驟
對於 SaaS 示範：
- 探索產品以了解功能
- 擷取螢幕截圖或記錄 UI 模式
- 識別要展示的關鍵工作流程
步驟 3：撰寫腳本
在產生音訊之前，先撰寫完整的配音腳本。結構因影片類型而異（請參閱下方說明）。
步驟 4：規劃場景
將腳本拆解為視覺片段：
- 每個場景 = 一個關鍵想法或步驟
- 記下每句台詞搭配的視覺元素
- 規劃場景之間的轉場
步驟 5：產生音訊
使用 Resemble.ai 產生配音（請參閱下方設定）。
步驟 6：建立動畫
使用 Remotion 組合，製作與音訊同步的動畫。
影片類型：教學課程
目標： 針對特定受眾程度，清晰地解釋一個概念。
腳本結構
鉤子 (5-10 秒)
「你知道毛毛蟲是怎麼變成蝴蝶的嗎？」
介紹 (10-15 秒)
設定情境，預告他們將學到的內容。
主體 (主要內容，分成 3-5 個關鍵點)
- 要點 1：用視覺比喻解釋
- 要點 2：建立在先前要點之上
- 要點 3：補充細節或範例
- ...
總結 (10-15 秒)
總結關鍵重點。
結尾 (5 秒)
行動呼籲或結語。
受眾調整
| 受眾 | 語言風格 | 視覺元素 |
|---|---|---|
| K-2 年級 | 非常簡單、活潑、5 字句子 | 明亮色彩、可愛角色、大形狀 |
| 3-5 年級 | 簡單但資訊豐富、使用比喻 | 清晰圖表、逐步說明、中等節奏 |
| 6-8 年級 | 更多詞彙、因果關係 | 圖表、標註圖表、較快節奏 |
| 高中以上 | 可使用專業術語、細膩 | 數據可視化、詳細圖形 |
| 成人 | 專業、簡潔 | 簡潔設計、資訊圖表 |
教學動畫模式
- 揭示： 當敘述者提到元素時，淡入顯示
- 轉變： 改變形狀以顯示變化（毛毛蟲 → 蝴蝶）
- 圖表： 動畫標籤、指向部分的箭頭
- 時間軸： 進度條、步驟指示器
- 比較： 並排顯示並重點標示
範例場景規劃
腳本：「首先，蝴蝶在葉子上產下小小的卵。」
場景 1：
- 視覺：葉子出現（從底部滑入，彈簧動畫）
- 視覺：小卵在葉子上淡入
- 時間點：當唸到「卵」這個字時，卵同時出現
- 長度：4 秒
影片類型：SaaS 操作示範
目標： 向使用者展示如何在軟體中完成一項任務。
腳本結構
鉤子 (5-10 秒)
「讓我向你展示如何在 [產品] 中 [完成目標]。」
情境 (10 秒)
為什麼此功能很重要，它解決了什麼問題。
操作示範 (主要內容)
- 步驟 1：導航到 X
- 步驟 2：點擊 Y
- 步驟 3：設定 Z
- ...
結果 (10 秒)
顯示成果、完成狀態。
結尾 (5-10 秒)
總結好處，建議後續步驟。
視覺元素
- UI 模型： 介面的風格化呈現
- 游標動畫： 動畫指標移動到點擊目標
- 重點標示： 正在討論的按鈕/欄位周圍發光邊框
- 縮放效果： 聚焦 UI 的特定區域
- 標註： 指向 UI 元素的文字標籤
示範動畫模式
- 游標移動： 平滑的貝茲曲線，點擊前略作停頓
- 點擊效果： 點擊時產生漣漪或脈衝
- 欄位聚焦： 邊框發光，略微放大
- 打字動畫： 字元在輸入欄位中逐一出現
- 轉場： 畫面之間滑動或淡入淡出
- 標註箭頭： 動畫進入、指向元素、淡出
範例場景規劃
腳本：「點擊側邊欄中藍色的『新增資料庫』按鈕。」
場景：
- 視覺：側邊欄的 UI 模型
- 動畫：游標移動到按鈕（0.8 秒緩出）
- 動畫：按鈕發光標示
- 動畫：點擊漣漪效果
- 動畫：新的面板從右側滑入
- 長度：3 秒
影片類型：產品發表公告
目標： 激發對新產品或功能的興奮感。
腳本結構
鉤子 (5-10 秒)
一個大膽的陳述或問題來吸引注意。
問題 (10-15 秒)
它解決了什麼痛點？
解決方案揭示 (10-15 秒)
以戲劇化的方式介紹產品/功能。
主要功能 (20-40 秒)
3-5 個精簡的功能重點搭配視覺元素。
社會證明 (選擇性，10 秒)
統計數據、推薦或可信度標記。
行動呼籲 (5-10 秒)
觀眾接下來應該做什麼？
視覺風格
- 大膽字體： 大文字、動態文字動畫
- 品牌色彩： 一致使用產品的顏色搭配
- 圖示與圖形： 抽象形狀、功能圖示
- 高能量： 較快的剪接、動態移動
- 標誌揭示： 結尾時以動畫呈現標誌
發表動畫模式
- 文字撞擊： 文字以衝擊效果出現
- 動態文字： 移動、縮放、旋轉的文字
- 計數動畫： 數字往上數（使用者、營收等）
- 圖示序列： 功能以彈跳/彈簧效果出現
- 漸層背景： 緩慢變化的色彩漸層
- 粒子效果： 微妙的閃光、漂浮形狀
- 標誌揭示： 縮放、淡入或從碎片組合
範例場景規劃
腳本：「隆重介紹智慧搜尋 — 毫秒內找到任何東西。」
場景：
- 視覺：帶有漸層的暗色背景
- 動畫：「隆重介紹」淡入（0.5 秒）
- 動畫：「智慧搜尋」以大膽字體撞擊出現（0.3 秒，附帶震動）
- 動畫：標語在下方以打字機效果逐字顯示（1.5 秒）
- 動畫：搜尋圖示脈衝
- 長度：4 秒
影片類型：教學 / 引導
目標： 透過清晰的逐步視覺引導，教導使用者如何完成一項任務。
腳本結構
介紹 (3-5 秒)
「以下是 [在產品中] 如何 [完成目標] 的方法。」
步驟 1 (10-20 秒)
第一個動作，附帶清晰的視覺示範。
步驟 2 (10-20 秒)
第二個動作，建立在先前步驟之上。
步驟 3+ (每個 10-20 秒)
繼續流程直到完成...
成功狀態 (5-10 秒)
顯示完成，慶祝成果。
總結 (選擇性，5 秒)
快速總結完成了什麼。
視覺風格
- 明亮、乾淨的背景： 米白 (#fafafa)、奶油色或淺灰色
- 完整 UI 情境： 顯示完整的介面，而非片段
- 進度指示器： 步驟導覽、編號階段（1 → 2 → 3）
- 游標引導： 平滑的游標移動引導觀看者的視線
- 成功慶祝： 綠色勾號、彩紙或品牌成功畫面
- 最小干擾： 專注於任務，避免裝飾性元素
教學動畫模式
- 游標編排： 平滑的貝茲路徑，點擊前略作停頓
- 點擊回饋： 點擊時產生微妙的漣漪或標示
- 表單欄位聚焦： 欄位啟用時邊框發光
- 打字模擬： 文字在輸入欄位中逐字元出現
- 步驟轉場： 畫面之間溫和的交叉淡出或滑動
- 進度更新： 導覽/步驟指示器向前動畫
- 成功爆發： 勾號以彈跳效果縮放出現，可選彩紙
- 面板揭示： 側邊欄或下拉選單平滑滑入
視覺元素
- 導覽： 「← 1. 意圖 → 2. 種子創意 → 3. 草圖板」
- 表單輸入： 佔位文字、標籤、驗證狀態
- 按鈕： 清晰的行動呼籲，顯示懸停/啟用狀態
- 側邊欄/面板： AI 建議、設定或工具面板
- 成功畫面： 全彩背景搭配圖示和訊息
範例場景規劃
腳本：「首先，輸入你的課程主題。」
場景 1 - 設定 (2 秒)：
- 視覺：完整的應用程式介面，淺色背景
- 視覺：導覽顯示「2. 種子創意」為啟用狀態
- 動畫：畫面淡入
場景 2 - 互動 (4 秒)：
- 視覺：帶有「輸入一個概念或主題：」標籤的表單
- 動畫：游標移動到輸入欄位（0.6 秒緩出）
- 動畫：欄位邊框以藍色發光
- 動畫：「蘑菇的秘密生活」逐字輸入（2 秒）
- 動畫：游標移動到「繼續」按鈕
場景 3 - 轉場 (2 秒)：
- 動畫：按鈕在懸停時發光
- 動畫：點擊漣漪效果
- 動畫：畫面向左滑動，新的面板滑入
場景 4 - 結果 (3 秒)：
- 視覺：草圖板視圖搭配 AI 建議面板
- 動畫：建議卡片交錯進入（每個延遲 0.15 秒）
- 動畫：「課程流程」區塊填入內容
場景 5 - 成功 (3 秒)：
- 視覺：綠色全螢幕背景
- 動畫：白色圓圈向外縮放（彈簧效果）
- 動畫：勾號在圓圈內部繪製
- 動畫：「你的課程已上線！」在下方淡入
- 動畫：副標題「準備好激發好奇與發現」淡入
教學節奏指南
| 步驟複雜度 | 時長 | 備註 |
|---|---|---|
| 簡單點擊 | 2-3 秒 | 點擊並立即顯示結果 |
| 表單輸入 | 4-6 秒 | 輸入 + 提交 |
| 多欄位表單 | 8-12 秒 | 多個輸入 |
| 複雜工作流程 | 15-20 秒 | 數個子步驟 |
| 成功狀態 | 3-5 秒 | 讓它停留片刻 |
有效教學的秘訣
- 每個場景一個動作 — 不要將多次點擊擠在一起
- 在結果上暫停 — 讓觀看者看到成果後再繼續
- 標示變化的內容 — 在新的元素上使用微妙的發光或縮放
- 旁白與動作同步 — 點擊與敘述者說「點擊」同時發生
- 顯示完整的 UI — 情境有助於使用者定位
- 以慶祝結尾 — 成功狀態強化完成感
影片類型：社交媒體宣傳
目標： 以大膽的動態文字快速吸引注意力，用於廣告和社交內容。
腳本結構
鉤子 (1-3 秒)
一個有力的單字或片語，能讓人停止滑動。
價值主張 (3-5 秒)
對他們有什麼好處？一句精簡的話。
功能閃現 (5-10 秒)
2-3 個關鍵好處，快速呈現。
行動呼籲 (2-3 秒)
清晰的行動：「立即下載」、「免費試用」、網址
視覺風格
- 極簡背景： 純色或簡單漸層
- 最大對比： 暗色背景 + 白色文字 或 彩色背景 + 白色文字
- 逐字揭示： 每個字都有它的時刻
- 色彩轉換： 背景顏色在場景之間變化
- 正方形格式： 1080x1080 用於 Instagram/社交動態
社交宣傳動畫模式
- 文字撞擊： 單字以衝擊效果出現（縮放 1.2→1 + 輕微震動）
- 背景閃爍： 字詞/片語之間即時變色
- 文字縮放： 文字變大後縮小，為下一個文字留出空間
- 最小動態： 讓大膽字體說話
- 快速剪接： 每個字詞/片語最多 0.5-1 秒
範例場景規劃
腳本：「We are ready.」
場景序列（總共 4 秒）：
- 影格 1：黑色背景，「WE」以白色撞擊出現（0.8 秒）
- 影格 2：白色背景，「A」以黑色出現在中央（0.8 秒）
- 影格 3：紅色背景，「R」逐字打出，變成「READY」（1.6 秒）
- 影格 4：保留最終影格（0.8 秒）
長度指南
| 平台 | 理想長度 | 最大長度 |
|---|---|---|
| Instagram Reels | 15-30 秒 | 90 秒 |
| TikTok | 15-60 秒 | 3 分鐘 |
| Twitter/X | 15-45 秒 | 2 分 20 秒 |
| 30 秒-1 分鐘 | 10 分鐘 | |
| YouTube Shorts | 15-60 秒 | 60 秒 |
影片類型：應用程式 / 產品展示
目標： 以電影感的方式展示產品介面，結合文字與 UI。
腳本結構
鉤子 (3-5 秒)
問題陳述或引人入勝的問題。
介紹產品 (5-10 秒)
顯示產品名稱/標誌，建立品牌識別。
功能導覽 (20-40 秒)
搭配 UI 展示，介紹 3-5 個主要功能。
好處總結 (5-10 秒)
總結產品的獨特之處。
行動呼籲 (5 秒)
網址、應用程式商店徽章或下一步。
視覺風格
- 暗色漸層背景： 黑色到紫色/藍色，適合科技產品
- 柔和漸層背景： 粉彩（粉紅、薰衣草、薄荷），適合友善的應用程式
- 浮動 UI 模型： 應用程式畫面帶有陰影與輕微角度
- 動態文字搭配 UI： 文字出現在介面旁邊或上方
- 游標互動： 在 UI 內顯示點擊、滾動、打字
應用程式展示動畫模式
[內容因原始檔案截斷而省略]