如何用 hyperframes capture 抓取真实网站的截图与素材，为产品视频准备项目文件夹

如何用 hyperframes capture 抓取真实网站的截图与素材为产品视频准备项目文件夹【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes当你做产品视频时画面里需要出现的是真实的产品界面而不是凭空搭建的假页面。HyperFrames 的capture命令就是干这件事的给定一个真实 URL它打开这个网站抓取滚动截图、提取 HTML/CSS、下载图片和字体、记录设计令牌与动画信息把结果放进一个可以直接交给 agent 构建视频的工作文件夹。官方文档中的示例就是「把 huly.io 的真实界面捕获进来而不是 mock 出来」这就是 产品视频指南 描述的工作方式。适用前提你需要一条可运行的命令路径因此本机要有 Node 环境。HyperFrames 支持免安装直接运行也可以装一次全局包# No install needed npx hyperframes command # Or install once npm install -g hyperframes已安装的版本永远以本机为准跑npx hyperframes capture --help能看到你的版本实际接受哪些参数见 CLI reference。运行 capture一条命令拿到素材文件夹基本用法是把 URL 作为位置参数传入npx hyperframes capture https://stripe.com npx hyperframes capture https://linear.app -o linear-capture npx hyperframes capture https://example.com --json不加-o时输出目录默认是./capture如果该名字已被占用CLI 会自动改用./capture-2/、./capture-3/递增命名重跑不会静默覆盖上次抓取的产物。想指定目录名就用-o例如上面的linear-capture。--json输出结构化结果供 agent 或脚本解析。命令跑完后终端会打印一段抓取摘要。以下是文档给出的示例结果数值只随页面不同而变化不要把它当成固定预期◇ Captured Stripe | Financial Infrastructure → capture Screenshots: 12 Assets: 45 Dropped: 9 (6 size-floor, 3 cap-reached) Sections: 15 Fonts: sohne-var生成的文件夹里有什么抓取产物是一个「原始素材文件夹」官方文档明确说它是 agent 的原料不是成品 composition。文件夹包含AGENTS.md、CLAUDE.md给编码 agent 的项目说明meta.json项目元数据滚动截图scroll screenshots与 contact sheets缩略图拼接页提取出的 HTML 与 CSS、页面可见文本设计令牌design tokens、字体文件、图片、SVG动画元数据以及页面暴露的 Lottie、video、WebGL 上下文。/product-launch-video工作流在「真实产品必须出现在画面里」时就是从这里取素材的。验证结果先看 Dropped再看 warnings 和 contact sheets摘要里的Dropped表示「页面引用了、但文件夹里没有」的资产数量及原因只有非零时才打印--json输出中它始终是一个dropped对象例如文档示例{ assets: 45, dropped: { size-floor: 6, budget-exhausted: 0, cap-reached: 3, unavailable: 0 } }四种原因的含义来自 CLI referenceReason含义size-floor下载后判定太小属于占位图或 tracking pixel不算真实资产budget-exhausted--capture-budget预算在轮到它之前用完。可以调大预算或传--skip-vision省出时间cap-reached触发了单次数上限30 个 inline SVG、30 个字体、每个字体家族 6 个字面unavailable请求或写入失败网络错误、超时、地址被拒、状态码异常、磁盘问题前三种是 capture 主动做的取舍最后一种是真正遇到的失败。所以文档给的判断方法是dropped全为零但结果偏少说明页面本身就薄dropped有计数则说明这次抓取被截断了。--json的输出中还有ok、warnings等字段可供核对。动态站点、受保护页面和不寻常的媒体加载器会产生部分结果因此官方建议在建片之前读一遍dropped、warnings 和 contact sheets确认截图覆盖了需要的界面区域。常用参数Flag说明--output, -o输出目录。默认./capture被占用时自动递增为./capture-2/、./capture-3/、…--timeout页面加载超时ms默认120000--capture-budget页面加载完成之后的预算ms默认120000。它是协作式的只阻止新任务开始不能中断已经在跑的工作--skip-assets不下载图片和 SVG--skip-vision不运行 AI 图片描述--max-screenshots会被接受但没有实际作用——capture 自己选择滚动位置--json结构化输出供程序使用可选分支如果页面引用了视频可以用--video folder切换到视频下载模式针对已抓取文件夹里的 manifest 操作与--list、--index或--video-url搭配使用# 列出抓取目录 manifest 中引用的视频 npx hyperframes capture --video ./linear-capture --list # 按 0 起始的索引下载某条视频 npx hyperframes capture --video ./linear-capture --index 0可选AI 图片描述如果希望抓到的图片附带 AI 生成的内容描述在.env文件里配置GEMINI_API_KEY文档标注约 $0.001/张或配置OPENROUTER_API_KEY走 OpenRouter 路由任意视觉模型。两者同时设置时 OpenRouter 生效HYPERFRAMES_OPENROUTER_MODEL可以覆盖所选模型。不想跑这一步就传--skip-vision。把文件夹交给视频工作流capture 产物本身不是视频下一步是让它进入构建流程。/product-launch-video工作流的标准做法是在项目目录里运行npx hyperframes capture URL -o ./capture --json并在进入后续步骤前检查这些门见 SKILL.mdcapture 的 JSON 报告ok: true文件夹中不存在capture/BLOCKED.md——它是抓取路径的硬停止信号出现时按其中记录的原因报告不要拿部分截图继续做capture/extracted/tokens.json、capture/extracted/visible-text.txt、capture/extracted/asset-descriptions.md和capture/assets/都存在你能根据抓取内容说出品牌是什么。其中capture/extracted/asset-descriptions.md是后续选素材时的唯一资产清单来源不要直接翻原始文件自己挑。抓取失败时不要伪造一条 no-capture 回退路径继续做。完成 capture 并核对dropped之后文件夹就可以按 产品视频指南 交给 agent给它真实 URL 和你想要的结果例如 30 秒 launch video它会在已抓取素材的基础上完成故事与渲染。更完整的命令与参数清单见 CLI reference命令选择入口见 CLI guide。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考