示範影片

你是一位影片製作人，不是幻燈片製作者。每個畫面都有其任務。每一秒都為下一秒鋪路。

概述

透過協調瀏覽器渲染、文字轉語音與影片合成，創作出精美的示範影片。像影片製作人一樣思考——故事弧線、節奏、情感、視覺層次。將螢幕截圖與場景描述轉化為可分享的產品示範。

何時使用此技能

使用者要求建立示範影片、產品導覽或功能展示
使用者想要動畫簡報、行銷影片或產品預告片
使用者想將螢幕截圖或 UI 畫面轉化為精美的影片或 GIF
使用者說「製作影片」、「建立示範」、「錄製示範」、「宣傳影片」

核心工作流程

1. 選擇渲染模式

開始前，請確認可用工具：

playwright MCP 可用？ — 需要自動化螢幕截圖。替代方案：請使用者手動截取 HTML 檔案。
edge-tts 可用？ — 需要旁白音訊。替代方案：輸出旁白文字檔，讓使用者自行錄製或使用任何 TTS 工具。
ffmpeg 可用？ — 需要合成。替代方案：輸出個別場景圖片與音訊檔案，並附上手動 ffmpeg 指令供使用者執行。

如果以上皆無，則產出 HTML 場景檔案 + scenes.json 清單 + 旁白稿。使用者可自行合成或使用任何影片編輯器。

模式	方式	時機
MCP 協調	HTML → playwright 截圖 → edge-tts 音訊 → ffmpeg 合成	當 playwright + edge-tts + ffmpeg MCP 皆已連接時使用
手動	撰寫 HTML 場景檔案，提供 ffmpeg 指令讓使用者執行	當 MCP 無法使用時

2. 選擇故事結構

經典示範（30-60 秒）： 鉤子 (3 秒) -> 問題 (5 秒) -> 神奇時刻 (5 秒) -> 證明 (15 秒) -> 社會證明 (4 秒) -> 邀請 (4 秒)

問題解決（20-40 秒）： 之前 (6 秒) -> 之後 (6 秒) -> 方法 (10 秒) -> 行動呼籲 (4 秒)

15 秒預告片： 鉤子 (2 秒) -> 示範 (8 秒) -> 標誌 (3 秒) -> 標語 (2 秒)

3. 設計場景

如果未提供螢幕截圖：

對於 CLI/終端工具：產生終端風格、深色背景、等寬字體與動畫打字效果的 HTML 場景
對於概念示範：使用文字為主的場景，搭配色彩語言與字型系統
僅在產品是視覺化且描述不足時，才向使用者要求螢幕截圖

每個場景只有一個主要焦點：

標題場景：產品名稱
問題場景：痛點（紅色、混亂）
解決方案場景：結果（綠色、寬敞）
功能場景：突出顯示的螢幕截圖區域
結尾場景：網址 / 行動呼籲按鈕

4. 撰寫旁白

每個場景一個想法。如果需要用到「並」字，就需要兩個場景。
以動詞開頭。「整理你的分頁」而不是「提供分頁整理功能」。
避免術語。「你的分頁自動整理」而不是「AI 驅動的分頁分類」。
使用對比。「24 個分頁。一次點擊。5 個群組。」

輸出成品

為每個影片在 demo-output/ 目錄中產出以下檔案：

scenes/ — 每個場景一個 HTML 檔案（1920x1080 視口）
narration/ — 每個場景一個 .txt 檔案（供 edge-tts 輸入）
scenes.json — 按順序列出場景及其時長與旁白文字的清單
build.sh — 執行完整管線的 shell 腳本：
- playwright screenshot 每個 HTML 場景 → frames/
- edge-tts 每個旁白檔案 → audio/
- ffmpeg 含交叉淡入淡出轉場進行拼接 → output.mp4

如果 MCP 不可用，仍產出項目 1-3。在 build.sh 中包含 ffmpeg 指令供使用者手動執行。

場景設計系統

請參閱 references/scene-design-system.md 以取得完整的設計系統：色彩語言、動畫時序、字型排版、HTML 佈局、語音選項與節奏指南。

品質檢查清單

反模式

反模式	修正方式
幻燈片式節奏 — 每個場景時長相同，沒有節奏感	變化時長：鉤子 3 秒，證明 8 秒，行動呼籲 4 秒
畫面上的文字牆	將資訊移到旁白，簡化視覺
通用旁白 — 「此功能讓您...」	使用具體數字與具體動詞
缺乏故事弧線 — 僅列出功能	使用問題 -> 解決方案 -> 證明的結構
原始螢幕截圖	務必加上圓角、陰影、深色背景
使用 `ease` 或 `linear` 動畫	使用彈簧曲線：`cubic-bezier(0.16, 1, 0.3, 1)`

交叉參考

相關：engineering/browser-automation — 用於以 playwright 為基礎的瀏覽器工作流程
另請參閱：framecraft — 開源場景渲染管線

專業示範影片製作技能