Communitygithub.com

derrickgong87/demo-video-creation-skill

可重複使用的 Codex 技能,可根據簡要描述製作出精美的 SaaS / 產品展示影片(19★)。

demo-video-creation-skill 是什麼?

此技能可從公司網址或產品素材自動生成高品質的產品展示影片,預設輸出為 60-90 秒、1080p 以上的影片;若機器、素材與交付目標支援,則可輸出 4K 解析度。它支援多種平台(Codex、Claude Code 等),並遵循嚴格的運作標準:以真實產品表面為基礎、採用產品經理式的敘事方式、使用 Remotion 與 FFmpeg 進行合成與編碼,且避免虛構未經驗證的數據。工作流程涵蓋需求確認、產品研究、畫面擷取、腳本與故事撰寫、動態系統設計、建置與渲染,以及交付前的品質檢查。此外,還提供可重複使用的 Python 輔助腳本(如建立簡要、QC 影片與製作連絡表)以及一個通用的 Remotion 起始範本,協助開發者快速專注於產品故事本身,而非重複搭建基礎架構。

相容平台~Claude Code✓Codex CLI✓Cursor
npx skills add derrickgong87/demo-video-creation-skill

在你喜歡的 AI 中提問

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

說明文件

展示影片創作技能

根據公司網址或產品素材,製作出精美的產品展示影片。預設輸出為 60-90 秒、1080p 以上影片;若機器、素材與交付目標支援,則可輸出 4K 解析度。

運作標準

  • 影片須以真實產品表面為基礎:網站頁面、應用程式畫面、登入後工作流程、螢幕截圖、使用者提供的素材,或經確認的公開展示。
  • 僅提供網址視為足夠的開端。從網站推斷出產品、目標觀眾、核心工作流程與品牌系統,然後僅詢問缺少的存取權限或高影響力的偏好。
  • 偏好採用產品經理的說故事方式,而非一般行銷話術。呈現使用者的問題、他們在產品內的操作、螢幕上的變化,以及結果為何重要。
  • 在實際可行時使用 Remotion 進行動態合成,並使用 FFmpeg 進行檢測、編碼、連絡表製作、音訊處理與交付轉換。
  • 保持主張可辯護。除非已從原始素材驗證,否則不得虛構指標、客戶標誌、檢測結果、整合功能、合規狀態或定價。
  • 避免過度貼近前一個客戶。可重複使用工作流程、品質關卡與動態模式;但不得重複使用客戶專屬的螢幕截圖、文案、顏色、定價、人物設定或逐版修復。

輸入

若使用者僅提供網站網址:

  1. 在瀏覽器中開啟該網站,繪製導覽、價值主張、產品頁面、定價、說明文件以及可見的互動狀態。
  2. 擷取最能說明產品的頁面與 UI 表面的高解析度螢幕截圖。
  3. 圍繞從網站發現的最強產品循環來建立敘事。
  4. 若需要登入後的產品區域,請說明其存取限制。

若使用者提供更多背景資訊,則利用這些資訊提升品質:

  • 目標觀眾、行銷活動平台、長寬比、偏好長度、呼籲行動、啟動目標。
  • 產品工作流程步驟、示範帳號存取、範例輸入,或預期的前後輸出。
  • 品牌素材、螢幕截圖、影片參考、字型、音樂方向、禁止的主張與法律備註。

參考路由

  • 在執行瀏覽器研究、登入後擷取或螢幕截圖工作前,先閱讀 references/capture-workflow.md。
  • 在撰寫腳本、故事板、鏡頭列表或產品敘事前,先閱讀 references/storytelling.md。
  • 在選擇動態語言、排版、轉場、佈局或音樂前,先閱讀 references/visual-system.md。
  • 在實作影片專案或渲染檔案前,先閱讀 references/remotion-ffmpeg.md。
  • 在宣稱影片完成前,先閱讀 references/qc-checklist.md。

