Aryanban/saas-product-demo-video

SaaS 產品展示影片

使用 Remotion 建立一支簡短的產品影片，讓它對齊配樂節拍，並使用產品本身的品牌和真實螢幕畫面。相同的流程涵蓋橫式展示、直式 Reels、帶有 B-roll 圖層的影片、沒有可錄製介面的產品，以及需要進行一系列修改的現有影片。

一個通用的動態圖形 Reel 很容易製作，也很容易被忽略，AI 製作的那些也是如此，業主現在一眼就能認出來。讓一支影片與眾不同的是在建立任何場景之前就收集好的東西：產品的真實素材和螢幕畫面、從使用者喜歡的參考影片中借鑒的外觀、從配樂中提取的時間網格，以及影片要傳達的一個視覺論點。技能的其餘部分就是建立在這些基礎上的工藝。

從正確的分支開始

• 新影片。 素材收集、外觀、支架、節拍、簡報、檢查點、建置：下面的流程，以及 references/workflow.md 中的推理。
• 現有影片。 閱讀 docs/video/notes.md（先看所有「decision」條目）、簡報和最新的交接文件，分別檢查已接受的渲染和原始碼，然後在動任何東西之前對要求進行分類：調整放在開關後面，重製保留所有時間和動作，重建則需要故事板或測試環境。請參考 references/iteration-playbook.md 中的「先對請求進行分類」。對於小修復，不要重複素材收集或重新打開外觀。
• 僅評論或規劃。 審查渲染結果（references/self-check.md、references/taste-review.md）並回傳一個排序清單；不要建立任何東西。說明每個發現基於哪個證據：靜態圖片、測量結果或播放（你無法做到）。
• 旁白設定節奏。 支架是由音樂主導的。剪輯到旁白的影片會手動放置其事件（在時間檔案中設為 BEAT_SYNCED = false），簡報中會說明剪輯點不會落在音樂上；在開始前就這麼說。

完成的定義

• 一個 Remotion 專案，包含一個主合成和每個場景一個除錯合成；每個候選修改都在開關後面，且開關的預設值是出貨的外觀。
• docs/video/brief.md：輸入、外觀、一句話的視覺論點、逐場景的腳本、假設。
• beats.json 和一個每個場景都從中讀取影格的時間檔案，因此更改一個節拍索引就會重新流動整部影片。
• HD MP4（1920x1080 或 1080x1920）檔案，帶有色彩標籤，一個縮圖靜態圖，以及一個在使用者接受後渲染的 4K 版本，該版本包含 HD 的音訊。
• 在使用者看到之前，您已經在渲染的靜態圖中檢查過每個場景；統計過字數；告知業主測量了什麼以及還沒有人觀看過。
• docs/video/notes.md 記錄了每一次波次和每一個決定，以及當會話結束時如果工作尚未完成則提供一個交接文件。
• 可選的四到八個音效，放在主合成的 sfx prop 後面，對齊到它們的事件上，並在主合成旁邊提供一個 Master-NoSfx 渲染，讓使用者可以根據聽覺選擇。

流程

1. 設定。 檢查工具並記錄缺失的部分。references/setup.md
2. 素材收集。 將問卷作為一條訊息發送並記錄答案；捕捉今天的網站狀態，而不是記憶中的。references/asset-intake.md、references/product-ui-from-site.md
3. 外觀與論點。 將兩到三個參考影片分解為轉場動詞、節奏和招牌動作；寫下影片主張的一句話和一個招牌動作。references/reference-video-vibe.md、references/creative-direction.md
4. 支架。 將 assets/scaffold/ 複製到專案中並安裝。references/project-scaffold.md
5. 節拍。 在配樂上執行 scripts/detect-beats.py 腳本，將產生的 beats.json 寫入並取代支架中的佔位符，然後根據其可靠性判定採取行動。references/beat-sync.md
6. 簡報與最初場景。 撰寫 docs/video/brief.md，建立場景 1 和第一個展示產品的場景，在靜態圖中檢查它們，然後在下面的檢查點處停止。
7. 完整建置。 建立其餘場景和主合成，在靜態圖中檢查每個場景，統計字數，執行注意力檢查。然後是音效層（如果影片需要的話）：references/sound-effects.md，在第一輪修復之前進行，這樣每個提示都落在一個已經停止移動的影格上。
8. 修復波次與出貨。 分批收集使用者的意見，在開關後面修復，使用主合成的標誌渲染，匯出。使用者想要重做的場景，需要提供兩到四個方向作為附帶音樂的測試環境，並排全尺寸顯示，然後由使用者挑選。重建故事的波次首先需要一個故事板（每個螢幕上的字串和每格一行），在編寫任何程式碼之前獲得批准。長時間的會話以一個交接文件結束。references/iteration-playbook.md、references/render-export.md、assets/prompt-templates/handoff.md

