Communitygithub.com

終極 Claude 渲染

從一個使用 GSAP 動畫的 HTML 場景,逐幀渲染出影片 (Reels、Shorts、TikTok、YouTube、廣告、產品展示),並包含旁白、逐詞字幕、照片與影片插入、真實應用程式畫面、背景音樂、特效、-14 LUFS 混音與自動 QA。適用於任何品牌 (透過 marca.json),並可在 Linux、macOS 與 Windows 上運作。當需求為「製作影片」、「發布影片」、「廣告」、「產品展示」、「Reels」、「渲染」、「動態」、「同步字幕」,或當之前的影片出現「靜態」、「業餘」、「不同步」或「缺乏品牌感」時使用。

終極 Claude 渲染 是什麼?

此技能將影片製作轉變為一個以程式碼驅動、確定性且可重複的流程。您不是使用時間軸軟體,而是編寫一個 HTML 場景,其中每個動畫狀態都是時間 `t` 的函數。引擎會逐幀請求該場景,在無頭 Chromium 中捕獲畫面,並使用 ffmpeg 組合旁白、背景音樂和音效。這種方法確保每次渲染都完全一致,無需手動錄製。它支援在 Linux、macOS 和 Windows 上創作影片,並內建品牌管理(顏色、字體、標誌透過 `marca.json`)、腳本同步(所有動畫都錨定於旁白的時間戳記)以及對實際照片、影片和應用程式螢幕畫面的支援。工作流程遵循嚴格的審批流程:腳本 → 風格畫面(`ucr stills`) → 預覽 → 最終渲染,以防止代價高昂的重新渲染。自動 QA 會檢查幀凍結、黑色片段、音量(-14 LUFS)、像素峰值以及平台安全區域內的文字位置,確保專業的輸出品質。

相容平台✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/PedroHenrique0713/ultimate-claude-render/tree/HEAD/skills/ultimate-claude-render

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

終極 Claude 渲染 是做什麼的?

一部影片就是一個 HTML 頁面,其狀態是時間 t 的函數。Claude 撰寫場景;引擎請求每一幀 (window.__seek(t)),在無頭 Chromium 中進行螢幕截圖,然後 ffmpeg 將其與語音、背景音樂和特效結合。沒有什麼是「錄製」的:一切都是確定性且可重製的。

該倉庫是引擎 + 音訊腳本 + 此技能。每個人的影片都存放在其外部的專案資料夾中。

在撰寫任何程式碼之前

  1. 執行 ucr doctor。 如果缺少 ffmpeg、Python (含 numpy/scipy) 或 Chromium,它會告訴您確切的命令。
  2. 找到倉庫。 此技能透過 ucr instalar-skill 安裝,倉庫位於它被 clone 的位置 (ucr 在 PATH 中,或 node <repo>/bin/ucr.mjs)。如果找不到,請詢問它的 clone 位置;不要重新實作引擎。
  3. 在生產之前先規劃 (重新製作影片的代價很高):完整的腳本、格式、品牌、可用的媒體、附來源的數字、每句台詞會出現什麼。使用者需按階段批准:腳本 → 風格畫面 (ucr stills) → 預覽 → 最終渲染。未經腳本和畫面批准,請勿渲染整部影片。
  4. 優先使用現有品牌。 閱讀使用者的品牌書、網站或應用程式,然後撰寫 marca.json (顏色、字體、標誌)。切勿發明身份標識或重新設計標誌。帶有通用模板風格的客戶素材會被駁回:使用真實的照片、顏色和標誌。

流程

ucr novo meu-video --marca <pasta-da-marca|_modelo|exemplo> --formato vertical
# 編輯 narracao.txt、projeto.json 和 cena.html
ucr tudo meu-video          # prep → midia → voz → tempos → batidas → sons → mix → render → QA

獨立步驟:ucr prep|midia|voz|tempos|batidas|sons|mix|render|qa <pasta>。便宜的檢查:ucr stills <pasta> 2,8.5,15 (任意時刻的 PNG,無需渲染影片)。即時預覽:ucr preview <pasta> --audio。

專案資料夾內容:

檔案說明
projeto.json格式、fps、品牌、語音、呼吸、混音、渲染
narracao.txt口語腳本;轉化為語音、字幕和場景時間
cena.html場景 (您所撰寫的內容)
marca/ 或 marca 於其他路徑marca.json + 字型 + 標誌
midia/照片、影片、trilha.mp3、sfx/<tipo>/
build/、.ucr/、saida/生成的;不進行版本控制

撰寫場景

