Hyper Frames太香了，把视频剪辑完全交给 AI，从此解放双手

文章目录

• Hyper Frames 学习笔记
• • Hyper Frames 基本介绍
  • • Hyper Frames 是什么
    • Hyper Frames 有什么用
    • 为什么需要 Hyper Frames
    • Hyper Frames 的适用场景
    • Hyper Frames vs Remotion
    • Hyper Frames vs Seedance
  • Hyper Frames 使用教程
  • • 方式一：纯手动使用
    • 方式二：配合 Agent 使用（推荐）
    • 方式三：Claude Design
  • Claude Design 介绍
  • • Claude Design 是什么
    • Claude Design 有什么用
    • Claude Design vs 普通 Claude 聊天
    • Claude Design 的工作原理
    • 如何使用 Claude Design
  • HyperFrames 视频生成原理
  • • 核心原理
    • 生成流程
    • 核心机制：Seek-and-Capture 循环
    • 帧捕获：Chrome DevTools Protocol
    • FrameAdapter 协议：动画运行时的接入层
    • window.__hf 协议：引擎和页面的通信桥
    • 音频处理：单独抽取，最后混合
    • 完整渲染流水线

Hyper Frames 学习笔记

Hyper Frames 基本介绍

Hyper Frames 是什么

HyperFrames 是由 HeyGen 团队开源的一款视频渲染框架，核心理念为 Write HTML. Render video. Built for agents（写 HTML，渲染视频，专为 AI 智能体设计）

• Github 仓库：https://github.com/heygen-com/hyperframes
• 官方文档：https://hyperframes.heygen.com/introduction

Hyper Frames 有什么用

• 写代码制作视频：无需 PR、AE 等专业剪辑软件，基于 HTML + CSS + JS 即可编写画面、字幕、布局和动画，把视频制作变成写网页
• 程序化制作动画：原生支持 GSAP、Lottie、Three.js 等前端生态，可快速实现渐变过渡、字幕逐字动画、图形动效乃至 3D 场景渲染
• 批量自动化出片：以代码为视频模板，支持替换文案、图片、数据参数，一键批量生成多版本差异化视频素材
• 代码版本可控：视频工程以代码形式托管，支持 Git 版本管理、追溯历史版本、多人协作复用模板
• 适配 AI Agent 工作流：大模型可直接生成合法的 Hyper Frames 代码，实现自然语言转视频的全自动生成链路
• 数据驱动生成视频：可读取 JSON、CSV 等数据，动态渲染文字、图表、数据大屏，自动制作数据可视化解说视频
• 多格式统一渲染：支持导出 MP4、WebM、MOV 等主流视频格式，适配短视频、广告投放、课程教程等多场景发布
• 低门槛模板复用：一次搭建通用视频模板，后续仅替换内容即可快速产出新视频，大幅降低重复剪辑成本

为什么需要 Hyper Frames

Hyper Frames 的适用场景

适合所有模板化、批量生成、自动化集成、需要版本控制的视频场景：

• 营销短视频：批量生成产品介绍、社媒广告、TikTok 风格内容
• 数据可视化视频：把 CSV / 数据库数据 自动转为动态图表、周报数据片
• 教程 / 演示视频：网站录屏、软件操作演示、课程动画（可代码化复现）
• AI Agent 工作流：作为 Claude Code、Cursor 等工具的视频生成执行层，接入 CI/CD 自动化流水线
• 程序化广告创意：模板批量生成差异化素材，用于 A/B 测试与个性化投放

Hyper Frames vs Remotion

HyperFrames 的创作者深受 Remotion 启发：团队曾在 HeyGen 生产环境中深度落地 Remotion，借鉴其核心设计思想，并在 HyperFrames 源码中保留注释，致敬 Remotion 开创的经典架构范式 ——Chrome 无头启动参数、image2pipe 管道推流、帧缓冲区与 FFmpeg 流式编码 等底层设计。

HyperFrames 与 Remotion 底层原理高度同源，均依托无头 Chrome 完成页面渲染与逐帧抓帧，搭配 FFmpeg 实现音视频编码合成，同时都具备确定性帧渲染特性，相同配置可输出像素级一致的视频成片。

