SaaS 產品示範影片
在 Remotion 中製作節奏同步的 SaaS 產品影片的端到端工作流程。涵蓋無聲電影感影片、節奏鎖定的橫向示範、豎向短影音，以及帶有拼貼 B-roll 圖層的影片。
此技能對三件事有明確的主張：素材、風格、節拍。跳過任何一項，你得到的只會是普通的 Canva 風格動態圖形影片，看起來和其他所有 SaaS 示範影片別無二致。這種紀律是創造差異化的關鍵。
這些是強烈建議而非硬性規定。大多數製作會遵循它們；有些則會刻意打破（例如，以口白為主的影片中，節拍同步反而會干擾口白）。當你打破規則時，請確保是出於明確的意圖。
先決條件
開始之前，請確認以下條件已滿足。第一項是必須的；其餘是強烈建議，並附有可行的替代方案。
-
已安裝 Remotion (必要)。需要
@remotion/cli4.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了解完整的檢測邏輯。- 位於 PATH 環境變數中的
geminiCLI（官方 Google CLI，或社群封裝如gemini-yt）。使用提示詞 + YouTube URL 作為引數執行。 - 在環境變數或
.env中設定了GEMINI_API_KEY。使用此技能的 curl 包裝腳本scripts/analyze-reference-video.sh。 - 以上皆無 - 退而求其次，手動複製貼上到 Google AI Studio。雖然麻煩但總是有效；品質相當。
- 位於 PATH 環境變數中的
在新的工作階段中，請將執行 references/prereq-check.md 作為你的第一步。
三個支柱
這些是高槓桿的活動。為了「節省時間」而跳過一個，通常會在後續階段付出更多時間成本。
支柱 1 - 素材導入與入職
在開始任何其他事情之前，請執行 assets/prompt-templates/asset-intake-questionnaire.md 中的結構化問卷。它會問到：
- 長寬比（16:9 橫向、9:16 豎向，或兩者並行 - 如果兩者都需要，請參閱
references/vertical-port.md） - 持續時間（秒數，建議 20-45 秒）
- 標誌 - 偏好 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-<name>-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。 - 單獨預覽渲染 Scene 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- 完整的導入流程、部分素材的備援方案、素材放大檢查、命名規範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- 設計看起來很精緻的虛構 UIclick-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 或...
（此處內容因原文截斷而遺失）