HyperFrames — 從這裡開始
HyperFrames 從 HTML 渲染影片 — 一個合成就是一個 HTML 檔案，其 DOM 使用 data-* 屬性宣告時間，動畫運行時間是可搜尋的，媒體播放由框架控制。完整的創作合約位於 /hyperframes-core；在編寫合成 HTML 之前，請先閱讀它。
以下是一個能力對應（按需求載入的領域技能）和意圖路由器（為任何「幫我做一個…」請求選擇工作流程 — 通常是影片，但也可能是可導航的簡報或合成埠）。拆分是基於所有權，而不是輸出類型：工作流程擁有端到端的交付物（自己的專案目錄、分階段的步驟、子代理、最終產出物）；領域技能是一個能力層，由工作流程在運行中引入，但永不擁有任務的所有權。
能力對應 — 領域技能
您按需求載入的原子能力 — 不是完整的工作流程；它們永不擁有端到端任務的所有權。對於「幫我做一個…」的意圖，請使用下方的意圖路由器。
| 您想要… | 技能 |
|---|---|
創作/編輯 HTML 合成 — data-* 合約、片段、軌道、子合成、變數 | /hyperframes-core |
| 製作動畫 — 原子運動、場景藍圖、轉場、執行時期適配器（GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU） | /hyperframes-animation |
創作可搜尋的安全關鍵影格 — GSAP 時間軸、CSS 關鍵影格、Anime.js、WAAPI、FLIP、路徑、遮罩、SVG 變形/繪製、3D 深度，加上 hyperframes keyframes 診斷 | /hyperframes-keyframes |
創意方向 — frame.md / design.md、色板、排版、敘事、節奏規劃、音頻反應 | /hyperframes-creative |
| 媒體 — 解析/生成 BGM、SFX、圖片、圖示、品牌標誌、語音、色調分級、LUT；TTS 配音、轉錄、去背、字幕；跨專案重用 | /media-use |
| CLI 開發循環 — 初始化、lint、驗證、檢查、預覽、渲染、發布、診斷 | /hyperframes-cli |
安裝註冊表區塊/元件（hyperframes add） | /hyperframes-registry |
| 匯入 Figma 內容 — 素材、令牌、元件、分鏡腳本 → 重建運動（REST/CLI）；Motion (MCP)、著色器 (MCP 來源 / 原生匯出) | /figma |
意圖路由 — 選擇工作流程
此區段僅了解頂層工作流程；它不會載入其內部引用或上述的領域技能。
路由前 — 確認輸入，而非規格
路由需要知道影片的內容 — 它的輸入和主題。如果這點未指定（例如「幫我們的東西做個影片」但沒有 URL、產品、主題或素材），請在進入任何工作流程之前先詢問 — 承諾採用某個工作流程就是路由的決策。最多問兩個問題：
- 輸入 — 一個產品（URL / 簡報）、一個一般網站、一個 GitHub PR、一個要解釋的主題，或一個現有的談話頭影片？
- Figma 來源 — 如果輸入是 figma.com URL，則無論下方選擇哪個工作流程來決定影片的形式，都先由
/figma提取素材/令牌/(元件/分鏡腳本)；然後該工作流程再從/figma的輸出開始構建 — 絕不直接透過原始的 MCP 工具驅動 Figma（這會略過 SVG 清理、來源追溯和品牌令牌綁定）。
模式 — 如果請求帶有持續進行的自主訊號（例如「給我驚喜」、「你決定」、「直接構建」），請記下它並將其傳入工作流程：整個運行將進入自主模式，後續步驟不再重新詢問。如果沒有訊號，工作流程會在其第一個簡短問題中詢問模式。預設為協作模式。（/motion-graphics 預設為自主模式。）語義：hyperframes-core → references/brief-contract.md。
規格預設值 — 直接採用，無需詢問（它們永遠不會改變路由路徑）：寬高比根據目的地推斷 — 社交動態（X / LinkedIn / Instagram）→ 正方形 1:1，TikTok / Reels / Shorts → 9:16，YouTube / 嵌入 / 未知 → 16:9；旁白/字幕語言 = 使用者的語言。所選工作流程會在其第一步驟重新確認自己的具體細節（欄位語義：hyperframes-core → references/brief-contract.md）。
工作流程速查表
| 工作流程 | 用於… |
|---|---|
/product-launch-video | 銷售產品（SaaS、應用程式、公司/產品網站）— 從 URL、簡報或腳本 → 製作宣傳片。任何商業 URL 的預設選項，即使網站只是被提及名稱。 |
/website-to-video | 展示網站本身 — 使用網站自己的螢幕截圖製作的導覽/展示。適用於非商業網站（作品集、部落格、文件、個人網站、活動），或當使用者想要的是導覽，而非宣傳片。 |
/faceless-explainer | 從文字解釋主題/概念 — 沒有產品，沒有 URL；每個視覺元素皆由 LLM 憑空創作 |
/pr-to-video | 一個 GitHub PR / 程式碼變更 → 變更日誌/功能揭示/修復/重構解說影片 |
/embedded-captions | 為現有的談話頭影片添加字幕/標題（不觸碰原始素材） |
/talking-head-recut | 為現有的談話頭影片添加設計過的圖形覆蓋層 — 下方三分之一區域、數據標註、動態標題、引言引用 |
/motion-graphics | 一個簡短（約 10 秒以下）、無旁白的片段，其中動畫本身就是訊息 — 動態文字、統計/圖表打點、標誌動畫、動態地圖、動態推文/標題、一個獨立的下方三分之一/覆蓋圖（MP4 或透明 alpha） |
/music-to-video | 一首音樂曲目 → 一個節奏同步的影片 — 歌詞影片、幻燈片或動態宣傳片；音樂驅動節奏（可選使用者的圖片/影片，剪輯在節拍網格上） |
/slideshow | 一個簡報/提案簡報/互動式簡報 — 離散的幻燈片、片段、分支、熱點；輸出是一個可導航的簡報，而非渲染後的影片 |
/general-video | 其他任何情況 — 較長或多場景的片段、靜態循環/海報、自訂合成 |
/remotion-to-hyperframes | 將現有的 Remotion (React) 合成移植到 HyperFrames（遷移，非創作） |
消除歧義（僅在可能混淆時）：
- 動畫優先且無旁白（約 10 秒以下，動畫本身就是訊息）→
/motion-graphics，無論輸入為何。 - 一個 URL 或腳本 — 問一件事：這個網站是在銷售產品嗎？ 是（SaaS / 應用程式 / 產品 / 公司網站）→
/product-launch-video— 一個宣傳片，也是任何商業 URL 的預設選項，即使網站只是被提及名稱。否，或者使用者只想讓網站按原樣顯示（作品集 / 部落格 / 文件 / 個人 / 活動）→/website-to-video— 一個導覽。一個 GitHub PR 連結 →/pr-to-video；一個沒有產品或網站的概念 →/faceless-explainer。 - 現有素材 — 純口語字幕 →
/embedded-captions；設計過的覆蓋卡片 →/talking-head-recut。兩者都不會編輯素材本身（重新調整時間 / 重新著色 / 重新構圖 / 重新排序 / 音頻屬於 NLE 剪輯範疇 — 超出範圍）。 - 一首音樂曲目是輸入（一個音頻檔案，或一個可從中提取音頻的影片），且無旁白 →
/music-to-video— 音樂的節拍/能量驅動節奏。（有旁白的片段仍使用上方與輸入匹配的工作流程；/motion-graphics適用於簡短、非音樂驅動的無旁白動畫。） - 一個簡報 / 提案簡報 / 互動式簡報（離散的幻燈片、導航、簡報者模式）→
/slideshow— 輸出是一個可導航的簡報，而非渲染後的影片。一個明確的「幻燈片」請求直接進行；一個相鄰的觸發詞（「deck / slides / presentation / convert this page」）會讓/slideshow在創作前確認它是否為幻燈片，如果不是，則切換到適當的非幻燈片工作流程。 - 長度是指南，而非限制 — 意圖選擇工作流程；僅在片段明顯長於約 3 分鐘，或是靜態 / 循環 / 自訂格式時，才使用
/general-video。
選擇後 — 確保工作流程已安裝
一旦您選擇了工作流程，請在閱讀其技能之前執行更新步驟 — 工作流程技能是按需安裝的，因此您匹配到的技能可能尚未安裝在這台機器上（其觸發詞語存在於此路由器中，正是為了讓您可以路由到尚未安裝的技能）：
npx hyperframes skills update <workflow-name>
使用裸名稱，無需前導 / — 例如 npx hyperframes skills update pr-to-video。指定一個技能可確保它以及每個工作流程依賴的核心領域技能都已安裝且為最新：如果一切已就緒，則會快速進行無操作；如果沒有，則會精準安裝僅缺少/過期的技能 — 絕不會安裝完整套件。然後閱讀工作流程的技能並繼續。同樣的命令也適用於從能力對應中按需安裝領域技能（例如 npx hyperframes skills update figma）。
如果命令失敗，請向使用者顯示錯誤訊息，而不是憑記憶臨時拼湊工作流程。手動備援（沒有可用的 HyperFrames CLI）：npx skills add heygen-com/hyperframes --skill <workflow-name>；一次安裝所有技能：npx skills add heygen-com/hyperframes --all。
保持技能為最新
HyperFrames 技能是版本化的，並且懶加載：核心技能集會立即安裝，工作流程則在首次使用時安裝。
- 核心技能集 — 此路由器、
hyperframes-*領域技能和media-use。npx hyperframes init（每個創作工作流程在建立脚手架時都會執行）會檢查 GitHub 並刷新核心技能集以及任何其他已安裝的技能。它永遠不會擴展安裝 — 您未使用過的工作流程技能不會被拉取。在已是最新的機器上重新執行 init 是無操作；離線（或遇到速率限制）時，它會優雅降級，永遠不會硬失敗。--skip-skills標誌目前已被禁用（在 skills.sh 註冊表追上進度期間的臨時措施）；CI/測試透過HYPERFRAMES_SKIP_SKILLS=1環境變數選擇退出。 - 工作流程技能 — 在觸發時由上述的更新步驟（
skills update <workflow-name>）安裝和刷新。
如果某個任務行為異常，或在長時間構建之前，請確認已安裝的技能是否為最新：
- 檢查：
npx hyperframes skills check（加上--json可獲得機器可讀的結果；當任何已安裝的技能過期或核心技能集不完整時，會以非零狀態碼退出 — 尚未安裝的工作流程技能會被回報為可按需取得，而非失敗）。 - 更新：
npx hyperframes skills update— 將核心技能集和所有已安裝的技能刷新到最新版本，並移除不再發布的技能。不指定名稱時，它永遠不會安裝您未使用過的工作流程；指定技能名稱（skills update <name…>）則會額外安裝這些技能。 - 完整技能集，明確安裝：
npx hyperframes skills（或npx skills add heygen-com/hyperframes --all）。
當 render / lint / validate 運行檢測到過期的技能時，CLI 也會顯示一行提示。
工作流程詳情
/product-launch-video
- 輸入： 一個正在行銷的產品 — (a) 一個產品 URL（使用無頭 Chrome 爬取素材 + 品牌令牌），(b) 一個提及產品網站但沒有連結的腳本/簡報（PLV 會解析並爬取它，除非使用者選擇退出），或 (c) 一個無法推導出網站 /「不要爬取」的腳本（無擷取模式 — 選擇一個提供色板 + 設計系統的樣式預設集）。提供的腳本可以是逐字的配音或按場景重組 — PLV 會詢問。
- 輸出： 一個產品發布 / SaaS 宣傳片，作為 HyperFrames 合成 → MP4（最佳長度 30–90 秒）— 主題是產品的價值，而非網站的操作導覽。如果只是單純的網站導覽，請使用
/website-to-video。 - 觸發詞：「為 X 製作發布影片」、「為我們的網站製作宣傳片」、「在一分鐘內解釋我的 SaaS」、「將我的腳本變成 60 秒宣傳片」、「文字…