Communitygithub.com

XiaoDuoYa/AeVideoGen

透過確定性網頁渲染,從真實產品原始碼、網站、瀏覽器擴充功能、應用程式、音樂、品牌資產、賣點和參考影片中,創建商業級的 AE 風格產品發表、解說、UI 互動和功能宣傳影片。

AeVideoGen 是什麼?

AeVideoGen 是一個專為開發者與 AI 代理設計的影片生成技能,旨在從真實的產品原始碼和品牌資產中,創作出可直接商業發行的 AE 風格產品影片。它的核心優勢在於「忠於原始碼」:確保影片中的 UI 比例、行為與互動完全基於實際的產品,而非模擬或截圖。此技能支援透過 Claude Code、Cursor 或 Codex 等開發工具執行,適合用於製作產品發表會影片、解說動畫、UI 動效演示、功能宣傳影片等。 AeVideoGen 的工作流程極具結構化,從需求完整度檢查開始,要求 AI 代理先釐清模糊的簡報、分析參考影片的動作語法、撰寫因果敘事、將主要賣點對齊音樂高潮,並在最終渲染前取得用戶對瀏覽器預覽的明確批准。它內含嚴格的自動化驗證腳本(如 `validate_brief.py` 和 `validate_timeline.py`),確保成果的商業品質。最重要的是,它禁止使用 HyperFrames,並要求透過穩定的 `scripts/render_web_video.mjs` 手動進行 H.264/AAC 編碼,以輸出無破圖的穩定 MP4 檔案。

相容平台~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/XiaoDuoYa/AeVideoGen/tree/main

在你喜歡的 AI 中提問

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

說明文件

AeVideoGen By HxdLabs_ v1.0.1

創建能直接商業出貨的產品影片。保持產品行為真實、故事因果分明、排版清晰易讀、焦點集中、動態生動、審查精準,並穩定輸出。

執行製作合約

  • 絕不使用 HyperFrames。
  • 將要求的產品版本及其原始碼視為視覺和行為的真實依據。
  • 使用參考影片作為節奏、動作語法、鏡頭語言、排版和轉場結構的靈感;絕不複製第三方產品資產或假裝其他產品是使用者的。
  • 保留原生 UI 比例。均勻縮放,絕不拉伸。
  • 確保每次指標點擊都是可見的真實控制項,並讓鏡頭聚焦在同一個目標上。
  • 不要發明不支援的功能、宣稱、原始碼狀態、文案、圖示或佈局。
  • 在使用者明確批准確切的瀏覽器預覽之前,不要渲染最終影片。
  • 在進行重大變更前備份已接受的基準版本,並使用版本化的輸出路徑。
  • 不要擅自降級解析度、幀率、時長、原始碼版本、故事優先級或音樂對齊。

在實作前執行完整性檢查

首先檢查用戶的提示詞和所有提供的工件。不要詢問已經存在於檔案、原始碼、元資料或對話中的事實。

在實作前,立即返回引導式啟動報告:

  1. 總結已收到的內容;
  2. 列出阻礙性的缺口,並解釋每個缺口如何影響商業品質;
  3. 主動提供用戶可以提供的確切資產或決策;
  4. 提出接下來一到三個最有影響力的問題;
  5. 針對多階段製作推薦目標模式,並提供可貼上的目標、輸入、限制條件、階段和完成標準。

對於每個阻礙性或有用的缺失決策,提供兩個或三個具體選項。將推薦選項放在第一位,解釋每個選項的可見後果,並讓用戶在適當時候回覆「按推薦方案」。絕不允許未經說明的開放式問題阻礙進度。

除非用戶明確要求建立/開始/使用目標,否則不要建立目標。對於重要的影片工作,推薦和可貼上的目標簡報是強制性的;自動建立目標是被禁止的。

從 assets/web-motion-starter/brief.json 建立 brief.json,然後執行:

python3 scripts/validate_brief.py brief.json

如果某個阻礙性欄位仍然未知,提出簡潔的問題,並在後續輪次中繼續提問,直到簡報完成。一次提出一到三個相關問題。不要僅僅因為提到了一些需求就開始創意實作。

