產品展示影片是做什麼的？

製作宛如 SaaS 產品發表會般的展示影片，而非一般的螢幕錄製。

核心概念：不要錄製螢幕。使用 Playwright 捕捉高解析度截圖與元素的實際座標，然後用 Remotion 動畫化這些素材。這讓你對鏡頭、節奏和字幕擁有完全的控制權——並且當使用者說「快一點」、「Zoom 大一點」、「跳過這步驟」、「做一個 10 秒版本」時，只需 10 秒就能重新渲染。重新錄製既慢又會得到更差的結果。

流程

設定 (每個專案一次) → node <skill>/scripts/setup.mjs
腳本 → 撰寫 demo.json (參見 references/roteiro.md)
捕捉 → node .demo-video/tools/capture.mjs demo.json capture/ (Playwright)
渲染 → node .demo-video/tools/render.mjs --capture capture/ --out out/ (Remotion)
交付 → out/<名稱>.mp4 (1080p) + out/<名稱>.gif (可嵌入 HTML)
迭代 → 編輯 demo.json 並僅執行已變更的步驟

變更時間/鏡頭/字幕？只需重新渲染（步驟 3，約 30 秒）。變更應用程式流程？也需要重新捕捉（步驟 2）。

從口語需求到腳本

使用者以自然語言描述流程（「展示如何建立一個 agent」）；而你則需查看應用程式，將此轉譯為選擇器，切勿憑空猜測。猜測一個 #submit 可能會導致整個捕捉失敗在第 4 個場景。

打開畫面，使用瀏覽器開發工具並閱讀 DOM。
收集選擇器，依穩定性排序：[data-testid=...] > #id > 可見文字 (text=新增 agent) > CSS 路徑。CSS 路徑在版面初次變更時就會失效；文字則在介面翻譯時會失效。
在使用者捕捉前確認流程——展示腳本並詢問步驟順序是否正確。他了解產品；而你不了解。
如果應用程式需要登入，請要求他先執行 auth.mjs。

當無法直接打開應用程式時（例如內部產品、無存取權限），請要求使用者提供選擇器或包含 HTML 的螢幕截圖——這比猜測更快。

腳本是唯一真理

一個 JSON 即可驅動 Playwright 和 Remotion。在捕捉任何內容之前，先撰寫腳本並展示給使用者——在此處修正的代價低廉，事後修正則成本高昂。完整結構請參見 references/roteiro.md。

{
  "name": "criar-agente",
  "url": "https://app.exemplo.com",
  "viewport": { "width": 1600, "height": 900 },
  "scenes": [
    { "action": "goto",  "value": "/dashboard", "camera": "wide", "caption": "您的儀表板", "duration": 2 },
    { "action": "click", "target": "[data-testid='new-agent']", "camera": "zoom", "caption": "建立您的 Agent", "duration": 2 },
    { "action": "type",  "target": "#agent-name", "value": "財務分析師", "camera": "focus", "duration": 2.5 },
    { "action": "click", "target": "button[type=submit]", "camera": "zoom", "duration": 1.5 },
    { "action": "wait",  "value": 1200, "camera": "wide", "caption": "3 次點擊即可完成", "duration": 2.5 }
  ]
}

設定（專案首次執行）

node "$HOME/.claude/skills/product-demo-video/scripts/setup.mjs"

建立 .demo-video/ 目錄（包含 Remotion 合成以及 .demo-video/tools/ 中的工具）、安裝依賴項並下載 Chromium——約 300MB。在執行前請先徵得使用者同意；之後的捕捉和渲染只需數秒。建議將 .demo-video/、capture/ 和 .auth/ 加入 .gitignore。

若要即時觀看結果並進行微調，可執行 cd .demo-video && npx remotion studio 開啟包含 scrubber 的預覽——這比為了確認時間點而渲染要好得多。

鏡頭語言

區分好壞展示的關鍵在於節奏，而非特效。一些有效的規則：

以 wide 開場和收尾。 觀眾需要在 zoom 之前先定位，並在之後看到結果。整部影片都 zoom 會讓人疲勞且迷失方向。
每個意圖一次 zoom，而不是每次點擊。 在同一區域的連續點擊 = 只用一個 zoom 場景。每次點擊都 zoom-in/zoom-out 會讓人頭暈。
focus 僅用於打字。 文字輸入框需要可讀；按鈕則不需要。
每個場景 2 到 3 秒。 少於 1.5 秒，沒有人來得及閱讀字幕；多於 4 秒則會成為無效時間。一個好的展示影片約 15–25 秒，包含 5–8 個場景。
字幕是標籤，不是句子。 "新增您的 Agent"、"連接您的資料"。最多約 4 個詞，動詞開頭，不加句號。並非每個場景都需要字幕。
在源頭裁剪無效時間。 載入、重新導向、進場動畫：在場景中使用 settle，而不是在影片中留下數秒的靜止時間。

