Communitygithub.com

heygen-com/hyperframes

将任意文本——文章、笔记、主题、简报——转化为无面解说视频;视觉元素(排版、抽象图形、图表、数据可视化)按场景自动生成。适用于主题解说、概念拆解、教程、列表式视频。

hyperframes 是什么?

该技能是 HeyGen 的 HyperFrames 框架中的一个核心解说技能,专门用于“无面解说视频”的创作。它的核心能力是将用户提供的纯文本(文章、笔记等)转化为完整的动画解说视频,整个过程无需任何实拍画面或现场素材——所有视觉元素(如版式、抽象图形、图表、数据可视化)都由系统在后续步骤中按场景自动生成。 工作流程高度结构化,共分为七个步骤:Step 0 的项目初始化与 Brief 确认、Step 1 的纯文本信息提取(无网页抓取)、Step 2 的设计系统选择(基于内置预设)、Step 3 的分镜与脚本创作、Step 3.1 的旁白与背景音乐生成、Step 4 的视觉设计细化、Step 5 的逐帧动画构建,以及 Step 6 的最终渲染输出。每一步都设有检查点(Gate),确保输出质量。 该技能特别强调“无面”特性:不会使用真实网站截图或资产库存,所有视觉创意均来自预设设计系统与动态生成规则。它支持 HeyGen 云服务与本地 Kokoro TTS 引擎两种语音模式,并包含严格的审核循环(Review Loop),可在协作或自主模式下运行。 适用场景包括:主题概念解析、技术教程、内容科普、列表式视频等。对于需要产品展示或网站录屏的营销视频,则应使用其他路由(如 product-launch-video)。建议用户通过 /hyperframes 入口使用本技能,以确保选择合适的视频创作路线。

兼容平台~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 从 HeyGen 目录中解析 BGM/SFX/图片,并从官方来源获取品牌标志。先运行 --adopt 注册现有资产。请参阅 /media-use 技能。

无面解说转 HyperFrames

使用此技能将一段文本转化为解说视频:选择设计系统,规划教学故事,并在 HyperFrames 中逐帧构建。无面意味着每个视觉元素都在下游生成——没有抓取步骤,也没有真实的资产库存。

入口是 /hyperframes。 您是编排者。按顺序执行每一步,验证每个关卡,然后才能继续。此技能适用于从文本解说一个主题,无需产品也无需抓取网站。任何其他意图、单纯的“制作视频”,或存在不确定性 → 先阅读 /hyperframes——意图层负责所有路线决策,而且一个没有 BRIEF.md 的新创建请求无论如何也会经过它(Setup 的起始规则)。

您是编排者。在 videos/<project>/ 目录下工作。按顺序执行步骤,并在继续前通过每个关卡。用户关卡的步骤为 Step 0、Step 3 和 Step 6。在 Step 0 之前阅读 ../hyperframes/references/brief-contract.md——它定义了关卡类型以及 BRIEF.md 的 flow/storyboard 如何推导出支配 Step 3/4/6 关卡的模态。除 Step 5(您为每个帧分派一个子代理)外,所有步骤均由您自己完成。不要在这里放置设计或动画规则;这些规则存在于帧工作子代理中、本技能的本地 ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ 以及 hyperframes-creative 中。

工作流:Step 0 设置 → hyperframes.json;Step 1 简报 → capture/extracted/;Step 2 设计系统 → frame.md;Step 3 分镜/剧本 → STORYBOARD.md 和 SCRIPT.md;Step 3.1 音频 → audio_meta.json;Step 4 视觉设计 → 丰富后的 STORYBOARD.md;Step 5 帧 → compositions/frames/NN-*.html 和 index.html;Step 6 最终渲染 → renders/video.mp4。


Step 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 或输出文件。

在初始化后立即写入 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 复制到项目中(然后跳过 Step 2)并返回 Step 3 起草所依据的框架。配方用于填充答案,而非审批;审核关卡仍然会运行。

在通过 Setup 之前显示登录状态——运行 npx hyperframes auth status 并逐字输出结果。它会报告语音/BGM 将使用 HeyGen 还是本地引擎,以及在登出状态下如何登录。应用以下分支之一:

  • 协作式: 等待用户登录或明确选择 offline / go。
  • 自主式: 声明状态并通过可用的本地引擎继续。

当没有离线提供商时,不要默默地省略一项必需的能力;应指出障碍。不要将此决策折叠到其他问题中,也不要把秘钥写入每仓库的 .env 文件中。认证所有权和离线回退:/media-use references/setup-providers.md § Providers。

