企业官网建设流程全解析

OpenMontage 的 website-to-video 技能：把一个网站变成品牌级动态视频的七步门控工作流

【免费下载链接】OpenMontageWorld's 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 把"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-explainer；GitHub 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"）时，💬 的用户偏好类问题可跳过，但质量验证类门控不可跳过：

自主模式的判定标准在 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_KEY=your-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 文档给出一张参考表，规定每个产物首次读取的时机（不要提前读）：

门控：抓取退出码 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 条 do's/don'ts 就够，因为 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 五个章节

1. Visual Theme（一段话）：3–5 句描述品牌视觉性格——明/暗优先、对比策略、主导视觉元素（渐变/插画/摄影/UI mockup）、整体氛围、区别于"任何网站"的独特点。这是唯一的纯文字章节，必须具体到该品牌。
2. 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）。
3. Component Stylings：构建阶段被查阅最多的章节。目标 6–12 个不同组件，逐个给出 CSS 级属性（背景、文字色、内边距、圆角、边框、字号/字重、高度、box-shadow、hover/active/disabled 态）。文档给出的规则："如果 Step 5 的子 agent 需要为一个该品牌真实使用的组件发明 CSS 值，说明这一节写少了——值应该可查，而不是可猜。"
4. Spacing & Layout：间距标尺（基元通常 4px/8px，附使用场景表）、圆角标尺（每个圆角值及使用者）、留白哲学一段话（该品牌的实际节奏）。
5. Iteration Guide：5–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 等），以便告诉用户"什么做得到"。

这一步先解析用户提示词（用户往往已给出视频类型/风格/时长），只追问缺的项。文档设计的五个问题：

1. 视频用途：社交广告（15–20s）/产品演示（30–60s）/发布预告（15–25s）/品牌 reel（20–45s）/功能公告（15–30s）或其他；
2. 风格/氛围：要求用开放式问题（节奏快慢、明暗氛围、要不要解说、有无具体参考），禁止给出"Cinematic = 暗 + 发光 + Apple keynote 能量"这类预填描述菜单——带内置描述的标签会把那个描述直接变成 brief；
3. 这支视频必须传达的唯一信息：策略核心问题，外加叙事弧线选择（Problem→Solution / Reveal / Demonstration / Vibe / Comparison / 自定义）；
4. 要不要解说：有解说 → Step 3 含完整脚本、Step 4 走 TTS+转写+时间戳；无解说 → Step 3 的 VO cue 留空、Step 4 跳过，beat 时长在分镜里按节奏手动规划；
5. 画幅（若未指定）：横屏 1920×1080（默认）/竖屏 1080×1920/方形 1080×1080。

对"surprise me"的处理：最低上下文是"投放渠道 + 受众"，两者缺一就问一次然后继续；随后仍要写有野心的分镜——"surprise me 是'惊艳我'，不是'求稳'"。

9 项锁定门控（进入 Step 3 前必须全部锁定）：① 核心信息（一句话）② 叙事弧线 ③ 受众与观看场景 ④ 视频类型 ⑤ 时长（可由类型推断）⑥ 风格方向（叠加在 Step 1 品牌基线上）⑦ 用户明确点名的场景/效果 ⑧ 解说 ⑨ 画幅。文档的示例判断：用户说"给 huly.io 做产品演示、展示看板、暗色电影感、全解说"，则类型/风格/具体要求/解说已锁定，仍需推导或追问的是信息、弧线、受众。

六、Step 3：分镜 + 脚本（concept-first）

step-3-storyboard.md 是最厚重的一份参考（约 570 行）。核心顺序是：信息 → 叙事弧线 → 服务弧线的 beat → 每个 beat 用什么素材与技术；抓取资产是与合成 beat 平级的一等内容，但不许从资产清单出发（"我们有这些截图，做个轮播吧"正是本技能要打破的 slideshow 模式）。

6.1 Concept 块与节奏映射

STORYBOARD.md顶部先写 concept 块（Message / Arc / Audience / Brand voice / Why this matters now），任何一行空缺都不许往下写，并附"单句检验"：这支视频与任何同行业品牌的同类视频有何不同？答不出就是概念不够锋利。

