SaaS 產品示範影片

端到端工作流程，用於在 Remotion 中產出一個與節拍同步的 SaaS 產品影片。涵蓋無聲電影風格影片、節拍鎖定的橫向示範、垂直 Reels，以及帶有拼貼 B-Roll 層的影片。

此技能對三件事有明確的觀點：素材、氛圍、節拍。忽略任何一項，你只會產出一個普通的 Canva 風格動態圖形影片，看起來就像其他所有 SaaS 示範一樣。這個紀律是造成差異的關鍵。

這些是 強烈建議 而非硬性規定。大多數製作都會遵守；有些則會刻意打破（例如，在有旁白的影片中，節拍同步可能會與旁白衝突）。當你打破規則時，必須是有意識地這麼做。

先決條件

在開始之前，請確認以下事項已就緒。第一項是必須的；其他幾項是強烈建議，並附有文件說明的備用方案。

已安裝 Remotion（必要）。 @remotion/cli 4.0.x + @remotion/google-fonts + React 19。請參閱 references/project-scaffold.md 以了解精簡的 package.json / tsconfig.json / remotion.config.ts - 切勿在現有的 git 儲存庫內執行 npx create-video（它會卡在方向鍵提示上）。
Super Powers 插件（強烈建議，非必要）。 當可用時，此技能會調度 superpowers:using-superpowers、superpowers:brainstorming（附帶視覺輔助）、superpowers:writing-plans 和 superpowers:subagent-driven-development。它們能為你提供瀏覽器中的 HTML 模型以進行佈局決策、正式的計劃文件，以及實作者和審查者的子代理循環。

如果未安裝 Super Powers，該技能仍然有效 - 工作流程會變得更加對話式且稍微慢一些。腦力激盪將變成內聯對話（無瀏覽器輔助）；計劃直接寫在聊天中；場景透過內聯方式而非調度子代理來實現。三大支柱（素材 / 氛圍 / 節拍）以及 B-Roll、示意圖 UI、點擊定位、寫作風格和 scripts/ 中的腳本都運作相同。不要因為缺少插件而拒絕工作 - 請適應並繼續。
已安裝 Python 3 + librosa。 節拍偵測會執行 scripts/detect-beats.py，該腳本會匯入 librosa。如果未安裝，請執行 pip install --break-system-packages librosa numpy soundfile 並告知使用者 - 不要默默地進行。
用於參考影片分析（支柱 2）： 此技能支援三種按優先順序排列的路徑。使用可用中最高優先級的那個 - 請參閱 references/reference-video-vibe.md 以了解完整的偵測邏輯。
1. PATH 上的 gemini CLI（官方 Google CLI 或社群包裝器，如 gemini-yt）。使用提示詞 + YouTube URL 作為參數執行。
2. 環境變數或 .env 中設定的 GEMINI_API_KEY。使用位於 scripts/analyze-reference-video.sh 的技能的 curl 包裝器。
3. 以上皆無 - 退回到手動的 Google AI Studio 複製貼上。雖然麻煩但總能運作；品質相當。

在一個新的工作階段中，將執行 references/prereq-check.md 作為你的第一步。

三大支柱

這些是高槓桿活動。為了「節省時間」而跳過其中一個，幾乎總會在後續階段花費更多時間。

支柱 1 - 素材導入入職

在執行任何其他事項之前，先執行 assets/prompt-templates/asset-intake-questionnaire.md 中的結構化問卷。它會詢問：

畫面比例（16:9 橫向、9:16 直向，或兩者並行 - 如果兩者都需要，請參閱 references/vertical-port.md）
持續時間（秒）（建議 20-45 秒）
Logo - 首選 SVG。如果只有 PNG，請記錄原生尺寸，以防止放大時像素化。
品牌十六進制顏色（主要強調色 + 3-6 個輔助粉彩顏色）
字型堆疊（所有字型都必須來自 Google Fonts）
文案 / 腳本 - 傾向於使用使用者提供的草稿，而不是自行產生。如果他們沒有腳本，請參閱 references/script-development.md。
旁白（選用）
配樂檔案 - 節拍同步必需。如果使用者沒有，請從免版稅素材庫中挑選。

