HyperFrames 网站捕获实战：用 `npx hyperframes capture` 为任意网站建立视频素材库

HyperFrames 网站捕获实战用npx hyperframes capture为任意网站建立视频素材库【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage在 OpenMontage 仓库的 website-to-video 技能体系中Step 0: Capture捕获是整个网站转视频工作流的起点——它通过一条命令把目标网站下载为本地结构化素材供后续设计、简报、故事板等环节读取。本文基于 .agents/skills/website-to-video/references/step-0-capture.md 展开结合仓库内的技能定义与能力清单源码完整讲解捕获命令的用法、产物目录的隔离约定、成功判定标准与门控规则。读完本文你将能独立完成任意网站的捕获并正确组织捕获产物为后续视频制作铺路。Step 0 在整个工作流中的位置一步命令 一次校验website-to-video 技能将把网站变成视频拆解为 7 个步骤见 SKILL.md步骤职责产物/门控Step 0 Capture下载网站、提取结构化数据capture/目录 成功摘要Step 1 Brand Identity写 DESIGN.md 品牌速查表DESIGN.md存在且含色板/字体/dos dontsStep 2 Strategy Messaging对齐核心信息与叙事弧信息/弧/受众锁定Step 3 Storyboard Script概念优先的故事板与脚本STORYBOARD.mdSCRIPT.md且用户批准Step 4 VO, Timing CaptionsTTS、转录、时间戳映射narration.wavtranscript.jsonStep 5 Build Compositions构建 index.html 与各 beat逐 beat 通读检查Step 6 Validate Deliverlint、validate、快照、交付零错误 Studio 项目 URLStep 0 的定位非常克制捕获管道只负责下载站点并提取结构化数据供后续工作流读取所有分析读文件、看联系表、提炼品牌调性、挑选素材都发生在 Step 1–3而不是本步。它本质上是一次命令执行加一次 sanity check健全性校验不承担任何创意判断。运行捕获一条命令零 API Key 起步基础捕获不需要任何 API Key。在项目目录下执行npx hyperframes capture URL -o project-dir/capture典型示例捕获 Stripe 首页到视频项目目录下npx hyperframes capture https://stripe.com -o videos/stripe-launch/capture命令的行为在 capabilities.md 中有明确记录capture命令使用Puppeteerheadless Chrome抓取站点截图与品牌资源并支持可选的Gemini 视觉模型为每张图片生成 AI 描述同时会对捕获站点做前端库指纹检测——包括 GSAP/ScrollTrigger、Three.js、Lottie、Anime.js、PixiJS、Babylon.js、Rive、Matter.js、Lenis、Framer Motion、Tailwind CSS、WebGLshader 指纹等以便为后续上下文打标签。可选优化配置 Gemini API Key 换取 AI 视觉描述捕获命令前技能建议向用户说明一个可选项为了获得最佳效果建议设置 Gemini API Key——它能为每张捕获图片提供 AI 生成描述帮助我更好地为每个场景挑选合适素材。成本约为每张图 $0.001。你可以跳过但设置后视频质量会更好。配置方式在项目根目录的.env文件中添加GEMINI_API_KEYyour-key。免费 Key 可在 ai.google.dev 获取。配置方式# 在项目根目录 .env 文件中添加 GEMINI_API_KEYyour-key需要明确的关键差异没有 Gemini Key 时捕获照常工作但生成的asset-descriptions.md将只包含 DOM 上下文描述位置、尺寸、alt 文本而不是 AI 视觉描述。换言之Gemini 是锦上添花的质量增强项不是功能开关。产物隔离约定capture/ 与构建文件分居两层捕获产物应放进视频项目目录下的独立capture/子目录与后续构建文件物理隔离捕获产物留在capture/内screenshots/、assets/、extracted/、AGENTS.md、CLAUDE.md构建产物位于project-dir/根目录SCRIPT.md、STORYBOARD.md、DESIGN.md、compositions/、index.html、narration.wav、transcript.json、renders/、snapshots/这种隔离的意义在于捕获产物是只读的原材料而构建文件是不断演化的成品。如果两者混在同一层构建过程很容易误改捕获数据或让捕获目录被构建中间产物污染。探索性捕获例外如果只是看看某个网站、尚未决定要做视频使用默认的./capture/或任选-o name即可。隔离约定只在要在捕获之上构建视频时才需要严格遵守。确认成功一行摘要 失败即停等待捕获完成后Agent 应打印一行摘要汇报捕获结果Captured N screenshots, M assets, K SVGs, F fonts. Ready for Step 1.捕获了 N 张截图、M 个资源、K 个 SVG、F 个字体可以进入 Step 1。失败判定标准满足任一即视为失败必须停下来修复不得带着残缺的捕获进入 Step 1命令以非零退出码结束各项计数全部为零必需目录extracted/、assets/、screenshots/缺失。这条失败即停的纪律是整个工作流门控gate哲学的具体体现Step 0 的产物是后面所有步骤的输入一旦捕获不完整后续所有分析都会建立在错误数据之上与其带着坏数据走完 6 步再返工不如在第 0 步就止住。capture/ 目录内容参考表每个文件在哪个步骤首次读取Step 0 有一条重要的上下文管理原则不要在这里预读所有内容——每个下游步骤只读取自己需要的东西。提前全量读取会撑爆上下文窗口且产出的摘要等到真正使用时已经过期。路径首次读取时机capture/extracted/tokens.jsonStep 1DESIGN.md —— 颜色 / 字体capture/extracted/design-styles.jsonStep 1DESIGN.md —— 排版 / 组件capture/extracted/fonts-manifest.jsonStep 1字体识别capture/extracted/asset-descriptions.mdStep 2brief 依据和 Step 3素材挑选capture/extracted/visible-text.txtStep 2brief和 Step 3脚本capture/assets/contact-sheet-*.jpgStep 3素材挑选capture/assets/svgs/contact-sheet-*.jpgStep 3SVG / Logo 挑选capture/screenshots/contact-sheet-*.jpgStep 3视觉情绪参考capture/extracted/animations.jsonStep 3 / Step 5仅当站点有动画时capture/extracted/lottie-manifest.jsonStep 3仅当站点使用 Lottie 时capture/extracted/video-manifest.jsonStep 3仅当站点内嵌视频时capture/extracted/shaders.jsonStep 3 / Step 5仅当站点有 WebGL 时capture/assets/单个文件Step 5仅当放置某个具体素材时这张表揭示了捕获产物的设计哲学按需读取read what you need。tokens.json与design-styles.json服务于 Step 1 的品牌提炼——例如 step-1-design.md 要求不要凭截图猜颜色和字号而是从这两个文件取精确的计算值并用fonts-manifest.json核对字体捕获管道会读取每个下载字体文件的 OpenType name 表因此连 Next.js/Webpack 哈希重命名的字体也能识别出真实家族名asset-descriptions.md与visible-text.txt是 Step 2 简报对齐的依据各联系表contact sheet则是 Step 3 素材审计的眼睛。至于animations.json、lottie-manifest.json、video-manifest.json、shaders.json这类专项清单只有当捕获的站点确实用了对应技术时才需要读取属于按需深挖的存量。GateStep 0 的验收门槛Step 0 的退出门控非常简洁三条全过才能进入 Step 1捕获命令退出码为 0素材 / 截图 / 字体计数非零必需目录存在extracted/、assets/、screenshots/。这与整个技能体系的门控文化一脉相承。SKILL.md 特别强调自动模式不等于跳过所有门控——自动模式覆盖的只是用户偏好类问题TTS 提供商、音色、色彩侧重、beat 数量、是否配乐、是否加字幕等而质量验证类门控在任何模式下都不可跳过。Step 0 的捕获完整性检查就属于后者捕获失败时正确的做法是surface the error and stop展示错误并停下而不是带着残缺的捕获继续往下走。从捕获到成片Step 0 为后续 6 步铺设了什么理解 Step 0 的产物价值需要把它放回完整链条中看。捕获到的素材被定位为品牌工具包brand toolkit而非视频的积木——SKILL.md 在 Step 0 的说明中明确写道捕获的资产是稍后要使用的品牌工具包而不是视频本身的构建块。Step 1用它写出 250–350 行的 DESIGN.md 品牌速查表快速节奏视频可压缩到 50 行编码颜色、字体、组件 CSS、间距体系与迭代规则Step 2用它做简报对齐的品牌基线但对话焦点始终是这条视频必须传达的唯一信息素材清单不是讨论对象Step 3才真正接触联系表逐素材做 USE/SKIP 审计并给出理由Step 5构建每个 beat 时仅按需取用capture/assets/下具体的单个文件。也就是说Step 0 捕获的不是屏幕截图集而是一整套经过结构化的、可被后续每个环节精确索引的素材库——设计令牌、计算样式、字体清单、可见文本、资产描述、联系表、动画/视频/着色器清单一应俱全。小结一条命令 一次校验 一次干净的起点Step 0 是整个 website-to-video 工作流中最轻的一步但也是最不能出错的一步。回顾它的全部要点执行npx hyperframes capture URL -o project-dir/capture基础捕获无需 API Key可选地在项目根.env配置GEMINI_API_KEY约 $0.001/张图换取 AI 视觉资产描述跳过也不影响捕获本身把捕获产物放进独立的capture/子目录与构建文件分层隔离用一行摘要N 截图 / M 资源 / K SVG / F 字体汇报结果非零退出码、零计数或目录缺失时立即停止按各步骤只读自己需要的内容的原则消费产物参考表可在 step-0-capture.md 中随时查阅通过退出码 0 计数非零 目录齐全三重门控后才能安全进入 Step 1。捕获干净后续的设计、简报、故事板、配音、构建与验证才有坚实的地基。这正是 Step 0 在整个网站转视频流水线中的价值所在。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考