Communitygithub.com

muneebsajjad/demo-reel

直接在瀏覽器中錄製真實產品,添加視窗框架、字幕、標題卡和結尾卡,端到端生成一支精美的產品展示影片,無需影片編輯器。適合需要產品示範、促銷、發布或功能影片的場景。

demo-reel 是什麼?

demo-reel 是一個面向開發者和產品團隊的 AI 技能,能夠將真實的瀏覽器操作錄製轉變為一支可直接發佈的產品展示影片(MP4)。它支援 macOS(ScreenCaptureKit)錄製,並在後續流程中自動添加視窗框架、相機移動、字幕、標題卡和結尾卡等專業潤色元素。整個工作流程從故事板開始,然後編寫場景腳本(`scenario.mjs`),進行錄製(`bin/reel take`),編輯(`edit.json`),生成預覽幀(`bin/reel stills`),製作字幕(`bin/reel subtitles`),最終渲染(`bin/reel render`)並檢查輸出(`bin/reel sheet`)。它支援多種輸出格式(4:5、1:1、9:16、16:9),並內建音樂選擇功能,可根據影片長度、語音、節奏自動推薦合適的配樂。特別適合展示 Chrome 擴充功能、Web 應用程式或任何基於瀏覽器的產品功能。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add muneebsajjad/demo-reel

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

demo-reel 是做什麼的?

您自己負責整個影片的製作:使用者提供產品和要展示的內容,您回傳一個可直接上傳的 MP4 檔案。螢幕上的一切都是真實的產品,即時錄製;專業潤色(視窗框架、相機移動、字幕、標題卡和結尾卡)是在錄製後從原始素材中添加的。

流程及每個步驟產生的檔案:

步驟指令產出
1. 故事板您與使用者一起3–5 個功能,每個對應一行字幕
2. 場景撰寫 scenario.mjs使用者將採取的步驟
3. 拍攝bin/reel take scenario.mjs takes/take1take1.mov(畫面 + 應用程式聲音)、take1.json(事件、元素位置)
4. 編輯撰寫 edit.json場景、鏡頭、字幕、品牌設定
5. 靜態幀bin/reel check edit.json、bin/reel layers edit.json、然後 bin/reel stills edit.json 1,4,9提早發現問題;預覽幀
6. 字幕bin/reel subtitles edit.json,然後閱讀並修正 build/subtitles.srt語音內容,作為字幕
7. 渲染bin/reel render edit.json renders/x.mp4 --format all每種格式的影片及其 .srt 字幕檔
8. 檢查bin/reel sheet renders/x.mp4 1,4,9,…連環靜態圖、時長、響度

examples/sawt/ 是一個完整的範例(一個朗讀文章的 Chrome 擴充功能)。在撰寫自己的 scenario.mjs 和 edit.json 之前,請先打開參考。docs/edit-format.md 是編輯檔案的參考文件;docs/lessons.md 列出了初次製作時可能出錯的問題,請在錄製前閱讀。

0. 初始設定(僅需一次)

首先執行 bin/reel doctor:它會檢查所有工具和權限,並告知需要修正的項目。 bin/reel setup 會建構錄製工具(Swift、ScreenCaptureKit),並安裝 playwright-core 和 Chrome for Testing。還需要:ffmpeg、uv、Google Chrome(用於渲染疊加層)。執行您的終端機需要 螢幕與系統音訊錄製 權限(系統設定 → 隱私權與安全性 → 螢幕錄製與音訊錄製);如果錄製工具回報沒有權限,請要求使用者授予權限並重新啟動終端機。

1. 故事板

在錄製前,以簡短幾行達成共識:

  • 功能依序排列,每個功能對應一行字幕:一個簡短的標籤(例如「文字縮放」)和一個最多兩行的標題,並在 <b> 中放入價值主張(例如「跟著讀。每個字都會隨著朗讀而放大。」);
  • 要展示的真實內容:一個公開頁面、一個範例帳戶、種子資料。選擇最能展現功能優勢的內容,並確認其效果(對於 Sawt:選擇一篇包含困難詞彙的文章,並且該網站上詞彙卡旁邊有足夠的空間顯示);
  • 品牌設定:強調色、淺色變體、背景色調、Logo;標題卡與結尾卡的文字。

預設格式:1080×1350(4:5),25–35 秒——這在手機動態消息中佔據最大面積,且大多數使用者會靜音觀看,因此字幕必須能獨立傳達故事。詢問影片將發布在哪裡:1:1、9:16 和 16:9 都可以從同一個編輯檔產生(使用 --format 參數),所以一併提供這些選項。檢查每個格式的靜態幀:在 4:5 中構圖良好的鏡頭,在 1:1 中可能會裁切到標題;請為每個格式微調偏移量(例如 `

相關技能