製作工作流程

  1. 界定交付項目

    • 確認目標長度、長寬比、解析度、語言及交付平台(若有提供)。
    • 預設為 16:9、60-90 秒、30fps、H.264 MP4、至少 1080p。
    • 若要求或影片將用於推出、投資人、會議或付費廣告投放,則使用 4K。
  2. 研究產品

    • 深入瀏覽網站與產品頁面,以識別核心循環,而不僅是首頁的承諾。
    • 建立快速功能圖:主要使用者、痛點、主要動作、可見產品輸出、證據、呼籲行動。
    • 若產品需要登入,請使用使用者當前瀏覽器工作階段,或要求其登入,然後從已驗證的 UI 繼續。
  3. 擷取產品證據

    • 盡可能以 2 倍或更高裝置比例擷取桌面螢幕截圖。
    • 若填入與空白狀態能解釋轉換過程,則一併擷取。
    • 按場景與狀態命名素材,例如 dashboard-empty.png、workflow-result.png、pricing.png。
    • 維護一份清單,包含網址、頁面標題、擷取時間、視埠、檔名與備註。
  4. 撰寫產品故事

    • 以使用者的問題或期望結果開場,使用平實的語言。
    • 依序呈現產品循環:設定、動作、轉換、檢閱/證明、更廣泛的工作流程、呼籲行動。
    • 文案需夠簡短,適合動態影片。以字幕作為錨點,而非段落。
    • 為目標觀眾使用自然的用語;避免常見的 AI 片語,例如「釋放生產力」,除非產品本身確實這麼說。
  5. 設計動態系統

    • 以品牌的實際顏色與排版為基礎,若需改善層級結構,可加入一個克制型的顯示字體或強調字型。
    • 以產品螢幕截圖作為主要素材。僅在能釐清工作流程時,才加入瀏覽器框架、游標路徑、縮放、遮罩、掃描線、比較面板或動態文字。
    • 選擇符合產品的轉場:流體/漣漪效果用於流暢轉換,掃描擦拭用於分析,聚光燈揭示用於證明,空間推進用於導航,分割比較用於前後對比。
    • 保持動態連續。場景變化應感覺像攝影機或介面正在穿過一個產品故事,而非獨立的投影片。
  6. 建置與渲染

    • 當需要專案骨架時,使用 assets/remotion-starter/ 中的起始範本。
    • 在渲染最終影片前,先渲染檢閱靜態圖或連絡表。
    • 先渲染 1080p 以進行 QA,再視需求渲染 4K 最終版。
    • 使用 FFmpeg 或 ffprobe 驗證長度、解析度、編碼器、影格率與音訊串流。
  7. 交付前 QA

    • 檢查是否有任何文字重疊、裁切不自然,或在快速剪輯時變得無法閱讀。
    • 檢查按鈕、游標、標註與遮罩是否與底層 UI 對齊。
    • 檢查所有螢幕截圖在最終比例下是否足夠清晰。
    • 檢查音樂是否為純音樂、版權安全,且在任何旁白或音效下音量平衡。
    • 提供最終的 MP4 檔案以及有用的製作成品:故事板、素材清單、連絡表,以及相關的原始專案(若適用)。

可重複使用的腳本

  • scripts/create_demo_brief.py:根據網址與可選的產品背景資訊建立結構化的簡要。
  • scripts/qc_video.py:使用 ffprobe 檢查最終影片的 metadata,並標記解析度、長度、編碼器與音訊問題。
  • scripts/make_contact_sheet.py:使用 FFmpeg 建立視覺連絡表,方便快速檢閱。

從專案資料夾或使用絕對路徑執行腳本。它們是輔助工具,不能取代視覺判斷。

起始範本

開始新影片時,將 assets/remotion-starter/ 複製到工作專案中。取代 src/demoConfig.ts 中的預留位置設定,將螢幕截圖加入 public/ 或 Remotion 靜態素材,並根據產品敘事調整場景。

起始範本刻意保持通用:

  • 包含一個產品故事合成,含有開場、工作流程、證明與呼籲行動場景。
  • 使用真實的螢幕截圖插槽,但備有乾淨的 UI 預留位置。
  • 包含淡入淡出、縮放、軌道移動、游標強調與比較面板等動態基本元素。
  • 避免客戶專屬的文案、顏色或素材。

完成標準

在達成以下條件前,不得宣稱影片已完成:

  • 產品故事來自真實的產品證據。
  • 最終渲染至少為 1080p,或使用者已明確接受較低的目標。
  • 已透過靜態圖、預覽渲染或連絡表進行視覺檢查。
  • FFmpeg/ffprobe 的 metadata 已確認解析度、長度、視訊編碼器與音訊狀態。
  • 任何音樂、字型、庫存影片或第三方頁面的授權或來源限制均已記錄。
  • 使用者收到具體的影片檔案,而不僅是計畫或腳本。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能