Communitygithub.com

remotion-broll

素材工程執行管線:自採、下載、截圖、選段、嵌入、調色。觸發詞:素材、B-roll、錄屏、yt-dlp、截圖、調色。在裝配判定真素材段時調用。

remotion-broll 是什麼?

這是一個專為 Remotion 影片製作工作流設計的素材工程執行 skill。它的核心功能是自動化處理「真素材段」(如產品體驗畫面、操作錄屏等)的完整管線,從素材定級、採集、驗真、選段,到最終嵌入正片並進行調色統一的全部步驟。此 skill 支援多種素材來源(用戶錄屏、官方影片、網頁截圖、UI 模擬卡),並提供了嚴格的驗真機制(如檢查截圖是否為登入牆、影片編碼是否相容)。它還整合了 AI 生成拼貼 B-roll 的進階流程,用於無法取得真實素材的情緒或隱喻場景。此 skill 適用於 Claude Code、Cursor 等支援 CLI 和自訂 skill 的 AI 開發環境,執行時會呼叫 yt-dlp、ffmpeg、chrome-headless-shell 等外部工具,並與 Remotion 專案的特定檔案結構(如 `public/broll/`、`public/assets/`)深度整合。其獨特之處在於每步都內建驗收標準,並提供詳細的錯誤處理和調色規範,確保產出素材品質一致,減少人工返工。

相容平台~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/jincheng2026/jc-remotion-skills/tree/main/skills/remotion-broll

在你喜歡的 AI 中提問

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

說明文件

素材工程(可執行管線)

定位:這是幹活的 skill,不是規則文檔——判定、命令、驗收一條龍執行。完整規則真源在 remotion-assembly/references/broll.md(四級優先級細則/每案例素材清單義務/引用規格),衝突以彼為準。

何時調用

  • 分段工坊第 2 步判出「真素材段」(產品體驗類畫面:打字/生成/介面/演示/操作)
  • 裝配方案表定稿前的素材清單收集(每案例 1 張產品截圖或 5s 錄屏,AI 自採不等供料)
  • 用戶給了錄屏/實拍素材要嵌入正片

執行管線(每步都有驗收,逐步走)

① 定級:按四級優先級選路——用戶自錄屏 > 官方影片 > 網頁截圖 > UI 模擬卡。有公開官網/官方頻道的案例禁止直接掉到第 4 級。

② 採集

  • 官方影片:yt-dlp --print "%(channel)s | %(title)s | %(duration)ss | %(id)s" "ytsearch8:<產品名> official" 認準官方頻道 → yt-dlp -f "bv*[height<=1080][vcodec^=avc1]+ba[ext=m4a]/b[vcodec^=avc1]/b" -o "public/broll/<名>.mp4" <url>([vcodec^=avc1] 過濾預設 AV1,與 HEVC 同罪不入庫,見 broll.md 2c);403 依序試 UA / --cookies-from-browser / 代理。
  • 網頁截圖:node_modules/.remotion/chrome-headless-shell/*/chrome-headless-shell*/chrome-headless-shell --headless --screenshot=<out.png> --window-size=1920,1080 --virtual-time-budget=10000 <url>。

③ 驗真(不可跳過):file <文件> 防「PNG 實是 HTML」;影片 ffprobe 驗編碼,HEVC 先轉 H.264(防黑屏);截圖肉眼 Read 確認非登入牆/Cookie 彈窗。

④ 選段:ffmpeg -vf fps=0.5 抽幀拼 contact sheet,Read 逐幀讀圖,選與口播語義同步的 3-8s 鏡頭段(輸入→動作→等待→結果),記錄起止秒。

⑤ 嵌入:Takeover 內 <Sequence from={beat(x)}> + <OffthreadVideo muted src={staticFile('broll/….mp4')} startFrom={F(起點秒)}>(muted 必加);接管不帶 PiP(用戶裁定);截圖裝 ShotCard/WindowCard。含媒體 Sequence 加 premountFor≈fps 防首幀黑,但該 Sequence 禁設 layout="none"(去包裹層後 premount 失效);外層若 return null 門控容器可見性,null 須早開 ≥premountFor 幀(seg06 實測:容器 frame<enterAt-30 return null 配內層 premountFor={30}),否則父級 null 砍掉預載窗、premount 白做。

