你有没有被视频剪辑虐过打开Premiere拖素材、切片段、加关键帧、调音轨——一顿操作猛如虎回头一看改了版就要全部重渲。更惨的是项目文件是二进制的Git管不了团队协作基本靠U盘传加个字幕动画行今天就别干别的了。但如果我告诉你——不用AE、不用PR、不用写Premiere脚本只需要一句给我做一个30秒的产品介绍视频然后……你的AI助手自己写HTML、自己调GSAP动画、自己渲染输出MP4——整个过程就像在Notion里写文档一样顺畅。你会不会以为我在吹牛这不是未来是2026年5月HeyGen开源的HyperFrames——一个把视频即代码玩到极致的框架。GitHub Star 21kskills.sh周安装量Top 5位置它就占了好几个hyperframes-animation、hyperframes-keyframes、hyperframes-cli、hyperframes-registry、hyperframes-audio、general-video、motion-doctrine、seam-craft……整个heygen-com/hyperframes家族的Skill在榜单上屠版式霸榜。今天我不写代码、不放PPT就用最朴素的方式把这个AI时代视频创作的新范式扒给你看。读完你会明白为什么HTMLGSAP能在AI时代反超PR/AE为什么确定性渲染成了视频工程化的关键拼图为什么连HeyGen都舍得把这套商业基础设施白送一、AI剪辑师的觉醒从Vibe Coding到Vibe Filming先抛个反常识的结论AI最不擅长的能力——写代码。AI最擅长的能力——生成结构化的HTML/CSS/JS。你会发现调一个AE的关键帧需要人类的设计直觉但写一个div data-start1 data-duration4再让GSAP来个淡入对LLM来说就像呼吸一样自然。这就是HyperFrames诞生的核心逻辑—— 不跟Sora、Runway抢AI生视频模型的赛道而是把视频代码化让AI天然会的HTML/CSS/JS成为视频描述的母语。老实说这个想法让我想起了Andrej Karpathy去年提出的Vibe Coding——“代码是AI的母语我们不要再纠结’写什么代码’而要关心’让AI写得更靠谱’。”HyperFrames把这个理念平移到了视频领域视频是AI的母语BiuBiu 母语 HTMLVibe Filming 的精髓是让AI自己写HTML、自己渲染MP4。听起来有点激进看看上个月skills.sh的周安装数据吧hyperframes18k周安装全家桶hyperframes-animation5.5khyperframes-keyframes5.4khyperframes-cli4.4khyperframes-registry4.4khyperframes-audio4.2khyperframes4.1k一个GitHub仓库全家10个相关Skill全部在榜这在skills.sh的历史上都是极少见的景象。可为什么是HeyGen团队可为什么是现在二、解剖HyperFrames5个核心设计决策让你看懂它为什么能屠版决策1把轨道翻译成data属性——视频就是HTML传统视频工具的核心是时间轴 关键帧 轨道。这套范式对人类友好所见即所得但对AI不友好机器很难理解在2.5秒到4.8秒之间插入淡入这种隐式的视觉逻辑。HyperFrames的做法很暴力——把所有时间轴属性翻译成HTML的data-*属性。div data-composition-iddemo data-width1920 data-height1080 video data-start0 data-duration10 srcbg.mp4/video h1 data-start1 data-duration4 classtitleHello HyperFrames/h1 /div第一眼看上去是不是感觉这就只是HTML但你注意看data-start11秒后入场data-duration4停留4秒data-track-index轨道管理背景层、文字层每一个元素都是显式标注了什么时候出现、停留多久、在哪一层。对AI来说这意味着什么它不用学Premiere的API不用懂AE的脚本引擎只需要懂HTML/CSS/JS——这是LLM时代最甜的训练语料。类比一下传统的视频时间轴是Word文档所见即所得但机器解析极难HyperFrames的时间轴是Markdown源文件是纯文本机器一眼就懂。瞬间理解成本从专科毕业降到了学过HTML。决策2确定性渲染——同一份HTML在任何机器上跑出来字节级一致有人会问用HTML写视频不难难的是怎么渲染成MP4。HyperFrames的渲染管线分三步Headless Chrome用Puppeteer打开你的HTMLChrome的Experimental.beginFrame API逐帧捕获画面关键来了——它不是录屏是寻址-捕获跳到指定帧再截图FFmpeg编码把帧序列音轨混合输出MP4这套管线的核心创新点是确定性相同的HTML输入在Mac、Win、Linux三台机器上渲染出来的MP4字节级一致。这个特性的价值大到不可估量CI/CD自动化代码一pushCI流水线自动渲染视频→发布到官网版本管理MP4文件能进Git能diff能回滚协作所有人产出的是同一个文件不再有我本地渲染的是对的你的不对这种撕逼视频工程化的第一个难点就这样被解决了。这让我想起Remotion——同样是视频即代码但Remotion用的是React必须构建、必须编译对AI来说有点重。 HyperFrames直接吃原生HTML/CSS/JS零构建、零编译AI生成的代码立即可跑——这个差异决定了它们对AI的友好度差了一个量级。决策3Skill化设计——把领域知识塞进SKILL.md你可能注意到了hyperframes家族有20个Skill。 每个Skill都是一个Markdown文件 一些模板资源教AI一项具体能力。举几个例子hyperframes主入口路由检测我想做视频这类意图调度其他Skillhyperframes-animation专门教AI写GSAP动画代码包含repeat: -1会崩溃这种踩坑细节hyperframes-keyframes键帧管理别让AI把关键帧撒到时间轴乱糟糟hyperframes-cliCLI命令封装init/preview/renderhyperframes-audio音轨合成与字幕同步media-use多媒体资源加载视频/图片/音频的media标签写法embedded-captions字幕嵌入motion-graphics动态图形类模板slideshow幻灯片模式talking-head-recut口播视频后期changelog-video版本更新视频自动化这套设计的精妙之处在哪HyperFrames Skills不是工具集是AI教练——它们存在的意义不是让AI用得动而是让AI别犯蠢。举个真实案例装AI生成HTML时不知道标签需要data-track-index属性不知道GSAP的repeat: -1会导致渲染引擎崩溃——这些坑爹细节全部写在Skills里AI读取后自动遵守。对比之前的Remotion-best-practices Skill我们介绍过HyperFrames的Skill化做得更精细每个Skill只负责一小块工作流主Skillhyperframes调度子Skillhyperframes-cli/hyperframes-animation等执行完美对应AI Agent 工具调用的新协作模式。决策4确定性 Skills 模板库三件套锁定AI原生如果你以为HyperFrames只是个视频JS框架那低估它了。完整的能力栈应该是这样第1层HTML时间轴语法data-start / data-duration / data-track-index / data-composition-id第2层确定性渲染执行Puppeteer Chrome beginFrame FFmpeg第3层SkillsAI教练20个SKILL.md教会AI正确使用第4层组件库资产50现成组件社交媒体叠加层、数据图表、电影级转场用npx hyperframes add一键添加第5层CLI工具链封装init/preview浏览器热重载/render含--docker确保环境一致第6层内置工具增值TTS文本转语音和音轨同步不用依赖外部API6层架构把AI生成视频这件事的每个环节都做了封装。这就是为什么我把它叫AI时代的内容生产基础设施——它不是单一工具而是一套完整的工作台。决策5Apache 2.0 命令让自己先成为客户接下来是这个故事最耐人寻味的部分HeyGen为什么会把这套核心能力开源我反复看了官方声明和团队访谈理由主要三点1. 建立HTML即视频的标准。HeyGen是AI视频领域的领头羊数字人对口型、多语种视频翻译的赛道老大与其自己闷头做不如让全行业都用HTML来写视频——标准一旦立起来所有人都得来找HeyGen做端到端的那一步云端高清渲染、API集成。2. 加速生态建设。开源不只是情怀是冷冰冰的商业手段。一个21k Star的项目会带来几百名贡献者、几千个教程、几万个潜在付费客户。HeyGen用一行Apache 2.0协议撬动了整个AI Agent生态。3. 让AI Agent客户先低成本试起来。HeyGen云的AI视频生成是按积分收费的而HyperpFrames本地完全免费。目标是当用户用HyperFrames越来越多、需求越来越复杂自然会去订阅HeyGen云服务更高分辨率、更长时长、数字人对接。这跟我们介绍过的OfficeCLI已经讲过的17k Star开源Office自动化路线如出一辙——先用开源得人心再用云端变现是AI Agent时代最经典的先开源、后付费打法。三、装上HyperFrames你需要这5分钟如果你读到现在还没动手那真的是亏了。5分钟就能让Claude Code学会做视频跟着我走一遍。步骤1环境准备# Node.js v22硬性要求低了报错 node --version # 必须是 v22.0.0 或更高 # FFmpeg视频编码 # macOS: brew install ffmpeg # Windows: choco install ffmpeg # Linux: sudo apt install ffmpeg ffmpeg -version # 验证步骤2安装Skill重点# 一行命令所有Skills全家桶 npx skills add heygen-com/hyperframes注意⚠️官方推荐使用--full-depth安装所有Skills避免使用过程缺料npx skills add heygen-com/hyperframes --full-depth如果是CI/非交互场景下安装器不弹选择框需要用npx hyperframes skills update安装完你的Claude Code / Cursor / Gemini CLI里就会多个/hyperframes斜杠命令。步骤3第一次对话使用 /hyperframes创建一个 10 秒的 9:16 竖版产品介绍视频 包含淡入标题、背景视频、背景音乐和弹跳字幕。AI会自动初始化项目npx hyperframes init写HTML/CSS/GSAP代码运行linter确保代码合规启动预览在浏览器里看效果渲染输出MP4整个过程你不需要写一行代码像和剪辑师聊天一样。步骤4迭代像剪辑师对话一样把标题放大 2 倍末尾加个淡出效果 背景音乐换成节奏更快的版本 字幕用粗体白字加阴影。AI会改HTML刷新预览你看到满意了就渲染。步骤5导出npx hyperframes render --output final.mp4或者用Docker确保环境一致npx hyperframes render --docker一个1080×1920的竖屏30秒视频从git push到render完成通常10-15分钟。这跟我之前专门介绍的Remotion-best-practices Skill30个领域规则文件相比HyperFrames更纯粹、聚焦没有React学习成本是面向纯前端AI场景。四、避坑指南3个用HyperFrames必须知道的真相写完好的部分得说说坑——这些坑是用真实掉发换来的。坑1Node.js必须≥22没商量官方明确写了v22是硬性要求因为它用到了一些较新的Node.js API如toReversed。如果你看到error installing 24.16.0: node.js v24.16.0 is not yet released这种报错说明你的nvm装了太多版本乱套了切换nvm use 22坑2Skill路径不能搞错HyperFrames和Claude Code在~/.agents/skills/和~/.claude/skills/两个路径间划了清晰界限。装错路径命令不会报错但/hyperframes永远不会出现。最稳的做法是直接用npx skills add heygen-com/hyperframes让CLI帮你处理路径。坑3Docker渲染 vs 本地渲染不一致一些字体在不同系统上不一样会导致MP4在不同机器上帧画面不同。解决方案是用--docker渲染固定环境。还有一个隐藏坑LFS大文件——安装时一定要带GIT_LFS_SKIP_SMUDGE1环境变量不然某些模板资源会卡死。GIT_LFS_SKIP_SMUDGE1 npx skills add heygen-com/hyperframes五、HyperFrames vs Remotion vs OpenCut5维横评光说好不够看对比才清楚维度HyperFramesRemotionOpenCut描述语言纯HTML/CSS/JSReact组件需编译时间轴JSONAI友好度⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐学习曲线5分钟1-2天30分钟渲染确定性⭐⭐⭐⭐⭐字节级一致⭐⭐⭐⭐⭐生态规模20Skills 50组件30Skill规则较小结论如果你是AI Agent用户HyperFrames是首选——它的Skill设计、确定性渲染、AI原生语法是为Agent量身定做的。如果你是传统前端团队、需要在React项目内嵌视频Remotion更适合。如果你是GUI党、不愿意碰代码OpenCut那类时间线编辑工具更顺手。六、写在最后AI时代真正的内容生产基础设施写到这儿我想说点更大的事。2026年我们正在经历一场内容生产范式转移——从人类操作软件转向AI Agent生成内容。在这个范式里具备代码化特性的内容载体有结构性优势Markdown赢了WordNotion、飞书文档崛起纯文本赢了二进制Git统治代码管理同样地HTML赢了AE的时间轴HyperFrames走向屠版为什么因为AI最擅长的是HTML/CSS/JS最不擅长的是Premiere的关键帧。HyperFrames把这套哲学做到了极致——让AI用最擅长的语言HTML做最难的事视频创作。更聪明的是HeyGen选了Apache 2.0协议开源让标准立起来、生态跑起来、客户用起来——最后再通过云服务变现。这是2026年最值得学习的商业打法用开源做标准用标准做生态用生态做付费漏斗。你还在等什么打开终端输入npx skills add heygen-com/hyperframes --full-depth然后打开Claude Code对它说“给我做一个30秒的产品宣传片”5分钟后你会看到一段MP4躺在你本地目录里——那时候你就知道AI时代的视频创作确实已经不再是剪辑师独享的特权。⚡ 一键三连给你准备好了GitHub仓库GitHub - heygen-com/hyperframes: Write HTML. Render video. Built for agents. · GitHub ⭐21.1k官方文档https://hyperframes.heygen.com安装命令npx skills add heygen-com/hyperframes --full-depth关注我下一期我们拆解hyperframes-cli——为什么这个看似不起眼的CLI能冲上skills.sh前5名。