网站转视频

给你的 AI 代理一个 URL 和创意方向。它会捕获网站、提取品牌识别、编写脚本和故事板、生成配音、构建动画合成，并交付可渲染的视频。

"Create a 20-second product launch video from https://linear.app.
Make it feel like an Apple keynote announcement."

快速开始

安装 skills

Skills 教会你的 AI 代理如何捕获网站和创建 HyperFrames 合成。安装一次——跨会话持续存在。

npx skills add heygen-com/hyperframes

适用于 Claude Code、Cursor、Gemini CLI 和 Codex CLI。

提示你的代理

在任意目录中打开你的代理并描述你想要的视频：

Create a 25-second product launch video from https://example.com. Bold, cinematic, dark theme energy.

代理在看到 URL 和视频请求时加载 skill，并运行完整流水线——采集、设计、脚本、故事板、配音、构建、验证。

ℹ️ Note

代理在看到 URL 和视频请求时也会自动触发此 skill。

预览

npx hyperframes preview

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

渲染为 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)

ℹ️ Note

你不需要手动运行 npx hyperframes capture——skill 会指示代理在第一步进行采集。采集命令在下方有高级用法文档。

流水线如何工作

Skill 遵循 Hyperframes 流水线：七个步骤，每个步骤产生一个命名产物供下一步使用。

每个步骤的详细说明、每个生成文件的内容以及如何在不重新运行整个流水线的情况下迭代，请参见流水线指南。此结构对任何 Hyperframes 项目都有用，不仅仅是网站采集。

视频类型

提示词决定格式。包含时长和创意方向：

💡 Tip

创意方向比格式更重要。"俏皮、手工感" 或 "暗色、面向开发者、展示代码" 会塑造故事板并驱动代理做出的每个视觉决策。

通过 Gemini Vision 增强采集

默认情况下，采集使用 DOM 上下文描述素材——alt 文本、附近标题、CSS 类。添加 Gemini API 密钥可获得使用视觉的更丰富的 AI 驱动描述。

在项目根目录创建 .env 文件：

echo "GEMINI_API_KEY=your-key-here" > .env

不使用 Gemini

- hero-bg.png — 582KB, section: "Hero", above fold

代理知道文件存在及其在页面上的位置，但不知道它长什么样。

使用 Gemini

- hero-bg.png — 582KB, A gradient wave in purple and blue sweeps
across a dark background, creating an aurora-like effect.

代理知道图片实际显示的内容，从而在故事板中做出更好的创意决策。

典型包含 40 张图片的采集在付费层费用约为 $0.04。

采集命令

Skill 自动运行采集，但你可以直接运行它用于预缓存、调试或将数据用于视频制作之外。

npx hyperframes capture https://stripe.com

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

Screenshots: 12
Assets: 45
Sections: 15
Fonts: sohne-var

采集了什么

快照命令

从构建的视频中捕获关键帧为 PNG——无需完整渲染即可验证合成：

npx hyperframes snapshot my-project --at 2.9,10.4,18.7

迭代

你不需要重新运行整个流水线来进行更改：

• 编辑故事板——STORYBOARD.md 是创意北极星。更改一个拍的氛围或素材，然后要求代理仅重建该拍。
• 编辑合成——直接打开 compositions/beat-3-proof.html 并调整动画、颜色或布局。
• 重建一个拍——"重建拍 2，更有活力。使用产品截图作为全出血背景。"

更多重新进入模式请参见流水线指南。

故障排除

npx hyperframes capture https://example.com --timeout 180000

npx skills add heygen-com/hyperframes

下一步

• 流水线 此工作流遵循的规范 7 步结构。
• 快速开始 HyperFrames 新手？从这里开始。
• GSAP 动画 合成中使用的动画模式。
• 渲染 渲染为 MP4、MOV 或 WebM。