HyperFrames CLI 是做什么的？
所有操作均通过 npx hyperframes 运行。需要 Node.js >= 22 和 FFmpeg。
工作流
- 脚手架搭建 —
npx hyperframes init my-video - 编写 — 编写 HTML 合成（参见
hyperframes技能） - 代码检查 —
npx hyperframes lint - 视觉检查 —
npx hyperframes inspect - 预览 —
npx hyperframes preview - 渲染 —
npx hyperframes render
在预览之前先进行代码检查和视觉检查。lint 可以捕获缺失的 data-composition-id、重叠的轨道以及未注册的时间线。inspect 在 headless Chrome 中打开渲染合成，扫过时间线，并报告文本溢出气泡/容器或画布的情况。
脚手架搭建
npx hyperframes init my-video # 交互式向导
npx hyperframes init my-video --example warm-grain # 选择示例
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 # 跳过提示（CI/代理场景）
模板：blank、warm-grain、play-mode、swiss-grid、vignelli、decision-tree、kinetic-type、product-promo、nyt-graph。
init 会创建正确的文件结构、复制媒体文件、用 Whisper 转录音频，并安装 AI 编码技能。请使用它而不是手动创建文件。
使用 --tailwind 时，在编辑类或主题令牌前，请先调用 tailwind 技能。脚手架使用 Tailwind v4.2 通过浏览器运行时加载，而非 Studio 的 Tailwind v3 设置。
代码检查
npx hyperframes lint # 当前目录
npx hyperframes lint ./my-project # 指定项目
npx hyperframes lint --verbose # 显示信息级别结果
npx hyperframes lint --json # 机器可读输出
检查 index.html 和 compositions/ 中的所有文件。报告错误（必须修复）、警告（应该修复）和信息（使用 --verbose）。
视觉检查
npx hyperframes inspect # 检查时间线上的渲染布局
npx hyperframes inspect ./my-project # 指定项目
npx hyperframes inspect --json # 代理可读的结果
npx hyperframes inspect --samples 15 # 更密集的时间线扫描
npx hyperframes inspect --at 1.5,4,7.25 # 显式指定主帧时间戳
在 lint 和 validate 之后使用，特别是对于包含对话气泡、卡片、字幕或紧凑排版的合成。它会报告：
- 文本超出最近的视觉容器或气泡
- 文本被其自身的固定宽度/高度框裁剪
- 文本超出合成画布
- 子元素逃离裁剪容器
错误应在渲染前修复。警告供代理审查，添加 --strict 可在警告时也失败。重复的静态问题默认被折叠，以便 JSON 输出对 LLM 上下文窗口保持紧凑。如果某个元素或祖先的溢出是入口/出口动画的故意行为，请添加 data-layout-allow-overflow。如果装饰性元素不应被审计，请标记为 data-layout-ignore。
npx hyperframes layout 作为兼容性别名保留，以执行相同的视觉检查。
预览
npx hyperframes preview # 提供当前目录服务
npx hyperframes preview --port 4567 # 自定义端口（默认 3002）
文件更改时热重载。自动在浏览器中打开工作室。
将项目交还给用户时，请使用 Studio 项目 URL，而非源代码 index.html 路径：
http://localhost:<port>/#project/<project-name>
使用预览输出中的实际端口和项目目录名。例如，在 codex-openai-video 目录中执行 npx hyperframes preview --port 3017 后，应报告 http://localhost:3017/#project/codex-openai-video。
将 index.html 仅视为源代码上下文。可以将其链接为实现文件，但不要将其标记为项目或预览界面。
渲染
npx hyperframes render # 标准 MP4
npx hyperframes render --output final.mp4 # 命名输出
npx hyperframes render --quality draft # 快速迭代
npx hyperframes render --fps 60 --quality high # 最终交付
npx hyperframes render --format webm # 透明 WebM
npx hyperframes render --docker # 字节一致
| 标志 | 选项 | 默认值 | 说明 |
|---|---|---|---|
--output | 路径 | renders/名称_时间戳.mp4 | 输出路径 |
--fps | 24, 30, 60 | 30 | 60fps 会使渲染时间加倍 |
--quality | draft, standard, high | standard | draft 用于迭代 |
--format | mp4, webm | mp4 | WebM 支持透明度 |
--workers | 1-8 或 auto | auto | 每个工作线程会启动一个 Chrome |
--docker | 标志 | off | 可复现的输出 |
--gpu | 标志 | off | GPU 加速编码 |
--strict | 标志 | off | 在 lint 错误时失败 |
--strict-all | 标志 | off | 在错误和警告时均失败 |
--variables | JSON 对象 | — | 覆盖 data-composition-variables 中声明的变量值 |
--variables-file | 路径 | — | 包含变量值的 JSON 文件（替代 --variables） |
--strict-variables | 标志 | off | 在 --variables 中存在未声明的键或类型不匹配时渲染失败 |
质量指导： 迭代时使用 draft，审查时使用 standard，最终交付时使用 high。
参数化渲染： 合成在 <html> 根元素上使用 data-composition-variables 声明其变量——这是一个 JSON 声明数组（每个条目包含 {id, type, label, default}），用于定义模式。内部的脚本通过 window.__hyperframes.getVariables() 读取解析后的值。CLI 的 **`--variables '{