一個檢查點

在完整建置之前，只暫停一次以獲得使用者的批准：當開場場景和第一個產品場景已渲染完畢，包含它們之間的剪輯和音樂，並且已撰寫簡報時。將該片段與簡報中的腳本一起展示，並問三件事：外觀是否正確，文字是否正確，以及它與音樂的搭配是否流暢。

這個片段需要包含兩種場景，因為它們失敗的方式不同。文字主導的開場展示了外觀。產品場景展示了螢幕上資訊的豐富程度以及事件如何落在節拍上，而這些是使用者在完整建置後如果第一次在那裡看到時會拒絕的東西。當使用者稍後審查時，一個小型本地 HTML 頁面將影片和腳本放在一起；assets/prompt-templates/checkpoint.html 是一個起點。

之所以只設一個檢查點並放在這裡：人們判斷渲染結果遠勝於文件，一個現在被發現的錯誤外觀或節奏只會導致兩個場景的重工，而不是整部影片。檢查點之前的所有事情都是可逆的，所以不用在文件上要求簽核就做。在一條訊息中問完素材收集問題，在使用者沒有偏好時做出合理的選擇，並將每個選擇寫入簡報的假設清單中，以便於否決。在檢查點之後，在再次要求意見之前建立整部影片。在已批准的感覺內進行調整不需要第二個檢查點；改變感覺則需要。

如果沒有人回應（無人值守運行），則根據提供的資料回答素材收集問題，在簡報中列出每個假設，並且仍然在檢查點處停止。基於未經批准的外觀建立整部影片是這個停止點旨在防止的昂貴錯誤。唯一的例外是交接簡報明確指示要渲染檢查點並繼續：那麼就渲染它，為使用者打開它，並繼續建置，因為一個停下來卻無人回應的會話不會產出任何東西。

模板化外觀是敵人

業主用一個詞來稱呼它（「Claudesque」、「Canva」、「廉價」），它是一組預設值：奶油色畫布配上襯線字體、發光和模糊形狀、標題中的一個斜體或彩色詞、眉毛標籤、中樞和輻射圖表、剪貼畫圖示、當網站上有真實儀表板時虛構一個、每個場景一個把戲、每個節拍上都有東西彈出、閒置的擺動、淡入然後靜止的文字。即使每個色碼都來自品牌檔案，影片仍然會被讀成另一支這種風格的影片。完整清單、在已出貨影片中每個項目被什麼取代，以及一個招牌動作規則，都在 references/creative-direction.md 的「什麼會被認為是模板」中。在建立第一個場景之前閱讀它，並在任何「更高級」的修改之前再次閱讀。

一部影片可以避開那份清單，但仍然被讀成一個乾淨的幻燈片組：同樣的標題在色塊上，沒有共享的世界，沒有語調弧線，強調色到處都是。當連續兩次潤色修改只得到「好一點，但還是不對」時，停止調整動畫，並對靜態圖進行盲測藝術指導評論（references/iteration-playbook.md 中的「當潤色修改達到平台期時」）。在該規則誕生的那部影片中，答案是一個共享的 3D 世界，語調承載情節，字體作為構圖，以及每個影格一個強調色（references/creative-direction.md、references/3d-world.md）。