僅當用戶明確表示要使用最佳判斷、跳過問題或從不完整的簡報開始時,才以記錄的假設繼續進行。在 assumptions 中標記每個此類欄位,並確保高影響力的事實有原始碼依據。

每當簡報是新的、不完整、矛盾或經過重大修改時,請完整閱讀 references/intake-and-clarification.md。 在啟動時完整閱讀 references/guided-production.md,並在整個製作過程中使用其進度報告格式。 當需求缺失或用戶詢問該選擇什麼時,請閱讀 references/decision-options.md。

執行工作流程

1. 保護與審計

  • 檢查儲存庫狀態、版本、路由、元件、儲存、樣式、尺寸、字型、圖示、狀態轉換、目標點擊區域和私有資料。
  • 在進行大型編輯之前建立可復原的基準。
  • 建立一個證據記錄表,將每個拍攝的聲明和狀態映射到原始碼證據或用戶的明確確認。
  • 審計後發送簡短的進度報告:已完成的證據、剩餘風險以及下一個可審查的工件。
  • 在重建產品 UI 之前,完整閱讀 references/source-reconstruction.md。

2. 分析參考但不複製

對於每個提供的參考影片:

  1. 讀取時長、解析度、幀率、音訊和鏡頭結構。
  2. 密集提取幀以看到動畫——而不是多秒的縮圖。
  3. 在剪輯、變形、縮放、文字進入、點擊和轉場周圍添加 8–12fps 的視窗。
  4. 以正常速度並搭配音訊觀看完整參考影片。
  5. 製作動作語言記錄表:主體、鏡頭路徑、緩動、時長、交接、遮罩/形狀、排版、停頓和聲音提示。
  6. 將該語法轉換到用戶的真實產品和品牌。

執行 scripts/analyze_reference_video.py 進行確定性提取。在聲明風格匹配或重現之前,完整閱讀 references/reference-video-analysis.md。

3. 撰寫因果電影

使用此敘事鏈:

用戶背景 → 痛點 → 產品動作 → 可見結果 → 記住的價值

  • 每個場景只有一個目的和一個主要的視覺主體。
  • 將主要承諾——而不是次要功能——放在音樂高潮中。
  • 使用純文字作為有意義的標點或共享元素,絕不作為填充物。
  • 顯示一個夠大且能閱讀的問題,然後將同一個元素變形/對接到實際的輸入框中。
  • 規劃每個標題的換行。絕不允許意外換行。
  • 在動畫之前建立 production.json 並保持其最新。
  • 計時變更後執行 scripts/validate_timeline.py production.json --strict。
  • 在完整實作之前,報告提議的場景鏈、高潮位置和未解決的創意決策。

在設計場景圖之前,完整閱讀 references/creative-direction.md。在宣佈某個方向已可供商業使用之前,完整閱讀 references/commercial-quality.md。

4. 分析並編輯音樂

執行:

python3 scripts/analyze_music.py music.mp3 --target-duration 30 --output music-map.json
  • 聆聽所有候選視窗;演算法標記僅為建議。
  • 選擇一個音樂上連貫的原始範圍並記錄其偏移。
  • 映射段落升降和主要節拍,而非每個節拍。
  • 保留高潮盆:接近、可讀的收尾、釋放。
  • 保持場景節奏可讀,而場景內部的重音仍可擊中節拍。

5. 重建真實產品狀態

  • 在允許的情況下,重複使用實際的原始碼元件、CSS、SVG、圖示、字型、文案和狀態邏輯。
  • 用確定性的、符合 schema 的本地 fixture 取代網路狀態。
  • 保持最終組合獨立於執行階段的網路呼叫。
  • 記錄每個原生表面的尺寸並均勻縮放。
  • 在最終佈局後,從 getBoundingClientRect() 推導出點擊中心。
  • 演示實際的狀態變化;不要縮放截圖並稱之為互動。

