Agent Skills
返回列表
🤖

HyperFrames 原生 HTML 代理视频渲染

AI Agent 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md 的指南，将 @user_3c6cb52e/render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes 安装到你当前使用的 AI 助手中。

技能介绍

要解决的具体问题

让 AI 代理产出视频一直不顺手：通用视频工具学习曲线陡，云端 AI 视频服务的结果往往不可二次编辑。当你想把一份 PDF 报告、CSV 数据表或代码库上下文变成一条 9:16 短视频时，中间隔着 HTML 排版、动画时间轴、样式系统与 MP4 渲染的整套链路。这个技能把这条链路收敛成一个斜杠命令工作流。

它如何工作

  • 通过 /hyperframes 斜杠命令触发，由代理调用 HyperFrames 技能。
  • 输入可以是自然语言提示、PDF、CSV 或代码库上下文。
  • 代理先产出可编辑的 HTML 视频合成（composition），再渲染成 MP4 输出。
  • 技能会教会代理编写 GSAP 时间轴、Tailwind v4 浏览器运行时样式，以及第一方 adapter 动画。
  • 支持迭代式修改，例如「把标题放大两倍、切换暗色模式、结尾加淡出」。

适用边界与注意点

  • 需要 Node.js >= 22 与 FFmpeg 环境。
  • 面向 AI 编码代理（Claude Code、Cursor、Gemini CLI、Codex）使用，不是独立 CLI 工具。
  • 文档摘自上游 README，上游功能或要求变化时需同步核对。
  • 复杂场景（如 TTS 旁白与字幕精确对齐）依赖上游适配器行为，建议先用小样验证。

使用场景

  • 运营拿到一份汇报PDF，要在半天内产出竖版短视频用于内部发布。
  • 数据分析师拿到CSV，需要把关键指标做成动效图表并渲染成MP4。
  • 前端工程师想展示刚做完的交互组件，用斜杠命令生成可编辑HTML演示。
  • AI代理用户通过斜杠命令迭代视频：放大标题、切暗色模式、结尾淡出。

适合人员

  • 内容运营，需要把PDF报告变成竖版短视频。
  • 数据分析师，需要把CSV报表变成动效可视化。
  • 前端工程师，需要展示交互组件并生成演示视频。
  • AI工具构建者，需要在产品中嵌入可编辑的视频生成流程。