HyperFrames — 從這裡開始
HyperFrames 從 HTML 渲染影片 — 一個合成 (composition) 就是一個 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、SFX、圖片、圖示到 .media/，並附帶清單追蹤 | /media-use |
| CLI 開發循環 — 初始化、偵錯、驗證、檢查、預覽、渲染、發佈、診斷 | /hyperframes-cli |
安裝註冊表區塊/元件 (hyperframes add) | /hyperframes-registry |
意圖路由 — 挑選工作流程
此區塊僅知道最上層的工作流程；它不會載入其內部參考或上述的領域技能。
路由前 — 確認輸入，而非規格
路由需要知道影片關於什麼 — 它的輸入和主題。如果這點未指定（「做一支關於我們產品的影片」但沒有網址、產品、主題或素材），在進入任何工作流程前先提問 — 承諾一個工作流程本身就是路由決策。最多兩個問題：
- 輸入 — 一個產品（網址/簡報）、一個通用網站、一個 GitHub PR、一個要解釋的主題，或一個現有的談話頭影片？
規格預設值 — 直接陳述，無需提問（它們永遠不會改變路由）：長寬比 16:9（僅在指定垂直目的地 — TikTok / Reels / Shorts 時使用 9:16）；旁白/字幕語言 = 使用者的語言。選定的工作流程會在其第一步驟重新確認自己的具體細節。
工作流程速查表
| 工作流程 | 使用時機 |
|---|---|
/product-launch-video | 銷售產品 (SaaS、App、公司/產品網站) — 從網址、簡報或腳本 → 宣傳片。任何商業網址的預設選項，即使只提到了網站名稱。 |
/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，不論輸入為何。 - 一個網址或腳本 — 問一件事：這個網站是在銷售產品嗎？ 是（SaaS / App / 產品 / 公司網站）→
/product-launch-video— 宣傳片，也是任何商業網址的預設選項，即使只提到了網站名稱。否，或使用者只想按原樣展示網站（作品集 / 部落格 / 文件 / 個人網站 / 活動）→/website-to-video— 導覽。一個 GitHub PR 連結 →/pr-to-video；一個沒有產品或網站的概念 →/faceless-explainer。 - 現有素材 — 純口語字幕 →
/embedded-captions；設計過的疊加卡片 →/talking-head-recut。兩者都不會編輯素材本身（重新計時 / 重新著色 / 重新構圖 / 重新排序 / 音訊屬於 NLE 編輯 — 超出範圍）。 - 輸入是一段音樂曲目（一個音訊檔案，或一個要從中提取音訊的影片）且無旁白 →
/music-to-video— 音樂的節拍/能量驅動節奏。（有旁白的作品則留在上述輸入匹配的工作流程中；/motion-graphics用於非音樂驅動的短篇無旁自動畫。） - 一個簡報 / 募資簡報 / 互動式簡報（離散幻燈片、導航、簡報者模式）→
/slideshow— 輸出為可導航的投影片，非渲染影片。明確的「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(核心 + 每個工作流程，略過選擇器)。
執行後，重新讀取該工作流程的技能並繼續。
保持技能為最新
HyperFrames 技能是有版本的。npx hyperframes init 會檢查已安裝的技能是否與 GitHub 上的最新版本一致，並在任何技能過期或遺失時安裝/刷新完整套件 — 因此一個剛初始化的專案總是擁有完整、最新的版本（在最新的專案上重新執行 init 則不進行任何操作）。檢查是一次快速的 GitHub 往返；離線（或遇到速率限制）時，它會在一段短暫超時後回退到安裝，因此 init 絕不會因為網路問題而硬性失敗。創作工作流程會透過 init 建立脚手架，因此啟動新專案時總是執行此檢查，並在技能過期時從 GitHub 拉取我們的最新技能。--skip-skills 旗標目前已被禁用（這是在 skills.sh 註冊表趕上進度期間的暫時措施）：傳遞此旗標不再跳過檢查，因此每次 init 都會檢查 GitHub。CI/測試透過 HYPERFRAMES_SKIP_SKILLS=1 環境變數選擇退出。
如果任務行為異常，或在長時間建置之前，請確認已安裝的技能是否為最新：
- 檢查：
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 秒）— 產品價值是主題，而非網站的導覽。若為純粹的網站導覽，請使用
/website-to-video。 - 觸發詞： 「為 X 製作發表影片」、「為我們的網站製作宣傳片」、「在一分鐘內解釋我的 SaaS」、「把我的腳本變成 60 秒宣傳片」、「純文字發表影片，不要爬取」。
/website-to-video
- 輸入： 一個目標是展示網站本身的網站/網址，而非銷售產品。最適合非商業網站（作品集、部落格、文件、個人網站、活動），或當使用者明確想要按原樣導覽網站時。使用無頭 Chrome 擷取真實螢幕截圖 + 品牌