二者最核心分水岭在于视频创作载体与开发门槛：

• Remotion：以 React TSX 组件 为核心创作载体，重度依赖 React 技术栈；
• HyperFrames：以 原生 HTML/CSS/JS 为创作载体，复用前端通用技术，无需框架学习成本。

除此之外，在工程构建、动画精度、生态适配、AI 集成、商用授权等维度差异显著。AI 生态层面，Remotion 偏向开发者自定义拓展集成；HyperFrames 原生轻量化设计，天生适配大模型与 AI Agent，可直接由 Claude 等生成可用视频代码，接入自动化流程更便捷

Hyper Frames vs Seedance

HyperFrames 属于代码化视频渲染框架，Seedance 是文生视频大模型，二者虽都能生成视频，但底层逻辑、创作逻辑、可控性与适用场景完全不同

HyperFrames 依靠 HTML/CSS/GSAP 编写画面与动画，通过无头 Chrome 逐帧精准渲染、FFmpeg 编码合成；全程代码驱动、帧级可控、结果可复现，支持模板复用、批量出片、Git 版本管理，擅长字幕动画、企业宣传片、数据可视化、程序化广告素材等规整、模板化、高精度视频场景。

Seedance 是生成式 AI 大模型，依靠文字 / 图片提示词，通过扩散模型全自动脑补生成画面，无需写任何代码；优势是快速生成写实人像、剧情短片、创意氛围感视频，但画面随机性强、帧时序不可控、无法精准定制布局文案，不适合标准化模板批量制作

Hyper Frames 使用教程

方式一：纯手动使用

#mermaid-svg-3gSXN3ytTaRmI1ag{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-3gSXN3ytTaRmI1ag .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-3gSXN3ytTaRmI1ag .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-3gSXN3ytTaRmI1ag .error-icon{fill:#552222;}#mermaid-svg-3gSXN3ytTaRmI1ag .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-3gSXN3ytTaRmI1ag .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-3gSXN3ytTaRmI1ag .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-3gSXN3ytTaRmI1ag .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-3gSXN3ytTaRmI1ag .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-3gSXN3ytTaRmI1ag .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-3gSXN3ytTaRmI1ag .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-3gSXN3ytTaRmI1ag .marker{fill:#333333;stroke:#333333;}#mermaid-svg-3gSXN3ytTaRmI1ag .marker.cross{stroke:#333333;}#mermaid-svg-3gSXN3ytTaRmI1ag svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-3gSXN3ytTaRmI1ag p{margin:0;}#mermaid-svg-3gSXN3ytTaRmI1ag .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-3gSXN3ytTaRmI1ag .cluster-label text{fill:#333;}#mermaid-svg-3gSXN3ytTaRmI1ag .cluster-label span{color:#333;}#mermaid-svg-3gSXN3ytTaRmI1ag .cluster-label span p{background-color:transparent;}#mermaid-svg-3gSXN3ytTaRmI1ag .label text,#mermaid-svg-3gSXN3ytTaRmI1ag span{fill:#333;color:#333;}#mermaid-svg-3gSXN3ytTaRmI1ag .node rect,#mermaid-svg-3gSXN3ytTaRmI1ag .node circle,#mermaid-svg-3gSXN3ytTaRmI1ag .node ellipse,#mermaid-svg-3gSXN3ytTaRmI1ag .node polygon,#mermaid-svg-3gSXN3ytTaRmI1ag .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-3gSXN3ytTaRmI1ag .rough-node .label text,#mermaid-svg-3gSXN3ytTaRmI1ag .node .label text,#mermaid-svg-3gSXN3ytTaRmI1ag .image-shape .label,#mermaid-svg-3gSXN3ytTaRmI1ag .icon-shape .label{text-anchor:middle;}#mermaid-svg-3gSXN3ytTaRmI1ag .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-3gSXN3ytTaRmI1ag .rough-node .label,#mermaid-svg-3gSXN3ytTaRmI1ag .node .label,#mermaid-svg-3gSXN3ytTaRmI1ag .image-shape .label,#mermaid-svg-3gSXN3ytTaRmI1ag .icon-shape .label{text-align:center;}#mermaid-svg-3gSXN3ytTaRmI1ag .node.clickable{cursor:pointer;}#mermaid-svg-3gSXN3ytTaRmI1ag .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-3gSXN3ytTaRmI1ag .arrowheadPath{fill:#333333;}#mermaid-svg-3gSXN3ytTaRmI1ag .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-3gSXN3ytTaRmI1ag .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-3gSXN3ytTaRmI1ag .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-3gSXN3ytTaRmI1ag .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-3gSXN3ytTaRmI1ag .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-3gSXN3ytTaRmI1ag .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-3gSXN3ytTaRmI1ag .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-3gSXN3ytTaRmI1ag .cluster text{fill:#333;}#mermaid-svg-3gSXN3ytTaRmI1ag .cluster span{color:#333;}#mermaid-svg-3gSXN3ytTaRmI1ag div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-3gSXN3ytTaRmI1ag .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-3gSXN3ytTaRmI1ag rect.text{fill:none;stroke-width:0;}#mermaid-svg-3gSXN3ytTaRmI1ag .icon-shape,#mermaid-svg-3gSXN3ytTaRmI1ag .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-3gSXN3ytTaRmI1ag .icon-shape p,#mermaid-svg-3gSXN3ytTaRmI1ag .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-3gSXN3ytTaRmI1ag .icon-shape .label rect,#mermaid-svg-3gSXN3ytTaRmI1ag .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-3gSXN3ytTaRmI1ag .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-3gSXN3ytTaRmI1ag .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-3gSXN3ytTaRmI1ag :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

