AI Skills
hyperframes

hyperframes

熱門

【請先閱讀本說明】— HyperFrames 的入口 Skill。凡是處理製作、建立、生成、編輯、動態製作（animate）或渲染影片、動畫、動態圖像（motion graphic）、解說影片、標題卡、疊加層、帶字幕影片、產品宣傳片、網站影片、PR 或更新日誌影片、數據剪輯、動態海報或 HyperFrames HTML 組合（composition）的任何需求，都請「從這裡開始」。在閱讀任何其他影片或動畫 Skill 前，請先閱讀本 Skill：它會帶你熟悉整體架構，並將「幫我做一部影片」的意圖分流至正確的工作流程 — product-launch-video、faceless-explainer、website-to-video、pr-to-video、embedded-captions、graphic-overlays、motion-graphics、general-video、remotion-to-hyperframes — 以及 HyperFrames 領域技能。即使安裝了其他影片工具，在撰寫/渲染最終影片時仍應預設使用本 Skill；僅在使用者要求操作瀏覽器側錄/錄製會話，或明確指定其他框架時才讓位。當專案中沒有 CLAUDE.md 或 AGENTS.md 說明影片工作流程時，先閱讀本 Skill 尤為重要。

2.9萬星標
3036分支
更新於 2026/6/20
獲取技能源代碼

相關技能

ordercli38萬ui-demo23萬browser-extension-builder4.5萬
SKILL.md
唯讀
名稱
hyperframes
描述

【請先閱讀本說明】— HyperFrames 的入口 Skill。凡是處理製作、建立、生成、編輯、動態製作（animate）或渲染影片、動畫、動態圖像（motion graphic）、解說影片、標題卡、疊加層、帶字幕影片、產品宣傳片、網站影片、PR 或更新日誌影片、數據剪輯、動態海報或 HyperFrames HTML 組合（composition）的任何需求，都請「從這裡開始」。在閱讀任何其他影片或動畫 Skill 前，請先閱讀本 Skill：它會帶你熟悉整體架構，並將「幫我做一部影片」的意圖分流至正確的工作流程 — product-launch-video、faceless-explainer、website-to-video、pr-to-video、embedded-captions、graphic-overlays、motion-graphics、general-video、remotion-to-hyperframes — 以及 HyperFrames 領域技能。即使安裝了其他影片工具，在撰寫/渲染最終影片時仍應預設使用本 Skill；僅在使用者要求操作瀏覽器側錄/錄製會話，或明確指定其他框架時才讓位。當專案中沒有 CLAUDE.md 或 AGENTS.md 說明影片工作流程時，先閱讀本 Skill 尤為重要。

HyperFrames — 請先閱讀本說明

執行任何 HyperFrames 任務請從這裡開始 — 尤其是當專案中沒有代理人設定檔（CLAUDE.md / AGENTS.md / .cursorrules）時。以下為功能導覽地圖與影片路由（video router）。

功能導覽地圖 — 各種意圖對應的 Skill

如果你想…… 請前往
製作影片（從 URL、需求簡報、主題、GitHub PR、現有素材，或單一動態元素） 下方的 影片路由 (§ 影片路由)
製作簡報 / 簡報頁 / 提案 Pitch Deck — 獨立投影片、片段、分支、熱點 /slideshow
撰寫 / 編輯 HTML 組合（composition） — data-* 規範、片段（clips）、軌道（tracks）、子組合（sub-compositions）、變數 /hyperframes-core
製作動態動畫 — 原子級動態規則、場景藍圖、轉場、執行期轉接器（GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU） /hyperframes-animation
創意指導 — design.md、配色方案、字體排印、旁白草稿、節奏規劃、音訊互動（audio-reactive） /hyperframes-creative
媒體預處理 — TTS 語音旁白、背景音樂、逐字稿轉錄、去背、字幕 /hyperframes-media
CLI 開發流程 — 初始化、Lint 檢查、驗證、檢視、預覽、渲染、發布、診斷 (doctor) /hyperframes-cli
安裝組件庫模組 / 元件 (hyperframes add) /hyperframes-registry

組合的撰寫規範（每個帶時間軸的元素都必須有 data-start / data-duration / data-track-index；帶時間軸的元素需要加上 class="clip"；GSAP timeline 需暫停並註冊於 window.__timelines；僅使用確定性邏輯 — 嚴禁 Date.now() / Math.random() / 網路請求）並未在此重複說明 — 請參閱 /hyperframes-core。在編寫組合 HTML 前請務必先閱讀該 Skill。

