pj1433139082-hue/video-design-skills

remotion-consult — 影片需求 → 影片設計系統

把「這條影片怎麼做」從靈感變成可落地的工程規範：透過澄清、研究、提案，最終產出 DESIGN.md（影片設計系統文檔，含 tokens.ts 契約），供 remotion-build 直接套用。

入口分類（遇到「做影片」先定流程，別直接開問）

使用者說「做影片/出條片子」但沒說類別時，先花一個問題定流程歸屬（consult/build/video-shotcraft 三個都會觸發「做影片」，必須顯式分流）：

使用者意圖	走哪條
做/改任何影片（口播、數據、產品演示、品牌動效、科普、圖文輪播）	統一走本流程（consult → build）；動效從 總動效庫 + shotcraft 鏡頭卡 兩個源挑
點名要用 video-shotcraft 模板（Ink Press）/ 自主自由創作 / 共同創作	按其自身流程 Skill 觸發 video-shotcraft（使用者顯式選擇，非自動路由）
已有 DESIGN.md / 參考影片 / 明確改版	本流程，Phase 0 預檢直接進

分類問句：「點名用 video-shotcraft 模板/自主/共同創作了嗎？沒有 → 統一走 consult→build，鏡頭卡從 shotcraft 當動效庫借鑒（不強制每句選卡）。」

何時用

• 做/改一條影片（口播、數據可視化、產品演示、品牌動效）。
• 定影片設計方向：畫幅、字幕風格、配色、字體、節奏、轉場、動效。
• 要「影片設計系統」、「video design tokens」、「DESIGN.md」。
• 需求模糊（「幫我做條影片」），需要先澄清再動手。

核心心智

1. 先方向後細節：先確定審美/字幕/節奏系統，再談畫面實現。
2. 不套模板：目標是產出「這條影片獨有的節奏指紋」，不是從模板庫挑一個。
3. 可執行優先：DESIGN.md 必須具體到能直接寫 tokens.ts 與場景藍圖，不能停在「高級一點」。
4. 誠實：字幕文案不編造數據/事實。

流程（按順序執行）

Phase 0 — 預檢

• 檢查 工作台/影片/{slug}/ 是否已有 DESIGN.md / 口播稿 / captions.srt；有就作為基線，不推翻重來。
• 檢查同品牌跨域設計資產（使用者「先網頁再影片」工作流）：工作台/設計測試/{品牌}/DESIGN.md（網頁版）或 資料庫/AI工具/設計系統庫/{品牌}-DESIGN.md → 有則其配色/字體/情緒是品牌 DNA 基線，影片版繼承演進不重造（也是 Phase 3 設計系統一致性檢查的輸入）。
• 檢查品牌約束（專案 README、已有視覺資產、參考影片）。

Phase 1 — 澄清（強制，別跳）

用 AskUserQuestion 一次性澄清，最少覆蓋 9 項（一次別超 6 個問題，可分批）。前兩項是風格來源，必問不許跳（使用者可「自動挑」快速過，但必須確認）：

1. 風格來源（第一步必問）：自由設計 / 參考站自己挑（從 video-real-library.md 展示候選讓使用者選）/ 參考站自動挑（使用者給主題自動挑）/ 使用者提供參考（URL/截圖，最優先）。
2. 參考選擇（三維度互補，何時用什麼）：
   • 品牌 DESIGN.md（設計系統庫 資料庫/AI工具/設計系統庫/{品牌}-DESIGN.md 或自己專案 DESIGN.md）→ 設計 tokens 基線（配色/字體/間距），品牌延續/改版時用，系統不重造。
   • 網頁 HTML（video-real-library / real-design-library 參考站）→ 排版/視覺實例（佈局/層次/構圖），想要某種視覺結構時用。
   • 影片（video-real-library 動效源 / 使用者給的影片）→ 動效/節奏/字幕風，想要某種運動語言時用。
   • 互補：DESIGN.md 定系統 → HTML 給實例 → 影片給動效，三者合成完整方向。使用者給的參考最優先。選中參考用 opencli（保持登入態） 抓真實字體/色值/節奏，Phase 4 忠實繼承。
3. 影片是什麼：一句話定位 + 給誰看 + 發佈平台（抖音/B站/學術/內部——決定畫幅與節奏基準）。
4. 類別錨定：remotion-shared/categories/ 四類之一（voiceover-caption/data-viz/product-demo/brand-motion），或自訂。
5. 畫幅與時長：9:16 豎屏 / 16:9 橫屏 / 1:1；目標時長；是否系列化（系列=節奏必須可複用）。
6. 情緒/風格：專業克制 / 銳利數據 / 溫暖敘事 / 創意節奏 / 復古……給 2-3 個可對比方向詞。
7. 內容形態（字幕驅動關鍵）：已有口播稿 / 已有 .srt/.vtt / 有圖文數據 / 從零起草——決定字幕來源路由。
8. 偏好/禁忌：討厭的東西、字幕風格（逐句/詞級高亮/無字幕）、可讀性底線。
9. 一致性檢查：Phase 0 預檢是否已有品牌 DNA（DESIGN.md/視覺資產/參考影片）→ 有則後續方向不得偏離（克制演進）；無則自由設計。