环境准备

安装 Hyper Frames

初始化项目

编写 HTML

生成视频

• Step1：环境准备

  安装 Hyper Frames 前需要先安装下面两个

• Node.js 22+：CLI和开发服务器的运行时
• FFmpeg ：用于本地渲染的视频编码

• Step2：安装 Hyper Frames

• 方式一：临时安装（官方推荐）

  # 使用 npx 临时安装 hyperframes，并初始化一个项目 my-video
  npx hyperframes init my-video

  上述指令创建项目，会默认启动一个交互式向导，带你完成示例选择和媒体导入。如果你是老手，想要要跳过提示，请使用下面的指令

  npx hyperframes init my-video –non-interactive –example blank

  参数作用

  –non-interactive	无交互、全自动、不提问
  –example blank	使用空白模板，最简结构

  如果不跳过提示，就会来到下面的选项页面

  

  模板名称中文直译通俗作用 & 适用场景

  Blank	空白模板	纯空项目，只有基础脚手架结构，无任何示例动画、无多余代码；适合从零自己写，最干净。
  Warm Grain	暖调颗粒质感	自带复古暖色调 + 胶片颗粒滤镜、柔和光影；适合人文旁白、生活治愈、文艺科普类视频。
  Play Mode	播放演示模式	内置时间线演示、画面循环动效、播放器样式；适合功能演示、产品演示、UI 界面介绍视频。
  Swiss Grid	瑞士网格版式	瑞士极简排版网格系统，规整分栏、理性布局、干净文字；适合企业介绍、数据看板、简约文案片头。
  Vignelli	维内利经典版式	经典现代主义排版、极简黑白灰、优雅文字层级；适合高端品牌、商务简介、极简字幕大片。
  Decision Tree	决策树模板	自带分支结构、流程连线、节点动画；适合业务流程、逻辑讲解、知识科普、流程图解说视频。
  Kinetic Type	动态文字排版	专业文字动效模板，文字逐字飞入、弹跳、渐变、位移；适合金句片头、语录、标语宣传。
  Product Promo	产品宣传模板	现成产品宣传片结构：标题、卖点罗列、图文切换、收尾 LOGO；直接改文字就能做产品广告。
  NYT Graph	纽约时报图表风	极简新闻风数据图表、折线 / 柱状简约动效；适合数据汇报、行业分析、财经科普类视频。

  这里我选择了 Product Promo

