Communitygithub.com

kinyias/hyperframes-templates

將任意文字——文章、筆記、主題、簡報——轉換為無人物解說影片:無需網站或實景素材,視覺效果按場景原創(字體設計、抽象圖形、圖表、資料視覺化)。適用於主題解說、概念拆解、教學指南、清單式影片。非基於網站的產品宣傳或導覽影片。不明確時 → /hyperframes。

hyperframes-templates 是什麼?

此技能旨在將純文字內容(如文章、筆記或概念)轉化為「無人物解說影片」,完全依賴動態字體、抽象圖形、圖表等原創視覺元素,無需任何網站截圖或實體素材。作為 HyperFrames 框架的一部分,它提供一個結構化的六步驟工作流程,從專案初始化、文字匯入、設計系統選擇、腳本與分鏡規劃,到最終的幀動畫合成與渲染輸出。使用者無需具備影片或設計專業知識,只需提供文字主題,技能便會引導設定、生成分鏡與旁白腳本,並自動產出可編輯的 HTML 幀與最終影片。此技能支援 HeyGen 語音與音樂庫、Kokoro 離線 TTS 等音訊引擎,可在線上與離線模式下運作,並與 HyperFrames 生態系統中的其他技能(如 `/media-use` 和 `/hyperframes`)緊密整合。 **支援平台:** Claude Code 與 HyperFrames 環境。 **運作方式:** 依據預定義的分鏡合約、設計規範與創意規則,透過 CLI 指令分步推進,每步完成後需通過檢查點(Gate)才能繼續。

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

在你喜歡的 AI 中提問

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

說明文件

外掛安裝: 在執行設定或更新指令前,若此技能位於 HyperFrames 外掛內,請先遵循外掛執行規則。獨立安裝則保留下方更新說明。

首先,保持此技能最新——執行前請先徵求使用者同意: npx hyperframes skills update faceless-explainer。若所有內容皆為最新,則快速跳過(無實際操作);否則會更新此技能及其依賴的核心領域技能。

媒體使用: 在取得音訊/圖片/品牌標誌前,請先呼叫 /media-use 從 HeyGen 目錄解析 BGM/SFX/圖片,並從官方來源取得品牌標誌。先執行 --adopt 以註冊現有資產。請參閱 /media-use 技能。當主機應用程式提供其專屬的音樂或音效工具時,請使用那些工具來處理音樂與音效。

無人物解說 → HyperFrames

使用此技能將文字內容轉化為解說影片:選擇設計系統、規劃教學故事,並在 HyperFrames 中逐幀建構。無人物意味著所有視覺效果皆於後續流程原創——無需擷取步驟,也無實際資產清單。

主要入口是 /hyperframes。 你是編排者。依序執行每個步驟,通過其關卡,然後才繼續。此技能用於從文字解說主題,無產品、無網站可供擷取。任何其他意圖、單純「製作影片」或任何不確定性 → 請先閱讀 /hyperframes——意圖層擁有所有路線決策權,且未附 BRIEF.md 的全新創作無論如何都需透過它(設定的開場規則)。

你是編排者。在 videos/<專案>/ 目錄下工作。依序執行步驟並在繼續前通過每個關卡。使用者關卡為步驟 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 格式,例如 compound-interest-explained;切勿使用工作區名稱或時間戳。

npx hyperframes init "videos/<專案>" --non-interactive --example=blank --skill=faceless-explainer——init 會檢查已安裝的技能是否為 GitHub 上的最新版本,並更新過時的全域技能組。

初始化後,令 <PROJECT_ROOT> 為 videos/<專案>,並將所有後續的相對路徑命令以此目錄作為其工作目錄執行。在下方指令中,. 代表 <PROJECT_ROOT>;切勿在呼叫者目錄中寫入 .media、capture 或輸出檔案。

初始化後立即寫入 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 <名稱>;它會將其 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 <名稱> --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 <此工作流程>,簡報合約 § 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> 傳遞。否則,管線預設為 HeyGen 的 Marcia(女性) 或 Kokoro 的 am_michael——因此,像「男聲」這樣的請求若不傳遞標誌則會被靜默忽略。語音 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 <語音-id> &

音訊腳本處理旁白、單字時間戳、從 HeyGen 音樂庫查詢 BGM 以及計時元資料。BGM 情緒來自分鏡的 music: 欄位。這使用 HeyGen 音訊 API 進行檢索,而非生成,並使用與 TTS 相同的 ~/.heygen 憑證。有關提供者詳細資訊,請閱讀 ../media-use/audio/references/tts.md。當主機應用程式的自有工具提供音樂或音效時,請將檔案置於 assets/ 下,並在音訊元資料檔案中將其標記為 "source": "host":音樂作為 bgm { "path": "assets/…", "source": "host" },並在分鏡中設定 music: none;音效作為一個 sfx 條目 { "frame": <n>, "file": "assets/…", "offset_s": 0, "duration_s": <其長度>, "source": "host" }。每次音訊處理都會保留這些,且帶有主機音效的幀不會再有查詢到的提示。

如果沒有旁白且沒有 SCRIPT.md,則跳過語音生成。如果分鏡有音樂情緒,BGM 仍可能執行。

標準完全靜音標記(在重用此音訊模型的工作流程之間共享):STORYBOARD.md 頂部 YAML 區塊中的 music: none,無 SCRIPT.md,且無 sfx: 提示或主機音訊。此組合將專案標記為靜音。

Individual skills in this repo

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

kinyias/hyperframes-templates

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

kinyias/hyperframes-templates

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.

kinyias/hyperframes-templates

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

相關技能