莫的 Skills 精品 Hubskills.miemie
安装热度榜

hyperframes

HyperFrames 是视频、动画和动态图形任务的强制入口技能，从 HTML 渲染视频：一个 composition 是 HTML 文件，其 DOM 通过 data-* 属性声明时序，动画运行时可以 seek，媒体播放由框架管理。它覆盖制作、创建、编辑、动画、渲染宣传片、解说片、带字幕片段、标题卡、叠加层、幻灯片或交互式 deck、Remotion 移植以及任何 HyperFrames HTML 合成；也用于检查、诊断、验证、预览、发布或批量渲染现有项目。输入可来自网站 URL、GitHub PR、Figma 设计或 URL、文本或 brief、现有素材或音乐。技能会先检查剩余用量，按项目状态表决定动作（如直接执行既有项目的特定操作、恢复已有项目，或对全新创建运行意图访谈并写出 BRIEF.md），再按交付物路由到对应工作流并安装、加载所需领域技能。

分类
Agent 工作流
榜单排名
#8
安装量
1,015,133

它能做什么

中文摘要

HyperFrames 是视频、动画和动态图形任务的强制入口技能，从 HTML 渲染视频：一个 composition 是 HTML 文件，其 DOM 通过 data-* 属性声明时序，动画运行时可以 seek，媒体播放由框架管理。它覆盖制作、创建、编辑、动画、渲染宣传片、解说片、带字幕片段、标题卡、叠加层、幻灯片或交互式 deck、Remotion 移植以及任何 HyperFrames HTML 合成；也用于检查、诊断、验证、预览、发布或批量渲染现有项目。输入可来自网站 URL、GitHub PR、Figma 设计或 URL、文本或 brief、现有素材或音乐。技能会先检查剩余用量，按项目状态表决定动作（如直接执行既有项目的特定操作、恢复已有项目，或对全新创建运行意图访谈并写出 BRIEF.md），再按交付物路由到对应工作流并安装、加载所需领域技能。

为什么推荐

推荐理由

该技能在安装热度榜排名第 8，累计安装约 101.5 万。它把视频项目的入口、状态恢复、意图捕获、工作流路由和领域技能加载组织为一套明确协议，并为从 HTML 到成片（含 Studio 预览和桌面应用协作）提供完整路径，适合希望让 agent 以一致流程创建或维护视频、动画项目的用户。

什么时候用

适用场景

  • 根据网站 URL、GitHub PR、Figma 设计或 URL、文本或 brief、现有素材或音乐，创建、编辑、动画或渲染视频、动画与动态图形
  • 制作宣传片、解说片、带字幕片段、标题卡、叠加层、幻灯片或交互式 deck
  • 将现有 Remotion 源码显式移植到 HyperFrames
  • 为已有口播、访谈或播客素材添加纯字幕（不改动素材）或设计图形叠加层
  • 从音乐轨构建节拍同步视频，且无旁白或网站捕获
  • 创建明确短小、无旁白、以动效为主的单元（通常 10 秒以内）
  • 根据 GitHub PR 引用解释 PR 或代码变更
  • 从 URL 或站点相关 brief 营销或展示网站、产品站、应用或公司
  • 检查、诊断、验证、预览、渲染、发布或批量渲染现有 HyperFrames 项目
  • 在已有项目中继续提问、新建影片或做特定编辑，并按项目状态恢复上下文
  • 使用 Studio 预览或 HyperFrames 桌面应用中的 Framey 助手继续编辑

使用前先看

主要亮点

  • 01

    从 HTML 渲染视频：composition 是 HTML 文件，DOM 用 data-* 属性声明时序，动画运行时 seekable，媒体播放由框架管理

  • 02

    强制入口点覆盖制作、创建、编辑、动画、渲染视频/动画/动态图形的请求，以及检查、诊断、验证、预览、发布、批量渲染现有项目

  • 03

    项目状态表按首个匹配行决定动作，涵盖 Remotion 移植、既有项目特定操作、既有项目中的提问/新建/编辑、存在 BRIEF.md、存在 hyperframes.json 或 STORYBOARD.md、全新创建

  • 04

    全新创建按交付物路由到 10 个工作流：remotion-to-hyperframes、slideshow、embedded-captions、talking-head-recut、music-to-video、motion-graphics、pr-to-video、product-launch-video、faceless-explainer、general-video

  • 05

    意图访谈结束后写出 BRIEF.md，作为后续工作流读取的唯一路由产物

  • 06

    按需加载领域技能：hyperframes-core、hyperframes-animation、hyperframes-keyframes、hyperframes-creative、media-use、hyperframes-audio、hyperframes-cli、hyperframes-registry、figma

  • 07

    提供 Studio 预览（可点击画布编辑、改文本、拖拽和修剪时间线片段并导出），以及免费 HyperFrames 桌面应用中的 Framey 助手

  • 08

    安装命令：npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes

  • 09

    可用 npx hyperframes usage --json 检查剩余用量，用 npx hyperframes skills update workflow-name 安装或刷新工作流

  • 10

    项目 CLI 版本检查：npx hyperframes@latest upgrade --project . --check，并用 npx hyperframes check 验证

原始文档

原文摘录

**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](references/plugin-installation.md) when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below. HyperFrames entry point Check remaining usage