还在熬夜手动对齐字幕和画面？这套视频编排技能让助手用网页排版直接排好视频时间线，出片前自动查错。
怎么用
适合制作标题卡、产品宣传片、网站转视频、字幕视频、转场动画、音频响应视觉和短视频动效。常用命令包括 npx hyperframes init、npx hyperframes lint、npx hyperframes inspect、npx hyperframes preview、npx hyperframes render。
核心用法
该技能以 HTML composition 为视频源文件，要求先确定视觉身份和最终布局，再用 data-start、data-duration、data-track-index 等属性安排时间线，用 CSS 固定画面结构，用 GSAP 补充进入、停留、退出和转场动画。它会引导 AI 在渲染前执行 lint/inspect，检查轨道冲突、时间线注册、文字溢出和画面布局问题。
触发场景
制作 HTML 视频、HyperFrames composition、标题卡、产品宣传片、网站转视频、字幕同步、音频响应动画、GSAP 转场、短视频动效、视频渲染前检查
优劣特点
特点：HTML/CSS/GSAP 表达直观，适合 AI 直接生成和迭代；CLI 覆盖初始化、预览、布局检查和 MP4 渲染；适合把网页、脚本、字幕和动效组合成完整短视频。前提：需要 Node.js 22 以上、FFmpeg 和浏览器渲染环境；复杂作品仍需要检查视觉身份、布局和资产可用性。
适用人群
需要让 AI 快速生成视频落地页宣传片、社媒短视频、产品演示、字幕包装、动效模板或网站转视频的内容团队、设计前端、增长运营和技术创作者。
详细说明
HyperFrames 是 HeyGen 开源的视频渲染框架，强调 HTML 即视频源文件。该技能指导 AI 编写带 data-* 时间属性的 HTML composition，用 CSS 做布局，用 GSAP 做动画，并配合 HyperFrames CLI 完成 lint、inspect、preview、render 等流程。
常见问题
它是做什么的？
还在熬夜手动对齐字幕和画面？这套视频编排技能让助手用网页排版直接排好视频时间线，出片前自动查错。
支持哪些工具？
这个技能可以装进 Codex、Claude Code。
怎么用？
适合制作标题卡、产品宣传片、网站转视频、字幕视频、转场动画、音频响应视觉和短视频动效。常用命令包括 npx hyperframes init、npx hyperframes lint、npx hyperframes inspect、npx hyperframes preview、npx hyperframes render。
源码在哪里？
源码地址：https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes
怎么安装？
安装在星算助手客户端里完成 —— 由它决定装进 Claude Code、Codex 还是别的工具，并写好对应配置。