HyperFrames——請優先閱讀本文
任何 HyperFrames 任務都從這裡開始——尤其當沒有專案代理設定(CLAUDE.md / AGENTS.md / .cursorrules)時。以下是能力對應圖與影片路由器。
能力對應圖:哪個技能對應哪個意圖
| 你想要…… | 前往 |
|---|---|
| 製作影片(來自網址、摘要、主題、GitHub PR、現有素材,或單一元素來製作動畫) | 下方的影片路由器(§ 影片路由) |
| 撰寫投影片 / 簡報 / 提案簡報——離散幻燈片、片段、分支、熱區 | /slideshow |
撰寫 / 編輯 HTML 合成——data-* 合約、剪輯片段、音軌、子合成、變數 | /hyperframes-core |
| 動畫處理——原子運動規則、場景藍圖、轉場、執行時期轉接器(GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU) | /hyperframes-animation |
創意指導——design.md、調色盤、字體排印學、旁白、節奏規劃、音訊反應式 | /hyperframes-creative |
| 媒體前處理——TTS 語音旁白、背景音樂、轉錄、去背、字幕 | /hyperframes-media |
| CLI 開發迴圈——初始化、檢查、驗證、檢視、預覽、渲染、發布、診斷 | /hyperframes-cli |
安裝註冊表區塊 / 元件(hyperframes add) | /hyperframes-registry |
撰寫合約(每個計時元素都需要
data-start/data-duration/data-track-index;計時元素需要class="clip";GSAP 時間軸必須暫停並註冊在window.__timelines上;僅能使用確定性邏輯——不允許Date.now()/Math.random()/ 網路)不在這裡重複——它位於/hyperframes-core。在撰寫合成 HTML 之前,請先閱讀該文件。
HyperFrames 無法做什麼——請先檢查此處
HyperFrames 從程式碼撰寫 HTML 合成並將其渲染為 MP4。這個模型有明確的邊界。超出這些邊界的請求不是路由選擇問題——它們屬於無效範圍,因此請婉拒(或指向正確的工具),而不是嘗試套用工作流程。這些限制源於架構本身,而非單一請求:
- 渲染是確定性且自包含的。 每個值、資產和文字片段在您撰寫時就已嵌入;渲染過程中不會進行任何網路呼叫或即時/渲染時期的資料提取(核心規則:不允許
Date.now()/Math.random()/ 網路)。「在渲染時期即時更新數字」是不允許的——請在撰寫時提取資料一次並將其嵌入,否則就拒絕。 - 現有影片是疊加處理,而非編輯。 HyperFrames 在來源剪輯片段之上合成影格——
/embedded-captions添加字幕層,/graphic-overlays添加設計好的圖形卡片(下三層、數據提示、標題)——而底下的剪輯片段保持不變,但此舉不會對已編碼的影片串流進行後製處理。改變素材本身(其時間、色彩、構圖、順序或音訊)屬於 NLE 風格的剪輯,不在範圍內。 - Remotion 匯入是單向的。
/remotion-to-hyperframes將 Remotion 框架的 原始碼轉譯為 HyperFrames。沒有反向轉換(HyperFrames → Remotion,或 → 任何其他框架——超出範圍),而且非 Remotion 的 React / 網頁動畫原始碼沒有 Remotion 原始碼可供轉譯——請透過/general-video重新建立。 - 它無法憑空產生其未持有的輸入。 沒有螢幕 / 會話錄製、沒有攝影機擷取、沒有 AI 談話頭 / 唇形同步虛擬化身生成。如果素材或資產尚不存在,HyperFrames 無法憑空變出來——請要求使用者先提供(或使用正確的擷取工具)。
其他所有情況——從網址、摘要、主題、PR、待註解的素材,或單一待動畫元素製作影片——都在範圍內;請使用下方的路由器進行路由。
影片路由
本節僅了解頂層工作流程。它不會載入工作流程內部的階段、領域技能(hyperframes-*——請參閱上方的能力對應圖)或技術參考。
決策表
INPUT 類型(意圖)是主要軸線;OUTPUT 長度僅作為上限,而非關卡。 對於匹配的輸入,專門的工作流程可以處理最多約 3 分鐘的內容——您進入_哪個_工作流程是由意圖(輸入類型,以及對於文字而言的主題)決定的,而不是由長度決定。長度僅在頂端範圍才重要:真正較長的作品(3-5 分鐘的教學、5 分鐘以上的深入探討)屬於不同的範疇,並會路由到 /general-video。在 ≤~3 分鐘的頻寬內,第三個軸線將區分兩個文字驅動的工作流程——即主題:正在被_行銷_的產品與正在被_解釋_的主題(請參閱下方步驟 3 的消歧義規則)。
| 長度 / 輸入 | 產品發布(網址 / 摘要 / 腳本) | 一般網站 / 網址 | GitHub PR / 程式碼變更 | 主題 / 文章 / 筆記(無產品、無網址) | 現有影片(談話頭)† |
|---|---|---|---|---|---|
| ≤ ~3 分鐘 | /product-launch-video | /website-to-video | /pr-to-video | /faceless-explainer | /embedded-captions · /graphic-overlays † |
| 3-5 分鐘教學 | /general-video | /general-video | /general-video | /general-video | /embedded-captions · /graphic-overlays † |
| 5 分鐘以上深入探討 | /general-video | /general-video | /general-video | /general-video | /embedded-captions · /graphic-overlays † |
| 靜態 / 循環 | /general-video | /general-video | /general-video | /general-video | /general-video |
目前的涵蓋範圍:≤~3 分鐘頻寬對產品發布 / 一般網站 / GitHub-PR / 主題輸入有專門的工作流程(網址依_種類_然後_意圖_拆分——請參閱步驟 3),而現有影片欄位在任何長度下都由 /embedded-captions(字幕 / 隱藏式字幕)或 /graphic-overlays(設計好的圖形疊加層)涵蓋,依意圖拆分(請參閱步驟 2)。其他每個儲存格都是 /general-video——即通用的 HTML 合成撰寫流程(與輸入和長度無關):所有長於約 3 分鐘的內容(3-5 分鐘 / 5 分鐘以上列)以及每個靜態 / 循環格式。路由器永遠不會在可建立的影片處走入死胡同;唯一真正的「一般/無」答案是超出 HyperFrames 本身範圍的請求(例如對已完成影片檔案進行 NLE 風格的編輯——重新計時、重新著色、重新構圖、重新排序、音訊)。
† 現有素材依意圖拆分,而非長度。 字幕 / 隱藏式字幕 → /embedded-captions;設計好的圖形疊加層 / 包裝——下三層、數據提示、標題卡片、引用語—— → /graphic-overlays。兩者都是疊加在剪輯片段上,底下的播放保持不變;兩者都不會編輯素材本身。
類型短路(優先於表格)。 一個簡短(約 10 秒以下)、無旁白、設計驅動的動態圖形——動態文字、統計 / 圖表出現、標誌片頭、下三層 / 疊加層,或動畫推文 / 標題 / 擷取頁面亮點——路由到 /motion-graphics,無論輸入為何。這是一個 OUTPUT 類型,而非輸入類型,因此當需求明顯是動畫優先且無旁白時(請參閱步驟 2),它優先於上面的輸入類型表格。較長或帶旁白的處理方式則依輸入類型路由,或使用 /general-video。
遷移現有合成(特殊情況)
上方的表格用於從輸入建立影片。一個工作流程位於表格之外:如果使用者明確要求將現有的 Remotion(React)合成移植 / 轉換 / 遷移到 HyperFrames → /remotion-to-hyperframes。這是原始碼轉譯,而不是從輸入建立,因此它沒有 INPUT × LENGTH 的儲存格。僅在明確的遷移用語(「移植我的 Remotion 專案」、「轉換這個 Remotion 合成」、「將這個重寫為 HyperFrames」)時才路由到此處——順便提及 Remotion 不是觸發條件;預設使用建立表格或 /hyperframes-core。
路由程序
- 確定 INPUT 類型 + 目標長度。 路由需要知道影片的內容是什麼——其主題和輸入。如果主題本身未指定(例如「製作一個關於我們東西的影片」但沒有網址、指定的產品、主題或可用的資產),或者輸入類型未知,在進入任何工作流程之前先提問——先釐清;不要先叫用工作流程技能然後再提問,因為承諾一個工作流程本身就是路由決策。最多提問 2 個釐清問題:
- 「您的輸入是什麼——一個產品(網址或摘要)、一個一般網站 / 網址、一個 GitHub PR / 程式碼變更、一個需要解釋的主題或文章,還是現有的談話頭影片需要添加字幕?」
- 「目標長度——約 3 分鐘或以下,還是更長(3-5 分鐘的教學 / 5 分鐘以上的深入探討)?」
- 規格預設值——說明,不要詢問(這些不會影響路由,所以永遠不要讓它們阻塞路由):長寬比 16:9(引擎也支援** 9:16** 垂直——僅在使用者指定垂直目的地如 TikTok / Reels / Shorts 時才切換);旁白 / 字幕語言 = 使用者語言。僅在使用者提出異議時才確認;選擇的工作流程會在其步驟 0 重新確認自身的具體細節。
- 首先依 INPUT 類型(意圖)選擇;長度僅是上限,而非關卡。
- 簡短、設計驅動的動態圖形(類型短路,優先於輸入表格)——動畫本身即是訊息:動態文字、統計 / 數字累計、圖表出現、標誌片頭、下三層 / 疊加層,或動畫推文 / 標題 / 擷取頁面亮點;通常少於約 10 秒,無旁白 / 語音旁白 →
/motion-graphics。這是一個 OUTPUT 類型,而非輸入類型——當需求明顯是快速、無旁白、設計驅動的動畫作品時,無論輸入為何都路由至此。較長或帶旁白的相同素材處理方式則不屬於此(依輸入類型路由,或使用/general-video)。 - 現有談話頭影片(使用者有一段剪輯片段,並想在之上添加內容)→ 依意圖拆分,在任何長度下(輸入類型優先於長度):字幕 / 隱藏式字幕(口語文字轉為可讀文本)→
/embedded-captions;設計好的圖形疊加層——下三層、數據提示、標題資訊卡、引用語、經過圖形包裝的剪輯 →/graphic-overlays。(編輯素材_本身_——重新計時、重新著色、重新構圖、重新排序、音訊——屬於 NLE 風格,不在範圍內;請參閱 § HyperFrames 無法做什麼。) - GitHub PR / 程式碼變更(一個
github.com/<owner>/<repo>/pull/<N>連結、一個owner/repo#N引用,或「這個 PR」)→/pr-to-video(最多約 3 分鐘)。 - 否則(產品網址 / 摘要 / 主題文字):意圖透過步驟 3 選擇工作流程,且該工作流程可處理最多約 3 分鐘的內容——一個 15-30 秒的短宣傳片和一個約 100 秒的解說影片都依意圖路由,而非依長度。僅當目標明確長於約 3 分鐘(3-5 分鐘的教學、5 分鐘以上的深入探討)時,才路由到
/general-video(與長度無關的備用方案——請參閱步驟 4)。切勿將真正的長篇作品強制塞入 ≤~3 分鐘的工作流程——意圖在頻寬內決定,/general-video涵蓋其餘部分。
- 簡短、設計驅動的動態圖形(類型短路,優先於輸入表格)——動畫本身即是訊息:動態文字、統計 / 數字累計、圖表出現、標誌片頭、下三層 / 疊加層,或動畫推文 / 標題 / 擷取頁面亮點;通常少於約 10 秒,無旁白 / 語音旁白 →
- 消歧義 ≤~3 分鐘的網址 / 文字輸入(意圖拆分)。 有兩種拆分:
- 網址種類 + 意圖——網址不再自動歸類為 PLV;其_種類_然後_意圖_決定:GitHub PR 連結(
.../pull/<N>、owner/repo#N、「這個 PR」)→/pr-to-video;否則網站網址依意圖拆分——行銷 / 發布 / 推廣特定產品或 SaaS →/product-launch-video;將一般網站 → 影片(網站導覽、作品集 / 部落格 / 登陸頁面展示、來自網站自身視覺效果的社群短片段,或只是「將這個網站變成影片」)→/website-to-video。兩者都使用無頭 Chrome 進行爬取;PR 網址則透過gh讀取。當一個網站網址究竟是產品發布還是一般網站影片不明確時,提出一個問題。 - 產品 vs 主題(文字,無網址)——決定性問題是影片的內容是什麼,而非輸入格式:
- 一個正在被行銷、發布或推廣的特定產品 / 公司 / SaaS / 應用程式 / 網站 →
/product-launch-video。 - 一個正在被解釋的概念 / 主題 / 文章 / 事情如何運作,沒有產品且沒有網址 →
/faceless-explainer。 - 打破平手:「推廣 / 發布 / 銷售 / 我們的產品」用語 → PLV。「解釋 / 教導 / X 如何運作 / 什麼是 X」且無產品 → 無臉。無臉的內建風格始終是
pin-and-paper。 - 沒有貼上網址但已命名的網站仍屬於 PLV。 提及產品或其網站的腳本(「我們的網站是 acme.io」、「推廣 <品牌>」)即使沒有可點擊的連結仍路由到 PLV——PLV 可以搜尋網站並爬取它以取得品牌資產(除非使用者選擇退出,→ 無擷取預設模式)。不貼上網址並不會使其成為無臉 / 無擷取任務。對於提供的腳本,逐字 vs 重構的選擇是 PLV 內部的問題,且永遠不會改變路由。
- 衝突線索 → 提問,不要猜測。 如果提供的來源是產品的自有行銷(其登陸頁面、宣傳摘要……
- 一個正在被行銷、發布或推廣的特定產品 / 公司 / SaaS / 應用程式 / 網站 →
- 網址種類 + 意圖——網址不再自動歸類為 PLV;其_種類_然後_意圖_決定:GitHub PR 連結(
(注意:由於原始內容被截斷,翻譯亦於此處對應截止。完整的 SKILL.md 應包含完整的「影片路由」章節,包括步驟 4(/general-video 的說明)以及任何後續的工作流程細節。)