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 和 inspect。lint 會檢查遺漏的 data-composition-id、重疊軌道及未註冊的時間軸。inspect 會在無頭 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。
將專案交回給使用者時，請使用 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/name_timestamp.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 | 旗標 | 關閉 | 可重現的輸出 |
--gpu | 旗標 | 關閉 | GPU 加速編碼 |
--strict | 旗標 | 關閉 | 遇到 lint 錯誤時失敗 |
--strict-all | 旗標 | 關閉 | 遇到錯誤和警告時皆失敗 |
品質建議： 迭代時使用 draft，審查時使用 standard，最終交付時使用 high。
轉錄
npx hyperframes transcribe audio.mp3
npx hyperframes transcribe video.mp4 --model medium.en --language en
npx hyperframes transcribe subtitles.srt # 匯入現有字幕
npx hyperframes transcribe subtitles.vtt
npx hyperframes transcribe openai-response.json
文字轉語音
npx hyperframes tts "此處的文字" --voice af_nova --output narration.wav
npx hyperframes tts script.txt --voice bf_emma
npx hyperframes tts --list # 顯示所有語音
疑難排解
npx hyperframes doctor # 檢查環境 (Chrome, FFmpeg, Node, 記憶體)
npx hyperframes browser # 管理內建 Chrome
npx hyperframes info # 版本與環境詳細資訊
npx hyperframes upgrade # 檢查更新
如果渲染失敗，請先執行 doctor。常見問題：缺少 FFmpeg、缺少 Chrome、記憶體不足。
其他
npx hyperframes compositions # 列出專案中的組合
npx hyperframes docs # 開啟文件
npx hyperframes benchmark . # 基準測試渲染效能