剪輯點影格承載著畫面

每個剪輯點落在一個反拍上，並且它落定的影格必須經過構圖：卡片及其第一行、長條圖或標題，而不是一個會在接下來的幾個節拍中被填充的空白矩形。一個經過構圖的元素就夠了：卡片在剪輯點上時，旁邊的標題可能會在一個節拍上升起。初稿和場景代理會將第一行放在剪輯點後的第一個節拍上，然後影片會連續六個場景以空白白色開場。此規則、適用於計數器和晶片欄位的預卷技巧，以及連接場景的攝影機運動，都在 references/animation-patterns.md 中。

動作貫穿剪輯點，且文字朝一個方向移動

來自大致喜歡該片的業主的兩個筆記：「跳動感較少」和「文字動畫很無聊」。第一個來自於在每個剪輯點兩邊都完全停止的轉場，以及在前半秒內就完成所有動作的攝影機停留；修復方法是加速進入剪輯點的離場，高速離開剪輯點的入場，以及均勻移動的停留。第二個來自於淡入然後靜止的標題；修復方法是為所有顯示文字採用一個動作，從參考資料中選取並在每個場景中使用，在一個節拍上進入並以與攝影機離場相同的方式離開，而不是每個場景都用一個新把戲。assets/components/Stage.tsx 實作了第一個；Title.tsx 實作了一個文字移動；references/animation-patterns.md 有具體數值，包括對數空間中的大推進按鍵以及一個物體如何跨越剪輯點傳遞。

一次只改變一個區域：在半秒內，當場景的主要事件發生時，遠處角落不應有任何動靜。將次要元素放在視線已經所在之處，或者放在剪輯點上（references/motion-language.md）。

展示想法，而非螢幕

產品影片不是逐步操作指南。每個產品場景承載一個想法，其卡片只顯示讓那個想法成立的東西：一個名稱、一個狀態、一個短語。根據業主滿意的影片預算：每秒運行時間約 4 個字，產品卡片上 15 到 30 個字，標題少於 12 個字且在一行內。有兩倍於此文字的剪輯點被認為「文字太多」。產品真實的措辭是您保留的少數文字的來源；它不是保留所有文字的理由。除非使用者要求，否則省略價格、信用額度和方案名稱。scripts/check-copy.mjs 負責統計；references/writing-style.md 有規則和跡象。

檢查您自己的渲染

在使用者看到場景之前，在關鍵影格渲染靜態圖並查看它們：每個點擊影格、最長文字行完全顯示在螢幕上的影格、每個剪輯點前的最後一個影格、完整的剪輯點影格。確認游標提示在目標上、沒有文字換行或裁切、沒有東西離開安全區域、以及文字與簡報完全一致。在主要渲染之後：連續預覽、剪輯條、跳動報告（包含影片中已通過規劃的判定動作）以及注意力檢查。references/self-check.md 有影格清單和指令。

這很重要，因為此類影片常見的失敗（游標錯過按鈕、標題換行、卡片偏離網格、過時的時間轉儲）都能通過型別檢查且無錯誤地渲染。它們只在圖片或數字中可見。

靜態圖無法顯示動作。影片是否感覺流暢並與其音樂搭配良好，只有觀看的人才能判斷，所以永遠不要報告它已檢查；說明測量了什麼以及還沒有人觀看過。

三個輸入

素材。 長寬比、時長、標誌、品牌顏色、字體、腳本和配樂，使用 assets/prompt-templates/asset-intake-questionnaire.md 中的問卷預先收集。具有強烈動作和佔位符品牌的影片會被讀成模板，而每個遲到的素材都會強制重新渲染。產品的真實 UI 從今天的網站上捕捉並從 DOM 中測量，絕不憑記憶繪製（references/product-ui-from-site.md）；一個虛構的儀表板毀掉了整個版本。如果使用者沒有腳本，references/script-development.md 會與他們一起開發一個。