骨架:參見倉庫中的 exemplos/modelo-cena.html。<script> 的順序很重要 (GSAP → marca → projeto → tema → tempos → midia → batidas → motor)。完整 API 在 references/motor-api.md 中;摘要如下:

  • M.fundo()、M.camera()、M.marca()、M.legendas(F, { chaves: [...] })、M.grande(texto, { t, fim })
  • M.celular(pai, {x,y,B})、M.janela(pai, {...})、M.terminal(pai, {linhas})、M.cursor/clicar/tocar
  • M.foto(pai, 'nome', {...})、M.video(pai, 'nome', { som: true }) (來自 midia/,在 ucr midia 之後)
  • M.T('palavras') = 這些詞語被說出的時刻。將所有內容錨定於語音,而不是固定的秒數:更改腳本中的一個句子不會導致場景其餘部分偏移。
  • M.som(t, 'tipo') 為混音標記效果;M.batida(t) 捕捉一個剪輯以配合背景音樂的節拍。

場景的黃金法則:

  1. 一切都只依賴於 t。 時間軸 (M.tl) 中的補間、計數器和繪圖在 M.ATUALIZAR.push(t => ...) 中完成。不要使用 setInterval、Date.now()、帶有 play() 的 <video> 或 CSS 動畫。
  2. 平台的安全區域: QA 會檢測到安全區域外的文字 (垂直:頂部 14%,底部 25%)。
  3. 停頓導致流失。 沒有任何事情能靜止超過約 1.5 秒 (QA 會測量,觀眾會跳過)。M.camera() 以 3D 方式搖晃場景;深色背景上的暗色卡片如果沒有人注意到就會移動,因此要為其添加邊框和光暈。
  4. 每句台詞都改變畫面。 新的句子,新的圖片或新的動作。
  5. 在渲染之前: 在 3 或 4 個時刻執行 ucr stills。腳本錯誤 (重複的變數、旁白中沒有的詞語) 會立即出現,並附有頁面訊息。

音訊

  • 語音: projeto.json → voz.provedor:edge (免費,無需金鑰;適合測試,不適合商業使用)、elevenlabs、fal 或 arquivo (您自己錄製;時間戳記來自 Deepgram nova-3)。螢幕上的文字與 narracao.txt 中的相同,時間來自語音。
  • 呼吸: "respiros": {"2": 1.2} = 在索引 2 的句子之後有 1.2 秒的靜音 (讓圖像有時間進入)。
  • 背景音樂: midia/trilha.mp3 (商業授權!) 或 "sintetica" (原創,無需授權)。它會自動在語音下方降低音量 (ducking)。
  • 特效: 合成的 (whoosh、impact、clique、brilho、subida、obturador、pop、tecla、grave、papel) 或 midia/sfx/<tipo>/ 中的檔案。
  • 主輸出: −14 LUFS 和 −1.5 dBTP (Reels/TikTok/Shorts),在最終檔案中測量。

詳細資訊和陷阱:references/audio.md。

QA 與交付

渲染會自行執行 QA (saida/<nome> - QA.txt):尺寸、顏色 (標記為 BT.709)、凍結幀、黑色片段、音量、峰值和文字超出安全區域。QA 綠燈不代表批准:打開 MP4,查看幀,聆聽。報告 QA 檢測到的內容以及您所看到的內容;未經查看,不要聲明「準備就緒」。

輸出:saida/<nome>.mp4 (交付,22 Mb/s) 和 saida/<nome> - leve.mp4 (30 fps,用於透過訊息發送)。

當出現問題時

  • 場景未準備就緒 (A cena não ficou pronta):腳本錯誤 (訊息會立即提供頁面錯誤) 或者,如果完全沒有錯誤,則 <script>/媒體路徑錯誤 (然後會等待 90 秒的超時時間)。
  • 渲染緩慢:請參閱 references/armadilhas.md (濾鏡模糊、backdrop-filter、全螢幕混合、頁面上的 <video>)。
  • 只重新渲染一部分:ucr render <pasta> --de 30 --ate 38 (如果參數相同,會重複使用先前渲染的片段)。
  • 在長時間渲染之前:df -h (對於 45 秒的 1080×1920 影片,約需 250 MB 的片段和約 145 MB 的交付檔案)。

參考資料 (按需閱讀)

  • references/motor-api.md:所有 M.* API 的完整說明與範例
  • references/marca.md:marca.json 逐欄位說明、格式與區域
  • references/audio.md:語音、呼吸、背景音樂、特效、混音、授權
  • references/receitas.md:照片、嵌入影片、真實螢幕、終端機、橫向、變體、調色板切換
  • references/armadilhas.md:已經出過問題的內容 (經過測量),按主題分類

相關技能