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 / Shores—時才使用 9:16）；旁白 / 字幕的語言 = 使用者語言。選定的工作流程會在自己的第一步重新確認其規格。
工作流程速查表
| 工作流程 | 使用時機 |
|---|---|
/product-launch-video | 為 產品 行銷 / 發表 / 推廣 — 從其網址、簡報或腳本（即使僅提到網站名稱） |
/faceless-explainer | 從文字 解釋主題 / 概念 — 無產品、無網址；每個視覺皆由 LLM 憑空生成 |
/pr-to-video | GitHub PR / 程式碼變更 → 更新日誌 / 功能展示 / 修正 / 重構解說 |
/embedded-captions | 為現有談話性影片加上字幕 / 標題（原始畫面不變） |
/talking-head-recut | 將現有談話性影片包裝成含設計圖形疊加層 — 下方第三條、數據標註、動態標題、引用框 |
/motion-graphics | 一個短小、無旁白、以設計為主的動態圖形 — 動態字體、統計 / 圖表動畫、Logo 開場、下方第三條疊加層 |
/music-to-video | 音樂音軌 → 節奏同步 影片 — 歌詞影片、幻燈片或動態宣傳片；音樂驅動節奏（可選使用者圖片 / 影片素材依節奏網格剪輯） |
/slideshow | 簡報 / 提案簡報 / 互動式簡報 — 離散投影片、分段、分支、熱點；輸出為一個可導覽的簡報，非渲染影片 |
/general-video | 其他任何情況 — 較長或多場景作品、靜態循環 / 海報、自訂合成，或當無專門工作流程符合的一般網站導覽 |
/remotion-to-hyperframes | 將現有 Remotion (React) 合成移植至 HyperFrames（遷移，非創作） |
歧義澄清（僅在可能混淆時）：
- 以動作為主且無旁白（約 <10 秒，動態本身即為訊息）→
/motion-graphics，不論輸入類型。 - 一個網址或腳本 — 行銷特定產品（即使僅提及網站名稱）→
/product-launch-video；一般非產品網站 →/general-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 <工作流程名稱>(例如--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 秒）。
- 觸發詞：「為 X 製作發表影片」、「為我們的網站製作宣傳片」、「在一分鐘內解釋我的 SaaS」、「將我的腳本轉換成 60 秒宣傳片」、「純文字發表影片，不要爬取」。
/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 秒，無旁白。類型：動態字體排印、統計 / 數字計數動畫、圖表動畫、Logo 開場、下方第三條 / 疊加層，或搜尋驅動的頁面 / 推文 / 標題截圖。
- 輸出： 一個短動態圖形 → MP4 或一個透明疊加層 (alpha WebM / MOV) 用於下方第三條 / 標註。
- 觸發詞：「一個 8 秒 Logo 開場」、「為這個統計數字加上動畫」、「一個動態字體介紹」、「將這條推文轉換成動態圖形」、「一個透明的下方第三條疊加層」。
/music-to-video
- 輸入： 一條音樂音軌 — 一個音訊檔案，或一個可供擷取音訊的影片 — 且無旁白和網站捕捉。可選地，使用者提供的圖片 / 影片素材可融入其中。音軌會被分析一次，形成一個確定性的節拍 / 能量地圖 (
audiomap.json)，整個影片都建構於此。 - 輸出： 一個節奏同步的 HyperFrames 合成 → MP4，其中音樂驅動影片節奏。字體排印與模板為基底（一個完整影片無需任何素材即可產生）；任何提供的素材都會被剪輯到相同的節拍網格上（節拍剪輯 / 肯·伯恩斯效果）。類型 — 歌詞影片、幻燈片、動態宣傳片 — 從逐幀選擇中浮現；流程從不根據類型分支。
- 觸發詞：「為這首歌製作影片」、「從這條音軌製作節奏同步影片」、「歌詞影片」、「將這段音樂轉換成影片」、「音樂視覺化 / 節奏動態宣傳片」。
/slideshow
- 輸入： 要編寫的簡報 / 提案簡報 / 互動式簡報 — 一個簡報、大綱，或一個要轉換成投影片的現有頁面。非渲染影片請求；若意圖不明確，技能會在編寫前確認「您想要這個成為 HyperFrames 幻燈片嗎？」。
- 輸出： 一個可執行的 HyperFrames 合成 + 一個 JSON 島，播放器的
SlideshowController會讀取以啟用…
…[已截斷，等待翻譯]