外觀。 使用者喜歡的兩到三個參考影片，每個都轉換為導演的分解：拍攝清單、轉場動詞（推鏡穿過、甩鏡、匹配剪接縮放、遮罩擦拭）、節奏、排版、招牌動作。轉場動詞是最重要的部分，因為它們將場景清單轉變為鏡頭計劃，而不是帶有淡入淡出的幻燈片組。使用者喜歡的早期影片優先於所有參考：首先載入其剪輯點和入場時機。當 Gemini 可用時使用它，或者取樣影格並自行閱讀；兩種路徑都在 references/reference-video-vibe.md 中。

節拍。 scripts/detect-beats.py 讀取配樂並寫入 beats.json：節奏、每個節拍的影格、哪些節拍是反拍、以及音軌在哪裡提升。場景剪輯點放在節拍上，預設在反拍上，這使得剪輯感覺像鼓點；看起來高級的三部參考影片每分鐘有 10 到 13 個鏡頭，沒有鏡頭短於 3.5 秒，並且每個場景都有一個攝影機運動。點擊和入場也在節拍上開始，但不是每個節拍都有：場景中的大部分節拍不承載任何東西。時間檔案從 beats.json 推導出每個影格，因此場景是根據節拍編號放置的，而不是手動輸入的影格。腳本以可靠性判定結束：對於 good，繼續建置；對於 check，讓使用者用聽覺確認；對於 poor，該音軌不適合節拍剪輯的影片，因此更換音軌或告知使用者影片將不會是節拍同步的。

大多數影片遵循所有三個規則。有些出於故意目的違反其中一個，只要這是一個選擇就沒問題：例如，剪輯到旁白的影片不能同時也剪輯到節拍。

與業主合作

• 他們透過觀看來批准。 為他們打開 HD 渲染（open out/...mp4），並排顯示最後接受的版本，以及幾行簡單的文字說明時間和變更的內容。4K 版本在確認後才提供。任何要求他們在之間選擇的東西都要提供全尺寸靜態圖；有兩位業主在看到全尺寸時改變了他們的選擇。
• 推薦，而非提供選項。 提供您的第一選擇以及原因（一個主張和解法），以及一個備選方案（一個不同的主張或妥協），並要求他們選擇一個。提供三個或更多選項會讓他們感到不知所措和沮喪。
• 用時間和證據來表達意見。 不要說「這個場景感覺慢」，而是說「[showcase-2] 從 [時間] 開始的靜態圖卡長度是 8 秒，與參考影片的 4.5 秒相比。建議的修復：...」。除了說「看起來不錯」之外，還要指出兩個在場景中有效且與參考影片一致的具體細節。references/iteration-playbook.md 提供了範例術語。
• 預期價格點。 對於一部 30 秒的內部展示影片，團隊既不會也不應該期望 4K 色彩分級。docs/video/brief.md 中的假設清單旨在設定這些期望。

撰寫交接文件

a. 當前工作分支和任何相關拉取請求/審查的 GitHub 鏈接。 b. 接受的最後一個渲染結果的鏈接。 c. 進行中的修改清單，每個修改都帶有一個開關、其預設值以及它嘗試修復的內容。 d. 警告清單：任何臨時常用的東西、任何等待的依賴項、任何已知的未完成工作。 e. 簡報中事實性假設的清單（他們的大多數客戶是程式設計師嗎？這個影片的目標客群是誰？）。

assets/prompt-templates/handoff.md 是一個起點。

關於設定

所有內容都已安裝？references/setup.md 中的清單包括：

• 一個帶有 TypeScript 的 Remotion 專案，位於使用者選擇的存放庫或目錄中，package.json 和 src/Root.tsx（未安裝時，使用 npx create-video 搭配 template-blank）。
• ffmpeg 和 ffprobe（透過 Homebrew 或 Chocolatey）。
• Python 3.10+，使用 pip install librosa numpy。
• assets/scaffold/ 複製到專案根目錄。
• 用於 React 類型檢查的 VSCode 設定。
• scripts/detect-beats.py 可執行。
• assets/prompt-templates/ 可存取。