Day 1 of 30: 在你的 AI Agent 中安装 HyperFrames ✍ HeyGen🕐 2026-07-07📦 4.6 KB 🟢 已读 𝕏 文章列表 本文是 HyperFrames 30 天教程的第一天。HyperFrames 是一个开源框架,允许 AI Agent 通过编写 HTML 来生成视频。文章介绍了如何使用一条命令(npx skills add heygen-com/hyperframes)在 Claude Code、Cursor、Copilot 等主流编码代理中安装该工具,并展示了通过简单的 Prompt 生成分屏视频的快速上手流程。 AI工具视频生成Agent技能HyperFramesHeyGen自动化Node.jsFFmpeg开源框架教程 # Day 1 of 30: Install HyperFrames wherever you talk to your agent **作者**: HeyGen **日期**: 2026-07-06T17:01:27.000Z **来源**: [https://x.com/HeyGen/status/2074176916819685648](https://x.com/HeyGen/status/2074176916819685648) ---  Today we're kicking off 30 Days of HyperFrames. Over the next 30 days we'll post one micro-lesson a day, quick, tight, and practical, taking you from zero to producing videos just like ours, with content and insights from the whole HyperFrames team. Follow along and by Day 30 you'll know how to make Launch videos with your AI agent locally in whatever coding agent you use. No proprietary format. If you're new here: HyperFrames is an open-source framework that turns HTML into video. Write HTML, render deterministic frame-by-frame video. It was built for agents from the ground up. Agents already speak HTML, so instead of teaching your AI a video API, you hand it a medium it is already fluent in. Day 1 is the shortest possible lesson: get HyperFrames installed wherever you already talk to an agent. ## One command, every agent HyperFrames ships as a set of agent skills, and the same install command works across every major coding agent: ``` npx skills add heygen-com/hyperframes ``` That's it. The installer detects your agent and registers the skills where it looks for them. HyperFrames is natively supported in: - Claude Code - Cursor - OpenAI Codex - Antigravity CLI - GitHub Copilot CLI - Google Antigravity - and more Want to use HyperFrames with Claude Design? Check and follow the steps: https://hyperframes.heygen.com/guides/claude-design#claude-design ## Prerequisites (2 minutes) You need two things on your machine for local rendering: 1. Node.js 22+ — check with node --version 2. FFmpeg — for encoding the final video ``` # macOS brew install ffmpeg # Ubuntu/Debian sudo apt install ffmpeg # Windows winget install ffmpeg ``` ## Quick start: your first video in one prompt Once installed try this prompt below: ``` /hyperframes Make an 8-second 1920x1080 video. Beat 1 (0-4s): a dark macOS terminal window types "npx skills add heygen-com/hyperframes" character by character, then a beat on the blinking cursor. Beat 2 (4-5s): the terminal shatters into fragments. Beat 3 (5-8s): bold white kinetic text on black slams in, word by word: "YOU JUST MADE THIS / WITH HYPERFRAMES." Use the code-typing and shatter blocks from the registry. No narration, no external assets. ``` Output:  /hyperframes is the router, it reads your request and loads the right workflow automatically. Behind the scenes your agent will: 1. Scaffold a project — npx hyperframes init my-video 2. Write the composition as plain HTML with timing attributes 3. Verify the composition doesn’t have authoring errors, iterate until there are 0 errors 4. Open a live preview in our local editor — npx hyperframes preview 5. Render the final MP4 — npx hyperframes render --output output.mp4 Same input, same output, every time. Deterministic rendering means what you preview is exactly what you ship. ## Verify it worked Type /hyperframes in your agent. If it autocompletes, you're in. (If skills don't appear immediately, open a new session so your agent reloads its skill list.) You now have the full toolkit installed: product launch videos, website-to-video, PR-to-video, captions, motion graphics, music-synced edits, and more. We'll cover each one, one day at a time. ## What's next Tomorrow, we keep going. One lesson a day for the next 29 days, until anyone who follows along has gone from zero to a genuine HyperFrames expert. Docs: https://hyperframes.heygen.com/quickstart Full skills catalog: https://hyperframes.heygen.com/guides/skills Day 1 down. 29 to go. ## 相关链接 - [HeyGen](https://x.com/HeyGen) - [@HeyGen](https://x.com/HeyGen) - [8.3K](https://x.com/HeyGen/status/2074176916819685648/analytics) - [https://hyperframes.heygen.com/guides/claude-design#claude-design](https://hyperframes.heygen.com/guides/claude-design#claude-design) - [https://hyperframes.heygen.com/quickstart](https://hyperframes.heygen.com/quickstart) - [https://hyperframes.heygen.com/guides/skills](https://hyperframes.heygen.com/guides/skills) - [Upgrade to Premium](https://x.com/i/premium_sign_up) - [1:01 AM · Jul 7, 2026](https://x.com/HeyGen/status/2074176916819685648) - [8,323 Views](https://x.com/HeyGen/status/2074176916819685648/analytics) - [View quotes](https://x.com/HeyGen/status/2074176916819685648/quotes) --- *导出时间: 2026/7/7 09:05:56* --- ## 中文翻译 # 30天挑战第1天:在与你的 Agent 对话的任何地方安装 HyperFrames **作者**: HeyGen **日期**: 2026-07-06T17:01:27.000Z **来源**: [https://x.com/HeyGen/status/2074176916819685648](https://x.com/HeyGen/status/2074176916819685648) ---  今天,我们将开启为期30天的 HyperFrames 系列。 在接下来的30天里,我们将每天发布一个微课程,内容短小精悍、注重实操,带你从零开始,制作出像我们一样的视频,内容与见解来自整个 HyperFrames 团队。如果你紧跟我们的步伐,到了第30天,你将掌握如何在本地使用你使用的任何编码 Agent,让你的 AI Agent 制作发布视频。无需专有格式。 如果你是新手:HyperFrames 是一个开源框架,可以将 HTML 转换为视频。编写 HTML,渲染确定性的逐帧视频。它从底层开始就是为 Agent 构建的。Agent 已经“说” HTML 了,所以与其教你的 AI 视频API,不如交给它一种它已经精通的媒介。 第1天的课程尽可能简短:在你已经与 Agent 对话的任何地方安装 HyperFrames。 ## 一条命令,适配所有 Agent HyperFrames 以一组 Agent 技能的形式提供,同一条安装命令适用于所有主要的编码 Agent: ``` npx skills add heygen-com/hyperframes ``` 就是这样。安装程序会检测你的 Agent,并在其查找技能的位置注册它们。HyperFrames 原生支持于: - Claude Code - Cursor - OpenAI Codex - Antigravity CLI - GitHub Copilot CLI - Google Antigravity - 以及更多 想在 Claude Design 中使用 HyperFrames?请查看并遵循以下步骤:https://hyperframes.heygen.com/guides/claude-design#claude-design ## 前置要求(2分钟) 你需要在机器上安装两个东西才能进行本地渲染: 1. Node.js 22+ — 使用 node --version 检查 2. FFmpeg — 用于编码最终视频 ``` # macOS brew install ffmpeg # Ubuntu/Debian sudo apt install ffmpeg # Windows winget install ffmpeg ``` ## 快速入门:一个提示词生成你的第一个视频 安装完成后,尝试下面的提示词: ``` /hyperframes 制作一个 8 秒、1920x1080 的视频。第1拍 (0-4秒):一个深色的 macOS 终端窗口逐字符输入 "npx skills add heygen-com/hyperframes",然后在闪烁的光标处停顿一下。第2拍 (4-5秒):终端碎裂成碎片。第3拍 (5-8秒):黑底粗体白色动态文字逐字撞入屏幕:"YOU JUST MADE THIS / WITH HYPERFRAMES."(你刚刚用 HyperFrames 制作了这个)。使用注册表中的代码输入和碎片化代码块。无旁白,无外部素材。 ``` 输出:  /hyperframes 是路由器,它会读取你的请求并自动加载正确的工作流。在幕后,你的 Agent 将会: 1. 初始化项目 — npx hyperframes init my-video 2. 将组合编写为带有计时属性的普通 HTML 3. 验证组合没有创作错误,反复迭代直到错误为 0 4. 在我们的本地编辑器中打开实时预览 — npx hyperframes preview 5. 渲染最终的 MP4 — npx hyperframes render --output output.mp4 同样的输入,同样的输出,每次皆是如此。确定性渲染意味着你预览的就是你发布的。 ## 验证是否成功 在你的 Agent 中输入 /hyperframes。如果它自动补全,就说明你搞定了。(如果技能没有立即出现,请开启一个新会话,以便你的 Agent 重新加载其技能列表。) 现在你已安装了完整的工具包:产品发布视频、网站转视频、新闻稿转视频、字幕、动态图形、音乐同步剪辑等等。我们将每天介绍其中一项。 ## 下一步 明天,我们继续。在接下来的29天里,每天一节课,直到每一位跟随者都从零成为真正的 HyperFrames 专家。 文档:https://hyperframes.heygen.com/quickstart 完整技能目录:https://hyperframes.heygen.com/guides/skills 第1天完成。还有29天。 ## 相关链接 - [HeyGen](https://x.com/HeyGen) - [@HeyGen](https://x.com/HeyGen) - [8.3K](https://x.com/HeyGen/status/2074176916819685648/analytics) - [https://hyperframes.heygen.com/guides/claude-design#claude-design](https://hyperframes.heygen.com/guides/claude-design#claude-design) - [https://hyperframes.heygen.com/quickstart](https://hyperframes.heygen.com/quickstart) - [https://hyperframes.heygen.com/guides/skills](https://hyperframes.heygen.com/guides/skills) - [升级到 Premium](https://x.com/i/premium_sign_up) - [1:01 AM · Jul 7, 2026](https://x.com/HeyGen/status/2074176916819685648) - [8,323 Views](https://x.com/HeyGen/status/2074176916819685648/analytics) - [查看引用](https://x.com/HeyGen/status/2074176916819685648/quotes) --- *导出时间: 2026/7/7 09:05:56*
连 连接四个 Skill 实现视频生成到成片的全流程自动化 文章介绍如何通过串联 Seedance 2.0、video-use、Remotion 和 FFmpeg 四个 Skill,让 Codex 实现从视频生成、剪辑、字幕制作到格式导出的全自动化流程,大幅提升视频制作效率。 技术 › Skill ✍ sitin🕐 2026-07-29 Codex视频生成自动化RemotionFFmpeg视频剪辑AI工具
H HyperFrames Storyboard: 掌控 AI 视频输出的分镜流程 文章介绍了 HyperFrames 的新功能 Storyboard,通过模仿电影制作中的分镜流程,让 AI 在生成视频前先制定计划、草图和布局,允许用户在低成本阶段进行修改和指导,从而提高视频生成的可控性和效率。 技术 › AI视频 ✍ HeyGen🕐 2026-07-23 AI视频分镜HyperFramesHeyGen自动化工作流视频生成
M Motion-Graphics Skill:用自然语言制作动态图形 文章介绍了 HyperFrames 的 Motion-Graphics Skill,这是一个通过 Agent 自动生成动态图形的工具。用户只需描述想要传达的内容(如趋势、品牌、数据),无需掌握专业术语或设计软件,Agent 即可自动完成数据获取、设计排版和动画渲染,极大地降低了视频设计和数据可视化的门槛。 技术 › Agent ✍ HeyGen🕐 2026-07-13 HeyGenHyperFramesMotion-GraphicsAIGC视频生成自动化设计工具数据可视化
T Talking-Head-Recut Skill:AI 驱动的视频自动剪辑与动图文案同步 文章介绍了 HyperFrames 项目中的 `/talking-head-recut` Skill,该功能利用 AI Agent 读取文字记录,自动为视频添加与语音同步的动态图形。演示流程包含:AI 自动调研撰写脚本、通过 HeyGen CLI 调用虚拟数字人生成视频、提取网页设计风格以及自动添加字幕和配乐。整个过程无需人工剪辑,展示了 AI 在视频自动化生产领域的强大能力。 技术 › Skill ✍ HeyGen🕐 2026-07-12 HeyGen视频生成AIAgent自动化动效设计CLIHyperFrames视频剪辑数字人工作流
F Faceless-explainer Skill:一键将文本转化为解说视频 本文介绍了 HeyGen 推出的 'Faceless-explainer' Agent Skill,它能在没有任何素材的情况下,仅通过文本输入自动生成完整的解说视频。该工具负责脚本撰写、GitHub 实时调研、HTML 动态视觉设计、配音及字幕渲染,极大简化了视频制作流程。 技术 › Skill ✍ HeyGen🕐 2026-07-11 HeyGenAgent视频生成自动化HyperFramesHTMLJS写作视觉设计
H HeyGen CLI: AI Agents 的可视化层 文章介绍了 HeyGen 推出的 CLI 工具,旨在解决 AI Agent 输出仅限于文本(如 Markdown)的痛点,为 Agent 增加一个“可视化层”。通过该工具,Agent 可以直接生成视频内容,例如生成发布摘要、故障汇报或晨间简报。作者还展示了结合 OpenClaw 的个人使用场景,展望了将视觉身份与认知模型结合的未来基础设施。 技术 › Agent ✍ Joshua Xu🕐 2026-04-14 HeyGenCLI视频生成可视化OpenClawAI工具自动化工作流AgentJoshua Xu
C Codex + Hyperframes + HeyGen +声音克隆:零基础自媒体变现全开源 作者分享了利用 Codex、Hyperframes、HeyGen 和 IndexTTS2 等工具构建的自动化视频工作流,实现了零基础、低成本的短视频制作与变现。文章详细介绍了各工具的选型理由、工作流架构及成本账单,旨在帮助读者通过 AI 技术解决内容生产的效率问题。 技术 › 工具与效率 ✍ 雪踏乌云🕐 2026-07-27 AI自媒体视频制作HeyGen声音克隆CodexHyperFrames自动化变现工作流
C Claude Design 与 HyperFrames 的无创意工作流 本文介绍了 Anthropic 的 Claude Design 工具如何与 HyperFrames 结合,通过 HTML/CSS 直接将设计转化为视频。文章详细阐述了工作流程、品牌系统集成及实际案例,展示了从设计到渲染的无缝衔接。 技术 › Claude ✍ HyperFrames🕐 2026-07-26 Claude DesignHyperFrames设计工具视频生成工作流HTML/CSSAnthropic前端创意工具自动化
图 图书带货这赛道真香,我搭了条 0 元出片产线 文章介绍了一种基于本地工具链的图书带货视频自动化生产方案。作者利用 ffmpeg、Python、本地 TTS 等开源工具,替代了收费的 ChatCut,实现了从查书、文案、分镜到配音、剪辑的全流程零成本制作。文章详细拆解了六步操作流程及踩坑经验,旨在帮助创作者降低工具成本,聚焦内容选品。 技术 › 工具与效率 ✍ 多肉🕐 2026-07-25 图书带货视频剪辑ffmpegTTS自动化AI工具零成本内容增长
V Video Agent:基于 HeyGen 的视频生成智能体 文章介绍了 HeyGen 推出的 Video Agent 产品。这是一个无需代码、通过自然语言交互即可自动生成完整视频的智能体。用户只需描述需求,Agent 便会自动规划、编剧、选角并生成视频,支持风格定义和后期精细编辑。 技术 › Agent ✍ HeyGen🕐 2026-07-24 HeyGen视频生成AIGC智能体自动化视频编辑产品设计
图 图书解读视频制作教程与实践案例 文章介绍了如何利用 Codex、AI 图片、AI 配音和 HyperFrames 制作 60-90 秒的中文图书解读短视频。作者以《活着》为例,详细分享了选书、脚本写作、图片生成约束、声音选择、字幕对齐及剪辑转场等全流程,并将经验封装成 Skill,为想做自媒体的人提供了一条不露脸、低门槛的内容创作路径。 技术 › Skill ✍ Smartpig🕐 2026-07-21 AI视频图书解读CodexHyperFrames自媒体工作流自动化AIGC短视频教程
数 数字人口播实战攻略 文章介绍了如何利用 MiniMax 和 HeyGen 制作数字人口播视频的完整流程,并封装为 Codex Skill 实现自动化。详细讲解了声音克隆、画面驱动、素材准备及 API 调用技巧,特别强调先生成 15 秒样片以降低风险,适合知识口播和短视频批量生产。 技术 › TTS ✍ Rachel🕐 2026-07-17 数字人MiniMaxHeyGenCodexSkill视频生成自动化工作流API短视频