企业官网建设流程全解析

OpenMontage HyperFrames 脚手架实战：init、capture 与 skills 命令详解

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

本文围绕 HyperFrames CLI 的三个脚手架命令init、capture、skills展开：init用交互式向导或纯参数模式生成标准 HyperFrames 项目骨架，capture把一个在线 URL 抓取为可编辑的视频工程，skills则为本地 AI 编程环境安装 HyperFrames 技能包。读完本文，你可以为不同终端（TTY/CI/Agent）选择正确的调用方式、理解每个参数背后的行为（模板、分辨率、Whisper 转录、技能新鲜度检查），并弄清这些命令在 OpenMontage 生产管线中的定位与边界。

为什么用脚手架命令而不是手写文件

HyperFrames 是 OpenMontage 的两大渲染运行时之一（另一个是 Remotion），适合 kinetic typography、产品宣传片、网站转视频等 HTML/GSAP 语法的场景。在 OpenMontage 的 HyperFrames 指南 中，选型决策矩阵明确指出：动态排版、产品 promo、registry 组件块（数据图表、颗粒覆盖层、着色器转场）应优先 HyperFrames。

一旦选定 HyperFrames，项目文件不应手工创建。如 hyperframes-cli 技能主文件 所述，整个开发循环都通过npx hyperframes驱动（要求 Node.js ≥ 22 与 FFmpeg），其第 1 步 "Scaffold" 就是npx hyperframes init my-video或从 URLcapture。脚手架命令的价值在于：它们负责搭建正确的文件结构、拷贝媒体、运行转录、并安装 AI 编码技能——这些是手写文件难以对齐的约定。

init：交互式与纯参数两种调用模式

init的默认行为取决于 TTY：在终端里运行会进入交互式向导，询问示例模板与选项；在 CI、Agent、管道输出等非 TTY 环境下，CLI 自动切换到非交互模式，并且强制要求--example（缺失时会直接报错并给出用法示例）。在 TTY 上也可以用--non-interactive强制纯参数模式：

npx hyperframes init my-video # TTY: 交互式向导 npx hyperframes init my-video --example warm-grain # 指定一个示例 npx hyperframes init my-video --example blank --resolution portrait npx hyperframes init my-video --video clip.mp4 # 附带视频文件 npx hyperframes init my-video --audio track.mp3 # 附带音频文件 npx hyperframes init my-video --example blank --tailwind # Tailwind v4 浏览器运行时 npx hyperframes init my-video --non-interactive --example blank # CI/Agent — 纯参数模式

可选模板

--example支持以下 9 个模板：

• blank— 空白骨架
• warm-grain— 暖色调颗粒质感
• play-mode— 播放模式
• swiss-grid— 瑞士网格排版
• vignelli— Vignelli 风格
• decision-tree— 决策树
• kinetic-type— 动态排版
• product-promo— 产品宣传片
• nyt-graph— 纽约时报风格图表

其中kinetic-type、product-promo、swiss-grid三个模板与 OpenMontage 的运行时选型决策矩阵 中 "产品宣传片 / 标题卡 / 重度文字动效优先 HyperFrames" 的建议直接对应，可作为相应场景的起点。

分辨率预设

--resolution接受以下预设：

另提供别名：1080p、4k、uhd、1080p-square、4k-square。竖屏（portrait）预设对应短视频投放，方屏预设适合信息流场景。

其余常用参数

• --skip-skills— 目前被临时忽略：在 skills.sh 注册表补齐之前，init始终会对照 GitHub 检查 AI 编码技能（下文详述）。要在 CI/测试中真正跳过，改用环境变量HYPERFRAMES_SKIP_SKILLS=1。
• --skip-transcribe— 不对--audio/--video自动做 Whisper 转录。
• --model、--language— 指定自动转录使用的 Whisper 模型与语言。
• --tailwind— 生成 Tailwind v4 浏览器运行时的脚手架。注意它与 Studio 的 Tailwind v3 配置不同：从源码文档看，启用后应先调用hyperframes-core（Tailwind 参考）技能再编辑 class 或主题 token，避免用错版本约定。

媒体自动转录

当传入--audio或--video时，init会用 Whisper 自动转录该文件，产出可直接用于字幕/分镜的时间轴。关于语音与模型的选择规则，见hyperframes-media技能（在 HyperFrames 路由技能 的技能清单中有对应条目）。

skills 新鲜度机制：init 不只是生成文件

从 hyperframes-cli 技能主文件 的工作流描述与 HyperFrames 上游技能文档 可以看到，init还承担"保持 AI 技能新鲜"的职责：

• HyperFrames 技能是版本化的。每次init都会把本地已安装的技能与 GitHub 上的最新版对照，只要有过旧或缺失的技能，就会安装/刷新整套技能集合；项目已是最新时这一步是 no-op。
• 该检查是一次快速的 GitHub 往返；离线或 API 限流时会在短暂超时后降级为直接安装，保证init不会因为网络抖动而硬性失败。
• --skip-skills参数被临时"废除"（neutered），传它也不会跳过检查；CI/测试的唯一退出通道是HYPERFRAMES_SKIP_SKILLS=1。
• 想单独管理技能而不重新 init，可用：
  • 检查：npx hyperframes skills check（加--json输出机器可读结论；任何一项过旧或缺失时退出码非零）；
  • 更新：npx hyperframes skills update— 拉取全套最新技能，并补齐尚未安装的部分（与 init 的安装步骤等价）。
• 此外，render/lint/validate运行时若检测到技能过旧，CLI 会额外打印一行提醒。

