網頁應用程式影片製作 是做什麼的？
將運作中的網頁應用程式轉換為 20 至 60 秒的 MP4 影片。畫面永遠是實際的應用程式介面；字幕、游標與特效則是以圖層方式疊加。僅限使用虛構資料。
工具套件位於此檔案旁邊的 starter/ 目錄。將其複製到使用者的專案中（例如 video/），在該目錄下執行 npm install，然後針對該工具撰寫場景腳本。在儲存庫的 examples/sample-tasks/ 目錄中可找到完整的運作範例。
1. 首先選擇風格
| 影片用途... | 風格 | 原因 |
|---|---|---|
| 如何使用某項功能（指南、入門教學、技術支援回覆） | 逐步操作指南：錄製真實的 UI 點擊操作 | 觀看者會複製步驟，因此他們必須以可閱讀的速度看到真實且未經編輯的操作流程 |
| 產品為何值得擁有（產品發布、首頁、廣告、總覽） | 動態宣傳影片：在截圖上製作動畫 | 觀看者並非跟隨操作；影片需要連結操作與成果，並抓住觀眾注意力 |
請勿在同一部影片中混合兩種風格。帶有飛入物體的教學影片難以跟隨；純錄製的宣傳影片則會感覺冗長。
詳細說明請參閱 references/walkthrough.md（逐步操作指南）與 references/motion.md（動態宣傳影片）。
2. 渲染前達成共識
渲染是成本最高的步驟。在編寫場景程式碼之前，請先撰寫一份分鏡腳本（references/storyboard.md），並取得使用者對以下事項的同意：
- 風格（逐步操作指南或動態宣傳影片）以及觀看對象
- 影片長度與場景數量
- 輸出尺寸（預設為 2560x1440，30 fps；直式為 1080x1920）
- 品牌：顏色、字型、標誌、產品名稱，以及絕對不能出現的詞彙
- 資料：螢幕上出現的虛構姓名與數字（絕不使用真實客戶資料）
- 旁白或純音樂
- 完成後檔案存放的位置
一份分鏡腳本除了「畫面」與「字幕」欄位外（用於動態宣傳影片），還必須有「動態」欄位，以便每個場景刻意使用不同類型的動畫效果。
3. 建置
逐步操作指南
- 先探測操作流程：撰寫一個腳本模擬點擊但不錄製，以修正選取器與等待時間
- 分段錄製（每個頁面或步驟為一段），使用
lib/recorder.mjs，然後用concatParts串接 - 使用 references/copy.md 編寫字幕
動態宣傳影片
- 使用
lib/capture.mjs捕捉每個 UI 狀態（寬度 3840 的截圖 + 元素位置） - 在 Remotion 中使用
motion/parts.tsx組合場景（攝影機、游標、字幕、晶片、數字計數） - 在完整渲染前，先在關鍵幀檢查靜態圖片（
remotion still ... --frame=N --scale=0.25）
旁白：未內建工具。如果使用者需要，建議使用 Gemini 3.1 Flash TTS（gemini-3.1-flash-tts-preview）搭配 Charon 語音。
4. 交付前檢查
執行 node lib/qa.mjs out/video.mp4 --sheet 16 --end 並檢視兩張圖片。詳細說明請參閱 references/qa.md。
- 尺寸、fps 與持續時間需符合分鏡腳本
- 沒有字幕被裁切或遮擋到正在點擊的按鈕
- 沒有半開的對話框、空白畫面或延遲載入的標誌（需特別檢查最後一秒）
- 每個動畫數字最後顯示的值都與真實畫面顯示的一致
- 交付時，請說明哪些部分是舞台特效（例如飛入的文件、數字計數），哪些是產品實際運作的效果
5. 嚴格規則
- 真實 UI，虛假資料。 螢幕上、字幕中、檔案名稱或描述中，絕對不能出現真實客戶、個人或公司名稱、ID、電子郵件或數據
- 未經使用者明確許可，不得發布（至 YouTube、社群媒體、網站）
- 不得誇大產品功能。 如果某個步驟是為了拍攝而偽造的（例如伺服器回應、上傳動作），則字幕不得將其描述為自動魔法
- 將渲染原始檔（腳本、分鏡腳本）保留在儲存庫中；MP4 檔案與截圖不得提交至 Git