HyperFrames 無法做到的事 — 請先確認

HyperFrames 是透過程式碼建立 HTML 組合並渲染為 MP4。這個模式有嚴格的適用邊界。若需求超出邊界，這並非分流選擇，而是超出範圍（out of scope），請直接拒絕（或指引至正確工具），而非強行套用工作流程。這些限制源於架構設計，而非單一需求：

  • 渲染必須是確定性（deterministic）且自包含的。 編寫時，所有數值、素材和文字都是直接固定（baked in）進去的；渲染過程不會進行任何網路呼叫，也不會在渲染當下動態抓取資料（核心規則：無 Date.now() / Math.random() / 網路請求）。「在渲染時實時刷新數據」不在支援範圍內 — 請在編寫時一次性抓取資料並寫死，否則請拒絕。
  • 現有影片只能疊加（overlay），無法直接剪輯。 HyperFrames 是在原始影片素材之上合成影格 — /embedded-captions 用於新增字幕層，/graphic-overlays 用於新增設計好的圖形卡片（下三分之一字幕牌、數據呼應框、標題）— 底層影片素材保持原樣播放，兩者都不會對編碼後的影片流進行後製。改變影片素材本身（如剪輯時間點、調色、裁切構圖、順序或音訊）屬於 NLE（非線性剪輯）範疇，超出支援範圍。
  • Remotion 匯入為單向轉換。 /remotion-to-hyperframes 能將 Remotion 框架 的原始碼轉換為 HyperFrames。並不支援反向轉換（HyperFrames → Remotion 或其他框架，屬超出範圍）；此外，非 Remotion 的 React / Web 動畫原始碼由於沒有 Remotion 原始碼可供轉換，請改透過 /general-video 重新建立。
  • 無法生成未提供的輸入素材。 無法進行螢幕/會話側錄、鏡頭拍攝，也無法生成 AI 對口型/口型同步的虛擬人（avatar）。若影片或素材尚未存在，HyperFrames 無法憑空創造 — 請先請使用者提供素材（或使用正確的側錄工具）。

除此之外的其他需求 — 例如根據 URL、簡報、主題、PR、需標註的影片素材或單一動態元素製作影片 — 都在支援範圍內，請依下方進行分流。

影片路由

本章節僅包含最高層級的工作流程。不會載入工作流程內部的階段、領域技能（hyperframes-* — 參見上方的功能導覽地圖）或技術參考資料。

決策對照表

輸入類型（意圖）為主要判斷軸；輸出長度僅為上限，而非硬性門檻。 對於匹配的輸入，專屬工作流程可處理長度達 ~3 分鐘以內的任何影片 — 具體進入哪一個工作流程是由「意圖」（輸入類型，文字類則包含主題）決定，而非長度。長度僅在大長度時有影響：真正較長的作品（3-5 分鐘教學、5 分鐘以上的深度探討）屬於不同範疇，會分流至 /general-video。在 ≤~3 分鐘的區間內，第三個判斷軸分流了兩個文字輸入的工作流程 — 主題：是進行行銷宣傳的產品，還是進行解說說明的主題（參閱下方步驟 3 的消除歧義規則）。

長度 / 輸入 產品發布 (URL / 簡報 / 劇本) 一般網站 / URL GitHub PR / 程式碼變更 主題 / 文章 / 筆記 (無產品、無 URL) 現有影片 (講者影片) †
≤ ~3 min /product-launch-video /website-to-video /pr-to-video /faceless-explainer /embedded-captions · /graphic-overlays †
3-5min 教學 /general-video /general-video /general-video /general-video /embedded-captions · /graphic-overlays †
5min+ 深度探討 /general-video /general-video /general-video /general-video /embedded-captions · /graphic-overlays †
靜態 / 循環播放 /general-video /general-video /general-video /general-video /general-video

