hyperframes-cli
使用 HyperFrames CLI 将 HTML 组合渲染为视频
将基于 HTML 的视频组合转换为 MP4 或 WebM 输出，无需手动渲染。为内容创作者和开发团队自动化脚手架、代码检查、可视化检查和最终交付流程。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“hyperframes-cli”。 npx hyperframes doctor
预期结果:
Checking environment...
✓ Chrome: installed
✓ FFmpeg: installed
✓ Node: v22.10.0
✓ Memory: 8GB available
Environment is ready for rendering.
正在使用“hyperframes-cli”。 npx hyperframes lint ./my-project
预期结果:
Linting composition...
✓ index.html: valid
✗ compositions/intro.html: missing data-composition-id
⚠ compositions/outro.html: overlapping tracks at 2.5s
1 error, 1 warning found.
安全审计
安全All 69 static findings are false positives. The external_command detections are markdown code examples showing CLI usage, not executable code. Network detections are localhost URLs for local development preview, which is expected. No cryptographic code or malicious patterns exist in this skill.
质量评分
你能构建什么
在 CI/CD 流水线中自动化视频生成
使用 --non-interactive 标志运行 hyperframes render，将视频生成作为自动化工作流程的一部分，无需手动干预。
使用模板创建营销视频内容
使用 product-promo 等模板搭建项目，自定义 HTML 组合，然后渲染为最终 MP4 用于社交媒体或广告。
调试和修复视频组合中的可视化布局问题
运行 hyperframes lint 捕获结构错误，然后运行 hyperframes inspect 在最终渲染前识别文本溢出和裁剪问题。
试试这些提示
Run `npx hyperframes init my-project --non-interactive` to create a new HyperFrames video project in the current directory.
Run `npx hyperframes lint` followed by `npx hyperframes inspect --json` to check for errors and visual layout issues in the current composition.
Run `npx hyperframes render --output final.mp4 --quality high --fps 30` to render the current composition to a high-quality MP4 file.
Run `npx hyperframes preview --port 3002` to start the preview server and open the HyperFrames studio for interactive testing.
最佳实践
- 在预览前运行 lint 和 inspect 命令，以便及早发现结构和可视化问题
- 使用 --docker 标志以在不同环境中获得可复现的字节级一致的渲染结果
- 在迭代期间使用草稿质量，仅在最终交付时切换到高质量
避免
- 不要在渲染前跳过 lint 和 inspect 步骤 - 结构错误可能导致静默失败
- 除非有特定需要，否则不要使用 60fps - 这会使渲染时间翻倍，视觉收益微乎其微
- 在开发期间不要直接渲染到最终输出 - 使用草稿质量以节省时间