• 方式二：全局安装

  # 全局安装 hyperframes
  npm install -g hyperframes
  # 初始化项目
  hyperframes init my-video

对比项临时安装（npx 方式）全局持久化安装

安装命令	npx hyperframes init 项目名	npm install -g hyperframes
存放位置	系统 npm 缓存目录：C:\\Users\\你的用户名\\AppData\\Local\\npm-cache\\_npx	系统 npm 全局目录：C:\\Users\\你的用户名\\AppData\\Roaming\\npm\\node_modules\\hyperframes
生命周期	临时缓存，长时间不用 npm 自动清理	永久驻留，不会自动删除
命令使用方式	每次必须带 npx，不能直接裸用 hyperframes	任意目录可直接执行 hyperframes 命令，无需加 npx
卸载 / 清理方式	等待自动清理 或 手动清 npm 缓存	需手动执行：npm uninstall -g hyperframes
环境污染	不污染全局环境	占用全局环境，长期留存

• Step3：编写 HTML

  cd my-video

  进入初始化后的项目，会发现以下结构

  

• Step4：预览效果

  npx hyperframes preview

• Step5：导出视频

  npx hyperframes render

方式二：配合 Agent 使用（推荐）

方式一使用太繁琐了，既要手动创建项目、又要手动安装各类环境、还要手动预览调试，此外，你还需要熟悉 Hyper Frames 项目结构，熟悉 HTML 语法，对于新手而言，是有一定难度的。所以官方也是极力推荐 Agent 方式，同时他们自己的官网的所有视频也都是使用这种方式生成的，你只需要一句话就能让 Agent 自动给你生成你所需的视频

#mermaid-svg-JPL2nT0Y4qihDLYN{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-JPL2nT0Y4qihDLYN .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-JPL2nT0Y4qihDLYN .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-JPL2nT0Y4qihDLYN .error-icon{fill:#552222;}#mermaid-svg-JPL2nT0Y4qihDLYN .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-JPL2nT0Y4qihDLYN .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-JPL2nT0Y4qihDLYN .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-JPL2nT0Y4qihDLYN .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-JPL2nT0Y4qihDLYN .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-JPL2nT0Y4qihDLYN .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-JPL2nT0Y4qihDLYN .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-JPL2nT0Y4qihDLYN .marker{fill:#333333;stroke:#333333;}#mermaid-svg-JPL2nT0Y4qihDLYN .marker.cross{stroke:#333333;}#mermaid-svg-JPL2nT0Y4qihDLYN svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-JPL2nT0Y4qihDLYN p{margin:0;}#mermaid-svg-JPL2nT0Y4qihDLYN .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-JPL2nT0Y4qihDLYN .cluster-label text{fill:#333;}#mermaid-svg-JPL2nT0Y4qihDLYN .cluster-label span{color:#333;}#mermaid-svg-JPL2nT0Y4qihDLYN .cluster-label span p{background-color:transparent;}#mermaid-svg-JPL2nT0Y4qihDLYN .label text,#mermaid-svg-JPL2nT0Y4qihDLYN span{fill:#333;color:#333;}#mermaid-svg-JPL2nT0Y4qihDLYN .node rect,#mermaid-svg-JPL2nT0Y4qihDLYN .node circle,#mermaid-svg-JPL2nT0Y4qihDLYN .node ellipse,#mermaid-svg-JPL2nT0Y4qihDLYN .node polygon,#mermaid-svg-JPL2nT0Y4qihDLYN .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-JPL2nT0Y4qihDLYN .rough-node .label text,#mermaid-svg-JPL2nT0Y4qihDLYN .node .label text,#mermaid-svg-JPL2nT0Y4qihDLYN .image-shape .label,#mermaid-svg-JPL2nT0Y4qihDLYN .icon-shape .label{text-anchor:middle;}#mermaid-svg-JPL2nT0Y4qihDLYN .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-JPL2nT0Y4qihDLYN .rough-node .label,#mermaid-svg-JPL2nT0Y4qihDLYN .node .label,#mermaid-svg-JPL2nT0Y4qihDLYN .image-shape .label,#mermaid-svg-JPL2nT0Y4qihDLYN .icon-shape .label{text-align:center;}#mermaid-svg-JPL2nT0Y4qihDLYN .node.clickable{cursor:pointer;}#mermaid-svg-JPL2nT0Y4qihDLYN .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-JPL2nT0Y4qihDLYN .arrowheadPath{fill:#333333;}#mermaid-svg-JPL2nT0Y4qihDLYN .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-JPL2nT0Y4qihDLYN .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-JPL2nT0Y4qihDLYN .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-JPL2nT0Y4qihDLYN .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-JPL2nT0Y4qihDLYN .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-JPL2nT0Y4qihDLYN .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-JPL2nT0Y4qihDLYN .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-JPL2nT0Y4qihDLYN .cluster text{fill:#333;}#mermaid-svg-JPL2nT0Y4qihDLYN .cluster span{color:#333;}#mermaid-svg-JPL2nT0Y4qihDLYN div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-JPL2nT0Y4qihDLYN .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-JPL2nT0Y4qihDLYN rect.text{fill:none;stroke-width:0;}#mermaid-svg-JPL2nT0Y4qihDLYN .icon-shape,#mermaid-svg-JPL2nT0Y4qihDLYN .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-JPL2nT0Y4qihDLYN .icon-shape p,#mermaid-svg-JPL2nT0Y4qihDLYN .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-JPL2nT0Y4qihDLYN .icon-shape .label rect,#mermaid-svg-JPL2nT0Y4qihDLYN .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-JPL2nT0Y4qihDLYN .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-JPL2nT0Y4qihDLYN .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-JPL2nT0Y4qihDLYN :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

