Skip to main content
为您的 AI 代理提供 URL 和创意方向。它捕获站点，提取品牌标识，编写脚本和故事板，生成画外音，构建动画作品，并提供可渲染的视频。

​
入门

1

安装技巧

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

提示您的代理人

在任意目录中打开您的代理并描述您想要的视频：
代理在看到 URL 和视频请求时加载技能，并运行完整的管道 - 捕获、设计、脚本、故事板、配音、构建、验证。
当代理看到 URL 和视频请求时，也会自动触发此技能。
3

预览

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

渲染为 MP4

您不需要手动运行 npx hyperframes capture — 该技能会指示代理进行捕获作为第一步。捕获命令记录在下面以供高级使用。

​
管道如何运作

该技能遵循 Hyperframes pipeline：七个步骤，每个步骤都会生成一个命名工件，为下一个工件提供数据。 请参阅管道指南，了解每个步骤的详细演练、每个生成文件的内容以及如何在不重新运行整个管道的情况下进行迭代。该结构对于任何 Hyperframes 项目都很有用，而不仅仅是网站捕获。

​
视频类型

提示决定格式。包括持续时间和创意方向：
创意方向比格式更重要。 _“有趣、手工制作的感觉”或“黑暗、以开发人员为中心、显示代码”_塑造故事板并驱动代理做出的每一个视觉决策。

​
使用 Gemini Vision 丰富拍摄内容

默认情况下，捕获使用 DOM 上下文描述资产 - 替代文本、附近的标题、CSS 类。添加 Gemini API 密钥，以使用视觉进行更丰富的人工智能驱动的描述。 在项目根目录中创建 .env 文件：
代理知道该文件存在以及它在页面上的位置，但不知道它是什么样子。
在付费套餐中，拍摄 40 张图像的典型费用约为 0.04 美元。

​
捕获命令

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

​
捕获什么

​
快照命令

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

​
迭代

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

​
故障排除

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

​
下一步

管道

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

快速入门

刚接触HyperFrames？从这里开始。

GSAP动画

合成中使用的动画模式。

渲染

渲染为 MP4、MOV 或 WebM。