Communitygithub.com

產品展示影片生成器

為技術專案(GitHub 儲存庫、API、技術產品)生成 2 分鐘的產品展示影片。支援平行建置選項與結構化評論審查。適用於展示程式碼、解說架構或建立說明影片的情境。

產品展示影片生成器 是什麼?

此技能會從分析目標專案開始,進行為期 7 階段的完整工作流程,以建立專業的產品展示影片。它會自動克隆並分析 GitHub 儲存庫,提取關鍵功能、目標受眾和視覺資產,然後根據可自訂的範本(例如掛鉤、技術深度、行動呼籲)起草結構化的劇本。技能最獨特的功能是以平行方式同時建立兩個影片選項:一個使用 Remotion 的動畫版本,另一個使用 Puppeteer 和 FFmpeg 的幻燈片版本。這種平行的、基於代理的建置可確保提供多種方法,並為品質提供備援。建置完成後,技能會導入兩個評論代理(商業和技術),根據結構化評分量表對每個影片進行獨立評分。然後它會根據評論門檻進行迭代,若有需要,最多可進行三次修改循環,然後才會將最終影片交付給指定的頻道。它支援 Claude Code 和基於終端機的 AI 代理平台,這些平台可存取必要的工具,如 ElevenLabs(語音)、Remotion 或 FFmpeg 以及平行代理能力。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mikeOnBreeze/cc-crossbeam/tree/HEAD/.claude/skills/product-demo-video

在你喜歡的 AI 中提問

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

說明文件

產品展示影片

為技術專案生成 2 分鐘的產品展示影片,提供平行建置選項與結構化評論審查。

使用時機

  • 展示 GitHub 儲存庫、API 或技術產品
  • 需要快速獲得專業的解說影片
  • 想要多種方法選項(動畫版 vs. 簡潔版)

工作流程(7 階段)

探索 → 腳本 → 平行建置 → 平行評論 → 迭代 → 最終審查 → 交付
   │        │          │             │           │         │        │
 5-10 分鐘  10-15 分鐘 30-60 分鐘    10-15 分鐘  0-3 輪循環  閘門   交付

階段 1:探索

複製並分析儲存庫:

gh repo clone <擁有者/儲存庫> /tmp/<儲存庫>

提取內容:

  • 它的功能(一句話)
  • 目標受眾
  • 3-5 個關鍵功能
  • 架構 / 流程
  • 視覺資產(標誌、圖表)

詢問(或使用預設值):

問題預設值
時間長度2 分鐘
受眾混合(技術 + 商業)
語氣專業對話
格式動畫解說

階段 2:腳本

使用 references/script-template.md 結構:

場景 1:掛鉤 (0:00-0:15) — 問題陳述
場景 2:背景 (0:15-0:30) — 為何重要
場景 3-5:功能 (0:30-1:30) — 3 個關鍵能力,每個 20 秒
場景 6:技術 (1:30-1:50) — 架構 / 可信度
場景 7:行動呼籲 (1:50-2:00) — 下一步

指南:

  • 每分鐘 150 字
  • 每句最多 20 字
  • 主動語態
  • 具體而非模糊

階段 3:平行建置

同時啟動 2 個子代理來建置選項:

// 選項 A:Remotion(動畫)
sessions_spawn({
  label: "demo-video-option-a",
  task: `使用 Remotion 建置動畫展示影片。
  
  腳本:[貼上腳本]
  語音:使用 ElevenLabs,語音 ID CcEB0ARKH8qIyzh2I1OR
  輸出:/tmp/demo-video/option-a.mp4
  
  方法:
  1. 為每個場景生成旁白(ElevenLabs API)
  2. 使用場景元件建立 Remotion 專案
  3. 將動畫與音訊時間同步
  4. 以 1080p 30fps 渲染`
})

// 選項 B:幻燈片 + ffmpeg(簡潔)
sessions_spawn({
  label: "demo-video-option-b", 
  task: `建置以幻燈片為基礎的展示影片。
  
  腳本:[貼上腳本]
  語音:使用 ElevenLabs,語音 ID CcEB0ARKH8qIyzh2I1OR
  輸出:/tmp/demo-video/option-b.mp4
  
  方法:
  1. 生成旁白(ElevenLabs API)
  2. 使用 Puppeteer 建立幻燈片(HTML → PNG)
  3. 使用 ffmpeg 合併,與音訊同步
  4. 加入簡單轉場效果`
})

等待兩者完成。 向使用者展示選項,或根據品質自動選擇。


階段 4:平行評論

啟動 2 個評論角色(請參閱 references/ 中的完整評分量表):

// 商業評論者
sessions_spawn({
  label: "critic-business",
  task: `以商業評論者「Mike」的身份評論展示影片。
  
  影片:[路徑]
  腳本:[內容]
  
  請參閱 references/critic-business.md 以了解完整角色和評分量表。
  
  評分:清晰度、專業性、商業價值(各 1-10 分)
  輸出:結構化評論,包含整體分數和具體修正建議。`
})

// 技術評論者  
sessions_spawn({
  label: "critic-technical",
  task: `以技術評論者「資深工程師」的身份評論展示影片。
  
  影片:[路徑]
  腳本:[內容]
  
  請參閱 references/critic-technical.md 以了解完整角色和評分量表。
  
  評分:技術準確性、可信度、完整性(各 1-10 分)
  輸出:結構化評論,包含整體分數和具體修正建議。`
})

階段 5:迭代

品質閘門:

閘門動作
兩位評論者均 ≥7.5,且無關鍵問題→ 交付
任一評論者 <7.0 或存在關鍵問題→ 迭代
3 次迭代後仍未通過→ 升級給人類

迭代循環:

  1. 收集所有關鍵 / 重要問題
  2. 依嚴重性順序修正
  3. 僅重新渲染受影響的場景(如果可能)
  4. 重新執行評論者

階段 6:最終審查

在交付前,請驗證:

  • 兩位評論者均已通過(7.5 分以上)
  • 無剩餘關鍵問題
  • 音訊已正確同步
  • 所有場景渲染清晰
  • 行動呼籲清晰明確

階段 7:交付

輸出:

✅ 展示影片已完成!

📹 影片:demo-video-final.mp4(2:03)
🎯 受眾:[目標]
📊 分數:商業 8.2/10 | 技術 7.8/10

涵蓋內容:
1. [關鍵要點 1]
2. [關鍵要點 2]  
3. [關鍵要點 3]

檔案已儲存至:[位置]

交付至:

  • Slack 頻道(如果指定)
  • 儲存至 workspace/outputs/

工具與依賴項

工具用途必要性
ElevenLabs旁白生成是
RemotionReact 影片框架(選項 A)A/B 選其一
ffmpeg影片處理(選項 B)A/B 選其一
Puppeteer幻燈片截圖(選項 B)A/B 選其一
sessions_spawn平行子代理是

預設語音: CcEB0ARKH8qIyzh2I1OR(Jeremy - 技術教學旁白員)


檔案參考

  • references/critic-business.md — 商業評論者角色與評分量表
  • references/critic-technical.md — 技術評論者角色與評分量表
  • references/script-template.md — 逐場腳本結構
  • templates/remotion/ — 包含元件的 Remotion 專案支架
  • scripts/generate-voiceover.py — ElevenLabs TTS 輔助工具
  • scripts/render-slides.sh — ffmpeg 幻燈片轉影片合併工具

相關技能