norahe0304-art/30x-video

Remotion 精美影片

製作看起來像頂尖廣告公司花費高額預算打造的 40 秒產品發表影片。秘訣：建立動態產品 UI 模型——真實的儀表板、對話介面、程式編輯器、資料視覺化——全數以程式碼建構並使用彈簧動畫呈現。

使用時機

使用者提及一個品牌或提供網址，並想要一個產品發表/行銷/展示影片。

不適用於（請改用其他技能而非硬撐此技能）：從現有長片中擷取短片（那是短片/重剪工作）；為現有談話人頭影片加上字幕；對使用者影片進行 NLE 風格的剪輯（重調時間/重調色彩/重新排序）；純音樂軌道需要拍點同步的歌詞影片。此技能是從品牌的網路存在建構發表影片——程式碼建構的 UI 模型、真實抓取的資產、五幕敘事。如果輸入不是要呈現的品牌/產品，這就是錯誤的工具。

技術棧

Remotion 4.x（scaffold 固定 ≥4.0.484）+ React 19 + TypeScript + Zod + lucide-react + @remotion/transitions + @remotion/google-fonts + @remotion/paths + @remotion/light-leaks + @remotion/media + @remotion/effects（官方漸層/棋盤/浮雕/網格線——優先於手工打造的 CSS 等效方案）

系統先決條件——自動處理

請勿要求使用者安裝任何東西。請勿手動執行 command -v 檢查。協調器（scripts/url-to-video.ts）內建預檢功能，可偵測缺失工具、印出缺失項目，並透過 brew/apt/dnf/pacman/npm 自動安裝——全部在步驟 1 內完成。

所需工具（若缺失則全部自動安裝）：

工具	原因
ffmpeg	音訊修剪、loudnorm、影片修剪、volumedetect 基本檢查
yt-dlp	從 YouTube 抓取品牌展示影片 + 免版稅 BGM
aubiotrack	為 analyze-audiomap.py 提供降級模式的拍點備援 + 舊版 beat-sync.ts（透過 aubio 套件）
playwright	無頭渲染的首頁截圖

預檢標誌（傳遞給 url-to-video.ts）：

• --yes —— 自動安裝而不詢問（當以 Claude 執行時使用此選項，因為你沒有 TTY）
• --no-install —— 跳過安裝，以降級模式執行（拍點 → 備援，截圖 → 僅擷取）

如果你遇到自動安裝失敗的平台（受限環境、無 sudo），協調器會印出每個工具的手動安裝指令並以降級模式繼續執行。絕不可放棄執行——降級輸出仍然比什麼都沒有好。

音樂映射分析器（scripts/analyze-audiomap.py，步驟 4）帶有自己的預檢：它會在首次執行時透過 pip 安裝 librosa/numpy/soundfile，如果安裝失敗（或傳遞了 --no-install），則降級使用 aubiotrack——音訊映射將僅包含 bpm + beats_sec，其他所有欄位為 null，且 rhythmic: false（網格在下游不受信任）。

BGM 生成器（scripts/generate-bgm.py，步驟 2 第 ② 層）具有相同的預檢形式：透過 pip 安裝 transformers/torch/soundfile/numpy（普通 → --break-system-packages → --user）；如果安裝失敗，它會輸出 yt-dlp 備援提示而非阻塞——BGM 來源降級，絕不會停止。生成的音軌會像任何其他 BGM 一樣流入 analyze-audiomap.py。

URL-to-Video V2 輸出合約

首選路徑：執行 V2 接收協調器，然後在 Remotion 中精煉生成的專案。

node --experimental-strip-types <已安裝技能目錄>/scripts/url-to-video.ts https://brand-site.com --out ./<品牌名稱>-launch-video

協調器必須輸出：