环境前提：npx hyperframes要求 Node.js ≥ 22 与 FFmpeg 在 PATH 上。OpenMontage 的 HyperFrames 指南 中 preflight 的最低门槛（runtime floor）与此一致：Node 主版本 ≥ 22、ffmpeg在 PATH、npx在 PATH、npx hyperframes doctor退出码为 0；bun不是必需的（HyperFrames 以公共 npm 包hyperframes发布，通过npx消费）。仓库根目录的 Makefile 提供了make hyperframes-doctor目标，可一键探测 Node/FFmpeg/npx 并运行hyperframes doctor。

capture：把一个 URL 变成可编辑的视频工程

当用户的起点是一个 URL 时（"把这个网站做成视频"、"从我们的主页做个社交短片"），用capture而不是init：

npx hyperframes capture https://stripe.com # 从网站生成骨架 npx hyperframes capture https://linear.app -o linear-video # 自定义输出目录 npx hyperframes capture https://example.com --json # JSON 输出，供 Agent 消费 npx hyperframes capture https://example.com --skip-assets # 跳过图片/SVG 下载 npx hyperframes capture https://example.com --max-screenshots 12 npx hyperframes capture https://example.com --timeout 60000 # 页面加载超时（毫秒）

capture的行为是：用无头浏览器抓取目标 URL，截图逐张成为分层场景，站点资产（图片/SVG 等）下载到本地，最终产物是一个标准的 HyperFrames 项目——可以像init生成的项目一样执行lint、preview、render。

参数要点：

• -o— 自定义输出目录名，例如把https://linear.app抓成linear-video工程；
• --json— 输出 JSON 结果，供 Agent/CI 解析（与 CLI 技能主文件 中 "--json在除render/preview/play外的所有命令上都可用" 的约定一致）；
• --skip-assets— 跳过图片/SVG 下载，适合只关心结构骨架或网络受限时；
• --max-screenshots— 限制抓取截图数量（默认行为是滚动抓取整页，长页面会截很多张）；
• --timeout— 页面加载超时时间（毫秒），慢站点或重站点需要调大。

这条命令是website-to-video工作流的机械底座——抓取后，后续的创意方向、节奏与动效编排由对应的 Layer 3 技能接管（见 HyperFrames 技能路由）。

skills：一次性安装 HyperFrames 技能包

npx hyperframes skills # 为 AI 编程工具安装 HyperFrames 技能

这是一次性设置命令，把 HyperFrames 技能包装入本地 AI 编程环境，包含：

• 核心技能：hyperframes-core、hyperframes-creative、hyperframes-animation、hyperframes-cli、hyperframes-registry、hyperframes-media；
• 编排器：product-launch-video与hyperframes两个 orchestrator 技能。

安装后，Agent 在处理 HyperFrames 任务时会遵循框架约定（data-*时序属性、GSAP 时间轴规则、确定性渲染约束等）。重大版本升级 HyperFrames 后应重新运行；日常维护则用skills check/skills update子命令即可。

与 OpenMontage 生产管线的关系：init 的适用边界

理解init的适用场景需要区分两条路径——这正是 OpenMontage HyperFrames 指南 中明确的反模式所在：

1. 管线模板化路径（不跑init）：OpenMontage 的 compose 阶段由hyperframes_compose工具直接物化工作区。从 tools/video/hyperframes_compose.py 的_scaffold实现注释可以看到："This does NOT callhyperframes init— we want full control over the generated files so they map cleanly to edit_decisions"。管线需要把edit_decisions的 cuts、asset_manifest的资产路径、playbook 风格映射为 HyperFrames 文件（index.html时间轴、data-start/data-duration、CSS 变量 +DESIGN.md），并自己写出hyperframes.json（注册表 URL 与安装路径配置）。因此不应从 OpenMontage 编排器里运行hyperframes init——init自带项目语义与技能安装，是为人类手动启动项目设计的。
2. Atelier 手写作路径（可以跑init）：在 bespoke-composition 元技能 中，HyperFrames 路径明确建议从projects/目录运行npx hyperframes init <slug>。init 会生成index.html、meta.json、package.json，以及一份每项目CLAUDE.md（用于把后续 Agent 会话自动路由到/hyperframes子技能），之后再手写index.html、按需挂data-composition-src子组合，最后经lint→validate→snapshot验证，再由video_compose以render_runtime: "hyperframes"+composition_mode: "atelier"驱动渲染。

两条路径生成的工作区结构一致，位于projects/<project-name>/hyperframes/下（index.html根组合、compositions/子组合与 registry 块、assets/、hyperframes.json、DESIGN.md等），且不复用 Remotion 的remotion-composer/public/——HyperFrames 相对项目根解析data-composition-src、src=与 registry 块，混合运行时会互相污染。

脚手架之后：进入开发循环

init/capture只是 CLI 开发循环 的第 1 步（Scaffold），后续依次是：编写 HTML 组合（hyperframes-core技能）→npx hyperframes lint（静态契约：缺data-composition-id、轨道重叠、未注册时间轴）→npx hyperframes validate（无头 Chrome 运行时错误 + WCAG 对比度）→npx hyperframes inspect（文本溢出检测）→npx hyperframes preview打开 Studio 时间线编辑器供用户审阅 →npx hyperframes render交付。两条 Agent 侧约定值得注意：render前必须经用户确认（user-gated），渲染退出码为 0 后还要用[ -s "$OUTPUT" ]或ffprobe验证产物确实存在且时长合理。

命令速查

以上命令与参数均取自 init-and-scaffold 参考文档 及其配套技能文件，可在满足 Node ≥ 22 + FFmpeg 的环境中直接执行验证。

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