随后按用户措辞映射节奏：

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%）、Medium（UI 区块占 60–80%）、Wide（完整 UI，仅作建立镜头）、Over-the-shoulder（前景 1/3 + UI 中景）、Dutch angle（倾斜 4–8° 制造紧张）。文档警告"wide shot 陷阱"：产品演示片建议 60% 近景 + 20% 中景 + 10% 全景 + 10% 特写；
• 每个 beat 至少一个镜头运动：dolly in（1.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-Cut）；data-duration等于 manifest 中的完整时长，永不截短；
• Riser/build-up 类：峰值在片段结尾，要让峰值落在 climax 时刻需在climax_time - sfx_duration触发（如 10.03s 的riser.mp3要在 t=20s 转场峰值，则 t=9.97s 触发）;
• 短 accent 类（click/chime/sparkle/ping）：在视觉标点时刻精确触发。

其他硬规则：大多数 beat 需要 0 个 SFX，每 beat 一个居多；shader 转场上直接放 SFX 是禁止的；SFX 与解说重叠时音量压到 0.2–0.3（HyperFrames 没有自动 ducking）。

6.4 每 beat 的字段与脚本规则

每个 beat 必须写明：Concept（这个场景在前后景逻辑中代表什么）、VO cue、Visual description（用摄影语言分层描述前/中/背景）、Composition + Accents（合成主体 + 可选品牌点缀，点缀按capture/assets/<filename>写位置/不透明度/处理/运动）、Text Animations（每个文本元素点名具体效果 ID）、Beat Timing（Transition in at: Xs+GSAP duration: Ys，直接对应 Step 5 的data-start/data-duration）、Animation Sequence（动画事件必须横跨整个 beat 时长，任何元素停留超过 ~2s 不变即死气）。

配套规则还包括：按解说长度剪片（22s 音频 → 24s 视频含 2s CTA hold，而不是 30s 带 8s 死寂）；尺寸用"画幅填充百分比"而非像素；开场 beat 默认要做"拦住滚动的快 intro"（1.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 → CTA，15s 广告可省 Story。写完后以"逐 beat 一句话"的形式向用户呈现 STORYBOARD + SCRIPT 供审（💬 门控），"改一个分镜 beat 只要 30 秒，改一个已构建合成要 5 分钟"——这是最便宜的重做窗口。

七、Step 4：配音、时序与字幕

step-4-vo.md 的第一条经验法则：先做 2 句试音，量出真实时长再全量生成。原因：Kokoro 会把脚本压缩约 40%（计划 35s → 实际 19s），HeyGen 语速快于预期。若发现偏差超 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 走 v3 API（x-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.wav

Kokoro 的发音问题要在生成前做替换：API→A P I、UI→U I、SaaS→sass；产品名容易读错（"Vercel" → "versatile"），先在narration.txt里按音重写；不要用 SSML——Kokoro 会把标签当字面文本读出来，停顿一律用空行或...。同时把"实际送入 TTS 的文本"存为narration.txt（区别于人类可读的SCRIPT.md），方便日后换声音重生成。

转写与映射：HeyGen 返回的时间戳需做字段归一化（word→text）；ElevenLabs/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.21s"），beat 边界落在词起始上——对 VO 硬切。

时序对账（进入 Step 5 前必须完成）：

real_total = last_word.end + cta_hold（通常 2–3s） planned_total = 各 beat 计划时长之和 delta = |real_total - planned_total|

delta 超过计划总时长 15% 就不许进入 Step 5：Kokoro 偏短 → 按 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: hidden+position: absolute起步且同一时刻只可见一组。

构建前先核对手头材料：STORYBOARD.md（构建规格）、DESIGN.md（查值时再查，不必整读）、asset-descriptions.md、transcript.json，并加载hyperframes技能。

8.1 根 index.html：两种架构

