102.3K+下载
跳转到使用指南
HyperFrames作者 HeyGen

HyperFrames Skill.

从你需要的视频出发,而不是从一堆动画工具出发。HyperFrames 是入口技能:它读取项目状态,选择合适的制作工作流,并引入把 HTML 合成转为视频所需的能力。

  • HTML 转视频
  • 工作流路由
  • 视频制作
下载 OpenDesign查看使用指南
来源审阅 · hyperframesSKILL.md
任务 视频制作 产出 • 所选工作流,以及全新创作所需的简报 • 通过该工作流生成的 HTML 合成与预览 • 在要求渲染并完成渲染时输出的视频 开始之前 CLI 需要 Node.js 22+ 和 FFmpeg。请先从核心技能开始;创作工作流按需安装。媒体服务和云端渲染可能带来额外要求。
编辑摘要 · 来源审阅于 2026-10-12 · 非生成的示例

01 功能简介

一个入口,多种制作工作流

主技能决定工作如何推进。具体的合成、媒体和渲染由所选工作流及领域技能完成。

基于来源的工作流不是执行基准测试

工作方式

产品发布片、字幕处理和交互式演示文稿即使都含动效,也是不同的交付物。HyperFrames 按所需结果进行路由:网站驱动的宣传片、给现有素材添加纯字幕、与音乐节拍同步的视频、简短动态图形或自定义合成,各有独立路径。来源还提供了移植 Remotion 源内容的明确路径。

已有项目不会被当作空白起点。路由会检查简报和项目文件,恢复已记录的工作流,或只执行所请求的操作。对于全新创作,它会把意图记录在 BRIEF.md 中,安装所选工作流,并仅在需要时加载专业能力。

预期交付物

  • 工作流选择,以及全新创作所需的 BRIEF.md
  • 可编辑的 HTML 合成,以及工作流所需的预览和配套项目文件
  • 在要求时输出渲染后的视频;可导航的演示文稿或经审阅的分镜脚本可以是不同的终点
查看示例简报

从请求到制作

  1. 01
    识别项目状态

    区分全新创作、编辑、仅渲染操作和已有简报的项目。复用已记录的偏好,而不是重新开始访谈。

  2. 02
    按交付物选择

    将所需结果与工作流约定匹配。给现有素材加字幕不等于新的讲解视频,仅有背景音乐也不意味着项目以音乐为主导。

  3. 03
    加载所需能力

    按需安装所选的创作工作流。针对实际所需的工作引入合成、动效、媒体、音频或 CLI 指导,而不是默认安装所有工作流。

  4. 04
    审慎地审阅与渲染

    使用工作流的预览和检查,然后渲染已确认的交付物。HTML 验证不能替代亲自观看结果;明确的仅渲染请求仍然只是该操作。

02 适用场景

适用场景

当视频请求需要合适的制作路径,或你想在不丢失上下文的情况下恢复已有的 HyperFrames 项目时,请使用该路由。

适合的情形

  • 主题明确的新视频提供网站、PR、主题、素材或音乐曲目,并描述预期结果。路由会决定适用专用工作流还是通用工作流。
  • 回到已有项目保存的简报、项目配置和分镜脚本让代理可以延续既定方向,而不是重复提问。
  • 组合多个制作层一个作品可能需要 HTML 时序、可定位的动效、媒体和音频。路由会连接这些能力,而不会把某一种动画技术当作全部工作。

需要核查的限制

  • 不是独立的动画预设该技能是编排入口。安装其指令并不能替代所选工作流、CLI、渲染依赖或媒体素材。
  • 并非每个请求都以 MP4 结束可导航的演示、已批准的分镜脚本或仅预览的任务,终点各不相同。请说明是否确实需要渲染文件。
  • 外部服务有各自的要求来源会在创作过程中检查用量。媒体生成和托管服务可能需要账号、可用额度或额外授权;开源许可证并不意味着所有服务都无限制。

请准备这些输入

  • 预期交付物说明受众、主题、画面比例、大致时长和最终格式。明确这是宣传片、字幕处理、演示文稿、讲解视频还是自定义剪辑。
  • 可用的源素材提供已批准的文案、素材、产品截图、音乐或来源 URL。标明各项声明和素材权利;生成的媒体不能替代真实的产品证据。
  • 现有项目与审阅限制继续工作时,请提供 BRIEF.md 和相关项目文件。说明审批节点、仅限本地的约束,以及是否授权渲染或发布。

