HyperFrames — 從這裡開始
HyperFrames 從 HTML 渲染影片 — 一個合成就是一個 HTML 檔案，其 DOM 透過 data-* 屬性宣告時序，其動畫執行時期可搜尋，且其媒體播放由框架所擁有。
此技能是技術使用指南 — 它刻意不涉及設計。如需動作/動畫配方，請參見 /hyperframes-motion。如需設計方向（調色盤、字體、影格預設），請參見 /hyperframes-design。以下為：每個 HyperFrames 主題的功能地圖、此技能內的主題指南索引，以及用於選擇工作流程的意圖路由器。
功能地圖 — HyperFrames 技能
三個技能，各司其職。此技能為技術使用指南。另外兩個涵蓋設計。
| 您想要… | 技能 |
|---|---|
| 如何使用 HyperFrames — 合成合約、CLI 開發循環、安裝註冊表區塊/元件（此技能） | /hyperframes |
| 動作/動畫 — 原子級動作規則、場景藍圖、轉場、執行時期轉接器（GSAP / Lottie / Three.js） | /hyperframes-motion |
| 設計 — 調色盤、字體、影格預設、節奏規劃、品牌/風格決策（無動畫配方） | /hyperframes-design |
主題指南 — 此技能內容
此技術使用指南分為三個子主題。每個都有自己的 SKILL.md 和 references/：
| 子主題 | 路徑 | 閱讀時機 |
|---|---|---|
| 合成核心 | core/SKILL.md | 合成合約 — data-* 屬性、片段、軌道、子合成、變數、確定性規則 |
| CLI 開發循環 | cli/SKILL.md | npx hyperframes init / lint / validate / inspect / preview / render + AWS Lambda 雲端渲染 |
| 註冊表新增 | registry/SKILL.md | hyperframes add <區塊-或-元件> — 安裝位置、接線區塊、接線元件、貢獻新項目 |
每個主題的詳細資訊位於各子主題的 references/ 資料夾中。如需動畫執行時期細節（GSAP API、Lottie、Three.js 等），請參見 /hyperframes-motion → adapters/<runtime>.md。
意圖路由 — 選擇工作流程
此部分僅知道頂層工作流程；它不會載入其內部參考或上述的主題指南。
路由前 — 確認輸入，而非規格
路由需要知道影片的內容 — 其輸入和主題。若未指定（例如「製作一個關於我們產品的影片」但沒有網址、產品、主題或素材），請在進入任何工作流程前詢問 — 一旦選擇工作流程，路由決策便已確定。最多詢問兩個問題：
- 輸入 — 一個產品（網址/簡報）、一個一般網站、一個 GitHub PR、一個要解釋的主題，或一個現有的談話性頭影片？
規格預設值 — 直接陳述，無需詢問（它們永遠不會改變路由）：長寬比 16:9（僅在明確的直式目的地（TikTok / Reels / Shorts）時使用 9:16）；字幕語言 = 使用者的語言。所選工作流程會在其第一步驟重新確認自身的具體細節。
工作流程速查表
| 工作流程 | 使用時機 |
|---|---|
/faceless-explainer | 解釋一個主題/概念 — 從文字出發；沒有產品，沒有網址；每個視覺元素皆由 LLM 生成 |
/pr-to-video | 一個 GitHub PR / 程式碼變更 → 變更日誌 / 功能揭露 / 修正 / 重構解說影片 |
/embedded-captions | 為現有談話性頭影片加上字幕 / 副標題（原始素材不變） |
/talking-head-recut | 將現有談話性頭影片包裝上設計過的圖形疊加層 — 下方三分之一處、數據標註、動態標題、引言引用 |
/motion-graphics | 一個短小、以設計為主導的動態圖形 — 動態文字、統計/圖表跳躍、標誌標題、下方三分之一處疊加層 |
/slideshow | 一個簡報 / 提案簡報 / 互動式簡報 — 離散投影片、片段、分支、熱點；輸出為可導航的簡報，而非渲染後的影片 |
/general-video | 任何其他情況 — 較長或多場景作品、靜態循環 / 海報、自訂合成 |
消歧義（僅在可能混淆時）：
- 以動作為主（約 10 秒以下，動作本身就是訊息） →
/motion-graphics，無論輸入為何。 - 一個網址或腳本 — GitHub PR 連結 →
/pr-to-video；解釋一個概念但無產品/網站 →/faceless-explainer。若確實不清楚輸入內容 → 問一個問題。 - 現有素材 — 單純的旁白字幕 →
/embedded-captions；設計過的疊加卡片 →/talking-head-recut。兩者皆不編輯素材本身（重新定時 / 重新著色 / 重新構圖 / 重新排序屬於非線性剪輯 — 超出範圍）。 - 一個簡報 / 提案簡報 / 互動式簡報（離散投影片、導航、簡報者模式） →
/slideshow— 輸出是可導航的簡報，而非渲染後的影片。明確的「幻燈片」請求直接執行；相近的觸發詞（「deck / slides / presentation / convert this page」）會讓/slideshow在創作前確認是否為幻燈片，若不是則切換到適當的非幻燈片工作流程。 - 長度是參考，不是門檻 — 意圖決定工作流程；只有在作品明顯超過約 3 分鐘，或是靜態 / 循環 / 自訂格式時，才使用
/general-video。
如果匹配的工作流程未安裝
一旦您選定工作流程，請檢查它是否確實可用。如果匹配的工作流程技能未安裝，請不要退而猜測 — 告知使用者先安裝它：
- 僅此工作流程：
npx skills add heygen-com/hyperframes --skill <workflow-name>（例如--skill pr-to-video— 使用簡稱，不含前面的/）。 - 一次安裝所有工作流程：
npx skills add heygen-com/hyperframes --all（核心 + 所有工作流程，跳過選擇器）。
使用者執行後，重新讀取該工作流程的技能並繼續。
工作流程細節
/faceless-explainer
- 輸入： 任意文字 — 一個主題、文章或筆記 — 正在被解釋，沒有行銷的產品，也沒有要捕捉的網站。
- 輸出： 無臉解說 → 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 秒的標誌標題」、「將這個統計數據做成動畫」、「一個動態文字介紹」、「將這則推文變成動態圖形」、「一個透明的下方三分之一處疊加層」。
/slideshow
- 輸入： 一個要創作的簡報 / 提案簡報 / 互動式簡報 — 一份簡報、一個大綱，或一個要轉換成投影片的現有頁面。非渲染後影片的請求；若意圖不明確，技能會在創作前確認「您想要這個作為 HyperFrames 幻燈片嗎？」。
- 輸出： 一個可執行的 HyperFrames 合成 + 一個 JSON 孤島，播放器的
SlideshowController會讀取它，將 GSAP 時間軸變成一個可導航的簡報 — 離散投影片、片段揭示、分支序列、熱點導航、簡報者模式和演講者備註。交付物是一個簡報，而非 MP4。 - 觸發詞：「做一個提案簡報 / 簡報 / 投影片簡報」、「一個互動式簡報」、「將這個頁面轉換成投影片」、「一個有簡報者模式的幻燈片」。
/general-video
- 輸入： 以上未提及的任何內容 — 一份創意簡報、一個要動畫化的單一元素、對您正在建立的合成的編輯。無關輸入和長度。
- 輸出： 一個 HyperFrames 合成（任何長度 / 格式），透過原始流程：設計系統 → 提示詞擴展 → 計畫 → 動畫前的佈局 → 建構（委派給
hyperframes-* 技能） → 驗證。 - 觸發詞：「做一個標題卡」、「將這個做成動畫」、「一個較長的品牌 / 精華片段」、「一個多場景合成」、「一個靜態循環 / 海報」，任何「做一個影片」但不符合以上任何一列的請求。