HyperFrames — 從這裡開始
HyperFrames 從 HTML 渲染影片 — 一個合成就是一個 HTML 檔案，其 DOM 使用 data-* 屬性宣告時間，其動畫執行階段可搜尋，且媒體播放由框架掌控。完整的撰寫合約位於 /hyperframes-core；在撰寫合成 HTML 之前，請先閱讀此合約。
以下內容包含：能力地圖（領域技能，按需載入）和意圖路由器（為任何「幫我製作影片」的請求選擇工作流程）。
能力地圖 — 領域技能
按需載入的原子能力 — 非完整的影片工作流程。對於「幫我製作影片」，請使用下方的意圖路由器。
| 你想要… | 技能 |
|---|---|
撰寫/編輯 HTML 合成 — data-* 合約、片段、軌道、子合成、變數 | /hyperframes-core |
| 製作動畫 — 原子運動、場景藍圖、轉場、執行階段適配器（GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU） | /hyperframes-animation |
創意指導 — frame.md / design.md、調色板、排版、旁白、節奏規劃、音頻反應式 | /hyperframes-creative |
| 媒體 — TTS 配音、背景音樂、轉錄、去背、字幕 | /hyperframes-media |
媒體解析 — 從 HeyGen 目錄中找到並凍結 BGM、音效、圖片、圖示，放入 .media/ 並附帶清單追蹤 | /media-use |
| CLI 開發循環 — 初始化、檢查、驗證、檢視、預覽、渲染、發布、診斷 | /hyperframes-cli |
安裝註冊表區塊/元件（hyperframes add） | /hyperframes-registry |
意圖路由 — 選擇工作流程
本節僅了解頂層工作流程；它不會載入其內部參考或上述的領域技能。
路由前 — 確認輸入內容，而非規格
路由需要知道影片的主題 — 其輸入內容和主題。如果未指定（「製作一個關於我們東西的影片」，但沒有網址、產品、主題或資產），請在進入任何工作流程前詢問 — 承諾一個工作流程就是路由的決定。最多問兩個問題：
- 輸入 — 一個產品（網址/簡報）、一個一般網站、一個 GitHub PR、一個要解釋的主題，或一個現有的談話頭影片？
規格預設值 — 陳述，而非詢問（它們永遠不會改變路由）：長寬比 16:9（僅當目標為直式目的地（TikTok / Reels / Shorts）時使用 9:16）；旁白/字幕語言 = 使用者的語言。選定的工作流程會在其第一步驟重新確認其自身的規格。
工作流程速查表
| 工作流程 | 用途 |
|---|---|
/product-launch-video | 為產品做行銷/發布/推廣 — 從其網址、簡報或腳本（即使僅提及網站名稱） |
/website-to-video | 將一個一般網站轉換為影片 — 網站導覽、作品集/登陸頁面展示、從網站視覺中擷取的社交片段 |
/faceless-explainer | 從文字解釋一個主題/概念 — 沒有產品，沒有網址；每個視覺元素都是由 LLM 創造 |
/pr-to-video | 一個GitHub PR / 程式碼變更 → 更新日誌/功能展示/修正/重構解說片 |
/embedded-captions | 為現有的談話頭影片新增字幕/標題（原始影片不變） |
/talking-head-recut | 為現有的談話頭影片加上設計過的圖形疊加層 — 下方三分之一、資料強調、動感標題、引文摘要 |
/motion-graphics | 一個簡短、無旁白、設計主導的動態圖形 — 動感文字、統計/圖表呈現、標誌動畫、下方三分之一疊加層 |
/music-to-video | 將一個音樂曲目 → 一個節奏同步的影片 — 歌詞影片、幻燈片或動感宣傳片；音樂驅動節奏（可選的使用者圖片/影片按節奏網格剪輯） |
/slideshow | 一個簡報/募資簡報/互動式簡報 — 離散投影片、片段、分支、熱點；輸出為一個可導航的簡報，而非渲染的影片 |
/general-video | 其他任何情況 — 較長或多場景作品、靜態循環/海報、自訂合成 |
/remotion-to-hyperframes | 將現有的 Remotion（React）合成移植到 HyperFrames（遷移，而非創作） |
消歧義（僅在可能混淆時）：
- 運動優先且無旁白（約 10 秒以下，運動本身就是訊息） →
/motion-graphics，無論輸入為何。 - 一個網址或腳本 — 行銷一個特定產品（即使僅提及網站名稱） →
/product-launch-video；一個一般非產品網站 →/website-to-video；一個 GitHub PR 連結 →/pr-to-video；解釋一個概念但沒有產品/網站 →/faceless-explainer。若真的無法區分是產品還是主題，或是發布還是一般網站，則問一個問題。 - 現有素材 — 純口語字幕 →
/embedded-captions；設計過的疊加卡片 →/talking-head-recut。兩者都不會編輯素材本身（重新調整時間/顏色/畫面/順序/音訊屬於非線性剪輯 — 超出範圍）。 - 輸入是一個音樂曲目（一個音訊檔案，或一個要從中提取音訊的影片），且無旁白 →
/music-to-video— 音樂的節拍/能量驅動節奏。（有旁白的作品仍使用上方與輸入匹配的工作流程；/motion-graphics用於不為音樂驅動的簡短無旁白動態。） - 一個簡報/募資簡報/互動式簡報（離散投影片、導航、簡報者模式） →
/slideshow— 輸出為一個可導航的簡報，而非渲染的影片。明確的「幻燈片」請求直接進行；相鄰的觸發詞（「簡報 / 投影片 / 簡報 / 轉換這個頁面」）會讓/slideshow在撰寫前確認這是個幻燈片，如果不是，則切換到適當的非幻燈片工作流程。 - 長度是指標，而非限制 — 意圖決定工作流程；僅當作品明顯長於約 3 分鐘，或是靜態/循環/自訂格式時，才使用
/general-video。
如果匹配的工作流程未安裝
一旦您選定了一個工作流程，請檢查它是否可用。如果匹配的工作流程技能未安裝，請不要退回使用猜測的方式 — 告訴使用者先安裝它：
- 僅此工作流程：
npx skills add heygen-com/hyperframes --skill <workflow-name>（例如--skill pr-to-video— 純名稱，無前導/）。 - 一次安裝所有工作流程：
npx skills add heygen-com/hyperframes --all（核心 + 每個工作流程，跳過選擇器）。
在他們執行後，重新讀取該工作流程的技能並繼續。
保持技能更新
HyperFrames 技能具有版本號。npx hyperframes init 會檢查已安裝的技能與 GitHub 上的最新版本，並在任何項目過期或缺失時安裝/更新完整集合 — 因此一個新初始化的專案總是擁有完整、最新的集合（在已是最新的專案上重新執行 init 則無任何操作）。此檢查是一個快速的 GitHub 往返；離線（或速率受限）時，它會在短暫超時後回退到安裝，因此 init 永遠不會因網路問題而完全失敗。使用 init --skip-skills 完全退出此功能。
如果任務表現異常，或在長時間建置之前，請確認已安裝的技能是最新的：
- 檢查：
npx hyperframes skills check（加上--json以獲得機器可讀的結果；當有任何項目過期或缺失時，以非零狀態碼退出）。 - 更新：
npx hyperframes skills update— 將完整集合更新至最新版本，安裝任何尚未存在的項目（與 init 的安裝步驟相同）。
CLI 也會在 render / lint / validate 執行檢測到過期技能時，顯示一行提醒。
工作流程詳情
/product-launch-video
- 輸入： 一個正在行銷的產品 — (a) 一個產品網址（使用無頭 Chrome 抓取資產和品牌標記）、(b) 一個提及產品網站名稱的腳本/簡報，即使沒有連結（PLV 會解析並抓取該網站，除非使用者選擇退出），或 (c) 一個無法推導出網站或「不要抓取」的腳本（無擷取模式 — 選擇一個提供調色板和設計系統的樣式預設）。提供的腳本可以作為逐字旁白或按場景重新組織 — PLV 會詢問。
- 輸出： 產品發布 / SaaS 宣傳片，作為 HyperFrames 合成 → MP4。（最佳長度 30–90 秒）。
- 觸發詞： 「X 的發布影片」、「我們網站的宣傳片」、「用一分鐘解釋我的 SaaS」、「將我的腳本變成 60 秒宣傳片」、「純文字發布影片，不要抓取」。
/website-to-video
- 輸入： 一個一般網站 / 網址，要轉換成影片 — 當目標是製作一個關於該網站的影片，而非產品發布時。使用無頭 Chrome 擷取真實螢幕截圖和品牌資產。
- 輸出： 一個從網站自身視覺元素建構的網站導覽 / 作品集 / 登陸頁面展示 / 社交片段 → MP4。
- 觸發詞： 「將這個網站變成影片」、「從...進行網站導覽」、「從我們的首頁製作社交片段」、「我只有一個網址 — 做些東西」。
/faceless-explainer
- 輸入： 任意文字 — 一個主題、文章或筆記 — 正在被解釋，沒有產品在被行銷，也沒有網站要擷取。（從
/product-launch-video分支出來；沒有無頭 Chrome。） - 輸出： 無臉解說片 → MP4，每個視覺元素由 LLM 按場景創造（排版 / 抽象 / 圖表 / 資料視覺化）；附帶
pin-and-paper預設。（最佳長度 30–90 秒）。 - 觸發詞： 「關於 X 的無臉解說片」、「用影片解釋 DNS 如何運作」、「將這篇文章變成解說片」、「從我的筆記製作解說片」。
/pr-to-video
- 輸入： 一個 GitHub pull request — 一個 PR 網址、一個
owner/repo#N引用，或「這個 PR」 — 透過ghCLI 讀取（非要抓取的網站）。 - 輸出： 程式碼變更解說片（更新日誌 / 功能展示 / 修正 / 重構） → MP4 — 差異高亮、前後對比、檔案樹 + 影響場景。（最佳長度 30–90 秒）。
- 觸發詞： 「製作一個關於這個 PR 的影片」、「將 PR #1187 變成一個更新日誌影片」、「來自 github.com/org/repo/pull/123 的發行說明影片」。
/embedded-captions
- 輸入： 一個現有的談話頭影片（MP4）要加字幕 — 實際素材，不是網址或簡報。本地轉錄（Whisper，無需 API 金鑰）並進行遮罩（RVM），使主體可以遮住字幕。
- 輸出： 相同的素材保持不變，加上字幕層 — 標準（逐字下方三分之一的軌道 + 一個嵌入在主體後方的高潮片段）或電影風格（每個字幕合成在主體後方）。任何長度。
- 觸發詞： 「為這個影片添加字幕」、「主體後方的字幕」、「為我的片段添加電影風格字幕」。
/talking-head-recut
- 輸入： 一個現有的談話頭 / 訪談 / 播客影片（MP4），要包裝上螢幕圖形 — 實際素材。本地轉錄（Whisper）。片段完整播放，保持不變。
- 輸出： 相同的素材，加上定時的圖形疊加卡片 — 動感標題、下方三分之一、資料強調、引文摘要、側邊面板、子母畫面 — 與轉錄稿同步。任何長度。
- 觸發詞： 「包裝這個影片」、「為我的談話添加圖形疊加 / 下方三分之一 / 資料強調」、「將這個訪談變成一個圖形包裝的編輯版本」。
/motion-graphics
- 輸入： 一個簡短、設計主導的動態圖形，其中運動本身就是訊息 — 通常低於約 10 秒，無旁白。類型：動感文字、一個統計資料/數字計數、一個圖表呈現、一個標誌動畫、一個下方三分之一 / 疊加層，或一個由搜尋驅動的頁面 / 推文 / 標題畫面。
- 輸出： 一個簡短的動態圖形 → MP4 或一個透明疊加層（alpha WebM / MOV），用於下方三分之一 / 強調內容。
- 觸發詞： 「一個 8 秒的標誌動畫」、「為這個統計資料製作動畫」、「一個動感文字開場」、「將這條推文變成動態圖形」、「一個透明的下方三分之一疊加層」。
/music-to-video
- 輸入： 一個音樂曲目 — 一個音訊檔案，或一個要從中提取音訊的影片 — 無旁白且無網站擷取。可選地，使用者提供的圖片/影片可以交織其中。曲目會被分析一次，產生一個確定性的節拍/能量地圖（
audiomap.json），整個影片建構於其上。 - 輸出： 一個節奏同步的 HyperFrames 合成 → MP4，其中音樂驅動節奏。排版和模板是基礎（一個完整的影片不需要任何資產）；任何提供的媒體都會被剪輯到同一個節奏網格上（節拍剪輯 / 肯·伯恩斯效果）。類型 — 歌詞影片、幻燈片、動感宣傳片 — 由逐幀選擇決定；管線永遠不會因此分支。
- 觸發詞： 「為這首歌製作影片」、「從這個曲目製作節奏同步的影片」、「歌詞影片」、「將這個音樂變成影片」、「音樂視覺化 / 動感宣傳片配合這個節奏」。
/slideshow
- 輸入： 一個簡報 / 募資簡報 / 互動式簡報 要撰寫 — 一個