/marketing-demo — 產品示範錄製器
錄製產品示範影片用於行銷。兩種製作路徑：快速（ply + ffmpeg）用於粗略示範，精緻（Remotion）用於品牌化行銷影片。
讀取
brand/creative-kit.md— 品牌覆蓋層的色彩、字型、標誌路徑brand/voice-profile.md— 文字覆蓋層的語氣指引brand/stack.md— 可用工具（ply、ffmpeg、remotion）
啟動時
- 讀取
brand/creative-kit.md取得色彩、字型、標誌路徑。若缺少，請詢問品牌色彩與標誌。 - 讀取
brand/voice-profile.md取得文字覆蓋層的語氣指引。若缺少，使用清晰/中立語氣。 - 讀取
brand/stack.md確認可用工具。若缺少，直接偵測工具。 - 檢查工具可用性：
command -v ply && echo "ply: ready" || echo "ply: missing" command -v ffmpeg && echo "ffmpeg: ready" || echo "ffmpeg: missing" command -v npx && echo "remotion: available" || echo "remotion: unavailable" - 若
ply或ffmpeg缺失，發出警告並建議安裝。
鏡頭持續時間規則
| 示範類型 | 每鏡頭持續時間 | 備註 |
|---|---|---|
| 快速概覽 | 0.5-1 秒 | 快速剪輯，營造興奮感 |
| 功能示範 | 2-3 秒 | 足夠時間閱讀並理解 |
| 引導教學 | 4-5 秒 | 教學步調 |
| 社群短片 | 1-2 秒 | 吸引注意，快速 |
示範說故事原則
示範失敗是因為它們機械化地展示產品，而不是講述故事。觀眾需要一個理由繼續觀看。這些原則來自實際在登陸頁面和社群媒體上獲得參與度的做法：
- 從結果開始，而不是設定。 前 2 秒決定是否有人看完整段影片。展示「之後」的狀態 — 有數據的儀表板、完成的設計、結果。設定（登入、載入、導航）無法獲得任何注意力。
- 一個功能 = 一個示範。 試圖在 30 秒內塞進 5 個功能會讓所有功能都變得難以記憶。專注於一個功能的示範勝過匆忙的導覽。
- 展示魔幻時刻。 每個產品都有一個互動讓使用者驚嘆。找到那個時刻並圍繞它建立示範 — 這是人們點擊「試用」的原因。
- 用文字疊加添加情境。 社群影片自動靜音播放。沒有文字說明，觀眾只看到 UI 在變化，卻不知道發生了什麼或為什麼重要。每個鏡頭都需要一個 3-6 個字的疊加文字來說明其價值。
- 節奏：每個概念 2-3 秒。 這感覺很快，但觀眾的注意力很短。如果一個鏡頭沒有用新資訊證明其螢幕時間，就剪掉它。
步驟 1：決定示範類型
| 類型 | 持續時間 | 解析度 | 格式 | 使用案例 |
|---|---|---|---|---|
| 英雄示範 | 15-30 秒 | 1280x800 | MP4 | 登陸頁面上方摺頁 |
| 功能亮點 | 5-15 秒 | 1280x800 | GIF/MP4 | 功能區塊、文件 |
| 完整引導 | 60-180 秒 | 1280x800 | MP4 | YouTube、銷售簡報 |
| 社群短片 | 5-15 秒 | 1080x1080 | MP4 | Instagram、Twitter/X |
| 電子郵件 GIF | 3-8 秒 | 600x400 | GIF | 電子郵件行銷活動 |
| 操作指南 | 30-90 秒 | 1280x800 | MP4 | 協助文件、入門指引 |
詢問使用者類型，或從情境推斷。
步驟 2：規劃鏡頭清單
在錄製前，規劃每個鏡頭：
## 鏡頭清單
1. [動作：導航到登陸頁面]
- URL：https://example.com
- 等待：1 秒載入
- 重點：英雄區塊
2. [動作：點擊「開始使用」按鈕]
- 等待：轉場動畫
- 重點：註冊表單
3. [動作：填入示範資料]
- 輸入：[email protected]
- 重點：成功狀態
每個鏡頭 = 一個 ply 螢幕截圖或互動序列。
步驟 3：選擇製作模式
模式 A：快速示範 (ply + ffmpeg)
快速、粗略的示範，從螢幕截圖拼接成影片。
擷取螢幕截圖：
# 導航並擷取每個鏡頭的螢幕截圖
ply navigate "https://example.com"
ply screenshot --output marketing/demos/shot-01.png
ply click "Get Started"
ply screenshot --output marketing/demos/shot-02.png
使用 ffmpeg 拼接：
# 從螢幕截圖建立 MP4（每幀 2 秒）
ffmpeg -framerate 0.5 -i marketing/demos/shot-%02d.png \
-c:v libx264 -pix_fmt yuv420p \
-vf "scale=1280:800:force_original_aspect_ratio=decrease,pad=1280:800:(ow-iw)/2:(oh-ih)/2" \
marketing/demos/demo.mp4
# 預覽 GIF（較低品質，較小檔案）
ffmpeg -i marketing/demos/demo.mp4 \
-vf "fps=10,scale=640:-1:flags=lanczos" \
-c:v gif marketing/demos/demo-preview.gif
# 電子郵件 GIF（600px 寬，最佳化）
ffmpeg -i marketing/demos/demo.mp4 \
-vf "fps=8,scale=600:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
marketing/demos/demo-email.gif
# 社群方形裁切 (1080x1080)
ffmpeg -i marketing/demos/demo.mp4 \
-vf "crop=min(iw\,ih):min(iw\,ih),scale=1080:1080" \
marketing/demos/demo-square.mp4
模式 B：精緻示範 (Remotion)
適合行銷級別的輸出，包含轉場、文字疊加、品牌片頭。
生成 Remotion 合成：
# 必要時初始化
npx remotion init marketing/demos/remotion-demo
# 渲染最終影片
npx remotion render marketing/demos/remotion-demo/src/index.tsx \
--output marketing/demos/demo-polished.mp4
合成結構：
src/
├── index.tsx # 根合成
├── Intro.tsx # 品牌片頭（標誌、標語）
├── DemoScene.tsx # 帶文字疊加的螢幕截圖
├── Transition.tsx # 場景間的淡入/滑動
└── Outro.tsx # CTA + URL
關鍵 Remotion 模式（完整組件程式碼請參閱 references/remotion-examples.md）：
- 使用
<Img>顯示螢幕截圖，<AbsoluteFill>進行佈局 - 使用
useCurrentFrame()+interpolate()製作動畫 - 從
brand/creative-kit.md取得品牌色彩 - 30fps 實現流暢播放，1280x720 或 1920x1080
- 使用
<Sequence>添加文字疊加來標示功能
片頭場景 (2-3 秒)： 標誌居中，標語淡入。品牌色彩作為背景漸層。保持簡短 — 產品才是主角。
示範場景（每個鏡頭）： 螢幕截圖填滿 80% 的畫面。頂部或底部放置文字疊加，包含 1 行功能說明。使用 interpolate() 實作微妙的縮放效果（1.0 → 1.05），為場景增添活力。
場景間的轉場： 淡入 + 輕微滑動（200 毫秒）。永遠不要使用花俏的 wipe — 它們會分散對產品的注意力。
片尾場景 (3-4 秒)： CTA 文字（"Try it free at [url]"）、標誌，以及可選的社交證明文字。這是唯一可以銷售的幻燈片 — 保持所有其他幻燈片專注於展示。
錯誤恢復
ply 失敗（頁面未載入、找不到元素、超時）：跳到鏡頭 N+1，並在鏡頭清單中記錄失敗。在所有鏡頭完成後，審查跳過的鏡頭並重試一次。如果仍然失敗，使用手動螢幕截圖作為備用方案。
ffmpeg 失敗（找不到編解碼器、格式錯誤）：檢查 ffmpeg -codecs 以了解可用的編解碼器。如果缺少 libx264，嘗試 -c:v h264 或透過 brew install ffmpeg 安裝。對於 GIF 調色板問題，簡化濾鏡鏈 — 捨棄 split/palettegen/paletteuse 並使用基本 -vf "fps=10,scale=640:-1"。
Remotion 失敗（渲染崩潰、合成錯誤）：檢查 node 版本（node -v，需要 18+）。如果 npx remotion render 失敗，針對 GPU 問題嘗試 npx remotion render --gl=angle 或 --gl=swangle。對於合成錯誤，驗證所有 <Img> src 路徑是否正確且圖片存在。
步驟 4：轉換與輸出
所有輸出儲存到 marketing/demos/。依類型命名：
| 輸出 | 檔案名稱 | 備註 |
|---|---|---|
| MP4（桌機） | demo-hero.mp4 | H.264, 1280x800 |
| MP4（社群） | demo-social-1080.mp4 | 方形, 1080x1080 |
| GIF（預覽） | demo-preview.gif | 640px 寬, <5MB |
| GIF（電子郵件） | demo-email.gif | 600px 寬, <2MB |
| MP4（精緻） | demo-polished.mp4 | Remotion 輸出 |
步驟 5：完成摘要
## 已建立示範素材
| 素材 | 大小 | 格式 | 建議用途 |
|-------|------|--------|--------------|
| demo-hero.mp4 | 1.2MB | MP4 1280x800 | 登陸頁面英雄 |
| demo-preview.gif | 3.4MB | GIF 640px | README、文件 |
| demo-email.gif | 1.1MB | GIF 600px | 電子郵件行銷活動 |
| demo-social-1080.mp4 | 800KB | MP4 1080x1080 | Instagram、X |
所有素材已儲存至 `marketing/demos/`。
視埠設定
| 平台 | 寬度 | 高度 | 縮放比例 |
|---|---|---|---|
| 桌機 | 1280 | 800 | 1x |
| 桌機 HD | 1920 | 1080 | 1x |
| 手機 | 390 | 844 | 2x |
| 1080 | 1080 | 1x | |
| Twitter/X | 1200 | 675 | 1x |
| 電子郵件 | 600 | 400 | 1x |
反模式
| 錯誤 | 為何失敗 |
|---|---|
| 錄製登入/註冊流程 | 沒有人在乎你的認證畫面。從登入後開始。 |
| 顯示載入轉圈 | 編輯掉它們或跳到已載入狀態。轉圈會扼殺動能。 |
| 靜音自動播放時缺少文字疊加 | 社群影片自動靜音播放。沒有文字，觀眾不知道他們在看什麼。 |
| 示範超過 60 秒卻沒有章節分割 | 注意力在 15 秒後下降。如果很長，加入清晰的章節標題。 |
| 以不一致的視埠大小錄製 | 在不同大小間跳躍的鏡頭看起來不專業。在錄製前鎖定視埠。 |
| 展示每個功能 | 最多選擇 3-5 個功能。展示一切的示範什麼都賣不出去。 |
| 滑鼠游標漫無目的地遊走 | 規劃每次點擊。游標應該有目的地移動 — 直線朝向目標。 |
相關技能
/creative— 廣告視覺、產品照片（靜態素材，非示範）/content-atomizer— 將示範轉換為特定平台的貼文/page-cro— 審核示範所展示的頁面