展示影片創作技能
根據公司網址或產品素材,製作出精美的產品展示影片。預設輸出為 60-90 秒、1080p 以上影片;若機器、素材與交付目標支援,則可輸出 4K 解析度。
運作標準
- 影片須以真實產品表面為基礎:網站頁面、應用程式畫面、登入後工作流程、螢幕截圖、使用者提供的素材,或經確認的公開展示。
- 僅提供網址視為足夠的開端。從網站推斷出產品、目標觀眾、核心工作流程與品牌系統,然後僅詢問缺少的存取權限或高影響力的偏好。
- 偏好採用產品經理的說故事方式,而非一般行銷話術。呈現使用者的問題、他們在產品內的操作、螢幕上的變化,以及結果為何重要。
- 在實際可行時使用 Remotion 進行動態合成,並使用 FFmpeg 進行檢測、編碼、連絡表製作、音訊處理與交付轉換。
- 保持主張可辯護。除非已從原始素材驗證,否則不得虛構指標、客戶標誌、檢測結果、整合功能、合規狀態或定價。
- 避免過度貼近前一個客戶。可重複使用工作流程、品質關卡與動態模式;但不得重複使用客戶專屬的螢幕截圖、文案、顏色、定價、人物設定或逐版修復。
輸入
若使用者僅提供網站網址:
- 在瀏覽器中開啟該網站,繪製導覽、價值主張、產品頁面、定價、說明文件以及可見的互動狀態。
- 擷取最能說明產品的頁面與 UI 表面的高解析度螢幕截圖。
- 圍繞從網站發現的最強產品循環來建立敘事。
- 若需要登入後的產品區域,請說明其存取限制。
若使用者提供更多背景資訊,則利用這些資訊提升品質:
- 目標觀眾、行銷活動平台、長寬比、偏好長度、呼籲行動、啟動目標。
- 產品工作流程步驟、示範帳號存取、範例輸入,或預期的前後輸出。
- 品牌素材、螢幕截圖、影片參考、字型、音樂方向、禁止的主張與法律備註。
參考路由
- 在執行瀏覽器研究、登入後擷取或螢幕截圖工作前,先閱讀
references/capture-workflow.md。 - 在撰寫腳本、故事板、鏡頭列表或產品敘事前,先閱讀
references/storytelling.md。 - 在選擇動態語言、排版、轉場、佈局或音樂前,先閱讀
references/visual-system.md。 - 在實作影片專案或渲染檔案前,先閱讀
references/remotion-ffmpeg.md。 - 在宣稱影片完成前,先閱讀
references/qc-checklist.md。
製作工作流程
-
界定交付項目
- 確認目標長度、長寬比、解析度、語言及交付平台(若有提供)。
- 預設為 16:9、60-90 秒、30fps、H.264 MP4、至少 1080p。
- 若要求或影片將用於推出、投資人、會議或付費廣告投放,則使用 4K。
-
研究產品
- 深入瀏覽網站與產品頁面,以識別核心循環,而不僅是首頁的承諾。
- 建立快速功能圖:主要使用者、痛點、主要動作、可見產品輸出、證據、呼籲行動。
- 若產品需要登入,請使用使用者當前瀏覽器工作階段,或要求其登入,然後從已驗證的 UI 繼續。
-
擷取產品證據
- 盡可能以 2 倍或更高裝置比例擷取桌面螢幕截圖。
- 若填入與空白狀態能解釋轉換過程,則一併擷取。
- 按場景與狀態命名素材,例如
dashboard-empty.png、workflow-result.png、pricing.png。 - 維護一份清單,包含網址、頁面標題、擷取時間、視埠、檔名與備註。
-
撰寫產品故事
- 以使用者的問題或期望結果開場,使用平實的語言。
- 依序呈現產品循環:設定、動作、轉換、檢閱/證明、更廣泛的工作流程、呼籲行動。
- 文案需夠簡短,適合動態影片。以字幕作為錨點,而非段落。
- 為目標觀眾使用自然的用語;避免常見的 AI 片語,例如「釋放生產力」,除非產品本身確實這麼說。
-
設計動態系統
- 以品牌的實際顏色與排版為基礎,若需改善層級結構,可加入一個克制型的顯示字體或強調字型。
- 以產品螢幕截圖作為主要素材。僅在能釐清工作流程時,才加入瀏覽器框架、游標路徑、縮放、遮罩、掃描線、比較面板或動態文字。
- 選擇符合產品的轉場:流體/漣漪效果用於流暢轉換,掃描擦拭用於分析,聚光燈揭示用於證明,空間推進用於導航,分割比較用於前後對比。
- 保持動態連續。場景變化應感覺像攝影機或介面正在穿過一個產品故事,而非獨立的投影片。
-
建置與渲染
- 當需要專案骨架時,使用
assets/remotion-starter/中的起始範本。 - 在渲染最終影片前,先渲染檢閱靜態圖或連絡表。
- 先渲染 1080p 以進行 QA,再視需求渲染 4K 最終版。
- 使用 FFmpeg 或 ffprobe 驗證長度、解析度、編碼器、影格率與音訊串流。
- 當需要專案骨架時,使用
-
交付前 QA
- 檢查是否有任何文字重疊、裁切不自然,或在快速剪輯時變得無法閱讀。
- 檢查按鈕、游標、標註與遮罩是否與底層 UI 對齊。
- 檢查所有螢幕截圖在最終比例下是否足夠清晰。
- 檢查音樂是否為純音樂、版權安全,且在任何旁白或音效下音量平衡。
- 提供最終的 MP4 檔案以及有用的製作成品:故事板、素材清單、連絡表,以及相關的原始專案(若適用)。
可重複使用的腳本
scripts/create_demo_brief.py:根據網址與可選的產品背景資訊建立結構化的簡要。scripts/qc_video.py:使用 ffprobe 檢查最終影片的 metadata,並標記解析度、長度、編碼器與音訊問題。scripts/make_contact_sheet.py:使用 FFmpeg 建立視覺連絡表,方便快速檢閱。
從專案資料夾或使用絕對路徑執行腳本。它們是輔助工具,不能取代視覺判斷。
起始範本
開始新影片時,將 assets/remotion-starter/ 複製到工作專案中。取代 src/demoConfig.ts 中的預留位置設定,將螢幕截圖加入 public/ 或 Remotion 靜態素材,並根據產品敘事調整場景。
起始範本刻意保持通用:
- 包含一個產品故事合成,含有開場、工作流程、證明與呼籲行動場景。
- 使用真實的螢幕截圖插槽,但備有乾淨的 UI 預留位置。
- 包含淡入淡出、縮放、軌道移動、游標強調與比較面板等動態基本元素。
- 避免客戶專屬的文案、顏色或素材。
完成標準
在達成以下條件前,不得宣稱影片已完成:
- 產品故事來自真實的產品證據。
- 最終渲染至少為 1080p,或使用者已明確接受較低的目標。
- 已透過靜態圖、預覽渲染或連絡表進行視覺檢查。
- FFmpeg/ffprobe 的 metadata 已確認解析度、長度、視訊編碼器與音訊狀態。
- 任何音樂、字型、庫存影片或第三方頁面的授權或來源限制均已記錄。
- 使用者收到具體的影片檔案,而不僅是計畫或腳本。