demo-video — 官網URL→Remotion成片

Demo 影片製作技能

從公司網址或產品素材製作精緻的產品展示影片。預設輸出為 60-90 秒的 1080p 以上影片；當機器、素材與交付目標支援時，輸出 4K 畫質。

作業標準

• 影片必須基於真實產品：網站頁面、應用程式畫面、登入後操作流程、螢幕截圖、使用者提供的素材或經驗證的公開展示。
• 僅提供網址的輸入足以開始。從網站推斷產品、目標受眾、核心流程與品牌系統，僅針對缺乏的存取權限或高影響力偏好進行提問。
• 偏好產品經理視角的敘事，而非一般行銷說詞。呈現使用者的問題、他們在產品內的操作、螢幕上的變化，以及結果的重要性。
• 在實務可行時，使用 Remotion 進行動態合成，並使用 FFmpeg 進行檢查、編碼、聯絡表、音訊處理與交付轉換。
• 主張必須有理有據。除非從原始素材中驗證，否則不可捏造指標、客戶標誌、偵測結果、整合方式、合規狀態或定價。
• 避免過度套用過往客戶的內容。可重複使用工作流程、品質門檻與動態模式，但不可重複使用特定客戶的螢幕截圖、文案、顏色、定價、人物角色或版本修復。

輸入

如果使用者僅提供網站網址：

1. 在瀏覽器中開啟網站，建立導覽、價值主張、產品頁面、定價、說明文件及可見互動狀態的地圖。
2. 捕捉最能說明產品的高解析度頁面與 UI 畫面截圖。
3. 根據從網站發現的最強產品循環來建構敘事。
4. 若需要登入產品區域，則說明存取限制。

如果使用者提供更多背景資訊，則利用這些資訊提升品質：

• 目標受眾、廣告平台、長寬比、偏好時長、行動呼籲、上線目標。
• 產品工作流程步驟、展示帳號存取權限、範例輸入或預期的前後變化。
• 品牌素材、螢幕截圖、參考影片、字體、音樂方向、禁止的主張與法律備註。

參考路由

• 在進行瀏覽器研究、登入後截圖或螢幕截圖工作之前，先閱讀 references/capture-workflow.md。
• 在撰寫腳本、分鏡、拍攝清單或產品敘事之前，先閱讀 references/storytelling.md。
• 在選擇動態語言、字體排版、轉場、佈局或音樂之前，先閱讀 references/visual-system.md。
• 在實作影片專案或渲染檔案之前，先閱讀 references/remotion-ffmpeg.md。
• 在宣告影片完成之前，先閱讀 references/qc-checklist.md。

製作流程

1. 界定交付項目

   • 確認目標時長、長寬比、解析度、語言及交付平台（若有提供）。
   • 預設為 16:9、60-90 秒、30fps、H.264 MP4、1080p 以上。
   • 若要求 4K，或影片將用於上線、投資人、研討會或付費廣告發佈，則使用 4K。

2. 研究產品

   • 深入瀏覽網站與產品頁面，以識別核心循環，而不僅是首頁的承諾。
   • 建立快速功能地圖：主要使用者、痛點、主要操作、可視的產品輸出、證據、行動呼籲。
   • 如果產品需要登入，請使用使用者的活躍瀏覽器工作階段，或請他們登入，然後從已認證的 UI 繼續。

3. 捕捉產品證據

   • 若可能，以 2 倍或更高的裝置比例捕捉桌面螢幕截圖。
   • 如果空白與有資料的狀態能說明轉變，則一併捕捉。
   • 按場景與狀態命名素材，例如 dashboard-empty.png、workflow-result.png、pricing.png。
   • 保留包含網址、頁面標題、捕捉時間、視窗大小、檔案名稱與備註的素材清單。

4. 撰寫產品故事

   • 以平實的語言開場，點出使用者的問題或期望的成果。
   • 按此順序推進產品循環：設定、操作、轉變、檢視/證明、更廣泛的工作流程、行動呼籲。
   • 文字應簡短，以適應動態影片。使用字幕作為錨點，而非段落。
   • 使用貼近目標受眾的語言；避免通用的 AI 用語，例如「釋放生產力」，除非產品本身真的這麼說。

5. 設計動態系統

   • 以品牌的真實顏色與字體排版為基礎，如果需要改善層級，則額外加一個內斂的顯示字體或強調字型。
   • 以產品螢幕截圖為主要素材。只有在能清楚說明工作流程時，才加入瀏覽器框、游標路徑、縮放、遮罩、掃描線、比較面板或動態字體排版。
   • 選擇與產品匹配的轉場：液體/漣漪適用於流暢的轉換，掃描擦除適用於分析，聚光燈揭示適用於證明，空間推移適用於導覽，分割比較適用於前後對比。
   • 保持動態連續。場景轉換應感覺像鏡頭或介面在移動，穿過一個產品故事，而非分開的投影片。

6. 建構與渲染

   • 當專案架構有用時，使用 assets/remotion-starter/ 中的入門模板。
   • 在渲染最終影片之前，先渲染審查靜態圖或聯絡表。
   • 先渲染 1080p 進行 QA，再根據要求渲染 4K 最終版本。
   • 使用 FFmpeg 或 ffprobe 驗證時長、解析度、編解碼器、影格率及音訊串流。

7. 在交付前進行 QA

   • 檢查所有文字是否重疊、裁剪不當，或在快速剪輯時變得難以閱讀。
   • 檢查按鈕、游標、標註與遮罩是否與底層 UI 對齊。
   • 檢查所有螢幕截圖在最終縮放下是否足夠清晰。
   • 檢查音樂是否為純音樂、權限安全，並在配音或音效下保持平衡。
   • 提供最終的 MP4 檔案，以及有用的製作成品：分鏡、素材清單、聯絡表與相關的原始專案。

可重複使用的腳本

• scripts/create_demo_brief.py 從網址與可選的產品背景資訊建立結構化的簡報。
• scripts/qc_video.py 使用 ffprobe 檢查最終影片的中繼資料，並標記解析度、時長、編解碼器與音訊問題。
• scripts/make_contact_sheet.py 使用 FFmpeg 建立視覺聯絡表，以快速檢閱。

從專案資料夾或使用絕對路徑執行腳本。它們是輔助工具，不能取代視覺判斷。

入門模板

在開始新影片時，將 assets/remotion-starter/ 複製到工作專案中。取代 src/demoConfig.ts 中的預留設定，將螢幕截圖加入 public/ 或 Remotion 靜態素材中，並根據產品敘事調整場景。

該入門模板刻意設計為通用：

• 包含一個產品故事組合，含開場、工作流程、證明與行動呼籲場景。
• 使用真實的螢幕截圖位置，但回退為乾淨的 UI 預留位置。
• 包含淡入淡出、縮放、導軌移動、游標強調及比較面板等動態基本元素。
• 避免特定客戶的文案、顏色或素材。

完成條件

在滿足以下條件前，不得宣告影片完成：

• 產品故事源自真實的產品證據。
• 最終渲染至少為 1080p，或使用者明確同意較低目標。
• 已透過靜態圖、預覽渲染或聯絡表對影片進行視覺檢查。
• FFmpeg/ffprobe 中繼資料確認了解析度、時長、視訊編解碼器與音訊狀態。
• 已記錄音樂、字體、庫存影片或第三方頁面的任何授權或來源限制。
• 使用者收到具體的影片檔案，而不僅是計劃或腳本。