03 关键决策

关键决策

  1. 用简报延续已定的制作方向

    对于全新工作,意图梳理以 BRIEF.md 结束。后续制作应遵循该记录的选择,而不是反复重新解读最初的请求。

  2. HTML 动画必须支持时间定位

    该框架从带时序的合成中逐帧渲染。动效和媒体必须遵循其创作约定,而不只是在普通浏览器播放时看起来正确。

  3. 工作流安装保持精简

    文档记载的独立安装会安装核心集,并在选择时添加创作工作流。插件包有自己内置的目录和更新管理器;这两种安装途径不可互换。

04 从一个具体需求开始

从一个具体需求开始

下方示例简报尚未经过测试。使用前请检查该技能的设置。

安装核心技能

下方命令是 README 中面向代理和非交互使用的核心集安装路径。

文档记载的核心集安装
npx hyperframes skills update

CLI 需要 Node.js 22+ 和 FFmpeg。交互式替代方式是 npx skills add heygen-com/hyperframes,然后选择 Core Skills。Claude Code 还有单独记载的插件安装方式。创作工作流按需加载;本页并不声称做过安装测试。

从范围明确的视频请求开始

使用下方未经测试的简报,明确主题、素材、输出和停止点。已有项目应附上当前的简报和配置。

示例简报
使用 HyperFrames 入口,根据我提供的已批准截图和文案,规划一支 20 秒、16:9 的产品介绍视频。只使用这些素材和声明;不要生成音乐、旁白或额外媒体。首先检查此文件夹是否已有 BRIEF.md 或 hyperframes.json,并保留已记录的决策。对于全新工作,先确认受众和工作流,撰写简报,然后准备 HTML 合成和本地预览。项目保持在本地。渲染前展示预览并报告实际运行的检查;不要发布,也不要使用付费服务。如果所需的工作流、依赖或用量检查不可用,请说明限制,而不要假装已完成。

最终渲染前先审阅

检查所选路线、素材使用、预览和报告的检查结果。若生成了渲染文件,请观看它,并将渲染与发布区分开。

  • 所选工作流与所需交付物相符,并保留已有项目的决策。
  • 预览使用提供的声明和素材,文字清晰可读,时序在定位时也能正常工作。
  • 依赖、用量和渲染结果均明确说明;本地预览不会被描述为已发布或已渲染的视频。

OpenDesign 为编码代理提供本地设计工作区。此列表并不表示该技能已被打包,也不表示其外部工具、凭据和软件依赖已包含在内。

下载 OpenDesign阅读快速入门

05 来源与许可证

来源与许可证

本页描述的是下方链接的固定来源版本。上游的行为和要求可能发生变化。

来源所有者
HeyGen
仓库
heygen-com/hyperframes
技能文件
skills/hyperframes/SKILL.md
许可证
Apache-2.0
已审阅快照
2026-10-12 · 2905162d925f
编辑来源摘要
HyperFrames 是一组 HTML 原生视频工作流的路由与项目恢复入口。它选择制作路径并加载领域能力;它本身不是单一的动画效果,也不是已记录的结果。

由 OpenDesign 根据所链接的来源原创撰写摘要。仓库星标数是带日期的热度信号,不代表技能使用量或质量评分。

06 开始前的常见问题

开始前的常见问题

主技能与 hyperframes-animation 有何不同?

主技能识别项目状态并选择制作工作流。动画技能则在该工作流需要时提供动效规则和运行时指导。端到端的视频请求请从主入口开始。

我需要 React 或所有已发布的技能吗?

不需要 React:HyperFrames 用 HTML 编写带可定位动画的合成。独立安装的 README 建议先装核心集,创作工作流按需安装;插件安装则自带目录。

它可以只渲染现有项目吗?

可以。来源把具体的渲染、检查、验证或预览请求视为有边界的操作,不会重新开始全新创作的访谈。项目仍需要所需的 CLI 和渲染环境。

HyperFrames

从你需要的视频开始

提供范围明确的简报或已有项目。选择合适的工作流,检查预览,并明确决定何时渲染或发布。

下载 OpenDesign浏览设计技能
文档记载的核心集安装
npx hyperframes skills update