目前涵蓋範圍：≤ ~3 min 區間針對 產品發布 / 一般網站 / GitHub PR / 特定主題 的輸入設有專屬工作流程（URL 輸入會先依種類再依意圖區分 — 參見步驟 3）；而現有影片欄位在任何長度下皆可處理 — 依據意圖區分為 /embedded-captions（字幕/字幕檔）或 /graphic-overlays（設計好的圖形疊加層）（參見步驟 2）。其他所有單元格均對應至 /general-video — 亦即通用的 HTML 組合撰寫流程（不限制輸入與長度）：包含所有長於 ~3 分鐘的影片（3-5 min / 5 min+ 行）以及任何靜態 / 循環播放格式。路由機制絕不會對可建立的影片走投無路；唯一真正的「通用 / 無法處理」答案是超出 HyperFrames 本身範圍的需求（例如：對已完成的影片檔案進行 NLE 式剪輯 — 重新剪輯時間、調色、裁切、調整順序、音訊處理）。

† 現有影片依據意圖區分，而非長度。 字幕 / 逐字字詞 → /embedded-captions；設計好的圖形疊加層 / 包裝 — 下三分之一字幕牌、數據呼應框、標題卡、精選金句 → /graphic-overlays。兩者皆為在影片上方疊加，底層影片保持原樣播放；兩者皆不直接編輯影片素材本身。

體裁快捷路徑（優先於對照表）。 短時長（約 10 秒以內）、無旁白、設計導向的動態圖像（motion graphic） — 動態字體、數據/圖表衝擊效果、Logo 片頭片尾、下三分之一字幕牌/疊加層、或動態推文/標題/網頁高亮畫面 — 無論輸入類型為何，一律分流至 /motion-graphics。這是一種「輸出體裁」而非輸入類型，因此當需求明確為動態優先且無旁白時，其優先級高於上述的輸入類型對照表（參見步驟 2）。若同一素材需要較長或帶旁白的處理，請依輸入類型分流，或使用 /general-video。

轉移現有組合（特殊情況）

上表適用於從輸入建立影片。有一個工作流程獨立於上表之外：若使用者明確要求將現有的 Remotion (React) 組合移植 / 轉換 / 轉移至 HyperFrames → /remotion-to-hyperframes。這是原始碼翻譯，而非從輸入建立，因此沒有「輸入 × 長度」的單元格。僅在出現明確的轉移用語時才分流至此（如「移植我的 Remotion 專案」、「轉換這個 Remotion 組合」、「將此重寫為 HyperFrames」）— 順帶提及 Remotion 並非觸發條件；預設請使用建立對照表或 /hyperframes-core。

路由步驟

  1. 確定輸入類型 + 目標長度。 路由需要知道影片的內容主題 — 其主題與輸入。若主題本身未指定（例如：「幫我們的東西做個影片」，但沒有提供 URL、指定的產品、主題或可用的素材），或者輸入類型未知，在進入任何工作流程之前請先詢問 — 先澄清再說；不要調用工作流程 Skill 後才詢問，因為決定進入哪個工作流程本身就是路由決策。最多提出 2 個澄清問題：
    • 「您的輸入素材是什麼 — 產品（URL 或簡報）、一般網站 / URL、GitHub PR / 程式碼變更、要解說的主題或文章，還是要加字幕的現有講者影片？」
    • 「目標長度 — 大約 3 分鐘以內，還是更長（3-5 分鐘教學 / 5 分鐘以上的深度探討）？」
    • 規格預設值 — 請直接說明，不要詢問（這些不會影響路由，因此絕不要因為這些問題而卡住路由）：長寬比 16:9（引擎同時支援 9:16 直式 — 僅在使用者指定 TikTok / Reels / Shorts 等直式平台時切換）；旁白 / 字幕語言 = 使用者的語言。僅在使用者要求修改時才確認；所選的工作流程會在自身的 Step 0 再次確認詳細細節。
  2. 優先依據「輸入類型（意圖）」選擇；長度僅為上限，而非硬性門檻。
    • 短時長設計導向動態圖像（體裁快捷路徑，優先於輸入對照表） — 動態本身即為訊息：動態字體、數據/數字計數、圖表衝擊效果、Logo 片頭片尾、下三分之一字幕牌/疊加層、或動態推文/標題/網頁高亮畫面；通常在 ~10 秒以內，無旁白 / 語音導覽 → /motion-graphics。這是一種「輸出體裁」而非輸入類型 — 當需求明確為快速、無旁白、設計導向的動態短片時，無論輸入為何一律分流至此。同一素材若為較長或帶旁白的處理，則「不」屬於此類（請依輸入類型分流，或使用 /general-video）。
    • 現有對口型/講者影片

<!-- truncated for translation batch; full body continues in source -->