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 流程中自動化影片生成
使用 hyperframes render 搭配 --non-interactive 旗標，作為自動化工作流程的一部分生成影片，無需手動操作。
使用範本建立行銷影片內容
使用類似 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 - 這會使渲染時間加倍，但視覺效果提升微乎其微
- 在開發期間不要直接渲染到最終輸出 - 使用草稿品質節省時間