OpenMontage 的 website-to-video 技能把一个网站变成品牌级动态视频的七步门控工作流【免费下载链接】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/OpenMontageOpenMontage 把AI 编码助手 视频生产技术封装成一个个可路由的 Agent 技能skill其中 website-to-video 是面向通用网站的场景技能用hyperframes capture抓取站点视觉资产经过品牌识别、策略对齐、分镜脚本、配音时序、合成构建到验证交付共 7 个门控步骤最终产出一支用站点自身视觉语言构建的 HyperFrames 视频站点导览、品牌宣传片或社交短片。读完本文你将掌握这条流水线的完整命令、每一步的产物artifact与验收门gate以及仓库内验证脚本 w2h-verify.mjs 所编码的硬性质量阈值。一、技能定位与路由边界在 OpenMontage 的技能体系中.agents/skills/下包含 hyperframes、remotion、gsap、manim 等 100 多个技能文件website-to-video 的适用边界由 SKILL.md 的 frontmatter 明确划定适用把通用网站/URL变成 HyperFrames 视频——作品集、博客、落地页展示或从站点自身视觉素材制作的社交短片。典型用户意图把这个网站做成 15 秒的 Instagram 短片、基于这个 URL 做一段 30 秒站点导览。不适用应路由到其他技能产品/SaaS 发布宣传即使用 URL 发起→/product-launch-video无站点的主题解说 →/faceless-explainerGitHub PR 转视频 →/pr-to-video给已有视频加字幕 →/embedded-captions无解说的页面高亮动效 →/motion-graphics。当发布宣传与通用站点意图模糊时文档要求先阅读/hyperframes技能本仓库对应 .agents/skills/hyperframes/SKILL.md里的完整路由表或先问用户一个问题。另外SKILL.md 开头要求在准备音频/图片素材前先调用/media-use技能从 HeyGen catalog 解析 BGM/SFX/图片并先运行--adopt登记已有素材。二、七步门控工作流总览工作流共 7 步每一步产出一个产物并作为下一步的门控条件。默认协作模式下标记 的步骤会停下来与用户对齐当用户进入自主模式你决定吧、surprise me时 的用户偏好类问题可跳过但质量验证类门控不可跳过步骤产物门控条件节选Step 0 抓取与品牌理解capture/目录 站点摘要抓取退出码为 0截图/资产/字体数量非零登录状态已向用户展示Step 1 品牌识别DESIGN.md文件存在且至少包含色板、字体选择、dos/dontsStep 2 策略与信息锁定的 brief9 项视频类型、时长、格式、核心信息与叙事弧线全部锁定Step 3 分镜 脚本 STORYBOARD.mdSCRIPT.md两份文件存在且用户已批准Step 4 配音 时序 字幕 narration.wavtranscript.json或无解说且分镜含手动时长或音频与词级时间戳已生成Step 5 构建合成index.htmlcompositions/beat-N.html每个 beat HTML 被主 agent 逐行读取比对Step 6 验证交付lint/validate 通过 Studio 预览 URLnpx hyperframes lint与validate零错误自主模式的判定标准在 SKILL.md 中写得很直白偏好决定视频内容用什么声音、要不要字幕自动模式可以代决验证决定质量证据Asset Audit、逐 beat 阅读、DoD 清单、诚实披露自动模式不能代决。原文特别点名如果 agent 用auto mode 偏向行动所以我跳过 X来为跳过验证开脱这个推理是错误的。三、Step 0抓取与品牌理解详细规则见 step-0-capture.md。Step 0 的原则是一条命令 一次健全性检查所有分析读文件、看 contact sheet、推导品牌语气、选素材都推迟到 Step 1–3 进行避免在抓取阶段预先拉取一切导致上下文膨胀。3.1 运行抓取基础抓取不需要任何 API key。但文档建议在运行前询问用户是否配置 Gemini API key——它能为每张被抓取的图片生成 AI 视觉描述帮助后续选素材文档标注成本约 $0.001/张。配置方式是项目根目录.env中写GEMINI_API_KEYyour-key跳过时抓取照常工作只是asset-descriptions.md里只有 DOM 上下文描述位置、尺寸、alt 文本而非 AI 视觉描述。核心命令npx hyperframes capture URL -o project-dir/capture # 示例 npx hyperframes capture https://stripe.com -o videos/stripe-launch/capture抓取产物统一放进项目内的capture/子目录与后续构建文件SCRIPT.md、STORYBOARD.md、DESIGN.md、compositions/、index.html、narration.wav、transcript.json、renders/、snapshots/隔离后者都放在project-dir/根下。3.2 登录状态门控在写 brief 之前运行npx hyperframes auth status并逐字转发其输出不要转述。它报告语音/BGM 将使用 HeyGen 还是本地引擎若未登录必须停下来等用户二选一登录或说go/offline继续用本地引擎。文档强调这是一个真实决策点不能折叠进 brief 提问里也不要把 key 写进仓库的.env自主模式下记录状态后按 offline 继续。3.3 capture/ 产物的按需读取表step-0 文档给出一张参考表规定每个产物首次读取的时机不要提前读路径首次读取时机capture/extracted/tokens.jsonStep 1DESIGN.md 的颜色/字体capture/extracted/design-styles.jsonStep 1排版/组件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仅当站点用 Lottiecapture/extracted/video-manifest.jsonStep 3仅当站点内嵌视频capture/extracted/shaders.jsonStep 3 / Step 5仅当站点有 WebGLcapture/assets/单个文件Step 5放置具体素材时门控抓取退出码 0且截图/资产/字体计数非零extracted/、assets/、screenshots/目录齐全才能进入 Step 1。四、Step 1编写 DESIGN.md 品牌速查表step-1-design.md 的定义DESIGN.md 是品牌真相速查表——记录子 agent 在构建每个 beat 时要翻的承重旋钮哪个颜色是主色、哪个字体做标题、品牌什么调性。它不是布局规范、不是moodboard、不是400 行设计系统审计报告。目标长度 250–350 行。文档给出两条边界经验低于 200 行子 agent 没有品牌组件 DNA产出容易退化成通用暗色电影风超过 350 行则是过度投入文字。例外是快节奏billboard-per-beat类社交广告——50 行的颜色 字体 3-5 条 dos/donts 就够因为 Step 5 的子 agent 提示词会把品牌值直接内联粘贴。用户偏好永远覆盖品牌规则DESIGN.md 描述的是被抓取网站视频可以刻意打破它。4.1 三个数据源DESIGN.md 由三个抓取产物构建不许从截图猜值tokens.json——主品牌色HEX与字体家族含字重区间design-styles.json——从实时 DOM 计算的 CSS 值各文本角色的字号/字重/行高/字距、按钮变体背景/内边距/圆角/阴影、卡片/容器/导航样式、间距标尺、圆角标尺、带使用计数的 box-shadow 值是第 3–5 节的主数据源fonts-manifest.json——抓取管线读取每个下载字体文件内嵌的 OpenTypename表所以即使 Next.js/Webpack 哈希重命名的字体也能还原真实家族名Inter、JetBrains Mono 等。manifest 提供两个视图families[]每个家族的已抓取字重、是否可变字体、归属文件和files[]每个下载字体的 family/subfamily/weight/style/variation axes。使用规则按families[].family命名若variable: true且包含wght轴即使只抓到一个静态字重也可用font-variation-settings: wght value取 100–900 任意字重要在 DESIGN.md 中注明unidentified[]非空时标unknown并给回退方案品牌 CDN 托管的商业字体GT Walsheim、Söhne 等不会出现在 manifest 里——拿design-styles.json中的使用字体与 manifest 做差集缺的显式标注替代如 Söhne not in capture; use Inter 600 as substitute。4.2 五个章节Visual Theme一段话3–5 句描述品牌视觉性格——明/暗优先、对比策略、主导视觉元素渐变/插画/摄影/UI mockup、整体氛围、区别于任何网站的独特点。这是唯一的纯文字章节必须具体到该品牌。Quick Reference色板 8–12 个用有含义的品牌名Stripe Purple而非 Accent 1对每个文字-底面组合计算 WCAG AA 对比度并显式标出失败项——文档给出真实事故某品牌的次级文字色#68686A在暗面板#18191B上只有 3.16:1不及 4.5:1 下限子 agent 忠实复刻品牌色导致不可读因此要在此处编码安全/不安全配对品牌色板自身不达 WCAG 时直接写替代色。字体部分要求列出每个家族 字重对应的确切文件路径子 agent 会逐字复制font-face块文档记录的失败模式agent 把 ES Build Neutral 的font-face指到 Inter 的.woff2上wordmark 直接渲染成 Inter。Component Stylings构建阶段被查阅最多的章节。目标 6–12 个不同组件逐个给出 CSS 级属性背景、文字色、内边距、圆角、边框、字号/字重、高度、box-shadow、hover/active/disabled 态。文档给出的规则如果 Step 5 的子 agent 需要为一个该品牌真实使用的组件发明 CSS 值说明这一节写少了——值应该可查而不是可猜。Spacing Layout间距标尺基元通常 4px/8px附使用场景表、圆角标尺每个圆角值及使用者、留白哲学一段话该品牌的实际节奏。Iteration Guide5–10 条编号规则每条是用该站具体值写成的一句可执行指令。文档给出了通用规则 vs 站点专属规则的对照表如通用版用主品牌色做 CTA vs 专属版所有主 CTA 用 Stripe Purple #533AFD次级用白底 #533AFD 边框文字系统里没有第三种按钮色并给出检验法把品牌换成别的还成立吗成立就太通用删掉。收尾还有30 秒用户确认向用户复述提取到的颜色/字体/语气问是否需要更正——在这里花一分钟能省掉 30 分钟重建。五、Step 2策略与信息对齐step-2-brief.md 要求先扫一遍 capabilities.md 的 24 行目录它列出 HyperFrames 全部能力14 个 WebGL shader 转场、30 CSS 转场、HTML-in-Canvas、音频驱动动画、51 个 registry block 等以便告诉用户什么做得到。这一步先解析用户提示词用户往往已给出视频类型/风格/时长只追问缺的项。文档设计的五个问题视频用途社交广告15–20s/产品演示30–60s/发布预告15–25s/品牌 reel20–45s/功能公告15–30s或其他风格/氛围要求用开放式问题节奏快慢、明暗氛围、要不要解说、有无具体参考禁止给出Cinematic 暗 发光 Apple keynote 能量这类预填描述菜单——带内置描述的标签会把那个描述直接变成 brief这支视频必须传达的唯一信息策略核心问题外加叙事弧线选择Problem→Solution / Reveal / Demonstration / Vibe / Comparison / 自定义要不要解说有解说 → Step 3 含完整脚本、Step 4 走 TTS转写时间戳无解说 → Step 3 的 VO cue 留空、Step 4 跳过beat 时长在分镜里按节奏手动规划画幅若未指定横屏 1920×1080默认/竖屏 1080×1920/方形 1080×1080。对surprise me的处理最低上下文是投放渠道 受众两者缺一就问一次然后继续随后仍要写有野心的分镜——surprise me 是惊艳我不是求稳。9 项锁定门控进入 Step 3 前必须全部锁定① 核心信息一句话② 叙事弧线 ③ 受众与观看场景 ④ 视频类型 ⑤ 时长可由类型推断⑥ 风格方向叠加在 Step 1 品牌基线上⑦ 用户明确点名的场景/效果 ⑧ 解说 ⑨ 画幅。文档的示例判断用户说给 huly.io 做产品演示、展示看板、暗色电影感、全解说则类型/风格/具体要求/解说已锁定仍需推导或追问的是信息、弧线、受众。六、Step 3分镜 脚本concept-firststep-3-storyboard.md 是最厚重的一份参考约 570 行。核心顺序是信息 → 叙事弧线 → 服务弧线的 beat → 每个 beat 用什么素材与技术抓取资产是与合成 beat 平级的一等内容但不许从资产清单出发我们有这些截图做个轮播吧正是本技能要打破的 slideshow 模式。6.1 Concept 块与节奏映射STORYBOARD.md顶部先写 concept 块Message / Arc / Audience / Brand voice / Why this matters now任何一行空缺都不许往下写并附单句检验这支视频与任何同行业品牌的同类视频有何不同答不出就是概念不够锋利。随后按用户措辞映射节奏用户表述节奏beat 数单 beat 时长架构fast、punchy、rapid cuts、社交广告Fast8–150.7–1.8s单文件堆叠 beat硬切demo、walkthrough、show featuresModerate4–63–5s子合成 CSS 交叉淡化cinematic、premium、slowSlow3–45–8s子合成 长交叉淡化launch、announcement、narrativeArc5–7变化慢开场 → 递进中段 → 快峰值 → 收束6.2 技术清单、Asset Audit 与 shot 语法写 beat 文案前必须为每个 beat 点名2–4 个技术只能想到 1 个就要重新设计该 beat并写清 customize 计划品牌色、真实数据、解说同步——没有具体技术、没有定制计划、没有品牌专属数据的展示看板就是偷懒思维。Asset Audit 是硬性门控不可跳过文档记录了真实失败——早期会话自写Asset Audit对 65 个抓取资产中 60 标 SKIP、只用 logo成片与通用暗色 SaaS 发布片无法区分。规定流程逐页打开capture/assets/contact-sheet-*.jpg和svgs/contact-sheet-*.jpg每页先点名 5 个具体资产再翻页在 STORYBOARD.md 里为每页贴固定格式审计块对每个候选资产在每个 beat 处标 USE构建期以img/内联 SVG/背景图出现或 SKIP须给一句具体理由品牌默认下限至少一个 beat 必须使用品牌标志性视觉hero 插画/hero 摄影/签名图不是 logo。禁止事项包括只读asset-descriptions.md按文件名做决定、我用 CSS 重建那张 GitHub 同步图品牌自己的 SVG 就在capture/assets/里用真资产。shot 语法部分把 beat 当作镜头而非布局六种景别Extreme close-up单一元素占 60–90% 画幅、Close-up小 UI 区域占 40–60%、MediumUI 区块占 60–80%、Wide完整 UI仅作建立镜头、Over-the-shoulder前景 1/3 UI 中景、Dutch angle倾斜 4–8° 制造紧张。文档警告wide shot 陷阱产品演示片建议 60% 近景 20% 中景 10% 全景 10% 特写每个 beat 至少一个镜头运动dolly in1.0→1.08 缩放漂移、pull-back、push、视差 pan、orbit、rack focus。没有镜头运动、元素只在开头飞入的 beat会被读作带入场动画的网页禁用模式清单macOS/浏览器窗口 chrome 当内容外框、侧边栏/页眉页脚、六边留 60–120px 的居中卡片、±1–2px 的呼吸微动视频分辨率下不可见、超过 1.5s 的静止 hold、hover 状态演示、解释性 tooltip/弹窗。6.3 SFX 分配在分镜阶段决定不在 Step 5 决定SFX 素材库随技能提供assets/sfx/manifest.json 登记了 18 条音效chime、click、glitch-1/2/3、impact-bass-1/2、notification、ping、pop、riser、sparkle、typing、whoosh 系列等每条含文件名、时长秒与描述。分镜里为具体时刻指定具体文件如sfx/impact-bass-1.mp3at0.2s, volume0.35并遵守三类放置规则Impact/hit 类峰值在片段开头在视觉瞬间精确触发衰减尾自然流入下一场景J-Cutdata-duration等于 manifest 中的完整时长永不截短Riser/build-up 类峰值在片段结尾要让峰值落在 climax 时刻需在climax_time - sfx_duration触发如 10.03s 的riser.mp3要在 t20s 转场峰值则 t9.97s 触发;短 accent 类click/chime/sparkle/ping在视觉标点时刻精确触发。其他硬规则大多数 beat 需要 0 个 SFX每 beat 一个居多shader 转场上直接放 SFX 是禁止的SFX 与解说重叠时音量压到 0.2–0.3HyperFrames 没有自动 ducking。6.4 每 beat 的字段与脚本规则每个 beat 必须写明Concept这个场景在前后景逻辑中代表什么、VO cue、Visual description用摄影语言分层描述前/中/背景、Composition Accents合成主体 可选品牌点缀点缀按capture/assets/filename写位置/不透明度/处理/运动、Text Animations每个文本元素点名具体效果 ID、Beat TimingTransition in at: XsGSAP duration: Ys直接对应 Step 5 的data-start/data-duration、Animation Sequence动画事件必须横跨整个 beat 时长任何元素停留超过 ~2s 不变即死气。配套规则还包括按解说长度剪片22s 音频 → 24s 视频含 2s CTA hold而不是 30s 带 8s 死寂尺寸用画幅填充百分比而非像素开场 beat 默认要做拦住滚动的快 intro1.0–1.5s 内落钩子CTA 收束 beat 是公认弱项logo 入场要当成事件做VO 起始时机叠加在 intro 上 / intro 结束后 / 先几秒纯音乐在分镜阶段定死。脚本规则自然语速约 2.5 词/秒15s ≈ 37 词30s ≈ 75 词用缩略词并朗读检查数字写成口语$1.9T→ nearly two trillion dollars钩子先行禁止 Welcome to... / Introducing... 开场结构 Hook → Story → Proof → CTA15s 广告可省 Story。写完后以逐 beat 一句话的形式向用户呈现 STORYBOARD SCRIPT 供审 门控改一个分镜 beat 只要 30 秒改一个已构建合成要 5 分钟——这是最便宜的重做窗口。七、Step 4配音、时序与字幕step-4-vo.md 的第一条经验法则先做 2 句试音量出真实时长再全量生成。原因Kokoro 会把脚本压缩约 40%计划 35s → 实际 19sHeyGen 语速快于预期。若发现偏差超 15%先修脚本/补停顿再全量生成# 快速 Kokoro 试音2 句话 npx hyperframes tts First sentence. Second sentence. --voice af_nova --output /tmp/test-tts.wav # 估算试音秒数 ÷ 试音词数 × 脚本总词数 预估完整语音时长时长校准规则音频短于计划 15% 以上 → 在narration.txt中插入空行≈0.6s/个或...≈0.4s/个补策略性停顿尽量落在 beat 边界长于 15% 以上 → 找词密度最高的 beat 删一句支撑句保留点题首句边界漂移 → 以实际音频为准改分镜时长而不是反过来。三个 TTS 供应商需向用户确认选择供应商特点词级时间戳HeyGen TTS质量好的声音需 HeyGen API key生成响应直接返回word_timestamps省掉单独转写ElevenLabs声音库大、最自然需 ElevenLabs API key不返回时间戳需单独转写Kokoro免费、本地运行、无需 key54 个声音--list查看不返回时间戳需单独转写HeyGen 走 v3 APIx-api-key仅对账号 API key 有效OAuth 登录场景要改发Authorization: Bearer或用 MCP 工具ElevenLabs 可直接调 REST API——完整 curl 命令含eleven_multilingual_v2模型参数、word_timestamps落盘脚本以 step-4-vo.md 原文为准。Kokoro 的本地命令npx hyperframes tts SCRIPT.md --voice af_nova --output narration.wavKokoro 的发音问题要在生成前做替换API→A P I、UI→U I、SaaS→sass产品名容易读错Vercel → versatile先在narration.txt里按音重写不要用 SSML——Kokoro 会把标签当字面文本读出来停顿一律用空行或...。同时把实际送入 TTS 的文本存为narration.txt区别于人类可读的SCRIPT.md方便日后换声音重生成。转写与映射HeyGen 返回的时间戳需做字段归一化word→textElevenLabs/Kokoro 走npx hyperframes transcribe narration.wav # 产出 transcript.json[{ text, start, end }]映射规则逐 beat 在transcript.json中找到 VO cue 的首词与末词beat.start firstWord.start、beat.end lastWord.end尾部再加 0.3–0.5s 呼吸余量把分镜里的估算时间替换成真实时间戳如 0.00–3.21sbeat 边界落在词起始上——对 VO 硬切。时序对账进入 Step 5 前必须完成real_total last_word.end cta_hold通常 2–3s planned_total 各 beat 计划时长之和 delta |real_total - planned_total|delta 超过计划总时长 15% 就不许进入 Step 5Kokoro 偏短 → 按 19/30 这类比例把非 CTA beat 等比压缩并更新 STORYBOARD.md偏长超 30% → 删一个 beat 的 VO 重新生成CTA 固定规则cta_start last_word.end 0.3s、cta_duration 2.5s硬上限。大幅调整时长必须告知用户。最后询问字幕要字幕则 Step 5 建独立合成compositions/captions.html由transcript.json逐词驱动无解说词时间戳就不建见 Step 5 的空字幕禁令并把最终 beat 时序start/duration记录下来供 Step 5 装配index.html。八、Step 5构建合成step-5-build.md 开头先立两条字幕红线绝不创建空转录const script []的captions.html无声无息浪费一条轨道每个字幕词组必须以opacity: 0/visibility: hiddenposition: absolute起步且同一时刻只可见一组。构建前先核对手头材料STORYBOARD.md构建规格、DESIGN.md查值时再查不必整读、asset-descriptions.md、transcript.json并加载hyperframes技能。8.1 根 index.html两种架构节奏架构原因Fastbillboard-per-beat单index.html堆叠div classbeat GSAP 透明度排序tl.set()硬切不用子合成、不用HyperShader子合成引入加载延迟单文件 零延迟Moderate / Slow / Arc每 beat 一个compositions/beat-N.html子合成 HyperShader.init()场景编排转场需要 HyperShader 的合层能力子 agent 可并行构建各 beat多场景架构的完整模式每个字段都关键host div 必须同时有id与同值的data-composition-idHyperShader.init 用getElementById每个 beat 的data-start必须递增、data-duration必须等于子合成内部 GSAP 时间线的 BEAT 常量——渲染引擎按global_time - data_start去 seek 子时间线全部写 0 会导致 t10s 时 5.5s 时间线被 seek 过端、内容全部消失script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script script srchyper-shader-local.js/script div idroot>node repo-root/skills/website-to-video/scripts/w2h-verify.mjs project-dir # 从项目子目录定位脚本 find $HOME -path */skills/website-to-video/scripts/w2h-verify.mjs -maxdepth 10 2/dev/null | head -1文档要求把报告逐字贴进最终用户总结不许摘要、不许挑行、不许把百分比换成形容词FAIL 行要么修到 PASS要么原样放进未验证区并附一句不修的理由。9.2 lint / validate / snapshot快照数量按视频长度缩放公式max(beats × 3, ceil(duration_seconds / 2))3 beat 10s → 9 帧8 beat 60s → 30 帧目标每 beat 至少覆盖入场/驻留/近出场三帧npx hyperframes snapshot project-dir --frames N # 或给 Gemini 自定义问题 npx hyperframes snapshot project-dir --frames N \ --describe Is the brand logo visible in every beat? Is any beat showing a black or blank frame?CLI 会从当前工作目录自动加载.env所以project-dir/.env里放GEMINI_API_KEY即可。产出在project-dir/snapshots/Gemini 写descriptions.md。若 Gemini 不可用无 key/配额耗尽用自身图像识别能力逐帧描述并保存为snapshots/descriptions.md且要在判决中声明描述是 agent 写的、请用户抽查。两个已知黑帧不算 bugframe-00-at-0.0s.png动画未开始与最后一帧s-end 假场景刻意不可见中间任何一帧被描述为黑/空白/加载页都是 bug。随后做两个必读 逐 beat 判决通读descriptions.md每一行、逐格看contact-sheet.jpg文档列举真实漏检案例某 beat 80% 时长全黑、logo 放到了画幅外、标题在画布边缘被裁、字幕跑出底部。beat 通过的标准不是有内容而是Gemini 描述与 STORYBOARD.md 计划一致 画面可见 品牌色/字体在场 无裁切错位。修复后必须重写判决——旧判决不许沿用因为修复可能破坏相邻 beat。lint/validate 层面errors 全修warnings 逐条判定GSAP tween 重叠、非作用域选择器、缺classclip、根节点缺data-start是真问题文件过大、废弃属性、dense tracks 可忽略WCAG 对比度警告逐条验证、禁止笼统豁免——验证器在固定时间戳采样opacity: 0入场前的元素会被当成完全可见测量存在真实假阳性但每条警告都要贴固定格式块引用原文、元素选择器、采样时间戳、该时刻是否全不透明在场、REAL ISSUE / SAMPLING ARTIFACT 判决、行动。这 N 条警告大多是转场窗口假阳性这类一句话豁免直接判不过门。9.3 Critic 子 agent 与音频运动验证DoD 通过后、开预览前必须派一个资深动态设计师/创意总监critic 子 agent按六个维度打 1–5 分beat 执行、品牌准确度、抓取资产利用率、视觉质量、运动设计、CTA beat要求每个问题点名 beat 与时间戳并以上线前最重要的一个修复收尾。任何低于 3 分的维度先修——CTA 低于 3 就修 CTA不许用用户自己会判断合理化低分。快照是无声静帧30s 30fps 视频的 18 张快照 900 帧中的 2%因此音频运动验证必须三选一Path 1首选用 Playwright 等浏览器工具打开 Studio URL1.0× 速度完整播放逐项确认每个 SFX 在视觉瞬间 ±0.1s 内落地写明 storyboard 期望时刻 vs 实际听到时刻 vs 漂移值、解说逐 beat 不错位、无音频在场而画面意外转场的片段、音频可听且不削波Path 2无浏览器时渲染 540p MP4render --width 960 --height 540 --quality medium30s 视频约 30s再以 ≥5fps 抽帧ffmpeg -i mp4 -r 5 frames/frame-%04d.png逐帧读对照分镜核对每个 SFX 时刻Path 3最后手段显式披露本会话无法验证音频运动且必须量化覆盖缺口N 帧 / 总帧数 百分比%并列出未验证项。三处通用禁令把快照确认当作音频/运动证据预览在跑看起来不错却没真播过省略百分比的 Path 3 披露。9.4 预览交付与按需渲染交付物是 Studio 预览 URL不是index.htmlnpx hyperframes preview # 最终回复中必须给出http://localhost:port/#project/project-name不自动渲染——渲染每趟数分钟用户往往还要改只有用户明确要求render it、export the MP4才渲染并显式指定质量与分辨率npx hyperframes render --skillwebsite-to-video --output renders/name.mp4 --quality standard --fps 30 npx hyperframes render --skillwebsite-to-video --output renders/name.mp4 --quality high --fps 30 npx hyperframes render --skillwebsite-to-video --output renders/name.mp4 --quality standard --fps 30 --resolution portrait旗标取值说明--qualitydraft/standard/high快/均衡/慢而最佳--fps24/30/6024 电影感60 顺滑--resolutionlandscape(1920×1080) /portrait(1080×1920) /landscape-4k(3840×2160) /portrait-4k别名1080p、4k、uhd画幅--formatmp4/webm/mov/png-sequence默认 mp4mov/webm 透明png-sequence 供 AE/Nuke--output路径约定renders/project-name.mp4--gpu/--crf/--video-bitrate可选GPU 编码--crf与--video-bitrate互斥最终消息必须以诚实披露收尾固定两个小节What I verified 逐条引用证据、What I did NOT verify 逐条说明跳过原因——即使全部验证也要写 None 但节标题必须在且置于预览 URL 之后。文档点名四类不合格总结Looks great, ready to ship无披露、All checks pass实际有跳过、Sub-agents confirmed everything无验证的委托信任、以及因为全验证了就省掉未验证节——在这里撒谎或省略比诚实地跳过检查更糟。十、快速参考视频类型约束起点而非公式beat 数由内容与解说决定类型典型时长时长驱动解说Social adIG/TikTok10–15s平台上限可选Product demo30–60s脚本长度全解说Feature announcement15–30s功能复杂度全解说Brand reel20–45s音乐曲目可选、音乐为主Launch teaser10–20s钩子能量极简画幅横屏 1920×1080默认/ 竖屏 1080×1920Stories、TikTok/ 方形 1080×1080IG 信息流。参考文件索引均以仓库根为基准文件读取时机references/step-0-capture.mdStep 0 抓取与品牌理解references/step-1-design.mdStep 1 写 DESIGN.md5 章节、250–350 行50 行快速通道references/step-2-brief.mdStep 2 对齐信息、弧线、受众references/capabilities.mdStep 2 扫目录Step 5 深挖需要的章节24 节能力清单references/step-3-storyboard.mdStep 3 分镜脚本含用户评审门控references/step-4-vo.mdStep 4 TTS 供应商、生成、时序references/step-5-build.mdStep 5 构建 index.html 子合成references/step-6-validate.mdStep 6 lint、validate、快照、预览references/beat-builder-guide.md每个子 agent 必读的构建规则/缓动词汇/验证命令scripts/w2h-verify.mjsStep 6 最终门控脚本assets/sfx/manifest.jsonStep 3 SFX 分配的素材登记表小结website-to-video 的价值不在任何单条命令而在把网站 → 品牌视频这条链路拆成产物可检查、阈值可计算、证据可粘贴的七道门capture/的按需读取表控制上下文成本DESIGN.md 的五章节把品牌值变成可查而非可猜的常量分镜阶段的 Asset Audit 与 SFX 计算规则把最常见的偷懒模式slideshow、目测时间戳挡在构建之前Step 5 的逐 beat 证据块与 Step 6 的w2h-verify.mjs80px 标题下限、70% 时间线覆盖、0.1s SFX 容差、0.5s beat 容差则把agent 自称完成变成报告逐字可核。在 OpenMontage 的语境下这套技能与同仓库的 hyperframes、gsap、remotion 等技能共同构成AI 编码助手即视频工作室的技术底座——复现时只需按 SKILL.md 的路由判断进入然后严格按步骤执行各 gate。【免费下载链接】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），仅供参考