🏠 AI Tools Hub | 首页 | 文章 | 评测 | GitHub热门 | 排行榜

HyperFrames 教程：55.3k 星 HTML 转 MP4 渲染框架，让 Agent 自己产视频

📌 项目地址：github.com/heygen-com/hyperframes | 星数：55.3k+ | 出品：HeyGen 官方开源 | 形态：CLI + Skills + 渲染核心

📋 项目简介

AI 生成视频的痛点在「不可控」： diffusion 模型每次出片都不一样，改一个字重制全片。HyperFrames 反其道而行：视频写成 HTML/CSS/可 seek 动画，渲染引擎输出确定性 MP4——同一份输入永远得到同一支片子，改哪修哪。它是 HeyGen（数字人视频大厂）的开源渲染核心，既给 CLI 本地用，更专为 AI 编码代理设计了 21 个 skills：agent 学会完整生产循环后，一句提示词就能从规划到渲染交片。AI 视频平台侧对照 PRINTFILM教程，后处理见 ffmpeg-skill教程。

✨ 核心特性

特性	说明
确定性渲染	HTML/CSS/媒体/可 seek 动画 → MP4，同输入同输出，可批量化
三种用法	本地 CLI ｜ AI 代理（skills/插件）｜托管平台渲染核心
21 个发布 skills	覆盖规划→写 HTML→动画→媒体→lint→预览→渲染全循环
全代理兼容	Claude Code、Codex、Cursor、Gemini CLI、IBM Bob 等
核心集按需装	/hyperframes 路由按需安装各创作工作流，不必一次装全部

🚀 接入 Claude Code

# 插件方式（推荐，版本化管理）
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
# /plugin → Marketplaces 开启 hyperframes 自动更新
# 调用：/hyperframes:hyperframes

# 独立 skills 方式（OpenCode 等）
npx skills add heygen-com/hyperframes

# 代理/无人值守场景：装精确核心集
npx hyperframes skills update

⚙️ 用一句提示词交片

Using /hyperframes, create a 10-second product intro
with a fade-in title, a background video,
and subtle background music.

# agent 自动执行：规划 → 写 HTML → 接动画 → 加媒体
#   → lint → 预览 → 渲染 → 输出 MP4

💡 使用建议

品牌视频/产品介绍这类「要改很多版」的场景最能吃进确定性红利：改文案只重渲，不重生成
skills add 走注册表可能有数小时延迟，要最新版用 npx hyperframes skills update
和 ToonFlow短剧创作组合：动画分镜用 ToonFlow，成片渲染交 HyperFrames
提示词学习的素材库见 Opus 5.5 视频提示词合集教程（本批同发）

📚 常见问题

HyperFrames 是什么？

HeyGen 官方开源的视频渲染框架（55.3k 星）：把 HTML、CSS、媒体和可 seek 的动画渲染成确定性的 MP4 视频。三种用法——本地 CLI、通过 skills/插件接入 AI 编码代理、或作为托管创作平台的渲染核心。『确定性』意味着同一份输入永远渲染出同一支视频，适合批量生产。

怎么接入 Claude Code？

两条命令：claude plugin marketplace add heygen-com/hyperframes 装 marketplace，再 claude plugin install hyperframes@hyperframes 装插件；在 /plugin → Marketplaces 开启自动更新后用 /hyperframes:hyperframes 调用。其他代理（Copilot/VS Code/Cursor/Gemini CLI/OpenCode）用 npx skills add heygen-com/hyperframes 装 skills，代理端建议用 npx hyperframes skills update 精确安装核心集。

agent 拿到 skills 后会做什么？

skills 教会 agent HyperFrames 的完整生产循环：规划视频 → 写合法 HTML → 接可 seek 动画 → 加媒体 → lint 检查 → 预览 → 渲染。官方示例提示词：『用 /hyperframes 做一条 10 秒产品介绍片，标题淡入、背景视频、轻背景音乐』——agent 会自己走完全流程输出 MP4。