环境准备

安装 HyperFrames skills

生成视频

• Step1：环境准备

• 准备好 Claude、Codex、Cursor 等 Agent 工具
• 购买好对应的大模型 Token（多买点，生成视频很费 Token）

• Step2：安装 HyperFrames skills

  # 临时下载 skills，并使用 skills 工具将 HyperFrames skills 安装到当前目录的 skills 文件夹下
  npx skills add heygen-com/hyperframes

  这会让你的 Agent（Claude Code、Cursor、Gemini CLI、Codex）学会如何编写正确的作品、GSAP 时间线、Tailwind v4 浏览器运行时样式以及第一方适配器动画。

  在 Claude 中执行，他会默认自动将所有的 15 个 skills 全部下载完

  

  在 cmd 中执行，会让你选择下载指定的 skill

  

  下面是这 15 个 skill 的简单介绍，如果你想看更加详细的介绍，可以下载对应的 skill，直接看它的 SKILL.md 文件内容即可

  skill作用说明

  animejs	集成 Anime.js 动画库，用来做轻量灵活网页补间、路径、变形动画，支持 HyperFrames 逐帧精确控制
  contribute-catalog	官方组件模板仓库，可一键引入预制字幕、转场、图表组件，也能自定义组件提交社区共享
  css-animations	适配原生 CSS 关键帧动画，不用写 JS，直接 CSS 动画就能被引擎识别、精准时序播放渲染
  gsap	集成 GSAP 专业动画引擎，做复杂时间线、序列动画、缓动、3D 形变，是 HyperFrames 主力动画方案
  hyperframes	框架核心基础能力，支撑 HTML/CSS 创作视频、字幕编排、音频联动、时间线调度、视频渲染底层
  hyperframes-cli	命令行工具，用于初始化项目、预览、导出 MP4、环境检测、字幕 / 语音合成等运维打包能力
  hyperframes-media	媒体音视频处理能力，支持嵌入视频音频、片段剪辑、混音、滤镜转码；依赖 FFmpeg，兼容性易出问题
  hyperframes-registry	技能 / 组件注册中心，一键安装官方和社区插件、特效、区块，自动配置依赖无需手动配置
  lottie	接入 Lottie 矢量动画，可直接加载 AE 导出的 JSON 动效，图标、角色动画无损缩放、体积小
  remotion-to-hyperframes	Remotion 项目迁移工具，把 React TSX 写法自动转成 HyperFrames 纯 HTML 项目，降低迁移成本
  tailwind	内置 Tailwind CSS，用工具类快速排版布局、配色样式，不用手写原生 CSS，极速搭建画面
  three	集成 Three.js 3D 引擎，可在视频里做 3D 场景、模型、灯光、粒子、3D 文字动画
  typegpu	基于 WebGPU 硬件加速，做高性能像素特效、流体、光效、大规模粒子与数据可视化渲染
  waapi	封装浏览器原生 Web 动画 API，轻量高性能，可暂停、倒放、精准定位，介于 CSS 动画和专业动画库之间
  website-to-hyperframes	网页转视频工具，抓取任意网页画面与动效，自动生成时间线并导出 MP4，适合官网 / 数据看板录制成视频

  针对上述 15 个 skill，总结而言就是：

  • 核心创作：hyperframes + cli

  • 动画方案：gsap（主力）、animejs、css、lottie、waapi

  • 3D / 特效：three、typegpu、media

  • 样式 / 组件：tailwind、registry、contribute-catalog

  • 迁移 / 网页转视频：remotion-to-hyperframes、website-to-hyperframes

  如果你不想全部安装，可以根据你自己的需求按需安装

