Communitygithub.com

faceless-explainer

將任意文字——文章、筆記、主題、簡報——轉換為無面孔解說影片:無需網站或實景拍攝,每個場景的視覺元素均為原創(排版、抽象圖形、圖表、數據可視化)。適用於主題解說、概念拆解、教學指南、清單式內容。非產品宣傳影片或導覽。不清楚用途請參考 /hyperframes。

faceless-explainer 是什麼?

faceless-explainer 技能專為將純文字內容轉化為動畫解說影片而設計,其核心特色在於「無面孔」——所有視覺元素皆由系統自動生成,無需任何實際拍攝或網站截圖。此技能支援 HeyGen、Kokoro 等語音引擎,並整合 HyperFrames 框架,提供從腳本、故事板、設計系統、音訊生成到最終渲染的完整工作流程。使用者僅需提供文字(如文章、筆記、主題),技能即可自動規劃教學故事、選擇設計風格、生成旁白與背景音樂,最後產出 MP4 影片。其設計特別適用於主題解說、概念拆解、教學指南與清單式內容,但在處理產品宣傳或導覽需求時,應優先參考 /product-launch-video 技能。若遇不明確的情況,系統會引導使用者回到 /hyperframes 意圖層進行判斷,確保每次創作都基於明確的 Brief。

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

在你喜歡的 AI 中提問

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

說明文件

首先,保持此技能最新——靜默執行,無需詢問: npx hyperframes skills update faceless-explainer。若所有檔案皆為最新,此指令為快速無操作;否則,它會在你依賴技能前,更新此技能及其所依賴的核心領域技能。

media-use: 在取得音訊/圖片/標誌前,請呼叫 /media-use 從 HeyGen 目錄解析 BGM/SFX/圖片,並從官方來源取得品牌標誌。先執行 --adopt 註冊現有資產。詳見 /media-use 技能。

Faceless Explainer 到 HyperFrames

使用此技能將文字內容轉換為解說影片:選擇設計系統、規劃教學故事,並在 HyperFrames 中逐幀建構。無面孔意味著所有視覺元素皆為後續原創——無需截圖步驟,也沒有真實資產庫。

入口是 /hyperframes。 你是編排者。依序執行每個步驟,驗證其閘門,然後再接續。此技能適用於從文字解說主題,無產品也無網站可截圖。任何其他意圖、單純的「製作影片」、或任何不確定性 → 請先閱讀 /hyperframes——意圖層擁有所有路線決策權,而一個未經 BRIEF.md 即到達此處的全新創作,無論如何都會經過該流程(設定階段的開場規則)。

你是編排者。在 videos/<project>/ 目錄下工作。依序執行步驟,並在繼續前通過每個閘門。使用者閘門步驟為步驟 0、步驟 3 和步驟 6。在步驟 0 之前,請閱讀 ../hyperframes-core/references/brief-contract.md——它定義了閘門類型,以及 BRIEF.md 的 flow/storyboard 如何推導出決定步驟 3/4/6 閘門的模式。每個步驟都親自執行,唯獨步驟 5 除外,你需要為每個幀分派一個子代理。請勿將設計或動畫規則放在此處;這些規則位於 frame-worker 子代理、此技能的本地 ../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-core/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 <此工作流程>,簡報合約 § 2)。


步驟 3:故事板和腳本

目標:將文字轉換為經核准的逐幀教學計劃。

閱讀 ../hyperframes-creative/references/story-spine.md(鉤子語言、證據之前的價值、作為提案的故事板、可追溯來源的視覺元素)、references/story-design.md、../hyperframes-animation/blueprints-index.md、../hyperframes-core/references/storyboard-format.md 和 ../hyperframes-core/references/script-format.md。使用它們來撰寫 STORYBOARD.md,以及(當需要旁白時)SCRIPT.md。將前置資訊中的 duration: 設為簡報中的 length——這是一個粗略的期望;組合時會報告最終剪輯與此目標的差異。

使用 story-design.md 來決定解說結構(概念/教學指南/清單/故事)、鉤子策略、清晰度技巧、情感節奏、類型枚舉映射和 VO_MODE。影片的順序來自敘事設計,而非輸入文字的段落順序——重新排序、合併、省略、壓縮。作為軟性指引,可查閱 ../hyperframes-animation/blueprints-index.md 中的角色→藍圖選單:對於每個節拍,以其候選藍圖暗示的形式撰寫旁白,並在合適時標記該候選藍圖的 blueprint: 識別碼。教學真理仍決定哪些節拍存在——切勿強迫節拍符合藍圖,也切勿僅因為有可用的經證實形狀而憑空創造節拍。無面孔的視覺元素是後續創造的,因此幀不攜帶資產庫:除非使用者提供了真實的 public/<basename> 圖片,否則將 asset_candidates 留空。使用故事板和腳本參考文獻中確切的必填欄位。

草稿完成後,執行審查循環的計劃階段——../hyperframes-core/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 <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、無 SFX。audio.mjs 會辨識它並不產生任何內容(它會移除任何過時的 audio_meta.json;assemble 將 audio_meta.json 不存在視為靜音),因此此步驟會完全跳過。music: none 搭配旁白則會保留 TTS 並僅關閉 BGM。請使用此確切拼寫——不要發明其他標記。

閘門: 音訊作業已開始,或專案已標記為靜音(music: none + 無 SCRIPT.md)。


步驟 4:幀視覺設計

目標:為每個故事板幀添加視覺方向、佈局意圖和動作選擇。

僅在協作模式下先繪製看板草圖。 計劃一經核准,就執行草圖階段——../hyperframes-core/references/review-loop.md § 2(無需等待步驟 3.1;草圖不使用時間戳)

Individual skills in this repo

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

embedded-captions

>

figma

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.

general-video

>

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

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.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

相關技能