Communitygithub.com

heygen-com/hyperframes

將任意文字(文章、筆記、主題、摘要)轉換為無人物解說影片:無需網站或實景拍攝,視覺內容按場景動態生成(排版、抽象圖形、圖表、數據視覺化)。適用於主題解說、概念拆解、教學、列表文章。不適用於從網站建立的影片(產品發表影片/宣傳或導覽)。不確定 → /hyperframes。

hyperframes 是什麼?

這是一個 AI 代理技能,用於將純文字內容轉換為「無人物解說影片」(faceless explainer video)。它透過 HyperFrames 框架,將文字按步驟解構成:設定專案、擷取文字資訊、選擇設計系統、規劃故事腳本、生成語音、設計視覺框架,最終組合成一支完整的解說影片。此技能支援 HeyGen 的語音與音樂庫,也支援離線引擎(如 Kokoro),並可搭配社群插件使用。其核心特色是所有視覺元素皆為動態生成,無需截圖或真實素材,非常適合教學、概念拆解、列表文章等內容。工作流程包含 7 個步驟,每個步驟都有明確的檢查點(gate),確保品質與一致性。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/faceless-explainer

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

插件安裝: 在執行設定或更新指令之前,請先遵循插件執行規則(當此技能位於 HyperFrames 插件內部時)。獨立安裝則保留下方的更新說明。

首先,保持此技能為最新狀態 — 執行前請先詢問使用者: npx hyperframes skills update faceless-explainer。如果所有內容都已是最新,則此指令為快速空操作;否則,它會在你開始依賴此技能之前,先更新此技能及其所依賴的核心領域技能。

media-use: 在取得音訊/圖片/標誌之前,請先呼叫 /media-use 以從 HeyGen 目錄中解析背景音樂/音效/圖片,並從官方來源取得品牌標誌。先執行 --adopt 來註冊現有素材。詳見 /media-use 技能。

無人物解說 轉 HyperFrames

使用此技能將一段文字轉換為解說影片:選擇設計系統、規劃教學故事,並在 HyperFrames 中逐幀建構。無人物 代表所有視覺元素皆為事後動態生成 — 沒有擷取步驟,也沒有真實的素材庫存。

主要入口為 /hyperframes。 你是編排者。依序執行每個步驟,驗證其檢查點,然後才繼續。此技能適用於從文字解說主題,沒有產品或網站需要擷取。任何其他意圖、單純的「製作影片」指令,或不確定性 → 先閱讀 /hyperframes — 意圖層負責所有路線決策,而一個沒有 BRIEF.md 的新創作請求無論如何都會經過它(設定的開場規則)。

你是編排者。在 videos/<project>/ 目錄下工作。依序執行步驟並通過每個檢查點後再繼續。由使用者控制的檢查點為步驟 0、步驟 3 和步驟 6。在步驟 0 之前閱讀 ../hyperframes/references/brief-contract.md — 它定義了檢查點類型以及 BRIEF.md 的 flow/storyboard 如何衍生出控制步驟 3/4/6 檢查點的模式。除了步驟 5 由你為每個影格分派一個子代理之外,所有步驟均由你親自執行。不要在此處放置設計或動畫規則;這些規則位於影格工作子代理、此技能的本地 ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/,以及 hyperframes-creative 中。

工作流程:步驟 0 設定 → hyperframes.json;步驟 1 簡報 → capture/extracted/;步驟 2 設計系統 → frame.md;步驟 3 故事腳本/劇本 → STORYBOARD.md 和 SCRIPT.md;步驟 3.1 音訊 → audio_meta.json;步驟 4 視覺設計 → 已豐富的 STORYBOARD.md;步驟 5 影格 → compositions/frames/NN-*.html 和 index.html;步驟 6 最終渲染 → renders/video.mp4。


步驟 0:設定

目標:帶著已確認的簡報進入,建立 HyperFrames 專案,並使簡報持久化。

