Community程式設計與開發github.com

abdurshd/skills

可攜式代理技能,用於編排、審查、設計、影片製作、國際化與發布。

skills 是什麼?

「GenVid Promo」是一款專為 AI 代理設計的技能,可從頭到尾自動化產生推廣影片,而不僅僅是腳本或分鏡。它強制使用真實的 TTS 提供者(例如 OpenAI 或 Gemini)和 API 金鑰來生成旁白,並在開始之前明確要求使用者提供,且不會提交或列印金鑰。此技能會自動載入 `remotion-best-practices` 套件來進行影片版面、音訊、轉場、字幕和 FFmpeg 處理,並使用確定性的 Remotion 架構來確保視覺效果和旁白與真實產品行為一致。它支援所有主流平台(如 Claude Code、Cursor 和 Codex),並可從產品程式碼中導入真實的 React 元件,或在必要時以螢幕截圖作為備援,從而製作出可供發布的 MP4 影片,其中包含經過驗證的宣稱、轉場和最終的行動呼籲。

相容平台~Claude Code✓Codex CLI✓Cursor✓Gemini CLI
npx skills add abdurshd/skills

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

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

說明文件

GenVid Promo

產出完整的影片,而非僅是腳本或分鏡。建立一個確定性的 Remotion 合成,其旁白、視覺、產品宣稱和時間點皆經過驗證。

強制啟動

  1. 檢查調用中是否包含 TTS 提供者和 API 金鑰值或明確的環境變數/秘密參考。
  2. 若缺少任一項,請停止並詢問:我應該使用哪個 TTS 提供者,以及如何存取其 API 金鑰?偏好使用秘密環境變數,例如 OPENAI_API_KEY 或 GEMINI_API_KEY;我不會提交或列印它。
  3. 不要未經告知就選擇提供者、假設金鑰存在、合成佔位語音,或繞過此閘門繼續執行。
  4. 立即完整載入已安裝的 remotion-best-practices 技能。在設計前載入其 video-layout 規則;在使用音訊、轉場、字幕、FFmpeg 和後設資料功能時載入對應的規則。明確說明此依賴正在被使用。如果無法使用,請說明情況,並以 references/production-pipeline.md 作為最低限度的備援方案。
  5. 在實作合成前閱讀 references/tts-providers.md。根據官方文件驗證當前提供者的模型和 SDK/API 格式,因為它們會變更。

工作流程

1. 確立簡報

確定產品、目標受眾、發佈目標、平台、長寬比、目標長度、調性、行動呼籲、語言環境和必要宣稱。在缺失資訊時推斷可逆的創意選擇。僅詢問會顯著改變結果的選擇。

預設為 1920x1080、30 FPS、35-75 秒、一位旁白、字幕和明確的行動呼籲。當請求的頻道需要時,加入垂直或正方形的合成。

2. 驗證真實產品

在可行時檢查儲存庫並實際執行應用程式。追蹤真實的路由、元件、資料狀態、設計代碼、字型、圖示、文案、方案名稱、價格和功能行為。對於線上產品,使用瀏覽器自動化檢查實際渲染的體驗。切勿憑空發明畫面、功能、指標、見證、價格或互動。

按此順序使用產品視覺效果:

  1. 將真實的元件匯入受控的 Remotion/示範環境,並使用確定性的模擬資料。
  2. 萃取適合動畫的顯示元件,同時保留實際的 DOM、代碼、文案和狀態。
  3. 僅在真實元件無法於應用程式外部渲染時,才建立源自原始碼的複製品;將它們與實際螢幕截圖進行比較,並揭露此備援方案。
  4. 僅在動畫安全元件不切實際時才使用螢幕截圖或螢幕錄影。

不要為了拍攝某個狀態而暴露生產環境的秘密或竄改即時資料。

3. 撰寫故事與分鏡

使用緊湊的架構:鉤子 -> 問題 -> 揭示 -> 透過真實使用證明 -> 最強優勢 -> 行動呼籲。每個場景傳達一個訊息和一個焦點視覺。在最終時間確定之前撰寫場景旁白。

根據 references/storyboard-schema.md 建立 storyboard.json。為每個場景包含精確的 UI 狀態、元件/原始碼來源、動作、旁白、宣稱和轉場意圖。

4. 建立 Remotion 系統

為產品代碼、排版、安全區域、瀏覽器/裝置框、游標、反白、打字機文字、鏡頭移動和轉場建立可重複使用的視覺系統。使用 useCurrentFrame() 搭配 interpolate() 或合理的 spring() 呼叫;絕不使用 CSS 動畫或轉場。

偏好經過設計的動態:鏡頭對焦、遮罩揭示、共享軸移動、品味淡入淡出、物件連續性和時間階段安排。避免隨機運動、通用卡片網格、過小的 UI、同時出現的競爭焦點。

5. 生成並同步旁白

為每個場景生成一個音訊檔案。將轉錄稿保留為事實來源。測量真實的音訊持續時間並寫入 voiceover-manifest.json;根據音訊加上引導和喘息空間來推導場景持續時間。在視覺建立後開始旁白,並將可見的動作安排到描述它們的精確句子。

不要為了符合固定場景而拉伸音訊。當傳達內容和視覺出現分歧時,重新生成或重新調整時間。從已知轉錄稿加入字幕;僅在口語輸出差異大到需要逐字時間戳時才使用語音轉文字。

在渲染前執行 node <skill-dir>/scripts/validate-genvid.mjs <storyboard> <manifest> [project-root]。

6. 渲染與檢查

在每個場景的入口、中點、關鍵互動和出口附近渲染代表性的靜止幀。以正常觀看大小檢查它們。修復裁切、無法閱讀的文字、意外重疊、游標偏移、不忠實的 UI、空檔時間、突兀的剪輯和旁白不匹配。

除非目標平台需要其他格式,否則以 H.264、BT.709 和高品質 AAC 音訊渲染最終的 MP4。觀看整個結果(含聲音)。確認執行時間、尺寸、編碼器、音訊存在、最終行動呼籲和成品路徑。

完成標準

僅在 MP4 已存在並在整個時間軸上被觀看或抽樣後才算完成。報告渲染路徑、尺寸、FPS、持續時間、TTS 提供者/模型/語音、產品視覺來源、經過驗證的宣稱、執行的測試以及任何有意的複製品/截圖備援方案。

相關技能