產品示範影片·第2步：20–45 秒卡點 SaaS 成片

SaaS 產品示範影片製作

端到端工作流程，用於在 Remotion 中製作節拍同步的 SaaS 產品影片。涵蓋無聲電影風格的影片、節拍鎖定的橫向示範、直式短片，以及包含多層拼貼 B-Roll 素材的影片。

此技能對三件事有明確的主張：資產 (assets)、風格 (vibe)、節拍 (beats)。跳過任何一項，你只會產出一個普通的 Canva 風格的動態圖形影片，看起來跟其他 SaaS 示範影片沒有兩樣。這份紀律才是造成差異的關鍵。

這些是 強烈建議 而非硬性規則。多數製作會遵循它們；有些則會刻意打破規則（例如，在以旁白為主的影片中，節拍同步可能會與旁白衝突）。當你打破規則時，請確保你清楚知道自己為什麼這麼做。

---

先決條件

開始之前，請確認以下項目已就緒。第一個是必須的；其餘是強烈建議，並附有記錄在案的替代方案。

1. 已安裝 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（它會卡在方向鍵提示中）。

2. Super Powers 外掛程式 (強烈建議，非必要)。當可用時，此技能會編排 superpowers:using-superpowers、superpowers:brainstorming (附視覺輔助)、superpowers:writing-plans 和 superpowers:subagent-driven-development。它們為你提供瀏覽器中的 HTML 模型用於版面決策、正式的計劃文件，以及實作者和審查者子代理循環。

   如果未安裝 Super Powers，該技能仍可運作 - 工作流程會變得更加對話式且速度稍慢。腦力激盪將變成內嵌對話（無瀏覽器輔助）；計劃將直接寫在聊天中；場景將透過內嵌方式而非分派子代理來實作。三大支柱（資產/風格/節拍）以及 B-Roll、示意 UI、點擊定位、寫作風格和 scripts/ 中的腳本都將以相同方式運作。不要因為缺少外掛程式而拒絕工作 - 請適應並繼續進行。

3. 可用的 Python 3 + librosa。節拍偵測會執行 scripts/detect-beats.py，它會匯入 librosa。如果未安裝，請執行 pip install --break-system-packages librosa numpy soundfile 並告知使用者 - 請勿默默地執行。

4. 用於參考影片分析 (支柱 2)：該技能支援按優先順序排列的三種路徑。請使用可用的最高優先級路徑 - 請參閱 references/reference-video-vibe.md 以獲取完整的偵測邏輯。

   1. PATH 中的 gemini CLI（Google 官方 CLI，或社群包裝器如 gemini-yt）。使用提示詞 + YouTube URL 作為參數執行。
   2. 在 env 或 .env 中設定 GEMINI_API_KEY。使用該技能的 curl 包裝器 scripts/analyze-reference-video.sh。
   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 - 配樂節拍同步

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

流程：

1. 執行 scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json。輸出 BPM、第一個大鼓的影格、軍鼓時間戳記 + 影格。
2. 匯入到一個統一的時間常數物件中（參閱 assets/code-templates/theme-v2.ts）。每個 <Sequence from={...} durationInFrames={...}> 都從此物件取值。
3. 在階段 6（場景建立）之後，針對 beats.json 和場景內事件列表執行 scripts/align-internal-events.py，將它們推送到 ±6 影格內最近的節拍上。這是初次渲染後第二高槓桿的迭代 - 觀眾會感覺到不合拍的內部事件是「節奏有時不對勁」，但無法指出具體原因。
4. 在開發模式中使用 isSnare(n) / isKick(n) 輔助函數來進行斷言。
5. 針對任何 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 以獲取帶有理據的註釋版本。