⑥ 調色統一:素材層加 filter: brightness(0.9-0.92) saturate(0.95)(按正片明暗微調),原色直出=貼片感(錯題 #18);接管段統一檔 brightness(.92) saturate(.95)(seg06 實測定檔,勿逐段目測微調)。

⑦ 剪輯加工:強調處 punch-in(crop+scale 到關鍵區,關鍵句字高 ≥40px)、挑幀、變速;引用類走「先全卡 2-3s → punch-in 關鍵句」二段式。接管窗貼合素材自然時長、優先自然速率——素材短於窗先收窗+提前疊化,不為填窗慢放;playbackRate<1 僅介面滾動類且窗不可收時末選(≥0.7)。燒入高亮/譯條素材無乾淨幀 → 遮罩揭示法(白遮罩 scaleX 1→0 揭開,且入庫須在 SOURCES.md 登記「配遮罩揭示法」,見 broll.md 8.5)。

⑧ 段渲驗收:只渲該段 --frames=a-b,抽幀讀圖查:貼片感(調色)、可讀性(≥16px)、騎線(白板安全框)、與口播對拍。

落盤約定

影片 public/broll/;截圖 public/assets/;缺口寫進裝配方案表交用戶供料。版權口徑:官方宣傳素材用於評論性影片。

人名必配人像(用戶裁定 2026-07-22,鐵律級)

口播提到具體人名時,人物卡的頭像圈裡盡可能放該人物的真實照片,不用首字母 monogram 頂替(用戶原話:「這種提到人名的,盡可能都放一個圖片,你可以自己去網上找這個人物最有代表性的圖片,放到這個頭像的圈裡」)。monogram/圖標只作為拿不到圖時的兜底。

取圖口徑(分兩類,別混):

  • 公眾人物(賈伯斯、馬斯克等):AI 自行取圖,但只從明確標註可商用授權的來源取——首選 Wikimedia Commons 的 CC BY / CC BY-SA / Public Domain 條目,其次官方新聞稿素材。禁隨手抓搜尋引擎圖(多為權利不明的商業攝影,用戶片子是要發布的)。取圖後必須在 public/broll/<片名>/SOURCES.md 登記:檔名 / 來源 URL / 授權類型 / 攝影者署名。CC BY-SA 需在片尾或簡介署名的,交付時一併告知用戶。
  • 非公眾人物(如口播提到的老師、朋友、同事):AI 不得自行網上找圖——既無法確認為本人,也無授權。走「點名要素材」流程請用戶提供;用戶不提供則維持手繪名牌/monogram,並在交付時說明原因。

這條覆蓋舊口徑:早期方案裡「賈伯斯禁肖像、只用文字/icon chip」的寫法是版權顧慮下的保守做法,現按用戶裁定改為「用授權清楚的真實照片」,版權問題靠選授權來源解決而不是靠不放圖。

AI 生成拼貼 B-roll(無真實素材的情緒/隱喻場景,0722-01 定型)

真素材四級裡沒有、又需要情緒或抽象隱喻畫面(複讀、手術、刷手機、注意力碎裂這類無法錄屏也無官方影片的段落)時,走本流程:Codex image_gen 生靜幀 → Grok image_to_video 活化 → 接進正片。執行走 gbro-collage-broll skill 的三閘(Gate1 隱喻 / Gate2 靜幀 / Gate3 影片),但節奏、承載、構圖口徑以本節為準(覆蓋 gbro 預設值)。

① 承載:預設右區卡片,不是整屏。B-roll 放三區版式的右區證據卡裡(16:9 等比 objectFit:contain 整幅顯示、不裁切——用戶裁定「等比例縮小」),人物常駐在場,左區保留側標+時間線 HUD。整屏接管只在「無任何資訊需與素材並置」時用(A-roll 鐵律:整屏是唯一可切人物處,見 layout §2)。承載件參考 src/koubo/scenes-0722-01/CollageBroll.tsx(卡片 + OffthreadVideo,描邊跟章色)。別預設做整屏——0722-01 誤做整屏被用戶否決重來。

② 節奏:一句口播一張圖,切點給節奏,不靠鏡頭內揭示。密集口播裡每張只活 1-3s,禁 assemble-from-empty 組裝動畫(從空場拼起、末幀才完整=資訊永遠慢半拍,與語速曲線打架,8 條影片因此作廢)。要「活化」——靜幀構圖第 0 幀就完整,Grok 只疊持續微動(紙片飄/齒輪轉/光帶滑/霧氣湧),構圖一幀不許變。

③ 靜幀構圖規律(Codex image_gen):

  • 比例分型(一刀切會翻車):物件驅動隱喻(病床/藥片/日曆/碎片/書堆——人只是元素)人物佔高 45-60%;人物驅動隱喻(在工作/端坐/按按鈕/發呆——人是主體)必須近景 65-80%,遠景直接失效。
  • 硬紅線:無假字/可讀字母數字/logo/浮水印/UI;四邊緣同樣查(Codex 自查會漏檢邊緣假字,主會話必須 ffmpeg 裁四邊放大獨立複驗)。
  • 身份參考圖用戶指定(0722-01 用 my-face-studio-default.JPG);表情按敘事,低谷段多用側影/低頭/仰躺規避違和,不笑不愁苦。
  • 每批生成後 md5 去重,防串檔。

④ Grok 活化三坑(錯題 #39 詳):

  • 解析度:grok CLI image_to_video 的 resolution_name 只有 480p/720p 兩檔、無 1080p(2026-07-24 實測確認,請求 1080p 會回退 720p);xAI API 側 grok-imagine-video-1.5 支援 1080p i2v(官方文件)。整屏需 1080p = CLI 做不到:走 xAI API 1.5 檔、換真素材或其他生成器(Sora 2 / Veo / Kling / Seedance;ChatCut MCP 內建 Seedance/Kling)。指令必須顯式寫死解析度才拿滿檔位——不寫預設落 736×400(更糊)。720p 夠不夠看承載模式:卡片/畫中畫(顯示區常 <720px)720p 有餘、清晰;整屏鋪滿 1920×1080 時 720p 放大 1.5× 會軟。成片是 1080p,B-roll 無需 4K(顯示不出、除非大幅推近)。
  • morph 增生:易崩元素(齒輪/圓環/日曆格)prompt 末尾加鎖定約束(保持單個原尺寸/格數顏色不變/圓環連續不斷線)。
  • 硬性補全:「稀疏元素+大片空背景+空心人形+露臉碎片」觸發模型填滿空地/填實空洞/長出人臉,改構圖而非加禁令。
  • 調用:headless 需 --always-approve --permission-mode bypassPermissions --max-turns 10;多 agent 共享 cwd 禁用 grok --continue(會串會話把 A 條成片寫到 B 條路徑);交付前全批 md5 去重。

⑤ 環境前置:Codex 專案必須建在其可寫工作區內(本機=~/Documents/remotion剪輯/ 下),建在 ~/hyperframes-projects/ 會 image_gen 成功卻存盤被拒;多條目任務一條一個 agent 並行發,別讓一個 agent 串行做全部(會做到一半判完成收工)。

Individual skills in this repo

This repo contains 5 individual skills — each has its own dedicated page.

相關技能