6. 編排焦點與連續性

  • 序列化注意力:焦點、指標接近、點擊、回饋、結果。
  • 當一個場景到達其預期的取景時,使用一次連續的鏡頭移動——而不是三次或四次修正性的重新置中。
  • 將完整的意義群組視為視覺中心:對於聊天,置中問題加答案;對於外掛,置中外掛,除非特定控制項被宣告為主體。
  • 在觀眾必須閱讀的地方果斷縮放。不要為了保護空白空間而犧牲可讀性。
  • 使用次要動態保持可讀的停頓生動;不要讓畫面完全靜止。
  • 當無關材料無法在時間內閱讀時,將其模糊/變暗。
  • 偏好共享元素、FLIP、形狀繼承、遮罩、焦點拉動和滾動連續性轉場。
  • 每個狀態都從確定性時間推導出來。暴露 window.__AE_VIDEO__.render(t)。

7. 在 localhost 上審查

  • 提供確切的組合,包含播放/暫停、拖動條、秒數、幀索引、±1 幀步進、時間讀數和場景標記。
  • 在捕捉模式下隱藏所有審查控制項。
  • 檢查每個點擊、縮放、行轉換、共享元素、高潮和結尾周圍的檢查點。
  • 以正常速度搭配音訊播放完整影片。
  • 驗證真實的點擊目標、原生比例、預期的換行、閱讀時間、視覺中心、連續動作、原始碼真實性和音樂同步。
  • 向用戶顯示確切的預覽,並等待明確批准。
  • 報告自上次接受的預覽以來更改了什麼,並引導用戶到需要審查的確切時間範圍。

完整閱讀 references/qa-gates.md 並通過每個阻礙性檢查點。

8. 僅渲染已批准的版本

  • 將預覽批准和導出權限視為兩個獨立的決策。
  • 預覽批准後,用簡單的語言解釋導出會將 localhost 動畫轉換為可分享的影片檔案。詢問用戶現在是否要導出。
  • 導出前,提供清晰的品質選項及其對清晰度、流暢度、渲染負載、時間、儲存和相容性的影響。針對用戶的設備和平台推薦一個選項。
  • 確認解析度、幀率、格式/編解碼器、音訊、平台和檔案名稱。在用戶明確確認導出規格之前,不要導出。
  • 僅在收到對應的明確決策後,才設定 approval.status、approval.approvedVersion、approval.exportRequested 和 approval.exportSpecConfirmed。
  • 執行 scripts/validate_brief.py brief.json --final 和 scripts/validate_timeline.py production.json --final --strict。
  • 渲染到一個新的幀目錄和檔案名稱。絕不混合新舊幀。
  • 偏好 scripts/render_web_video.mjs 中的穩定合成器握手;在不穩定的幀上停止,而不是導出損壞的內容。
  • 當 4K60 超出可用硬體時,將 2560×1440 60fps 視為強烈預設值,但未經用戶批准絕不更改目標規格。
  • 使用 faststart 編碼 H.264/AAC yuv420p,然後執行 ffprobe、完整解碼、連續性檢查和視覺聯繫表審查。

阻止這些失敗

  • 未經明確許可而假設的不完整簡報;
  • 虛擬點擊、錯誤中心的縮放或不支援的功能;
  • 在單個動作內重複進行微小的重新置中;
  • 拉伸/裁剪的產品表面或任意的內部字型調整大小;
  • 重要的文字太小、太短、被遮擋或意外換行;
  • 插入無意義的小文字以填充空間;
  • 場景完全靜止或過快,未完成有意義的動作;
  • 不相關的主體反覆交換到中心;
  • 在變形過程中,大文字及其目標欄位不一致;
  • 轉場沒有繼承的幾何圖形、運動、顏色、焦點或意義;
  • 音樂高潮分配給了錯誤的價值;
  • 參考影片取樣過於稀疏,無法理解其動作;
  • 最終頁面從通用的功能卡片而非原始碼支援的產品證據中發明出來;
  • 在批准前開始最終渲染,或導出帶有撕裂/部分幀的內容。
  • 在沒有單獨的、用簡單語言說明的品質選項和明確的導出確認之前開始導出。

路由捆綁資源

  • references/intake-and-clarification.md:用於簡報完整性和後續行為。
  • references/guided-production.md:用於強大的入門、目標模式交接和進度溝通。
  • references/decision-options.md:用於推薦選項、替代方案和初學者友好的權衡。
  • references/reference-video-analysis.md:用於參考影片分析或風格重現。
  • references/source-reconstruction.md:用於網站、擴充功能、應用程式或

相關技能