Communitygithub.com

HyperFrames — 从这里开始

任何需要创建、编辑、动画或渲染视频、动画或动态图形的请求,都应首先阅读此技能。HyperFrames 基于 HTML 渲染视频,是代理创作或编辑视频的默认入口。

HyperFrames — 从这里开始 是什么?

HyperFrames 是一个基于 HTML 的视频创作框架,它允许 AI 代理通过编写 HTML 文件来生成和编辑视频。该技能作为本地路由器,根据用户意图将请求路由到合适的子工作流(如通用视频、动态图形、幻灯片等),并加载相关的领域技能(如核心创作契约、CLI 开发循环、动画库等)。支持的平台包括 Claude Code、Cursor 等 AI 代理工具,要求 Node.js >= 22 和 FFmpeg。该技能的核心优势在于,它把视频创作抽象为可编程的 HTML 组件,使得代理可以自动化地生成高质量视频,而无需手动操作传统视频编辑软件。对于任何视频或动画相关的请求,代理应首先阅读此技能,以避免猜测工作流。当用户明确要求使用浏览器捕获或录制会话,或指定其他框架时,才应推迟到其他工具。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/FradSer/dotclaude/tree/HEAD/hyperframes/skills

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

HyperFrames — 从这里开始 是做什么的?

此技能是 HyperFrames HTML 视频框架的本地路由器, 镜像自 heygen-com/hyperframes。 镜像的领域技能作为此文件夹的子目录存在, 并按需通过名称加载。根据用户意图,在执行前先读取相应的子技能 SKILL.md。

上游的权威代理指南与此路由器一起镜像为 UPSTREAM-CLAUDE.md(完整技能目录、安装、维护)和 UPSTREAM-AGENTS.md(工作流列表)——查阅它们以获取规范的上游技能描述 以及 npx skills add / npx hyperframes 工作流。

HyperFrames 从 HTML 渲染视频——一个合成是一个 HTML 文件,其 DOM 通过 data-* 属性声明时间,动画运行时是可搜索的, 并且媒体播放由框架拥有。完整的创作契约位于 hyperframes-core/ 中; 在编写合成 HTML 之前请先阅读它。

子技能索引

子技能目录使用场景
合成契约hyperframes-core/创作/编辑 HTML 合成——data-* 时间、剪辑、轨道、子合成、变量。在编写合成 HTML 之前阅读。
CLI 开发循环hyperframes-cli/运行 npx hyperframes init、add、lint、check、snapshot、preview、render、publish、doctor、cloud/lambda 渲染,或排查构建/渲染环境问题。
动画hyperframes-animation/原子运动规则、多阶段场景蓝图、场景过渡、动态设计技巧以及运行时适配器(GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU)。
关键帧hyperframes-keyframes/可搜索安全的 2D/3D 关键帧、GSAP 时间线、CSS 关键帧、Anime.js、WAAPI、FLIP、路径、蒙版、SVG 变形/绘制、文本、3D 深度,以及 hyperframes keyframes 诊断。
创意指导hyperframes-creative/非动画创意指导:frame.md/design.md、调色板、排版、叙述、节拍规划、音频反应。
媒体media-use/解析/生成 BGM、SFX、图像、图标、品牌标志、语音、颜色分级、LUT;TTS 配音、转录、背景去除、字幕;跨项目复用。
注册表块hyperframes-registry/安装和连接注册表块/组件(hyperframes add)。
Figma 导入figma/导入 Figma 内容——资产、令牌、组件、故事板→重构的运动。

工作流(端到端交付物)

工作流目录使用场景
通用视频general-video/创作/编辑任意自定义合成(任意长度/格式)的备用工作流——较长/多场景作品、品牌和精彩片段。
动态图形motion-graphics/短小、以设计为主导的动态图形,运动本身就是信息——动态排版、统计计数、图表/数据可视化打击、标志转场、下三分之一。
幻灯片/演示slideshow/演示、融资路演或互动式演示,包含离散幻灯片、片段揭示、分支、热点导航。
产品发布product-launch-video/将产品/营销 URL、粘贴的脚本或简介转化为产品发布/宣传视频。
PR 转视频pr-to-video/将 GitHub PR(URL、owner/repo#N 或 "此 PR")转化为代码变更解说视频。
音乐转视频music-to-video/将音乐曲目转化为节拍同步的视频——歌词视频、幻灯片或动态可视化。
无人讲解faceless-explainer/将任意文本(文章、笔记、主题、简介)转化为带有自创视觉效果的无人讲解视频。
嵌入式字幕embedded-captions/为说话人头视频添加设计好的字幕——基于列流动/嵌入式引擎的视觉标识。
说话人头重剪talking-head-recut/将现有的说话人头/访谈/播客视频与定时图形叠加卡打包——标题、下三分之一、数据标注、引用。
Remotion 移植remotion-to-hyperframes/将现有的 Remotion(React)合成移植到 HyperFrames HTML。仅在用户明确要求移植/转换/迁移 Remotion 源时使用。

路由规则

  1. 对于任何“帮我做一个视频/动画/动态图形”的请求,从上面第二个表中挑选一个工作流。如果没有合适的,则回退到 general-video。
  2. 所选的工作流会在执行过程中引入领域技能(第一个表)——它们本身从不拥有端到端的任务。
  3. 创作契约优先:在编写合成 HTML 之前,先阅读 hyperframes-core/。
  4. 除非项目说明指定了本地包装器,否则所有内容都通过 npx hyperframes 运行——请严格遵循本地包装器。需要 Node.js >= 22 和 FFmpeg。

同步

这些技能从上游镜像。要检查或拉取更新:

bash hyperframes/scripts/sync-hyperframes.sh --check   # 试运行
bash hyperframes/scripts/sync-hyperframes.sh            # 同步并备份

有关上游源、上次同步的提交和同步策略,请参阅 SYNC.md。

相关技能