• brand-report.json
• scene-constitution.json
• asset-manifest.json
• story.md
• review.md
• 一個完整的 Remotion 專案目錄，包含 public/brand/*、可選的 public/brand/beat-map.json、src/theme.ts 以及供 scaffold 使用的已生成接收資料

回歸路徑：

node --experimental-strip-types <已安裝技能目錄>/scripts/benchmark-suite.ts --match stripe-fintech --offline --reuse-brand-dir ./public/brand --install --verify --render

基準測試執行器必須輸出每個基準測試的 benchmark-result.json 檔案和一個測試套件摘要，以便 V2 變更可以進行壓力測試而非爭論。

此技能並非為一鍵最終渲染而優化。它是為達到影片團隊水準的初剪而優化，以便 Claude 或人類可以在 Remotion 中進行最後 10-20% 的打磨。

核心哲學

1. 建構產品 UI 模型，而非抽象圖形。 UI 本身就是動畫。
2. 先抓取，後設計。 每種顏色、字型、標誌都來自真實的品牌網站。
3. 節奏即奢華。 40 秒讓內容有呼吸空間。絕不倉促介紹功能。
4. 品味勝於模板。 如果看起來像「AI 做的」，就重新設計。
5. 一種字型家族，字重層次。 僅使用 300-600 範圍，絕不使用粗體（700+）。

三層構成

• 現象層： 收集官方網站證據。ScreenshotProof 是強制性的。VideoProof 是首選。沒有視覺證據，就沒有可信的影片。
• 本質層： 從證據中推斷出 DesignArchetype。使用參考資料來提升判斷力，而非覆蓋品牌。
• 哲學層： 在建構之前拒絕反射性的預設值。品味勝於便利性。可信度勝於場面。產品現實勝於模板能量。

此技能明確吸收了以下來源的理念：

• agent-browser 作為首選的現象層收集器（無頭，不會劫持螢幕）
• awesome-design-md 作為企業設計原型參考庫
• taste-skill 作為執行紀律的來源
• Impeccable 作為完成閘門和反單一文化詞彙的來源

以上皆非硬性依賴。它們的價值已嵌入此技能的思維和閘門中。

規則

閱讀個別規則檔案以取得詳細說明和程式碼範例：

設計系統

• rules/typography.md —— 字重（最大 600）、尺寸層級（最小 24px）、文字安全
• rules/color.md —— 品牌極性、中性色調、60-30-10 法則、強調色透明度層級
• rules/layout.md —— 網格系統、4px 間距尺度、安全區域、邊框半徑層級、反重疊
• rules/composition.md —— 自訂構圖法則：零空白氛圍基底、滿版時刻、編輯級 200-320px 字型、首先使用真實資產、構圖多樣性——加上構圖 SLOP 黑名單（中樞輻射藥丸圖、空心卡片三聯畫、置中物體空白、永恆 spring+shimmer 開場）以及薄弱證據劇本（分數 < 40 → 從標誌幾何形狀生長出品牌世界，絕不使用空卡片）

視覺內容

• rules/ui-mockups.md —— 產品 UI 建構、密度、標題欄、語法著色、游標模擬、巨型終端機底部升起規格（經過驗證的幾何形狀 + 內容合約 + 失敗清單）
• rules/cards.md —— 交錯卡片網格、內部填充技巧、動畫卡片主體、無重複
• rules/data-viz.md —— SVG 圖表、動畫指標、tabular-nums、狀態徽章、反英雄指標
• rules/artifact-catalog.md —— 在設計任何幕前閱讀：15 個經過實戰驗證的自訂工件系列（附來源指標）+ scaffold 庫存 + 跨製作主角輪換帳本（~/.media/hero-ledger.jsonl）——多樣性是一個閘門，而非建議

動態與製作

• rules/motion.md —— 彈簧、easeOutExpo、逐字交錯、時間標準、保持後捕捉、有機 AE 詞彙（wiggle / overshoot / idle float / lookAt —— 從同級 remotion-motion 技能連結）
• rules/transitions.md —— TransitionSeries、光線洩漏、流體背景、雜訊紋理、視差
• rules/cinematic.md —— 底片顆粒、暗角、閃光掃掠、色彩分級、玻璃擬態、渲染設定
• rules/beat-sync.md —— 從 audiomap.json 驅動的 BGM 時間控制：一個分析器無條件信任，當 rhythmic: true 時鎖定網格拍點，否則依能量階段/沉默來控制節奏，在能量高峰處保持後捕捉
• rules/narration-sync.md —— 僅限旁白/字幕影片：將視覺鎖定到逐字時間戳記、字幕/品牌詞彙清理、句子邊界剪輯捕捉

策略與品質

• rules/creative-moves.md —— 從每個「驚艷」判決中提煉出的五個創意生成器——慣用語直譯、標誌幾何生長、限制鍊金術、語義反轉、領域原生證明
• rules/taste.md —— AI slop 黑名單、設計原則、UX 法則、自我審查清單、節奏
• rules/narrative.md —— 五幕結構、標題/UI 節奏、故事弧線、標誌星群
• rules/narrative-templates.md —— 特定產業的敘事模板（AI SaaS、金融科技、開發者工具、電子商務、醫療保健、網路安全、協作）
• rules/workflow.md —— 品牌抓取、圖示系統、資產策略、影片嵌入、檔案組織、BGM 多樣性強制（品牌衍生情緒 + 全域帳本去重——絕不使用相同的音軌兩次）
• rules/media-resolve.md —— 資產解析級聯（帳本 → 採用 → 程式化 → 目錄 → 網路）搭配 .media/manifest.jsonl 凍結帳本；程式化優先：點狀地圖世界地圖、simple-icons 標記、LobeHub AI 模型標誌作為內聯可著色元件
• rules/archetypes.md —— 從高品質設計參考中抽象出的企業設計原型
• rules/finish-gate.md —— Impeccable 風格的完成協議、反單一文化檢查、渲染阻塞標準
• rules/qc-gates.md —— 四道基於證據的 QC 閘門：資產審計（步驟 2.5）、每幕畫面證據（步驟 4）、評論迴圈接線（步驟 7.5）、誠實揭露（步驟 8）。僅證據——渲染的像素 + 閱讀，絕不 grep

參考檔案（程式碼模式）

• references/animations.md —— FadeIn、ScaleIn、SplitText、Typewriter、CountUp、AnimatedPath
• references/audio.md —— 音訊同步、拍點偵測、旁白閃避、ElevenLabs TTS with-timestamps VO 管線（免費取得單字時間、限制金鑰處理、VO_CUES 衍生的閃避）
• references/components.md —— GradientMesh、GlassPanel、FilmGrain、ProductFrame、BrandIcon
• scaffold/src/components/Transitions.tsx —— 7 種過渡系列（whipPan/maskWipe/push/zoomPunch/blurDissolve/flashThrough/glitchCut）—— fade() 的即插即用替代方案；全 fade 影片是違規
• scaffold/src/components/ShaderFX.tsx —— GPU ShaderPlane（liquidWarp 已可生產；silk/lens 開發中）—— 使用 --gl=angle 渲染（已嵌入 scaffold 渲染腳本）
• scaffold/src/components/Captions.tsx —— 包含時間戳記的字幕，6 種風格（karaoke/scalePop/weightShift/neonGlow/kineticSlam/editorial）
• references/lottie.md —— @remotion/lottie 整合、建議來源
• references/visual-effects.md —— 分層視覺效果庫參考（lottie、motion-blur、confetti、flubber、three.js）

Remotion API 參考（已捆綁）

此技能捆綁了完整的 remotion-best-practices 參考，適用於 Remotion API 模式。當你需要 Remotion 特定的 API 知識時，請載入這些內容：

• remotion-best-practices/rules/videos.md —— 影片嵌入、修剪、音量、速度、循環
• remotion-best-practices/rules/audio.md —— 音訊匯入、修剪、音量、速度、音高
• remotion-best-practices/rules/timing.md —— 插值曲線、線性、緩動、彈簧
• remotion-best-practices/rules/transitions.md —— 場景過渡模式
• remotion-best-practices/rules/compositions.md —— 組合、靜止畫面、資料夾、預設屬性
• remotion-best-practices/rules/sequencing.md —— 序列延遲、修剪、持續時間限制
• remotion-best-practices/rules/fonts.md —— Google Fonts 和本地字型載入
• remotion-best-practices/rules/images.md —— Img 元件使用
• remotion-best-practices/rules/charts.md —— 長條圖、圓餅圖、折線圖、股票圖表模式
• remotion-best-practices/rules/light-leaks.md —— @remotion/light-leaks 疊加效果
• remotion-best-practices/rules/lottie.md —— @remotion/lottie 整合
• remotion-best-practices/rules/text-animations.md —— 排版動畫模式
• remotion-best-practices/rules/calculate-metadata.md —— 動態組合元資料
• remotion-best-practices/rules/voiceover.md —— 使用 ElevenLabs TTS 的 AI 旁白
• remotion-best-practices/rules/parameters.md —— Zod schema 參數化
• remotion-best-practices/rules/ffmpeg.md —— 用於影片修剪的 FFmpeg 操作

工作流程（8 個步驟 + 4 道證據閘門）

此工作流程內包含四道基於證據的 QC 閘門——資產審計（步驟 2.5）、每幕畫面證據（步驟 4）、評論迴圈接線（步驟 7.5）、誠實揭露（步驟 8）。僅證據——渲染的像素 + 閱讀，絕不 grep