SaaS 動態設計
製作產品影片，讓真實的產品 UI 成為主角，每個動作都傳達意義。
預設設定一覽
| 設定 | 預設值 | 僅在以下情況更改 |
|---|---|---|
| 畫面比例 | 16:9 (1920×1080) | 使用者明確要求 9:16 |
| 幀率 | 60 fps | 使用者要求其他幀率 |
| 背景 | 米白色 | 使用者指定其他背景 |
| 顏色 | 取自產品自身的 UI 主題 | 永遠不硬編碼顏色 |
| 漸層 | 無 | 使用者明確要求 |
| 旁白 | 無 | 使用者明確要求 |
| 音樂 | 使用者挑選的高能量 Mixkit 曲目 | 使用者想要較平靜的氛圍、沒有合適的曲目，或影片將用於廣播（請參閱音訊） |
每次執行只製作一部影片。 只渲染一種畫面比例。絕對不要同時生成 16:9 和 9:16；僅在使用者要求時才製作 9:16 版本。
技術棧
| 工具 | 版本 | 用途 |
|---|---|---|
| Remotion | 4.0.535 | 將每個場景建構為 React 組件、在 Remotion Studio 中預覽、匯出靜態畫面以及渲染 |
| FFmpeg | 最新穩定版 | 音訊混合、在旁白時將音樂音量降低、製作連絡表、最終編碼 |
| Node.js | 24 | 執行 Remotion 和建置腳本 |
- 精確鎖定 Remotion 版本。 安裝每個
remotion和@remotion/*套件時，使用4.0.535版本且不加^或~。版本不符的 Remotion 套件會導致渲染失敗。 - 先檢查 Node 版本。 在安裝任何東西之前，先執行
node -v。如果不是 v24，請在使用者繼續之前告知。 - 所有動態都基於幀。 使用
useCurrentFrame()以及下方的緩動預設搭配interpolate()/Easing.bezier()來製作動畫，絕不使用 CSS 過渡效果或計時器，以確保每個渲染輸出都是幀精確的。 - 設定 Composition 預設為 1920×1080、60 fps，或僅在要求 9:16 時設為 1080×1920。
- 靜態畫面 用於審查步驟：
npx remotion still <composition> --frame=<n>。 - 最終渲染：
npx remotion render <composition> out/<name>.mp4 --codec=h264。
工作流程
- 規劃。 收集需求並撰寫計畫與鏡頭清單（請參閱下方規劃）。取得使用者簽核。
- 了解產品。 閱讀前端程式碼（如果有），否則閱讀即時的 UI，並提取其主題（請參閱下方產品存取和品牌識別）。
- 撰寫腳本 並取得使用者簽核（請參閱下方腳本）。
- 建置影片 使用下方動態、編排、運鏡和轉場規則，並參考靈感的精神。
- 加入音訊： 精選 Mixkit 曲目供使用者挑選（請參閱下方音訊），然後加入音效，並且僅在使用者要求時加入旁白。
- 執行品質檢查。
- 展示靜態畫面並等待。 向使用者展示審查用的靜態畫面，回答他們的問題並進行任何修改（請參閱下方靜態畫面審查）。僅在使用者批准後才進行渲染。
不要跳過任何簽核步驟。每個步驟的修改成本都比後續步驟更低。
規劃
在撰寫任何腳本之前，先確認影片的用途。
1. 收集需求
只詢問使用者你無法自行得知的資訊：
| 問題 | 若未提供則預設 |
|---|---|
| 產品是什麼？可以分享其前端程式碼嗎？如果不行，可以在哪裡存取即時 UI（URL、本地建置、登入資訊）？ | 必要。請詢問。偏好使用程式碼庫。 |
| 影片的目標觀眾是誰？ | 潛在客戶 |
| 觀眾應該記住的唯一一件事是什麼？ | 必要。請詢問。 |
| 應該展示哪些功能或流程？ | 最能證明核心訊息的 2–3 個流程 |
| 影片應該多長？ | 30–45 秒 |
| 影片將發布在哪裡？是否會在電視或廣播上播出？ | 網站和 X/LinkedIn（16:9），僅限線上 |
| 是否需要有旁白？如果需要，男聲還是女聲？ | 無旁白 |
| 行動呼籲是什麼？ | 前往產品網址 |
2. 撰寫計畫
給使用者一個簡短的計畫以供批准：
- 目標： 一句話說明影片必須達成什麼
- 觀眾： 誰在看，以及他們已經知道什麼
- 核心訊息： 觀眾應該記住的一句話
- 格式： 長度、畫面比例（除非要求 9:16，否則為 16:9）、是否有旁白
- 故事弧線： 為此產品填寫的結構模板（請參閱腳本），每個部分一行
- 要捕捉的流程： 要記錄的確切 UI 畫面與互動，以及每個畫面需要的資料狀態（例如「包含 12 個任務的專案看板，其中 3 個已逾期」）
- 佐證： 影片將展示的證據（如有），例如指標、客戶標誌、引言、基準測試或獎項，以及其來源
3. 撰寫鏡頭清單
將故事弧線分解為鏡頭，每個鏡頭一行：
| # | 部分 | 鏡頭 | 動態 | 持續時間 |
|---|---|---|---|---|
| 1 | 鉤子 | 在產品搜尋列中打出問題 | 游標打字，答案串流而入 | 4 秒 |
鏡頭清單會成為腳本中的「畫面上顯示的內容」欄位。
產品存取
影片的品質取決於你對產品的存取權限。依偏好順序：
| 存取權限 | 提供的內容 |
|---|---|
| 1. 前端程式碼庫（最佳） | 精確的設計標記、真實的組件、真實的文案、圖示和標誌檔案。UI 可以在 Remotion 內部像素級重建並自由動畫化。 |
| 2. 運行中的應用程式（URL 或本地建置，附測試帳號） | 真實的主題和流程，從瀏覽器中捕獲。忠實呈現，但逐個元素動畫化較困難。 |
| 3. 螢幕錄製或截圖 | 最後的手段。盡可能從中重建畫面，並告知使用者結果的精確度會較低。 |
如果你沒有程式碼庫，請在退而求其次之前先詢問。
從程式碼庫工作
- 主題： 從專案存放設計標記的任何位置讀取，例如 CSS 自訂屬性、Tailwind 設定檔、主題檔案或設計標記套件。
- 組件： 在產品自身的 UI 組件能夠在 Remotion Composition 中乾淨渲染的情況下重用它們，否則根據其原始碼忠實重建。
- 內容： 從原始碼中取用真實的標籤、空狀態、圖示和標誌檔案，而不是憑空創造。對於計畫所需的資料狀態，使用種子或測試數據。
- 唯讀。 絕不編輯產品的程式碼庫。在自己的 Remotion 專案中建置影片。
品牌識別
不使用任何固定的品牌色彩。所有顏色都來自於所展示的產品。
- 閱讀產品的核心 UI，若有程式碼庫則從中讀取，並提取其主題：主色/強調色、中性色、表面色、邊框色、字體排印、圓角半徑和陰影樣式。
- 背景： 除非使用者另有指定，否則預設偏好米白色背景。
- 強調色： 使用產品自身的強調色來製作強調效果、游標環、游標和反白。
- 無漸層 用於背景、文字、光暈或轉場，除非使用者明確要求。使用純色填充。
- 字體排印： 盡可能使用產品自身的字體，讓字幕感覺像是 UI 原生的一部分。
- 標誌和字標： 使用產品的真實素材。絕不重新繪製或近似化。
腳本
腳本驅動一切：字幕、時間點，以及旁白（如果有）。根據已批准的計畫和鏡頭清單撰寫腳本，在開始建置任何場景之前，取得使用者簽核。
格式
將腳本撰寫為表格，每行一個列：
| # | 台詞（口說或螢幕上顯示） | 畫面上顯示的內容 | 持續時間 |
|---|---|---|---|
| 1 | 你的團隊每週浪費六小時在狀態更新上。 | 計數器在雜亂的任務清單上攀升至 6 | 3 秒 |
規則
- 在前 7 秒內鉤住觀眾。 以問題、一個驚人的數字或產品做的一些令人愉悅的事情開頭，而不是產品名稱。
- 每行台詞都有一張對應的畫面。 如果一行台詞沒有匹配的視覺節拍，就刪除它或重寫。
- 使用平實的語言。 短句，每行一個想法，不使用觀眾需要解碼的行話。
- 節奏： 有旁白時約每秒 2.5 個單詞。根據單詞數來預算台詞的持續時間。
- 使用
*星號*標示強調，每行台詞最多一個關鍵詞組。 - 每個聲明都是真實的。 數字和基準測試必須是真實的，並在需要時加上註腳。
- 遵守需求中設定的長度。 在加快動態之前先精簡台詞。
- 預設無旁白。 如果沒有旁白，腳本僅作為螢幕上的字幕顯示。
聽起來像真人，而不是模型
每行台詞都必須聽起來像是真人會對同事說的話。AI 風格的文案會讓觀眾分心，並使產品感覺過於通用。這是一個硬性規則，不是風格偏好。
像這樣寫：
- 具體明確。 使用產品的真實功能名稱、真實數字和使用者實際執行的操作（例如「將任務拖曳到星期五」，而不是「輕鬆管理工作流程」）。
- 說出觀眾感受到的具體痛點，用他們的語言（例如「你的站立會議又跑了 40 分鐘」）。
- 使用縮寫 和日常用語：例如 "you'll"、"it's"、"doesn't"（中文請使用口語化的表達，例如「你會」、「它是」、「不會」）。
- 偏好使用動詞而非形容詞。 展示產品做什麼，而不是描述它有多好。
- 簡短台詞也沒問題，只要它們說出具體的事情（例如「會議移過去。」之所以有效，是因為畫面精確展示了這一點）。
絕不寫這些：
| 模式 | 範例 |
|---|---|
| 對比框架 | "不是 X，而是 Y"、"它不只是 X，它是 Y"、"不是 X。不是 Y。是 Z。"、"X 不是問題。Y 才是。" |
| 三節奏清單 | "更快、更聰明、更好"、"規劃。建置。交付。" 當這三個詞沒有說出具體內容時 |
| 堆疊形容詞片段 | （略） |