• Step3：使用 skill 生成视频

  第一次生成视频会比较慢，因为 Agent 会自动下载你当前环境所需的依赖

  需要安装的依赖有：

  • FFmpeg：视频编码、合成、导出 MP4，是生成最终视频文件的核心工具

  • Chrome headless shell：后台运行浏览器，渲染 HTML 画面、逐帧录制动画

    C:\\Users\\EDY\\.cache\\hyperframes\\chrome\\

  在 Claude 对话框中输入下面提示词

  使用 /hyperframes 生成一段 10 秒的视频，介绍 Hyper Frames

方式三：Claude Design

这种方式，除了要付 Token 的钱，还要另外购买 Claude Design 的使用权，其实本质算第二种方式，只不过这种方式相比于在 Claude CLI 中使用体验更好、学习成本更低

• Step1：下载 claude-design-hyperframes.md

  地址：https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md

• Step2：生成视频

  在 claude.ai/design 附上文件 + 描述你的视频，把文件拖到聊天里。描述你的需求——包括截图、品牌资产，或者如果有的话，也可以做一个调色板

Claude Design 介绍

Claude Design 是什么

Claude Design是 Anthropic 推出的 对话式设计工具 / 能力（不是传统软件，是 Claude 的一种用法 / 模式）。

简单说就是：你用自然语言跟 Claude 聊天，它直接给你生成可编辑的网页 / 界面 / PPT / 视频草稿（HTML+CSS），不用你写代码。

详情请参考：Claude Design官方文档

Claude Design 有什么用

Claude Design vs 普通 Claude 聊天

• 普通 Claude：给你文字、代码片段
• Claude Design：直接给可运行、可预览、可渲染成视频的完整可视化成品

Claude Design 的工作原理

Claude Design 有两个主要区域：左侧是聊天界面，右侧是画布。您在聊天中描述您想要的内容，Claude 在画布上生成一个可工作的设计。从那里，您可以迭代——通过对话和内联注释进行细化，直到满意为止。

典型的流程是：

如何使用 Claude Design

它是 Claude 官方推出的一种，只能在网页版 Claude 的专用页面（claude.ai/design）用，付费专享、桌面 / 终端都不支持；生成的 HTML 天然适配 HyperFrames

HyperFrames 视频生成原理

核心原理

HyperFrames 摒弃传统剪辑软件逻辑，以网页前端技术为底座，依靠 Chrome Headless 无头浏览器 做画面实时渲染、逐帧捕获，再通过 FFmpeg 完成帧序列拼接、音视频编码封装，最终生成标准 MP4 视频；本质就是：写网页做动画 → 浏览器逐帧录屏 → FFmpeg 合成成片

生成流程

HyperFrames 的代码分为四个层次，从上到下依次是：

