Communitygithub.com

faceless-explainer

将任意文本——文章、笔记、主题、简要说明——转化为无人解说的解说视频:无需拍摄网站或实景,每个场景的视觉效果(排版、抽象图形、图表、数据可视化)均为创意生成。适用于主题解说、概念拆解、操作指南、列表文章。不适用于基于网站制作的视频(/product-launch-video——宣传或导览)。如有疑问,请参考 /hyperframes。

faceless-explainer 是什么?

该技能专注于从纯文本创建「无人解说」风格的解说视频。与依赖录屏或实拍素材不同,它通过 HyperFrames 平台,在每个场景中仅使用排版、抽象图形、图表和数据可视化来虚构视觉效果。用户提供文章、笔记或简要说明,技能会引导用户定义项目、处理文本并生成完整的视频制作文件,包括故事板、脚本、音频和动画帧。该技能适用于主题解说、概念拆解、操作指南和列表文章,但不适用于产品推广视频。它要求用户先使用 `/hyperframes` 技能确认创作意图,然后通过一系列有门控的步骤(从项目设置到最终渲染)进行协作,并在关键阶段(如故事板和最终渲染前)需要用户批准。关键依赖包括 `/media-use` 技能(处理音频、图片和徽标)以及 `hyperframes-animation` 和 `hyperframes-creative`(提供动画规则和设计预设)。

兼容平台~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 技能。

无人解说至 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(你为每一帧分配一个子代理)外,自己执行每个步骤。不要在此处放置设计或运动规则;这些规则存在于帧工作者子代理、此技能的本地 ../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 缺失时初始化。将 <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 或输出文件写入调用者目录。

初始化后立即写入 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。关于 Auth 所有权和离线回退:/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 的颜色/字体为空)→ 脚本保留预设自身的调色板,一个完整可发布的设计。仅当用户指定了品牌颜色/字体时,在运行前将它们添加到 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。从简报的 length 设置前置元数据 duration:——一个粗略的期望;组装将报告最终编辑位置相对于它的裁剪点。

使用 story-design.md 了解解说结构(概念/操作指南/列表/故事)、钩子策略、清晰度技巧、情感节拍、类型枚举映射和 VO_MODE。视频的顺序来自叙事设计,而非输入文本的段落顺序——可以重新排序、合并、省略、压缩。作为一个软性指南,查阅 ../hyperframes-animation/blueprints-index.md 中的角色→蓝图菜单:对于每个节拍,按照其候选蓝图暗示的形式撰写画外音,并在匹配时标记该候选 blueprint: ID。教学真相仍然决定哪些节拍存在——永远不要为了适合蓝图而强行添加节拍,也不要仅仅因为某个已知形状可用而发明节拍。无人解说的视觉效果由下游生成,因此帧不携带资产清单:除非用户提供了真实的 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、无音效。audio.mjs 识别它并生成任何内容(它移除任何过时的 audio_meta.json;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

相关技能