Product Motion Ad (Remotion + ElevenLabs)
最終成果：MP4 1920×1080 30 fps，30–45 秒，強力鉤子，目標語言的自然語音旁白，專業音效，快速過渡（參考影片風格），流程 = 真實產品流程。透過 SendUserFile 傳送給使用者。
通過驗證的模板位於 template/（此技能資料夾內）。來自真實專案的完整 13 場景範例位於 references/example-scenes-threads-automation.tsx.txt 與 references/example-promo-threads-automation.tsx.txt。
撰寫腳本前請先閱讀 references/script-and-storyboard.md，製作音訊前請閱讀 references/elevenlabs.md。
不可違反的原則
- 前 8 秒必須清楚呈現產品：產品名稱 + "為誰做什麼"。
- 場景順序 = 產品使用流程順序（登入/註冊 -> 設定 -> 核心流程 -> 結果 -> 進階功能 -> 結果證明 -> 行動呼籲）。不可打亂。
- 一句旁白 = 一個場景 = 一項優勢 + 其視覺證據（動態 UI：表單填寫、按鈕點擊、結果卡片出現、數字上升）。不只是文字。
- 事實來自產品來源，非虛構：閱讀程式碼/登陸頁/引導頁/"運作方式"頁面。範例數字（瀏覽量、分數）可以作為示意，但須告知使用者這是示意。
- 節奏快速，如參考影片：過渡 10 幀（
T = 10），場景內動畫加速至speed1.5–3。不要為了配合慢速旁白而放慢場景——請修正旁白。 - 旁白自然：一次完整的錄製，聊天風格，節奏快速，每行不加情緒標籤。不是逐句分開錄製（那會顯得很僵硬）。
- 遵循使用者效能規則：僅在開始與結束時測量一次，不要無故重複渲染。
工作流程
1. 收集素材（如可能則並行進行）
- 產品：在儲存庫中，搜尋登陸頁文字、引導頁、運作方式/功能頁面、UI 功能名稱（Grep UI 字串）。不在儲存庫中則要求描述/URL。建立優勢流程表：
步驟 | 使用者操作 | 優勢 | 視覺證據（顯示的 UI）。 - 品牌：從 CSS（
globals.css、Tailwind 主題、登陸頁 CSS）取得顏色與字體，從public/取得 Logo。填入template/src/theme.ts（C、GRADIENT、字體、BRAND）。 - 風格參考（如有影片）：使用 Remotion 內建的 ffmpeg 提取影格，然後檢視 contact sheet：
npx remotion ffmpeg -v error -i "<video>" -r 3 -s 340x192 <dir>/f%03d.png（Remotion 的 ffmpeg 不提供fps=/tile篩選器；請使用-r與scripts/contact-sheet.cjs）。 記錄：背景（模糊光暈/點狀網格）、文字出現方式、硬切、3D UI、游標點擊、光暈、節奏。
2. 腳本與分鏡
遵循 references/script-and-storyboard.md：3 拍鉤子（好奇心缺口），每場景一行 ≤ 10 字，聊天風格，第一句以開場詞開頭（"欸，"）以避免關鍵詞在第 0 秒被誤讀，簡短的行動呼籲。
僅在需求不明確時才向使用者展示腳本與簡要場景順序；否則直接執行。
3. Remotion 專案
- 將
template/複製到使用者儲存庫的新資料夾（例如promo-video/），執行npm install。 - 若位於其他 Next.js/TypeScript 儲存庫內：將該資料夾加入根目錄
tsconfig.json的exclude以及 ESLint 的globalIgnores。該資料夾已有.gitignore（node_modules, out）。 - 將 Logo 複製到
promo-video/public/並設定BRAND.logo。 - 在
src/scenes.tsx中撰寫每個產品的場景（使用範例中的模式：useFrame()、useRise/rise、glass/white、StepTag、Words、typed+Caret、Cursor、BlurFilter）。通用的makeFeature場景僅用於原型。 - 填入
src/Promo.tsx中的DEFS：場景順序、cue（旁白句子的開頭片語）、beats（鉤子）、speed、過渡、dark、sfx。
4. ElevenLabs 音訊（請參閱 references/elevenlabs.md）
- 一次錄製旁白 ->
public/vo/full.mp3；Scribe 逐字轉錄 ->public/vo/words.json。檢查轉錄（是否有誤讀的字詞？遺漏的行？）。 - 10 個音效檔案包 ->
public/sfx/*.mp3。 - 自動時間軸：場景在該片語
cue被唸出前 6 幀開始；音效放置在場景設計時間點（除以speed）。
5. 渲染與驗證
- 執行
npm run typecheck然後npm run render（port 3456 — port 3000 常被 Next 開發伺服器佔用，渲染會失敗 "not a valid Remotion project"）。 - 若渲染時間超過 2 分鐘，則在背景執行。
- 檢查視覺：執行
node <skill>/scripts/contact-sheet.cjs out/promo.mp4 <scratchpad>/chk然後閱讀 sheet。如需特定秒數，提供秒數列表。（ffmpeg 的-r取樣常顯示假的空白初始影格 — 若有疑慮，檢查特定秒數。） - 檢查：文字無持續模糊、無被截斷/換行、步驟標籤未被面板遮蓋、關鍵動畫在場景切換前完成、螢幕文字 = 旁白單詞。
- 使用
SendUserFile傳送（顯示render），回報時長、檔案大小，以及尚未驗證的項目（例如音訊音量未直接聆聽）。
已發生過的陷阱（避免）
| 問題 | 原因 | 解決方案 |
|---|---|---|
| 鉤子文字持續模糊 | 前一階段的模糊值（out1）保持為 1 | 按階段計算模糊：僅在進入/離開時 |
| 影片變慢 | 場景被拉長以配合慢速旁白 | 旁白更快 & 腳本更短；保持 speed |
| 旁白生硬 | 逐句剪輯 + 每行加 [excited] 標籤 + 書面語 | 一次錄製，聊天風格，不加重複標籤 |
| 第一個詞誤讀（"akun"->"kurun"） | v3 常在第一個詞出錯 | 以 "欸，" / "那，" 開頭，並檢查 Scribe 轉錄 |
| 渲染失敗 "getStaticCompositions undefined" | port 3000 被 Next dev 佔用 | --port=3456 |
fps=/tile 錯誤 | Remotion 的 ffmpeg 功能受限 | -r + contact-sheet.cjs（sharp） |
| 句子被換行成兩行 & 頭像被截斷 | flex 項目收縮 | flexWrap: "nowrap"，縮小字體 |
| 面板遮住步驟標籤 | 攝影機 translateY 太大 | 限制攝影機移動，scale(0.92) |
| 晶片/卡片互相重疊 | 極座標位置太近 | 檢查 contact sheet，調整角度/半徑 |
useId() 在 url(#id) 中失效 | id 包含 : | 使用 useFilterId()（消毒） |
| 登入後 MCP ElevenLabs 未載入 | 新工具出現在新會話中 | 若可行直接使用工具；否則使用 headless claude -p（見參考） |
| MCP 失敗 "Protected resource ... does not match" | 主機區域 | claude mcp add -s user --transport http elevenlabs https://api.us.elevenlabs.io/v1/mcp |