1. 先收集輸入，最後寫程式碼。 執行資產攝取問卷。
2. 開發腳本（如果使用者沒有） - references/script-development.md。
3. 產出參考影片解說 - 透過 scripts/analyze-reference-video.sh 自動化，或手動透過 AI Studio。
4. 偵測節拍並編寫時間常數物件。 scripts/detect-beats.py → theme-v2.ts。每個場景的起始點都源自於節拍。
5. 手動搭建 Remotion 專案。 最簡的 package.json / tsconfig.json / remotion.config.ts。切勿在 git 儲存庫內執行 npx create-video。
6. 在 Root.tsx 中註冊每個場景的除錯組合。 關鍵加速。滾動一個 5 秒的場景比滾動整個主影片快 30 倍。
7. 在 Root.tsx 頂層載入所有字型，使用 subsets: ["latin"]。
8. 在組合 ID 中使用連字符（v2-Scene06，切勿用 v2_Scene06）。
9. 為樣式/版面決策呼叫 superpowers:brainstorming 並附帶視覺輔助。HTML 模型每次都比純文字更有效。
10. 撰寫規格文件。 docs/superpowers/specs/YYYY-MM-DD-<name>-design.md。如果需要任何示意 UI，請包含一個示意 UI 真實感章節。
11. 自行審查規格，然後由使用者批准。 在獲得許可前不寫任何程式碼。
12. 呼叫 superpowers:writing-plans。 在分派前進行計畫範本規範檢查（參閱 references/project-scaffold.md）。
13. 先建構動畫基本元件（TypedText、MaskReveal、PopIn、Cursor、ZoomPunch、FloatingElements、BRollLayer、Counter、IceCrack 根據需要）。然後是示意 UI 卡片。然後是場景。然後是主影片。
14. 呼叫 superpowers:subagent-driven-development。 將子代理批次限制為每次分派 3-4 個檔案 - 較大的批次有時會在任務中途耗盡上下文。參閱 references/iteration-playbook.md。
15. 單獨渲染場景 1 進行預覽。 確立風格。在繼續之前獲得使用者批准。
16. 分波次迭代。 將每個波次限制在 5-8 個修復。在基準渲染後執行一次內部事件對齊流程 - 僅這一次流程就能明顯改善節奏感。
17. 以發布品質進行主渲染。 --crf=14 --image-format=png（HD）或 --crf=15 --image-format=png --scale=2（4K）。參閱 references/render-export.md。
18. 以 0.5 倍速對照節拍圖進行抽檢。

---

參考資料索引

references/ 目錄包含深入內容。僅載入你當前階段需要的內容。

• ideal-sequence.md - 完整的註釋流程，附帶理據
• prereq-check.md - 開始前應驗證的項目
• asset-intake.md - 完整攝取流程、部分資產的備援方案、資產放大檢查、命名規範
• script-development.md - 當使用者沒有腳本時的逐畫面方法論
• reference-video-vibe.md - Gemini 分析協定（API / CLI / AI Studio 路徑）
• beat-sync.md - 節拍網格數學、場景邊界規則、內部事件對齊、打字預算檢查
• project-scaffold.md - 最簡 Remotion 設定、提交檢查清單、計畫範本規範、基本 .gitignore 項目
• animation-patterns.md - TypedText、MaskReveal、PopIn、ZoomPunch、FloatingElements 及其擴展
• b-roll-integration.md - BRollLayer 模式、不透明/混合處理、渲染效能
• schematic-ui-fidelity.md - 設計看起來精緻的假 UI
• click-positioning.md - 確保游標點擊落在正確目標上的三種方法
• writing-style.md - 螢幕文案中應避免的長破折號和其他 AI 痕跡
• cursor-math.md - 熱點偏移、關鍵點、比例縮放轉換
• iteration-playbook.md - 波次結構、批次審查、子代理批次處理、Studio 熱更新重啟
• render-export.md - HD/4K 渲染指令、CRF 理據
• gotchas.md - 組合 ID 底線、字型警告、斜體載入、MaskReveal 縮放陷阱
• vertical-port.md - 9:16 直式短片的移植紀律

資產

• assets/prompt-templates/ - 用於資產攝取、規格文件、節拍表的填空範本
• assets/code-templates/ - 經過實戰考驗的元件（主題常數、緩動函數、Cursor、MaskReveal、TypedText、PopIn、ZoomPunch、FloatingElements、BRollLayer、Counter、IceCrack、SchematicProfileCard、SchematicEmailComposer、SchematicApiPanel、Act2Master、Act2MasterVertical）

腳本

• scripts/detect-beats.py - 基於 librosa 的節拍追蹤。輸出 BPM、第一個大鼓、在目標影格率下的軍鼓/大鼓影格。
• scripts/analyze-reference-video.sh + scripts/reference-video-prompt.md - 用於 YouTube 導演解說的 Gemini Pro 包裝器。
• scripts/align-internal-events.py - 在 ± 容差影格內將場景內事件與節拍對齊。
• scripts/check-typing-budget.py - 在渲染前驗證 TypedText/TypedChars 的長度是否適合場景持續時間。

---

何時不應使用此技能

• 對現有 Remotion 專案進行深入迭代。 如果使用者已經對一部影片進行了 20 多次提交，並且要求進行第 N+1 波的調整，不要重新執行攝取流程。載入 references/iteration-playbook.md 和 references/beat-sync.md 然後繼續。
• 非 SaaS 示範。 活動回顧、感言集錦、教學螢幕錄影 - 節拍同步 + 產品 UI 卡片模式並不適用。
• 以紀錄片或受訪人物鏡頭為主體。 此技能將 B-Roll 作為動態圖形下的 圖層 處理。如果實拍鏡頭是影片的主體（訪談、開箱、導覽），請使用非線性剪輯軟體如 Premiere、DaVinci 或其他。