鏡頭在場景之間是連續的（通過 easing 進行插值），所以動作出現時已經很平滑——請不要試圖在腳本中透過增加額外場景來補償。

文字層即為旁白

沒有音訊（GIF 沒有音訊，而在動態消息中的影片預設是靜音的）。故事是由字體排版來講述的，而它只有在具有層級結構時才能發揮作用：如果所有文字都具有相同權重，觀眾將無法分辨哪些是步驟、哪些是論述。

樣式	角色	使用時機
`title` (場景)	開場/結尾的全螢幕畫面，可搭配 `sub`	開頭 1 次，有時結尾 1 次
`hero`	轉折點——大字、置中、疊加在漸層上	每個展示最多 1 次
`label`	步驟的標籤（預設），可選配 `sub`	大多數場景
`stat`	證明產品價值的數字："22 秒"、"3 次點擊"	結尾 1 次
`note`	次要細節，低調呈現	當步驟需要備註時

支撐其他規則的兩條原則：每個展示一個 hero（兩個就等於沒有），以及 用 stat 結尾——大數字是最後留在觀眾腦海中的東西。對於面向高層的展示，常見的敘事弧線是 title → labels → 關鍵時刻的 hero → 結尾的 stat。

"highlight": true 會讓整個畫面變暗，只留下場景中的元素。這是整套工具中最強大的武器，也正因如此，它也是最容易被濫用的：請僅在觀眾必須記住該元素時使用，而不是作為裝飾。它會在鏡頭穩定後出現，並在動作發生的瞬間自行消失，以免遮擋結果。

憑證

切勿將密碼放在 demo.json 中。有兩個選項，依優先順序：

"auth": { "storageState": ".auth/state.json" } ——已登入的 session，透過執行 node .demo-video/tools/auth.mjs <url> 產生一次（會開啟瀏覽器，讓使用者手動登入）。
"auth": { "login": { "user": "#email", "pass": "#password", "submit": "button[type=submit]" } }，並將憑證放在環境變數 DEMO_USER / DEMO_PASS 中。

如果展示內容包含真實資料，請在腳本中使用 "redact": ["selector"] 在捕捉前模糊敏感元素——模糊效果會直接呈現在 PNG 中，無法還原。

輸出

格式	用途	方法
`demo.mp4` 1920×1080	登陸頁、LinkedIn、YouTube	預設
`demo.gif` 960×540	README、文件、電子郵件、HTML	`--formats mp4,gif` (預設)
`demo-square.mp4` 1080×1080	Instagram/動態消息	`--formats mp4,square`

GIF 檔案較大。render.mjs 已透過 Remotion 內建的 ffmpeg 使用 palettegen（專屬影片的調色板）來壓縮——無需額外安裝。即便如此，15 秒、960px 的 GIF 約為 3.5MB；對於 README，建議使用 --gif-width 720 --gif-fps 12，可將其壓縮至 1.5MB 以下。

若要嵌入 HTML：<img src="demo.gif" width="720" alt="...">。如果使用者接受 MP4，則 <video autoplay loop muted playsinline> 的檔案大小約為其 1/10。

無需接觸產品即可測試安裝

assets/exemplo/ 提供了一個假的應用程式 (app-exemplo.html) 及對應的腳本，涵蓋了所有動作——title、shot、click、type、select、hold、redact。先執行此測試可以區分「技能壞了」與「應用程式的選擇器錯了」，這是在第一次真實展示失敗時成本最高的疑問。

當問題發生時

找不到選擇器 → capture.mjs 會在該場景失敗並顯示提示。請向使用者要求 URL/畫面，並使用瀏覽器檢查，然後再猜測另一個選擇器。
Zoom 模糊 → 在腳本中將 scale 增加至 3（3 倍截圖）或減少 zoom 值。
影片與字幕不同步 → 由場景的 duration 控制；請調整該數值。
關於合成、鏡頭、游標和視覺自訂的詳細資訊，請參閱 references/remotion.md。

資產

assets/ 目錄包含 exemplo/（用於測試的虛擬應用程式及其腳本）。

參考資料

references/roteiro.md — 腳本結構的完整參考。
references/remotion.md — 關於 Remotion 合成、鏡頭和視覺自訂的詳細資訊。
references/camera.md — 鏡頭語言規則與最佳實踐。

產品展示影片