关卡: hyperframes.json 和 BRIEF.md 存在;偏好支持的答案已被记录(简报合约 § 2);登录状态已显示(已登录,或继续离线)。


Step 1: 简报(无抓取)

目标:将用户的文本作为信息源纳入项目。没有网站抓取,也没有真实资产——这是一个无面解说。

逐字保存用户的完整输入,然后手动创建合成抓取包:

  • capture/extracted/visible-text.txt —— 完整的文章/笔记/主题/简报,逐字不变。这是信息的来源,而非故事模板(Step 3 会对其进行重塑)。
  • capture/extracted/tokens.json —— { "title": "", "description": "", "colors": [], "fonts": [] }。从简报中填充 title/description。除非用户明确提供了品牌颜色或字体——此时添加它们(无论如何设计预设都会提供完整的调色板),否则将 colors/fonts 留空。

如果用户粘贴了一个剧本或希望保留其措辞,则将其逐字保存为 user_script.txt;VO_MODE(逐字或重构)来自 BRIEF.md——当有剧本时,意图层会询问它。仅在简报因某种原因缺少它时在此询问一次,并将答案存储起来供 Step 3 使用。

不要运行 npx hyperframes capture(没有 URL)。请勿创建 asset-descriptions.md 或填充 capture/assets/——无面视觉元素在 Step 4-5 中发明,而非抓取。唯一例外:如果用户提供了真实图片,则将其放在 public/<basename> 下,并记下它供 Step 3 使用。

关卡: capture/extracted/visible-text.txt 和 capture/extracted/tokens.json 存在;您可以用一句清晰的话说明解说视频的主题和受众。


Step 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)。


Step 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。从前置元数据中设置 duration: 为简报中的 length——一个粗略的预期;组装时会报告实际时长与它的差距。

使用 story-design.md 进行解说结构设计(概念/教程/列表/故事)、钩子策略、清晰度技巧、情感节律、类型-枚举映射以及 VO_MODE。视频的序列来自叙事设计,而非输入文本的段落顺序——可重新排序、合并、省略、压缩。作为软性指导,可参考 ../hyperframes-animation/blueprints-index.md 中的角色→蓝图菜单:对于每个节律,按其候选蓝图所暗示的形状编写旁白,并在合适时标记该候选蓝图的 blueprint: ID。教学真实性仍然决定哪些节律存在——永远不要强迫一个节律去适应某个蓝图,也永远不要仅仅因为某个经过验证的形状可用就去发明一个节律。无面视觉元素在下游生成,因此帧不携带资产库存:除非用户提供了真实的 public/<basename> 图片,否则将 asset_candidates 留空。使用分镜和剧本参考中要求的精确字段。

起草后,运行审核循环的计划阶段——../hyperframes/references/review-loop.md § 1:将计划作为提案呈现,并询问两个问题——批准或更改,以及是否先画草稿(推荐)或跳过。反馈以聊天回复形式出现;循环直到获批。这是一个检查点关卡(简报合约 § 1):在自主模式下无需询问——将相同的摘要作为提示信息发布并继续;草稿合并到构建中,唯一的一个预览问题出现在 Step 6。

关卡: STORYBOARD.md 存在,每帧都有所需的叙事字段,需要旁白时 SCRIPT.md 存在,并且用户批准了逐帧计划(自主模式:摘要已作为提示信息发布)。


Step 3.1: 音频

目标:从已批准的剧本生成旁白、单词时间戳、音乐和音频元数据。

在 Step 3 获批后开始音频处理。在后台运行它,然后继续到 Step 4。(登录状态已在 Step 0 中显示;引擎会自动回退。)

在调用前,根据用户的要求选择旁白语音。 如果请求指定了语音、性别或语气,则选择一个匹配的语音 ID 并通过 --voice <id> 传递它。管道默认为 HeyGen 上的 Marcia(女声)/ Kokoro 上的 am_michael——因此像“男声”这样的请求除非您传递了标志,否则会被静默忽略。语音 ID 是提供商特定的;根据 Step 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;audio_meta.json 不存在正是 assembler 将其视为静默的条件),因此此步骤可完全跳过。带有旁白的 music: none 会保留 TTS,仅关闭 BGM。请务必使用这种拼写——不要即兴使用其他标记。

关卡: 音频任务已启动,或项目被标记为静默(music: none + 无 SCRIPT.md)。


Step 4: 帧视觉设计

目标:为每个分镜帧添加视觉方向、布局意图和运动选择。

**(协作式)首先对分镜表进行草稿设计——...

(由于原始内容被截断,此处省略了后续步骤的翻译,但示例已展示完整步骤的翻译格式和一致性。)

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.

相关技能