CLI (hyperframes render)
↓
Producer (@hyperframes/producer) 负责完整渲染流水线
↓
Engine (@hyperframes/engine) 负责帧捕获
↓
Core (@hyperframes/core) 提供运行时、类型、FrameAdapter

核心机制：Seek-and-Capture 循环

这是 HyperFrames 最核心的机制。它不“播放”视频，而是逐帧“跳转”和“截图”。

for (let frame = 0; frame <= totalFrames; frame++) {
const time = Math.floor(frame) / fps; // 整数除法，无浮点误差
await adapter.seekFrame(frame); // 把动画拨到这一时刻
// 捕获当前像素
}

关键点：

• 不依赖系统时钟：时间计算用整数帧号除以 fps，不依赖任何系统时钟，确保每帧精确
• 原子操作：每帧都是独立的静态快照，不存在半渲染状态
• 确定性输出：相同的输入，跑一百次，出来的视频像素级一致

帧捕获：Chrome DevTools Protocol

HyperFrames 启动的是 chrome-headless-shell（专为 CDP 控制优化的最小 Chrome 二进制），通过 Chrome DevTools Protocol 调用 HeadlessExperimental.beginFrame 这个 API。

这个 API 的作用是：

• 显式命令合成器渲染一帧，并把像素 buffer 直接返回给调用方
• 没有“等渲染完成”的时序问题
• 像素直接从 GPU 合成器取，不经过截图的 IPC 拷贝流程
• 每帧是原子操作，不存在半渲染状态

FrameAdapter 协议：动画运行时的接入层

FrameAdapter 是一个标准化接口，用于连接外部动画运行时（如 GSAP、Lottie、Three.js）与渲染引擎。

type FrameAdapter = {
id: string;
init?: (ctx: FrameAdapterContext) => Promise<void> | void;
getDurationFrames: () => number; // 视频总帧数
seekFrame: (frame: number) => void; // 把动画拨到第 N 帧
destroy?: () => void;
};

关键要求：

• seekFrame 必须是幂等的：同一帧调两次结果相同
• seekFrame 必须支持随机 seek：可以先 seek 第 90 帧再 seek 第 10 帧，不能有顺序依赖

以 GSAP 为例，它的 adapter 实现大概是：

seekFrame(frame) {
const time = frame / fps;
gsap.globalTimeline.pause();
gsap.globalTimeline.seek(time); // 直接拨时间轴
}

window.__hf 协议：引擎和页面的通信桥

引擎（Node.js 进程）和页面（浏览器内）之间通过 window.__hf 对象通信：

interface HfProtocol {
duration: number; // 视频总时长（秒）
seek(time: number): void; // 引擎调这个来驱动帧 seek
media?: HfMediaElement[]; // 音视频元素声明（给引擎做音频抽取用）
}

页面加载完成后，Core 注入的运行时把自己挂在 window.__hf 上。引擎每帧调 page.evaluate(() => window.__hf.seek(t))，页面内的 FrameAdapter 响应，GSAP 时间轴被拨到对应位置，然后引擎立刻调 beginFrame 捕获。

音频处理：单独抽取，最后混合

浏览器渲染是纯视觉的，音频不能从帧里捕获。Producer 的做法是把音频流程完全分离：

完整渲染流水线

用户编写 HTML 文件
↓
CLI 调用 Producer
↓
Producer 启动 chrome-headless-shell
↓
页面加载 HTML，Core 注入运行时
↓
Engine 开始 Seek-and-Capture 循环
├── 第 0 帧：seek(0) → beginFrame → 捕获像素
├── 第 1 帧：seek(1/fps) → beginFrame → 捕获像素
├── 第 2 帧：seek(2/fps) → beginFrame → 捕获像素
└── …直到 totalFrames
↓
Producer 将帧序列传给 FFmpeg 编码为视频
↓
Producer 处理音频流，混合到视频中
↓
输出最终 MP4 文件

参考资料：

• https://hyperframes.heygen.com/introduction
• https://zhuanlan.zhihu.com/p/2037524891298215582