請參閱 references/asset-intake.md 以了解完整的導入流程，包括部分素材的最小可行集合、導入時的命名規範，以及素材放大像素化檢查。

支柱 2 - 參考影片氛圍工作流程

在編寫場景之前，先詢問使用者 2-3 個他們想要氛圍的 YouTube 參考影片。然後為每個影片產出一個導演級的分析。

支援兩種路徑（請參閱 references/reference-video-vibe.md）：

自動化（較佳，當可用時） - 如果使用者已設定 GEMINI_API_KEY，則對每個影片執行 scripts/analyze-reference-video.sh <youtube-url> <slug>。透過 curl 使用 Gemini Pro Preview。每個影片約需 30 秒。輸出檔案位於 references/gemini-<slug>.md。
手動（始終有效） - 開啟 aistudio.google.com，貼上來自 scripts/reference-video-prompt.md 的提示詞和 YouTube URL，將結果複製回檔案中。雖然麻煩，但能產出同樣可用的輸出。當 API 不可用時使用此方法。

導演術語詞彙（推鏡、甩鏡、V 形剪輯拉回、墨水遮罩、匹配剪輯變焦）是最具承載力的輸出 - 它為你提供了可圍繞建構的特定動態基本元素。

支柱 3 - 配樂節拍同步

場景邊界應落在小鼓上（修辭上的「鼓點」感覺）。場景內部的動畫事件（點擊、卡片落地、計數器啟動）應落在場景內部的落地鼓或小鼓上。

流程：

執行 scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json。輸出 BPM、第一個落地鼓影格、小鼓時間戳記 + 影格。
匯入到一個統一的時間常數物件中（請參閱 assets/code-templates/theme-v2.ts）。每個場景的 <Sequence from={...} durationInFrames={...}> 都從此處取值。
在階段 6（場景建構完成）之後，針對 beats.json 和場景內部事件列表執行 scripts/align-internal-events.py，將事件微調到最接近的 ±6 影格內的節拍上。這是僅次於初始渲染的第二高槓桿迭代 - 觀眾能感覺到節奏不對的內部事件，但無法明確指出原因。
使用 isSnare(n) / isKick(n) 輔助函數在開發模式中進行斷言。
針對任何 TypedText/TypedChars 執行 scripts/check-typing-budget.py，以驗證它是否適合在場景持續時間內。在發佈前截斷螢幕外的打字動畫。
完整的數學、輔助函數、內部事件對齊以及打字動畫預算檢查，請參閱 references/beat-sync.md。

周邊能力 - 當基礎功能不足時

這些涵蓋了標準「全動態圖形，只錄製螢幕截圖」SaaS 示範之外的情況。當使用者的情況需要時，請閱讀相關參考資料。

腳本開發 - 當使用者沒有腳本時

大多數使用者帶著模糊的產品想法進來，而不是已經準備好的逐畫面腳本。references/script-development.md 逐步介紹了一個結構化對話流程，該流程能產出一個 4 幕大綱 + 鎖定的逐畫面腳本 + 鎖定的文案參考頁面，準備好輸入到規格文件中。

B-Roll 整合 - 當影片使用實景或拼貼圖層時

如果使用者有素材影片、拼貼片段或任何想要作為背景圖層的影片，請使用 references/b-roll-integration.md 和 BRollLayer 範本。B-Roll 可以是全不透明度背景或低不透明度紋理；該元件處理修剪、淡入淡出、混合模式和影格率校正時間。

（此技能的先前版本建議將實景工作發送到 Premiere/DaVinci。當 B-Roll 被用作動態圖形下的圖層時，這是錯誤的 - Remotion 能很好地處理這種情況，並且將製作保留在一個工具中是一個生產力提升。）

示意圖 UI 精確度 - 當產品沒有實際 UI 可錄製時

