Communitygithub.com

Sagart-cactus/codex-skills

從軟體專案建立精美的程式化產品展示影片,使用打包的 Remotion 模板、分鏡腳本生成和 TTS 語音旁白。當 Codex 需要將應用程式、程式庫、CLI 或 API 轉換為展示影片而無需螢幕錄製時,或在迭代分鏡場景、旁白或渲染時使用。

codex-skills 是什麼?

這個技能讓 AI 代理(如 Codex)能夠以程序化方式,從現有的軟體專案自動生成產品展示影片。它利用打包在 `assets/remotion-template/` 中的 Remotion 模板,提供一個結構化的工作流程:掃描專案文件、根據場景目錄起草分鏡腳本、生成語音旁白(支援 macOS say、OpenAI TTS 和 ElevenLabs),並最終預覽與渲染影片。此技能特別適用於無需螢幕錄製即可建立行銷或展示內容的場合,也可用於迭代分鏡場景、旁白或渲染輸出。主要支援 Codex 代理,並在 SKILL.md 中提供了詳細的使用規則(如分鏡腳本結構、時長控制)和腳本生成方法,確保影片質量與一致性。

相容平台✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/Sagart-cactus/codex-skills/tree/HEAD/skills/product-demo-video

在你喜歡的 AI 中提問

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

說明文件

產品展示影片

這是 Claude 插件的 Codex 技能移植版本。沒有斜線指令,因此 Codex 應明確驅動工作流程,並使用 assets/remotion-template/ 下的打包 Remotion 模板。

模板設定

  • 如果目標工作區尚未包含 Remotion 專案,請將 assets/remotion-template/ 複製到工作目錄(例如 demo-video/)。
  • 在工作目錄中執行 npm install。
  • 模板包含場景元件、進入點、旁白腳本和一個入門 src/storyboard.ts。

工作流程

  1. 掃描目標專案的 README、文件、清單、原始碼樹以及任何現有的螢幕截圖。
  2. 詢問要凸顯哪些功能、偏好長度、語氣、品牌顏色,以及是否應使用特定螢幕截圖。
  3. 使用 references/scene-catalog.md 起草分鏡腳本。
  4. 展示分鏡腳本以供批准,除非使用者明確要求跳過此檢查點。
  5. 編寫或更新 src/storyboard.ts。
  6. 透過從一個小型輔助腳本中為每個場景呼叫 scripts/generate-narration.sh,將旁白 MP3 生成到 public/narration/。
  7. 如果 ffprobe 可用,測量每個 MP3 並將 durationInSeconds 設定為音訊長度加上大約 0.8 秒。
  8. 使用 npx remotion studio 預覽,並使用 npx remotion render DemoVideo output/demo.mp4 渲染。

分鏡腳本規則

  • 始終以 intro 開頭並以 outro 結尾。
  • 將大部分場景保持在 8 到 12 秒左右。
  • 包含至少一個清晰動畫場景,例如 workflow、comparison 或動態 feature。
  • 使用目標專案中的真實程式碼和具體產品細節。
  • 旁白使用口語,大約每分鐘 120 到 150 個單詞。

備註

  • 打包的 TTS 腳本支援 macOS say、OpenAI TTS 和 ElevenLabs。
  • 如果使用者已有 Remotion 專案,僅複製所需的元件、src/storyboard.ts 或旁白腳本,而非整個模板。

相關技能