多场景架构的完整模式（每个字段都关键）：host div 必须同时有id与同值的data-composition-id（HyperShader.init 用getElementById）；每个 beat 的data-start必须递增、data-duration必须等于子合成内部 GSAP 时间线的 BEAT 常量——渲染引擎按global_time - data_start去 seek 子时间线，全部写 0 会导致 t=10s 时 5.5s 时间线被 seek 过端、内容全部消失：

<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> <script src="hyper-shader-local.js"></script> <div id="root">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 写的、请用户抽查。两个"已知黑帧"不算 bug：frame-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 重叠、非作用域选择器、缺class="clip"、根节点缺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%），因此音频+运动验证必须三选一：

1. Path 1（首选）：用 Playwright 等浏览器工具打开 Studio URL，1.0× 速度完整播放，逐项确认每个 SFX 在视觉瞬间 ±0.1s 内落地（写明 storyboard 期望时刻 vs 实际听到时刻 vs 漂移值）、解说逐 beat 不错位、无音频在场而画面意外转场的片段、音频可听且不削波；
2. Path 2：无浏览器时渲染 540p MP4（render --width 960 --height 540 --quality medium，30s 视频约 30s），再以 ≥5fps 抽帧（ffmpeg -i <mp4> -r 5 frames/frame-%04d.png）逐帧读，对照分镜核对每个 SFX 时刻；
3. Path 3（最后手段）：显式披露"本会话无法验证音频+运动"，且必须量化覆盖缺口（<N> 帧 / <总帧数> = <百分比>%）并列出未验证项。

三处通用禁令：把"快照确认"当作音频/运动证据；"预览在跑，看起来不错"却没真播过；省略百分比的 Path 3 披露。

9.4 预览交付与按需渲染

交付物是 Studio 预览 URL，不是index.html：

npx hyperframes preview # 最终回复中必须给出：http://localhost:<port>/#project/<project-name>

不自动渲染——渲染每趟数分钟，用户往往还要改；只有用户明确要求（"render it"、"export the MP4"）才渲染，并显式指定质量与分辨率：

npx hyperframes render --skill=website-to-video --output renders/<name>.mp4 --quality standard --fps 30 npx hyperframes render --skill=website-to-video --output renders/<name>.mp4 --quality high --fps 30 npx hyperframes render --skill=website-to-video --output renders/<name>.mp4 --quality standard --fps 30 --resolution portrait

最终消息必须以诚实披露收尾，固定两个小节（"What I verified" 逐条引用证据、"What I did NOT verify" 逐条说明跳过原因——即使全部验证也要写 "None" 但节标题必须在），且置于预览 URL 之后。文档点名四类不合格总结："Looks great, ready to ship"（无披露）、"All checks pass"（实际有跳过）、"Sub-agents confirmed everything"（无验证的委托信任）、以及因为全验证了就省掉"未验证"节——"在这里撒谎或省略，比诚实地跳过检查更糟"。

十、快速参考

视频类型约束（起点而非公式，beat 数由内容与解说决定）：

画幅：横屏 1920×1080（默认）/ 竖屏 1080×1920（Stories、TikTok）/ 方形 1080×1080（IG 信息流）。

参考文件索引（均以仓库根为基准）：

小结

website-to-video 的价值不在任何单条命令，而在把"网站 → 品牌视频"这条链路拆成产物可检查、阈值可计算、证据可粘贴的七道门：capture/的按需读取表控制上下文成本，DESIGN.md 的五章节把品牌值变成"可查而非可猜"的常量，分镜阶段的 Asset Audit 与 SFX 计算规则把最常见的偷懒模式（slideshow、目测时间戳）挡在构建之前，Step 5 的逐 beat 证据块与 Step 6 的w2h-verify.mjs（80px 标题下限、70% 时间线覆盖、0.1s SFX 容差、0.5s beat 容差）则把"agent 自称完成"变成"报告逐字可核"。在 OpenMontage 的语境下，这套技能与同仓库的 hyperframes、gsap、remotion 等技能共同构成"AI 编码助手即视频工作室"的技术底座——复现时只需按 SKILL.md 的路由判断进入，然后严格按步骤执行各 gate。

【免费下载链接】OpenMontageWorld's 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