用途概括HyperFrames 是一套含 19 个按需加载 Agent 技能的开源技能集，将 HTML、CSS、媒体与可定位动画渲染为确定性 MP4 视频。以 `/hyperframes` 路由为核心，将用户意图映射到创作工作流（产品发布、无脸解说、PR 转视频等），并组合原子领域技能处理结构、动画与媒体。为 AI 编码 Agent（Claude Code、Cursor、Codex）设计，传授规划-编写-校验-预览-渲染循环，支持精简、由模型自动选择的安装方式。

Skill 数量

所需 CLI

ffmpegffprobeghheygenhyperframesjqnodepythonremotion

业务领域

BusinessCodingDesignMarketingOthers

技能形态

Cli ManualOthersStyle GuideWorkflow

SkillsWay.ai

查看仓库 ↗

heygen-com/hyperframes

Skill 数量

所需 CLI

ffmpegffprobeghheygenhyperframesjqnodepythonremotion

业务领域

BusinessCodingDesignMarketingOthers

技能形态

Cli ManualOthersStyle GuideWorkflow

核心思想

关键理念 & 方法论

作者的设计原则、与同类项目的差异化定位、关键工作流的简要介绍。文中提到的技能名称会自动链接到对应技能页。

核心思想

HyperFrames 是一个面向 Agent 的开源框架，将 HTML/CSS/媒体转化为确定性的 MP4 视频。与一体化视频工具不同，它提供 19 个按需加载技能，结构为路由 + 创作工作流 + 原子领域技能。

设计原则

路由优先：首先读取 /hyperframes，它映射意图并自动选择创作工作流。
按需组合：领域技能（hyperframes-core、hyperframes-animation、media-use 等）仅在需要该层时加载。
精简安装：npx hyperframes skills update 仅装核心集；工作流由路由按需自装。

典型工作流

Agent 读 /hyperframes 归类请求。
路由调用工作流（如 /product-launch-video）。
工作流拉取领域技能处理结构、动画、媒体。
校验 → 预览 → 渲染为 MP4。

适用于 Claude Code、Cursor、Codex 等编码 Agent。

技能关系

技能之间的使用关系

Skill → Skill 的使用关系，可跨层指向。同色块表示同一类技能形态。

引用关系数

独立技能数

引用最多的技能

hyperframes13个下游技能
general-video6个下游技能

被引用最多的技能

hyperframes-core14个上游技能
hyperframes10个上游技能

说明：每条依赖线读作「当前 Skill 依赖」它指向的 Skill。

技能组成

该用什么技能？

每个技能都为某种调用者设计——有的必须由你点名触发，有的则由模型自动按上下文加载。下面的两张卡片一眼看清整个技能集的触发分工。

用户主动调用0

这些技能期待被用户手动直接点名使用。

该技能集未列出需要手动调用的技能。

模型自动调用5

由模型在判断上下文相关时自动使用，通常不需要点名调用。

figma hyperframes hyperframes-animation hyperframes-core media-use

技能清单

19 个 Skill · 按名称或领域筛选

embedded-captions

Embedded Captions 将说话头视频转为带样式字幕的视频，采用轨道字幕（底部副标题）加主体后方嵌入峰值。它从 36 种身份中选一，运行抠像/转写/QA 流程，输出 final.mp4，画面不动、字幕确定性生成。

领域: Design
形态: Workflow
位置: skills/embedded-captions/SKILL.md

faceless-explainer

将任意文本转为无真人出镜讲解视频，每场景虚构视觉（排版、抽象图形、图表）。采用7步 HyperFrames 工作流，含设计预设、故事板规划和分帧子代理。产出渲染 MP4 讲解视频，适用于主题解析、操作指南、清单类内容。

领域: DesignOthers
形态: Workflow
位置: skills/faceless-explainer/SKILL.md

figma

通过 REST CLI 与 Figma MCP 将 Figma 内容导入 HyperFrames 合成。涵盖资源、品牌令牌、组件、动效与着色器，本地冻结并绑定品牌变量。产出确定性强、可编辑的来自 Figma 设计的视频合成。