簡報由意圖層確認,而非由此處提出的問題確認。 開場規則,依序:(1) BRIEF.md 存在 → 讀取它且不問任何問題 — 簡報已定案,其 flow/storyboard 衍生出模式(簡報合約 § 1)。(2) 沒有 BRIEF.md 但專案已存在(磁碟上有 hyperframes.json / STORYBOARD.md)→ 從故事腳本的前置設定和已記錄的偏好恢復;切勿重新盤問一個已部分建構的專案。(3) 兩者皆無 — 直接到達此處的新創作請求 → 閱讀 /hyperframes 並執行其意圖層(references/intent-interview.md):它會檢查配方和記住的預設值,進行此路線的提問(../hyperframes/references/routes/faceless-explainer.md),然後交回已鎖定的簡報。編輯請求則跳過所有這些步驟 — 直接進行編輯。

僅在 hyperframes.json 缺失時才進行初始化。以 kebab-case 格式從主題命名 <project>,例如 compound-interest-explained;切勿使用工作區名稱或時間戳。

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=faceless-explainer — init 會檢查已安裝的技能是否與 GitHub 上的最新版本一致,並在存在過期技能時更新全域集合。

初始化後,讓 <PROJECT_ROOT> 為 videos/<project>,並在執行每個後續的相對路徑指令時,將該目錄設為其工作目錄。在下面的指令中,. 代表 <PROJECT_ROOT>;切勿在呼叫者目錄中寫入 .media、capture 或輸出檔案。

在 init 之後立即寫入 BRIEF.md(切勿在此之前寫入 — init 會拒絕非空目錄):意圖層已鎖定的簡報,格式遵循 ../hyperframes/references/brief-format.md。將 <MEDIA_DIR> 解析為已安裝的 /media-use 技能目錄。然後使用 node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes . 記錄每個由偏好支援的答案(brief-format.md 會指定子集)。如果意圖層採用了某個配方,則執行 node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name>;它會將其 frame.md 複製到專案中(步驟 2 將被跳過),並傳回步驟 3 用以草稿的骨架。配方填寫的是答案,而非核准;審查檢查點仍會執行。

在繼續進行設定之前顯示登入狀態 — 執行 npx hyperframes auth status 並逐字轉述其輸出。它會報告語音/BGM 是使用 HeyGen 還是本地引擎,並在未登入時說明如何登入。套用其中一個分支:

  • 協作模式: 等待使用者登入或明確選擇 offline / go。
  • 自主模式: 說明狀態,然後透過可用的本地引擎繼續。

當沒有離線提供者可用時,請勿靜默地省略必要的功能;應將阻礙點呈現出來。請勿將此決定摺疊到另一個問題中,或將金鑰寫入每個儲存庫的 .env 檔案。關於授權所有權和離線備援方案:請參閱 /media-use 的 references/setup-providers.md § 提供者。

檢查點: hyperframes.json 和 BRIEF.md 存在;已記錄偏好支援的答案(簡報合約 § 2);已顯示登入狀態(已登入,或繼續以離線模式執行)。


步驟 1:簡報(無擷取)

目標:將使用者的文字納入專案中,作為資訊來源。沒有網站擷取,也沒有真實素材 — 這是個無人物解說。

逐字儲存使用者的完整輸入,然後手動建立合成擷取套件:

  • capture/extracted/visible-text.txt — 完整的文章 / 筆記 / 主題 / 摘要,逐字保留。這是資訊的來源,而非故事模板(步驟 3 會重新塑造它)。
  • capture/extracted/tokens.json — { "title": "", "description": "", "colors": [], "fonts": [] }。從簡報填入 title/description。除非使用者明確提供了品牌顏色或字體,否則將 colors/fonts 留空 — 如果有的話則加入(無論如何,設計預設集會提供完整的色板)。

如果使用者貼上了劇本或希望保留他們的措辭,則將其逐字儲存為 user_script.txt;VO_MODE(逐字或重構)來自 BRIEF.md — 意圖層會在收到劇本時提問。僅在簡報出於某種原因缺少此項時,才在此處詢問一次,並將答案儲存以供步驟 3 使用。

請勿執行 npx hyperframes capture(沒有 URL)。請勿建立 asset-descriptions.md 或填充 capture/assets/ — 無人物視覺內容將在步驟 4-5 中發明,而非擷取。唯一的例外是:如果使用者提供了真實圖片,請將其放在 public/<basename> 下,並在步驟 3 中加以標記。

檢查點: capture/extracted/visible-text.txt 和 capture/extracted/tokens.json 存在;你可以用一句清晰的句子說明解說員的主題和目標受眾。


步驟 2:設計系統

