Communitygithub.com

trident-archive / 產品示範影片產生器

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

產品示範影片產生器 是什麼?

這是一個為技術專案自動產生高品質產品示範影片的技能。它會先針對目標專案進行探索與分析,並根據預設或自訂的觀眾、語調與格式產生腳本。核心特色在於「平行建置」階段,它能同時使用 Remotion(動畫型)與 Puppeteer + ffmpeg(投影片型)兩種技術堆疊產生影片,並在完成後啟動「商業評論」與「技術評論」兩個平行評論者,從不同角度為影片品質打分數。整個流程包含發現、腳本、平行建置、平行評論、迭代、最終審查與交付等七個階段。品質門檻設定為兩位評論者分數皆達 7.5 分以上,若未達標則會自動迭代最多三次。此技能尤其適合需要快速產出專業示範影片的開發者、產品經理與技術行銷人員,支援 GitHub 儲存庫、API 與一般技術產品的展示。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mfrancime/trident-archive/tree/HEAD/repos/trident_cc-crossbeam_hackathon_project/.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 <owner/repo> /tmp/<repo>

提取內容:

  • 專案功能(一句話)
  • 目標使用者
  • 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 投影片轉影片合成器

相關技能