领域: DesignCoding
形态: Cli ManualWorkflow
位置: skills/figma/SKILL.md

general-video

通用视频技能编排基于 HyperFrames 的视频创作，从 brief 到渲染。它通过 CLI 自更新，应用 media/figma 适配器，判定项目状态，解析运行形态，并按阶段加载所需知识技能。价值：以契约驱动的统一工作流，保障通用视频制作的一致性与质量。

领域: Others
形态: Workflow
位置: skills/general-video/SKILL.md

hyperframes

HyperFrames 入口技能，将任意“用 HTML 渲染视频”的需求路由到正确工作流。它评估项目状态、适配 Figma/PR 输入、按交付物路由新建任务，并保持 CLI 版本固定。价值：统一入口避免误路由与重复询问，贯穿各视频技能。

领域: Design
形态: Workflow
位置: skills/hyperframes/SKILL.md

hyperframes-animation

HyperFrames Animation 提供全部动画知识：原子规则、场景蓝图、转场、技法及 7 种运行时适配器（默认 GSAP）。通过选规则或加载蓝图编排确定性、可定位的动画，并用脚本审计。价值：更快产出可渲染的视频合成。

领域: Design
形态: Style GuideWorkflow
位置: skills/hyperframes-animation/SKILL.md

hyperframes-cli

面向 HyperFrames 视频项目的命令行技能：通过 `npx hyperframes` 脚手架、lint、check、预览与渲染合成。它强制校验门禁、子合成冒烟测试及云/分布式渲染路径。价值：确定性、可复现的视频构建，带质量控制与 Agent 友好的 JSON 输出。

领域: Coding
形态: Cli ManualWorkflow
位置: skills/hyperframes-cli/SKILL.md

hyperframes-core

HyperFrames 合成契约技能，讲解如何构建一个可渲染的基于 HTML 的视频项目：合成结构、data-* 时序属性、片段/轨道、子合成、变量、确定性渲染规则与校验。它产出正确、可定位、由框架托管媒体的合成，并涵盖 Tailwind 项目及 STORYBOARD/SCRIPT 规划格式。

领域: Coding
形态: Style GuideWorkflow
位置: skills/hyperframes-core/SKILL.md

hyperframes-creative

为 HyperFrames 视频提供非动画类的创意指导：处理设计规格、调色板、排版、旁白、节奏规划、音频响应视觉与品牌决策。方法：读规格或选路径、规划节奏、用参考与脚本。价值：统一风格与已校验方案，供动画执行。

领域: Design
形态: Style GuideWorkflow
位置: skills/hyperframes-creative/SKILL.md

hyperframes-keyframes

指导在 HyperFrames 中编写跨 GSAP/CSS/Anime.js/WAAPI 的可定位关键帧动画。提供契约、运行时规则、机制选择与 CLI 验证方法。产出确定性、已验证且主体连续的姿势动画。

领域: DesignCoding
形态: Style GuideWorkflow
位置: skills/hyperframes-keyframes/SKILL.md

hyperframes-registry

通过 `hyperframes` CLI 安装、发现并将可复用注册区块/组件接入 HyperFrames 合成。涵盖 `add`/`catalog` 命令、hyperframes.json 中的安装路径、区块子合成接线与组件片段合并，以及编写新项向上游贡献。价值：用已校验的可复用零件加速合成组装。

领域: Coding
形态: Cli ManualWorkflow
位置: skills/hyperframes-registry/SKILL.md

media-use

HyperFrames 的 Agent 媒体操作系统：单一技能解决、生成、操作并记忆所有媒体类型（音频、图片、图标、标志、语音、调色、LUT）。通过 `resolve` 冻结本地文件或可直接粘贴的块及台账记录，目录缺失时用 TTS/音乐/图像模型生成，并共用音频引擎制作配音、转写、字幕。将搜索噪音留在磁盘，只交给 Agent 一个路径或块。