Skip to main content
为您的 AI 代理提供 URL 和创意方向。它捕获站点，提取品牌标识，编写脚本和故事板，生成画外音，构建动画作品，并提供可渲染的视频。 
"Create a 20-second product launch video from https://linear.app.
 Make it feel like an Apple keynote announcement."

​
入门

1

安装技巧

技能可教会您的 AI 代理如何捕获网站并创建 HyperFrames 作品。安装一次——它们在会话中持续存在。
npx skills add heygen-com/hyperframes
适用于 Claude Code、Cursor、Gemini CLI 和 Codex CLI。
2

提示您的代理人

在任意目录中打开您的代理并描述您想要的视频：
Create a 25-second product launch video from https://example.com. Bold, cinematic, dark theme energy.
代理在看到 URL 和视频请求时加载技能，并运行完整的管道 - 捕获、设计、脚本、故事板、配音、构建、验证。
当代理看到 URL 和视频请求时，也会自动触发此技能。
3

预览

npx hyperframes preview
在浏览器中打开视频。编辑自动重新加载。
4

渲染为 MP4

npx hyperframes render --output my-video.mp4

✓ Captured 750 frames in 12.4s
✓ Encoded to my-video.mp4 (25.0s, 1920×1080, 6.8MB)
您不需要手动运行 npx hyperframes capture — 该技能会指示代理进行捕获作为第一步。捕获命令记录在下面以供高级使用。

​
管道如何运作

该技能遵循 Hyperframes pipeline：七个步骤，每个步骤都会生成一个命名工件，为下一个工件提供数据。
步输出会发生什么
捕获capture/提取屏幕截图、设计令牌、字体、资源、动画
设计DESIGN.md品牌参考——颜色、排版、注意事项
脚本SCRIPT.md带有挂钩、故事、证明、CTA 的旁白文本
故事板STORYBOARD.md每节拍的创意方向——情绪、资产、动画、过渡
画外音 + 计时narration.wav + transcript.json带有字级时间戳的 TTS 音频
建造compositions/*.html动画 HTML 作品，每节拍一个
证实快照 PNG交货前目视验证
请参阅管道指南，了解每个步骤的详细演练、每个生成文件的内容以及如何在不重新运行整个管道的情况下进行迭代。该结构对于任何 Hyperframes 项目都很有用，而不仅仅是网站捕获。

​
视频类型

提示决定格式。包括持续时间和创意方向：
类型期间例子
社交广告10–15秒“15 秒的 Instagram 片段。充满活力、快速剪辑。”
产品发布20–30秒“25 秒产品发布。苹果主题演讲能量。”
产品展示30-60秒“45 秒的游览展示了 3 个最重要的功能。”
品牌卷轴15-30秒“20 秒品牌视频。庆祝设计。”
功能公告15–25秒“强调新人工智能代理的功能公告。”
预告片8–15秒“10 秒预告片。超级简单。只是钩子。”
创意方向比格式更重要。 _“有趣、手工制作的感觉”或“黑暗、以开发人员为中心、显示代码”_塑造故事板并驱动代理做出的每一个视觉决策。

​
使用 Gemini Vision 丰富拍摄内容

默认情况下，捕获使用 DOM 上下文描述资产 - 替代文本、附近的标题、CSS 类。添加 Gemini API 密钥，以使用视觉进行更丰富的人工智能驱动的描述。 在项目根目录中创建 .env 文件： 
echo "GEMINI_API_KEY=your-key-here" > .env

- hero-bg.png — 582KB, section: "Hero", above fold
代理知道该文件存在以及它在页面上的位置，但不知道它是什么样子。
等级速率限制每张图像的成本
自由的5转/分自由的
有薪酬的2,000转/分钟~$0.001
在付费套餐中，拍摄 40 张图像的典型费用约为 0.04 美元。

​
捕获命令

该技能会自动运行捕获，但您可以直接运行它以进行预缓存、调试或使用视频制作之外的数据。 
npx hyperframes capture https://stripe.com

◇  Captured Stripe | Financial Infrastructure → captures/stripe-com

  Screenshots: 12
  Assets: 45
  Sections: 15
  Fonts: sohne-var
旗帜默认描述
-o, --outputcaptures/<hostname>输出目录
--timeout120000页面加载超时（毫秒）
--skip-assetsfalse跳过下载图像和字体
--max-screenshots24最大截图数
--jsonfalse输出结构化 JSON 以供编程使用

​
捕获什么

数据描述
截图视口在每个滚动深度捕获 - 基于页面高度的动态计数
颜色像素采样主色 + 计算样式，包括 oklch/lab 转换
字体CSS 字体系列 + 下载的 woff2 文件
资产图像、具有语义名称的 SVG、Lottie 动画、视频预览
文本所有可见文本均按 DOM 顺序排列
动画Web 动画 API、滚动触发动画、WebGL 着色器
章节包含标题、类型、背景颜色的页面结构
商品交易顾问通过类名称和文本模式检测到的按钮和链接

​
快照命令

从构建的视频中捕获关键帧作为 PNG - 无需完整渲染即可验证合成： 
npx hyperframes snapshot my-project --at 2.9,10.4,18.7
旗帜默认描述
--frames5均匀间隔的帧数
--at—以秒为单位的逗号分隔时间戳
--timeout5000Ms 等待运行时初始化

​
迭代

您不需要重新运行整个管道来进行更改：
  • 编辑故事板 — STORYBOARD.md 是创意北极星。更改节拍的情绪或资产，然后要求代理重建该节拍。
  • 编辑合成 — 直接打开 compositions/beat-3-proof.html 并调整动画、颜色或布局。
  • 重建一个节拍 — “用更多能量重建节拍 2。使用产品屏幕截图作为全屏背景。”
有关更多重入模式，请参阅管道指南。

​
故障排除

增加具有 Cloudflare 或大量客户端渲染的站点的超时：
npx hyperframes capture https://example.com --timeout 180000
使用 Framer 等框架的网站通过 IntersectionObserver 延迟加载图像。捕获滚动​​页面以触发加载，但很长的页面可能会丢失底部附近的图像。添加 Gemini 密钥可以改进捕获资产的描述，但不会增加计数。
捕获使用像素采样与 DOM 计算样式相结合。深色网站应在调色板中显示深色。检查 captures/<name>/screenshots/ 中的滚动屏幕截图以查看捕获实际看到的内容。
验证技能是否已安装：
npx skills add heygen-com/hyperframes
用_“使用/网站到超框架技能”_ 来引导你的提示，以获得最可靠的结果。当代理看到 URL 和视频请求时，也会自动发现它。

​
下一步

管道

此工作流程遵循规范的 7 步骤结构。

快速入门

刚接触HyperFrames？从这里开始。

GSAP动画

合成中使用的动画模式。

渲染

渲染为 MP4、MOV 或 WebM。