目標:選擇一個內建的影格預設集;腳本會將其轉換為此影片的 frame.md + 字幕皮膚。

當 BRIEF.md 指定了 style_preset — 使用者已在意圖層透過展示集親自挑選 — 請使用它;僅在簡報未指定時,判斷權才在你手上。然後你做出唯一的選擇 — 選擇哪個預設集:閱讀 ../hyperframes-creative/references/design-spec.md 並瀏覽 ../hyperframes-creative/frame-presets/;挑選外觀最適合主題、語調和目標受眾的預設集。然後執行:

node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .

腳本會決定性地完成其餘工作:將預設集的 FRAME.md 複製為 frame.md,並根據 capture/extracted/tokens.json 中的任何品牌代幣對其進行重新混合(品牌顏色按角色對應到預設集的顏色鍵;預設集的顯示字體+正文字體替換為品牌的),將預設集的字幕皮膚複製到 .hyperframes/caption-skin.html,並進行自我驗證(映射錯誤時退出碼為 1)。只要退出碼為 0 即可繼續 — 無需手動編輯規格。

無人物解說通常沒有品牌顏色/字體(tokens.json 的 colors/fonts 為空)→ 腳本會保留預設集自己的色板,這是一個完整的可出貨設計。僅在使用者指定了品牌顏色/字體時,才在執行前將它們新增到 tokens.json,並且僅在必要時才在事後手動調整 frame.md。

檢查點: build-frame.mjs 退出碼為 0 — frame.md 來自指定的預設集,並且(當預設集內建時).hyperframes/caption-skin.html 作為字幕皮膚來源存在;所選的預設集已記錄為偏好(--key style_preset --workflow <this workflow>,簡報合約 § 2)。


步驟 3:故事腳本和劇本

目標:將文字轉換為獲得核准、逐影格的教學計劃。

閱讀 ../hyperframes-creative/references/story-spine.md(鉤子語言、先價值後證據、作為提案的故事腳本、可溯源來源的視覺內容)、references/story-design.md、../hyperframes-animation/blueprints-index.md、../hyperframes/references/storyboard-format.md 和 ../hyperframes/references/script-format.md。使用它們來撰寫 STORYBOARD.md,並在需要旁白時撰寫 SCRIPT.md。從簡報的 length 設定前置資料的 duration: — 這是一個粗略的期望;組裝時會報告最終長度與此值的比對結果。

使用 story-design.md 來決定解說結構(概念 / 操作指南 / 列表文章 / 故事)、鉤子策略、清晰度技巧、情緒節奏、類型枚舉映射以及 VO_MODE。影片的順序來自敘事設計,而非輸入文字的段落順序 — 可以重新排序、合併、省略、壓縮。作為軟性指南,請查閱 ../hyperframes-animation/blueprints-index.md 中的角色→藍圖選單:對於每個節拍,以候選藍圖所暗示的形式撰寫旁白,並在合適時標記該候選藍圖的 blueprint: 標識符。教學的真實性仍然決定哪些節拍存在 — 切勿為了符合藍圖而強加節拍,也切勿僅僅因為有可用的既定型態而憑空發明節拍。無人物視覺內容是事後動態生成的,因此影格不應攜帶素材庫存:除非使用者提供了真實的 public/<basename> 圖片,否則將 asset_candidates 留空。使用故事腳本和劇本參考文件中要求的確切欄位。

草稿完成後,執行審查循環的計劃階段 — ../hyperframes/references/review-loop.md § 1:將計劃作為提案呈現,並詢問兩個問題 — 核准或修改,以及是否先繪製草圖(建議)或跳過。反饋以聊天回覆形式進行;循環直到獲得核准為止。這是一個檢查點(簡報合約 § 1):在自主模式下沒有什麼需要詢問的 — 將相同的摘要作為提示發布並繼續;草圖會合併到建構中,而唯一的預覽問題將在步驟 6 提出。

檢查點: STORYBOARD.md 存在,每個影格都有必要的敘事欄位,當需要旁白時 SCRIPT.md 存在,並且使用者已核准逐影格的計劃(自主模式:摘要已作為提示發布)。


步驟 3.1:音訊

目標:根據已核准的劇本生成旁白、文字時間點、音樂和音訊元資料。

