HeyGen推出的免费桌面应用HyperFrames Studio，可以把制作宣传视频的工作交给AI编程智能体，也就是能自行读写代码来完成任务的工具。只要挑选四个故事板场景、粘贴网站地址，Claude Code就会编写HTML和CSS，生成符合品牌风格的发布视频，全程无需手动剪辑。修改则通过在预览画面上绘制标注或输入要求来完成。对许多新手来说，最让人困惑的并不是剪辑，而是文件管理：项目存放在哪里，以及怎样让自己的文件夹被识别为项目。
用网页代码构建的视频
HyperFrames Studio的底层是AI视频平台HeyGen开发的开源框架HyperFrames。该项目以Apache-2.0许可证在GitHub上公开，仓库徽章显示其拥有6.27万个星标、96位贡献者，在JavaScript工具的软件包仓库npm上每周下载量达81.16万次。
与Remotion一样，HyperFrames以编程方式，也就是通过代码来生成视频。两者的区别在于构建材料。Remotion用React组件组装视频，而HyperFrames使用标准的HTML、CSS和网页动画库。编写和调整这些代码的是Claude Code、OpenAI Codex等AI编程智能体，它们直接在各个项目内工作。由于成品视频以HTML、CSS和JSON文件的形式存在，用日常语言提出的修改可以精确落实，并能以同样的方式反复应用。
HyperFrames Studio是围绕这一框架打造的编辑器，让AI编程智能体和人可以协作完成同一个视频。它以桌面应用的形式运行于macOS（Apple Silicon与英特尔芯片）、Windows（x64与arm64）和Linux（deb与AppImage安装包）。应用完全免费，只需一个免费的HeyGen账号。HeyGen API密钥并非必需，只有在使用虚拟形象、配音、声音克隆等HeyGen云端高级功能时才需要，这些功能会消耗按量计费的API额度。
安装：应用与智能体技能
只安装应用还不够。编程智能体还需要HyperFrames技能，即教智能体如何完成某类特定任务的打包指令。请在打开HyperFrames Studio之前，先通过终端安装。在Mac上的步骤如下：
- 从HyperFrames Studio的下载页面获取适合自己操作系统的安装程序并完成安装。macOS版本为DMG磁盘映像。
- 在终端中运行
npx skills add heygen-com/hyperframes，启动交互式安装流程，技能会从该项目的GitHub仓库拉取。 - 选择HyperFrames核心技能类别，按空格键选中全部核心技能，再按Return键确认。
- 选择要接收技能的智能体。列表包括Claude Code、Cursor、Codex、Gemini CLI、GitHub Copilot、Kilo Code、OpenCode和Zed。安装方式选择推荐的符号链接方式，它会把每个智能体链接到同一份技能副本，今后技能仓库更新时，所有智能体都会自动同步。
- 确认安全评估结果，等待安装完成。
- 用
claude命令启动Claude Code并输入/hyp。如果自动补全菜单中出现HyperFrames技能，说明连接成功。
首次启动时，应用会询问你的角色和常用的编程智能体，点击Skip all即可跳过。接着在浏览器中登录免费的HeyGen账号，例如用谷歌账号授权，随后会返回桌面应用。点击左下角的齿轮图标可打开设置，起步阶段最值得关注的是以下三个选项卡：
| 设置选项卡 | 可调整的内容 |
|---|---|
| Appearance | 系统、浅色或深色模式，强调色与界面主题 |
| Permissions | Claude Code、Codex或Grok是自动运行还是通过API密钥运行 |
| Framey | 浮动的绿色三角形助手Framey的颜色和大小，或将其关闭 |
四个场景加一个网址，做出发布视频
左侧边栏的Sessions面板会扫描硬盘上已有的HyperFrames项目文件夹，点击Import projects即可一键导入应用。要新建视频，可以点击Make my launch video，或在Get inspired模板区选择Take the step by step。
HyperFrames Studio把发布宣传片组织成四段式故事，每一段都配有现成的模板库：
| 阶段 | 作用 | 模板数 |
|---|---|---|
| Hook | 在开头几秒抓住注意力 | 44 |
| Proof | 展示产品或服务如何解决具体问题 | 67 |
| Turn | 把故事从痛点转向解决方案 | 43 |
| Call to action | 号召受众订阅或购买 | 27 |
Hook既可以自己挑选，也可以点击骰子图标随机选取。以一份每周发行的AI电子报为例，一种可行的组合是：Hook用手绘风格的盒子造型角色，Proof用简洁的对话卡片，再配上风格一致的极简转场，最后用只有标志、标题和按钮的简洁片尾。
接着，在标有Your website or idea的输入框中填入网址。应用会读取该页面，提取其中的配色、字体、文案和品牌素材来设计模板。直接提供主页或电子报往期页面的地址，就省去了手写设计规范的麻烦。用内置迷你播放器拖动浏览整段内容后，点击Use this cut，即可新建项目文件夹并打开编辑时间轴。
此后，Claude Code在后台接手，所用模型为Claude Opus 5.5。它会读取项目参考资料、编写HTML和CSS、填充时间轴轨道，同时右上角的检查器面板会陆续列出导入的素材和合成。在这个例子中，构建耗时15分37秒，约为此前测试时7分钟左右的两倍，看来构建时间会因任务而异。
成片从滚动播放AI新闻标题的横条开始，依次出现带通知角标的信封图标、展示本期各栏目的卡片、列出往期期号的存档网格，最后以带有品牌元素的订阅号召收尾。提示词，即给AI的指令，并没有做细致的具体指示，成品却显得相当精致。
▲ 发布宣传片的四段式结构
通过绘制、评论或输入来修改
视频中有地方需要修改时，可以直接在预览画面上指出：
- Draw： 点击铅笔图标，在任意画面上直接绘制。圈出某张内容卡片并附上“把这个放大”之类的备注，智能体就能准确知道要改哪个元素。
- Comment： 在画布或时间轴的任意位置固定评论标记，标出需要修改之处。
- Select： 点击单个元素或边界框，锁定要修改的某个素材。
- 输入： 不使用画布工具，直接在Claude Code的提示词输入框中用日常语言写下修改内容。
声音也是同样的做法。在提示词输入框中输入@或点击+按钮，即可打开HyperFrames的模板和素材库；还可以让Framey按描述搜索匹配的短片段或素材。音效设计的要求写得越具体，效果越好：
- 轻柔的原声吉他或毛毡钢琴背景音乐，基调欢快积极
- 不要旁白，也不要人声
- 每当期号卡片或曲目编号落定在画面上时，响起一声轻柔的嘀嗒声
- 使用内置库中的免费音乐，而不是从HeyGen购买授权音频
Claude Code在不到一分钟内处理完这项要求，生成了背景音乐和清脆的机械点击音，并按卡片转场的节奏放到时间轴上。如果觉得某些点击音多余，可以将单个音频图层或片段静音或删除。若想避免商业授权费用，要明确说明音乐必须来自免费库。
导出与竖版视频
点击右上角的Export按钮即可打开渲染设置：
| 设置 | 选项 |
|---|---|
| 分辨率 | 1080p或4K |
| 格式 | MP4或WebM |
| 帧率 | 每秒24、30或60帧 |
渲染结果保存在本地，可以用Finder或任意媒体播放器打开。
制作面向移动平台的竖版视频无需新建项目。在侧边栏菜单中复制项目、为副本重新命名，再让Claude把它转换为9:16的宽高比即可。智能体会针对竖屏重新调整现有的布局和动画设置，这样一个故事板就能同时产出16:9的横屏版和9:16的竖屏版。
项目存放在哪里
默认情况下，在桌面应用中创建的所有项目都保存在主文件夹内一个名为.hyperframes-studio的隐藏文件夹中。由于名称以点开头，它不会出现在Mac上普通的Finder窗口里。要找到它，可以点开侧边栏中项目名称旁的三点菜单，选择Reveal in Finder。
每个项目文件夹包含以下文件：
| 文件 | 作用 |
|---|---|
| index.html | 视频的源文件 |
| hyperframes.json、project.json、meta.json、package.json | 配置文件 |
| AGENTS.md、CLAUDE.md | 供编程智能体参考的Markdown指南 |
| 素材、缩略图、渲染文件 | 合成素材、预览图和导出的视频 |
把自己的文件夹变成项目
你可能更希望把项目放在容易找到的地方，比如桌面上的专用文件夹。然而，把空文件夹拖进HyperFrames Studio，只会弹出一条错误提示，称该文件夹未被识别为HyperFrames项目。有效的项目需要一个index.html文件，外加至少一个配置文件：hyperframes.json、project.json或meta.json。把现有项目文件夹复制到新位置可以快速绕过这个问题，但应用内What counts as a project?说明中给出的正式做法，是通过命令行来设置文件夹：
- 在Finder中右键点击该文件夹，打开“服务”，选择New Terminal at Folder。
- 运行
npx hyperframes init。提示安装所需软件包时，输入y并按Return键。 - 输入项目名称并选择起始模板。可选的九种模板为Blank、Decision Tree、Kinetic Type、NYT Graph、Play Mode、Product Promo、Shaders、Vignelli和Warm Grain。
- 选择Blank后，工具会生成AGENTS.md、CLAUDE.md、hyperframes.json、index.html、meta.json和package.json，然后在浏览器中打开网页编辑器，地址是由你自己的电脑提供服务的localhost。
- 点击该浏览器页面右上角绿色的Edit with Framey按钮，项目就会在HyperFrames Studio桌面应用中打开，并被完整识别，可以接收Claude Code的提示词。
空文件夹触发的错误提示并不会告诉新手如何在应用内新建项目，因此最好提前了解init命令，以备不时之需。
▲ 项目文件夹与桌面应用的连接
下一步怎么做
HyperFrames Studio似乎把制作宣传片的难点，从剪辑技巧转移到了决定视频要表达什么。模板负责结构，网站提供外观，Claude Code负责制作和修改。只有虚拟形象、声音克隆等HeyGen高级功能需要付费。想上手的话，可以按以下步骤进行：
- 打开应用前，先以符号链接方式安装HyperFrames核心技能，然后在Claude Code中输入
/hyp，确认技能已经出现。 - 用免费HeyGen账号登录，选好Hook、Proof、Turn和Call to action，再粘贴主页或电子报的网址。
- 用Draw、Comment和Select工具标出修改之处，并告诉智能体使用免费库中的音乐。
- 以1080p或4K导出，再复制项目，请智能体制作面向移动端的9:16版本。
- 如果想把项目放在自己的文件夹中，请在该文件夹里运行
npx hyperframes init，不要拖入空文件夹。