如果產品是 Chrome 擴充功能、API 或處於早期階段，且沒有實際的產品 UI 可以截圖，references/schematic-ui-fidelity.md 涵蓋了如何發明看起來精緻的示意圖 UI，而不侵犯真實平台（LinkedIn、Gmail、Slack）。三種參考模式：個人資料卡、郵件編輯器、API 面板 - assets/code-templates/Schematic*.tsx 中有程式碼範本。

點擊定位 - 頭號迭代困擾點

滑鼠遊標點選不到按鈕是各製作中最常見的使用者投訴。references/click-positioning.md 涵蓋了三種方法（refs、計算位置常數、除錯疊加層）- 事先選擇一種。搞錯這個的代價是每個場景需要多次完整的重新渲染週期。

寫作風格 - 避免在使用者面向的文案中出現 AI 痕跡

長破折號、彎曲引號和某些措辭習慣會暴露「AI 生成」的痕跡。references/writing-style.md 是預設的風格指南，內含一個預渲染 grep 檢查，可以捕獲這些問題。如果使用者有自己的品牌語調指南，請優先使用那個。

理想順序

完整的端到端流程。請參閱 references/ideal-sequence.md 以獲取帶有理由說明的註解版本。

先收集輸入，最後寫程式碼。 執行素材導入問卷。
開發腳本（如果使用者沒有的話）- references/script-development.md。
產出參考影片分析 - 透過 scripts/analyze-reference-video.sh 自動化，或透過 AI Studio 手動進行。
偵測節拍並編寫時間常數物件。 scripts/detect-beats.py → theme-v2.ts。每個場景的起始點都源自於節拍。
手動搭建 Remotion 支架。 精簡的 package.json / tsconfig.json / remotion.config.ts。切勿在 git 儲存庫內執行 npx create-video。
在 Root.tsx 中註冊每個場景的除錯組合。 關鍵的加速方式。只刷一個 5 秒場景比刷完整個主影片快 30 倍。
在 Root.tsx 頂層載入所有字型，使用 subsets: ["latin"]。
在組合 ID 中使用連字號（v2-Scene06，永遠不要用 v2_Scene06）。
呼叫 superpowers:brainstorming 並附帶視覺輔助，用於風格/佈局決策。HTML 模型每次都勝過文字描述。
編寫規格文件。 docs/superpowers/specs/YYYY-MM-DD-<名稱>-design.md。如果需要任何示意圖 UI，請包含一個部分。
自行審查規格，然後由使用者批准。 在獲得綠燈之前不寫任何程式碼。
呼叫 superpowers:writing-plans。 在調度之前進行計劃範本規範性檢查（請參閱 references/project-scaffold.md）。
先建構動畫基本元件（TypedText、MaskReveal、PopIn、Cursor、ZoomPunch、FloatingElements、BRollLayer、Counter、IceCrack 等）。然後是示意圖 UI 卡片。然後是場景。最後是主組合。
呼叫 superpowers:subagent-driven-development。 將子代理批次限制在每次調度 3-4 個檔案 - 較大的批次有時會在中途耗盡上下文。請參閱 references/iteration-playbook.md。
單獨渲染場景 1 進行預覽。 建立風格。在繼續之前獲得使用者批准。
分波次迭代。 將每個波次限制在 5-8 個修復。在基準渲染之後執行一次內部事件對齊傳遞 - 單次傳遞就能明顯地讓節奏更緊湊。
以發佈品質進行主渲染。 --crf=14 --image-format=png（HD）或 --crf=15 --image-format=png --scale=2（4K）。請參閱 references/render-export.md。
以 0.5 倍速對照節拍圖進行抽點檢查。

參考資料索引

references/ 目錄包含了深度內容。只載入你當前階段需要的部分。

ideal-sequence.md - 完整的註解流程，附帶理由
prereq-check.md - 開始前要驗證什麼
asset-intake.md - 完整的導入流程、部分素材備用方案、素材放大檢查、命名規範

SaaS 產品演示影片（Remotion）