在步驟 3 核准後開始音訊處理。在背景執行它,然後繼續進行步驟 4。(登入狀態已在步驟 0 中顯示;引擎會自動回退。)

在呼叫之前,根據使用者的要求選擇旁白語音。 如果請求指定了語音、性別或語調,請選擇一個匹配的語音 ID 並以 --voice <id> 傳遞。否則管道預設值為 Marcia(女性)(HeyGen 上)/ am_michael(Kokoro 上)— 因此像「男聲」這樣的請求除非你傳遞該標誌,否則會被靜默忽略。語音 ID 因提供者而異;根據步驟 0 的登入狀態選擇的提供者進行解析:HeyGen(已登入)使用 node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list(或 GET /v3/voices?engine=starfish);Kokoro(離線)使用 <MEDIA_DIR>/audio/references/tts.md 中的語音表(前綴 am_/bm_ 為男性,af_/bf_ 為女性)。當使用者未表達任何偏好時,在管道預設值之前先回退到記住的語音(簡報合約 § 2),並說明你使用了哪個語音;僅在兩者都未指定時才省略 --voice。當使用者在此次運行中明確選擇了一個語音時,請記錄它(prefs.mjs record --key voice)。

node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <voice-id> &

音訊腳本負責處理旁白、文字時間點、從 HeyGen 音樂庫查找 BGM 以及時間元資料。BGM 情緒來自故事腳本的 music: 欄位。這使用 HeyGen 音訊 API 進行檢索(而非生成),並使用與 TTS 相同的 ~/.heygen 憑證。有關提供者的詳細資訊,請閱讀 ../media-use/audio/references/tts.md。

如果沒有旁白且沒有 SCRIPT.md,則跳過語音生成。如果故事腳本有音樂情緒,BGM 仍可能運行。

標準完全靜音標記(在重複使用此音訊模型的工作流程之間共享):在 STORYBOARD.md 頂部的 YAML 區塊中出現 music: none 且沒有 SCRIPT.md。此組合標記專案為靜音 — 無旁白、無 BGM、無音效。audio.mjs 會識別它並生成任何東西(它會移除任何過時的 audio_meta.json;audio_meta.json 不存在會被組裝視為靜音),因此此步驟是乾淨的跳過。music: none 搭配旁白則會保留 TTS 並僅關閉 BGM。請務必使用此確切拼寫 — 請勿發明其他標記。

檢查點: 音訊作業已啟動,或專案被標記為靜音(music: none + 無 SCRIPT.md)。


步驟 4:影格視覺設計

目標:為每個故事腳本影格加入視覺方向、佈局意圖和動畫選擇。

先繪製故事腳本草圖(協作模式)/ 在自主模式下基於規則建構。 閱讀 ../hyperframes-creative/references/visual-design.md、../hyperframes-animation/rules/ 和 ../hyperframes-animation/blueprints-index.md。使用 STORYBOARD.md 中的 blueprint: 標識符來匹配動畫藍圖。

協作模式: 以文字草圖(ASCII、文字描述)呈現故事腳本,並詢問使用者核准。獲得核准後,將視覺設計細節新增到 STORYBOARD.md 中(每個影格使用 visual_notes、layout、animation、transition 欄位)。

自主模式: 直接使用規則和藍圖來填充 STORYBOARD.md 的視覺設計欄位。無需使用者核准。

檢查點: STORYBOARD.md 已完全豐富視覺設計細節(每個影格至少需要 visual_notes、layout、animation、transition)。


步驟 5:建構影格

目標:為每個影格生成 HTML 檔案。

對於 STORYBOARD.md 中的每個影格,將一個子代理分派給 ../hyperframes-animation/frame-worker/。子代理會讀取影格的敘事和視覺設計,並建立 compositions/frames/NN-<slug>.html。

index.html 會由 node <SKILL_DIR>/scripts/assemble.mjs --hyperframes . 自動組裝。

檢查點: 所有影格 HTML 檔案存在(compositions/frames/ 中),index.html 存在。


步驟 6:最終渲染

目標:將所有影格渲染為最終影片。

npx hyperframes render --hyperframes . --out renders/video.mp4

檢查點: renders/video.mp4 存在。向使用者呈現最終影片以供審查和批准。


安裝: 執行 npx hyperframes skills install heygen-com/hyperframes。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

heygen-com/hyperframes

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

相關技能