有 video-taste-profile（工作台/影片/*/.taste-profile.json 或全域檔案）就先讀它。 風格來源=參考站時，Phase 2 必須抓參考真值（chrome-devtools/vision），Phase 4 忠實繼承——不把參考抽象成關鍵詞後自由發揮。

Phase 2 — 研究（使用者同意才做，可並行）

三層研究法，優先級從低到高：

• Layer 1 行業慣例：同類影片普遍怎麼拍（安全基線）。
• Layer 2 新趨勢：對照 remotion-shared/video-anti-slop.md，抓 1-2 個真實影片參考（remotion-shared/video-real-library.md 參考源 + 使用者給參考最優先），提煉字幕風/轉場/節奏可借鑑點。
• Layer 3 第一性原理：觀眾心智、字幕可讀性、內容主導節奏——最高優先。衝突時顯式記錄「為什麼偏離慣例」。

提案裡的「視覺參考描述」應能用真實參考庫案例錨定（如「類似 xxx 的詞級高亮字幕風」），不空泛。

Phase 3 — 完整提案（核心交付）

按 references/video-proposal-format.md 輸出：

• SAFE 方向（2-3 個）：品類基線，穩妥。
• RISK 方向（2-3 個）：刻意偏離，每個必須寫「為什麼值得 + 失去什麼」。
• memorable-thing：一句話錨定——「想讓觀眾記住的一個視覺/節奏時刻」（如「第 3 秒那個推近轉場」）。
• 每個方向：審美關鍵詞、字幕字體、配色、時間軸節奏（字/秒、轉場頻次）、構圖、轉場風格、視覺參考描述。

自檢：兩個方向若只是換色換字體，說明沒拉開，重做。

設計系統一致性檢查：若 Phase 0 預檢到已有品牌設計系統（DESIGN.md / 品牌 DNA，如已做過的網頁或影片），SAFE/RISK 方向不得偏離既定品牌 DNA（配色/字體/情緒基線）—— RISK 方向只能在既定 DNA 內的克制偏離（如換 accent 色相、改明暗結構、換字體體系），不可推倒重來或跳去無關風格。自由發揮只允許在無既有系統時。產出 DESIGN.md 前逐條核對「配色/字體/情緒」三項與基線一致或合理演進。

Phase 4 — 設計系統（DESIGN.md）

使用者選定方向後，按 references/video-design-system-template.md 寫 DESIGN.md，七段：

1. 審美方向：一段話定位 + 關鍵詞 + 禁忌。
2. 字幕字體：caption/title/body 三檔 + 畫幅基準字號 + 高亮模式（word/line/none）。
3. 配色：語義色板（含 captionActive/captionInactive）+ 對比度底線。
4. 時間軸節奏：fps/畫幅/總時長 + 字幕節奏 + 轉場頻次。
5. 畫面構圖：安全區 + 字幕區 + 標題區。
6. 轉場動效：轉場選型 + 時長 + 入場動效 + 緩動。
7. Video Design Tokens（tokens.ts 契約，見 remotion-shared/video-tokens-spec.md）+ 動效編排大綱（升級自場景藍圖，見 video-design-system-template.md §8）：素材分層清單（bg/mid/fg，可拼裝）+ 每句字幕 → 素材進出場動效 + 字體動效 + 口播聯動（視聽結合）。

並生成 tokens.ts 契約（TS 常量物件，語義命名）——這是給 remotion-build 的唯一介面。動效從總動效庫挑選組合寫入 DESIGN.md（remotion-shared/categories/{類別}/motion-list.md）。

第 8 段：渲染核標註（可選，預設 Remotion）：DESIGN.md 標註渲染後端——預設 Remotion 核；使用者點名/風格需網頁手感副才標 HyperFrames 核（HeyGen 開源 HTML→MP4，見 remotion-build/references/hyperframes-guide.md）。判斷：複雜鏡頭卡/已有 Remotion 專案 → Remotion；純 HTML/GSAP 動效、需內置 lint → HyperFrames。渲染核只影響 build 的渲染寫法，素材/BGM/字幕/驗收/§8 大綱全複用。

Phase 5 — 預覽 + 風格樣張審批門（可選，預設開）

不渲染全片。產出：

• 3-5 張關鍵幀抽幀（npx remotion still <id> --frame=N，覆蓋句首/句尾/轉場幀）——讓使用者確認構圖與字幕位置；
• 或 3-5 秒低解析度樣片（--scale=0.25）——讓使用者看真實運動節奏。
• 風格樣張審批門（借鑑 paper-collage-video style-proof）：定方向後，先渲染 1-2 個關鍵句的 3-5s 真實樣張（低解析度）給使用者確認——風格/配色/動效手感是否對味，確認後才進入 remotion-build 全片製作（避免全片做完才發現風格方向不對）。

預覽產物落 工作台/影片/{slug}/preview/。預覽目的是讓使用者在真實視覺上做決定，不是展示「我能渲染」。

紅線

• 禁預設套路：不主動給紫靛漸變、全程同一字幕節奏、每場居中同構圖。
• 禁複製：不像素級克隆他人影片（可借鑑字幕風/節奏，不搬整條）。
• 禁編造：不虛構數據、品牌事實。
• 對比度底線：字幕 ≥3:1（含實拍/圖片背景上）。
• 影片字號底線（螢幕文字都是關鍵字）：字幕 caption ≥64px/800、數據 mono ≥44px/700、標題 ≥88px/900——禁細體小字註釋。鐵律數字唯一事實源 = remotion-build/references/video-quality-metrics.md §字幕硬閾值（「影片鐵律」行），此處不複製數字，改閾值先改 metrics。
• 先澄清再設計：沒完成 Phase 1 不得跳方案。

參考檔案

📍 remotion-shared 共享庫查找順序：專案 .claude/skills/remotion-shared/ → 全域 Codex → 全域 Claude Code。取能找到的第一個。

檔案	何時讀
.claude/skills/remotion-shared/video-anti-slop.md	任何階段做方向判斷時（防趨同）
.claude/skills/remotion-shared/video-real-library.md	Phase 2 研究抓真實影片參考
資料庫/AI工具/video-shotcraft/	鏡頭配方卡庫（202 卡 12 類：運鏡/節奏/轉場/字體/特效），demos/{類}/{卡} 直接 copy，見 video-shots-spec

video-shotcraft 定位（第二動效庫 / 模板庫，不是分流路由）：

• shotcraft = 完整可借鑑的元件/動效庫（demos/{類}/{卡}/{元件}.tsx 場景級鏡頭動效 + template/ 模板工程 + assets/ 元件與音效）。所有影片統一走本 consult→build，不按產品片/口播片分流。
• §8 選卡：DESIGN §8.2 鏡頭卡列可選填，值帶意圖標記 [copy] / [借思路]。接入步驟唯一事實源 = remotion-shared/video-shots-spec.md「鏡頭卡接入步驟」（build 照執行）。
• 只有使用者點名要用 shotcraft 模板（Ink Press）/ 自主自由創作 / 共同創作 時，才 Skill 觸發 video-shotcraft 按其自身流程走（使用者顯式選擇，非自動路由）。 | .claude/skills/remotion-shared/video-shots-spec.md | 鏡頭卡體系 + 權威技巧（導演/剪輯/設計/聲音，搜尋+平台提煉） | | .claude/skills/remotion-shared/video-design-presets.md | Phase 4 選預設設計系統（6 套已驗證品牌） | | .claude/skills/remotion-shared/video-tokens-spec.md | Phase 4 寫 tokens 時 | | .claude/skills/remotion-shared/categories/{類別}/DESIGN.template.md | Phase 4 按類別模板起稿 | | .claude/skills/remotion-shared/categories/{類別}/motion-list.md | Phase 4 挑選動效組合 | | .claude/skills/remotion-shared/motion-library/ | 總動效庫元件清單（50 個，build 用） | | 資料庫/AI工具/設計系統庫/ | Phase 2 研究/Phase 3 提案：品牌 DESIGN.md 審美錨點 | | 資料庫/AI工具/審美參考庫/審美參考總覽.md | Phase 2 前端/攝影/剪輯趨勢 + Phase 4 節奏設計 | | .claude/skills/remotion-shared/aesthetic-judgment/ | Phase 4 定方向時：攝影/剪輯/前端排版六軸判別（素材風格/節奏/佈局） | | .claude/skills/ui-ux-pro-max/SKILL.md | 設計規則引擎：定影片畫面風格時查（Phase 4） | | .claude/skills/hallmark/SKILL.md | 反 AI slop 審查（57 門禁）：方向是否專業/防模板（Phase 2/3） | | .claude/skills/taste-skill/SKILL.md | 品味檢查（Pre-Flight 40+ 項）：方向是否夠格（Phase 3 自檢） | | 資料庫/AI工具/design-skills/open-design/craft/anti-ai-slop.md | 去模板規則（「七宗罪」）+ 151 設計系統替代（Phase 2/4） | | .claude/skills/design-shared/review-panel.md | 評審面板：agency-agents 視角 + 設計系統庫/審美參考庫判據（Phase 4 方向自檢 + 一致性檢查） | | .claude/skills/design-shared/wcag-basics.md | 定配色/字幕可讀性時（硬約束） | | references/video-proposal-format.md | Phase 3 出提案時 | | references/video-design-system-template.md | Phase 4 寫 DESIGN.md 時 | | references/video-taste-profile.md | 需要記錄/更新使用者影片品味時 |

輸出與收尾

按統一交付摘要結尾：

STATUS: PASS | FAIL | BLOCKED
產出物: DESIGN.md 路徑 + 預覽關鍵幀/樣片路徑
關鍵決策: 選定的方向（SAFE/RISK 哪一個 + memorable-thing + 所屬類別）
NEXT_OWNER: remotion-build（產生影片）| user（待確認方向）
待確認: 未決事項

收尾詢問：方向定了嗎？要產生影片嗎？（推薦交 remotion-build）