opsassad/claude-code-motion-graphic-video-skill

動態影片工作室

這裡的影片是一個網頁，其中每個影格都是時間的純函數 render(t)，由 scripts/record.mjs 一次一個影格地精確錄製。這帶來了影格完美的動態、真實的字體、真實的產品 UI，以及程式碼級別的迭代速度。目標是達到資深動態設計師會引以為傲的作品：每個時刻有一個清晰的點子，動態具有物理重量，且每個元素都有存在的理由。

此技能教授的是思考和建構的方法。它不是一個模板。 每個影片都應根據其主題獲得獨特的構想。不要重複使用先前影片的場景、佈局或故事節拍；要重用的是引擎、工藝和經驗教訓。使用此技能製作的兩個影片應該看起來來自同一個工作室，而不是同一個模具。

開始之前

• 閱讀品味檔案。 references/taste.md 包含了適用於所有人的經驗教訓。然後尋找該人物自身的品味：專案根目錄中的 MOTION_TASTE.md，或跨專案的 ~/.claude/motion-video-taste.md。他們的品味會覆蓋通用預設值。
• 根據對話對象調整你的溝通方式。 許多要求製作影片的人並非開發者。用他們會看到的畫面來主導對話。展示渲染好的影格，而非 ASCII 草圖或文字模擬圖；一張圖片能在一輪討論中解決的問題，描述可能需要五輪。

工作流程

每個階段都以一個可以實際看到的成果結束，然後再投入時間到下一個階段。

1. 需求訪談：影片類型與偏好

在一輪提問中完成，每個問題都附帶合理的預設值，讓忙碌的人可以只說「開始」（references/intake.md）：

1. 影片的類型，從 references/kinds/README.md 的清單中選擇：
   • 發布影片、主打廣告、解說影片、故事影片、角色影片
   • 動態文字、精彩片段、預告片、氛圍展示
   • 操作教學、展示影片、資料故事
2. 發布平台與影片長度。
3. 偏好設定： 外觀、調性、聲音（音樂、配音、字幕）、必須展示的時刻、應避免的事項、他們喜愛的參考影片。

然後閱讀該類型的指南（references/kinds/<kind>.md），並僅提出其清單中素材無法回答的問題。

2. 素材與產品理解

要求提供 UI：程式碼倉儲（唯讀）、螢幕截圖或錄影，以及即時網站。切勿修改倉儲、開啟機密、登入或呼叫即時服務。

按照 references/intake.md 的描述來閱讀它：

• 它是什麼以及為誰而設
• 使用者旅程，逐個畫面，使用產品自己的語言描述
• 賣點，按優先級排序（為何有人會轉用）
• 頓悟時刻
• 品牌（標誌、顏色、字體、調性）
• 真實的數據
• 不應展示的內容

撰寫產品理解摘要並獲得此人的同意（或在獨立工作時說明你的假設）。此人要求展示、探索或說明的任何內容都必須作為「必須展示」放入摘要中。

從真實畫面中記錄字體、顏色、圓角半徑、間距、真實文案和真實數據。影片看起來必須是他們的品牌，而不是通用的動態模板；憑空創造外觀是初版被拒絕最常見的原因。

如果此人分享了參考影片，在設計之前逐影格研究它（bash scripts/study-reference.sh ref.mp4 out/）。寫下它實際做了什麼：

• 鏡頭距離和角度
• 文字的大小和角色
• 其顏色的意義
• 鏡頭如何銜接
• 節奏和弧線

告知此人你的解讀，並在開始建構前獲得確認。切勿僅從參考影片的單張截圖就開始建構。

3. 構想：先有原創點子，再選風格

從產品理解摘要（使用者旅程、排序後的賣點、頓悟時刻）出發來建構它。每次都要先執行 references/originality.md 中的原創性方法，即使是獨立工作時也一樣：

1. 找到人性真相
2. 從 8 個不同角度撰寫 8 個構想
3. 用替換測試和陳腔濫調測試剔除通用構想
4. 選出最能推銷產品的大膽倖存者，並記錄你拒絕的顯而易見的構想

對於任何軟體產品，最可能的構想（輸入請求 → 結果建構 → 通知 → 蒙太奇 → 標語 → 標誌）被禁止作為主幹。此技能中的所有其他內容（示範、實地指南、食譜、過往影片）都展示技巧，從不展示可複製的鏡頭順序。

然後從 references/styles.md 中選擇風格：

• 電影級產品影片
• 乾淨明亮產品影片
• 氛圍玻璃
• 旁白解說
• 日常生活
• 角色主導
• 主打鏡頭
• 精彩片段
• 卡片展示
• 操作教學
• 動態文字
• 資料故事

在選擇之前閱讀 references/patterns.md：這是關於優秀發布影片實際運作方式的實地指南。

類型說明影片的用途；風格說明影片的感受。當需求摘要較開放時，提供兩種風格作為兩個方向。

然後將故事撰寫為一句話，再來是承載故事的視覺隱喻，取自該主題自身的名詞和動詞。列出場景：每個場景一個點子，每個點子都有一個標誌性時刻（證明該觀點的動畫節拍），同樣取自該主題。當需求摘要較開放時，提出兩個方向讓人選擇。references/craft.md 包含了深層原則（在所有風格中都適用）、方法、動詞詞彙和節奏規則。在每個構想之前閱讀其原則。

4. 製作計畫：整部影片，逐影格規劃

在任何程式碼之前，使用 references/plan.md 的格式撰寫完整計畫：

• 一頁的影片概述： 構想、被拒絕的顯而易見構想、主角物件、情感弧線、賣點出現的位置
• 作為代碼的外觀標記
• 逐影格的每個鏡頭： 每個可見變化的時間戳記，加上鏡頭、特效、進出轉場、文字、聲音、素材和動作
• 4 到 8 個關鍵影格渲染為靜態圖片
• 風險

在此階段，期望是沒有上限的：以最佳狀態描述影片，然後朝著這個目標建構。每個鏡頭都必須推動故事進展；如果沒有，就刪掉它。 展示計畫和關鍵影格，並僅在獲得同意後才開始建構。當獨立工作時，根據品質檢查清單和 originality.md 檢查計畫，並在開始建構前修正。現在就撰寫任何旁白，因為它會驅動節奏。references/voice-and-sound.md 涵蓋了 AI 語音工具易於讀取的腳本格式、節奏、發音和聲音。對於產品發布，規劃鏈結：哪個元素將每個畫面帶入下一個（craft.md，"連接的畫面"）。

5. 建構

將 assets/engine-starter.html 和 assets/motion.js 複製到專案的素材旁邊，然後逐鏡頭建構。首先從移動庫中建構（references/moves.md）：

• 打字特寫（macroType）
• countUp
• 牆面俯衝（wall）
• buildIn、cascade、montage、growToWord
• cursor 和 clickZoom
• morphRect
• 景深（twin）
• 用於切換鏡頭的 shots，以及用於預覽和錄製的 start

assets/moves-demo.html 展示了每個移動如何被呼叫。僅閱讀其機制；其鏡頭順序是禁止的預設模式，絕非模板。僅在構想需要時才使用移動；一部影片可能完全不需要使用任何移動。僅手動建構函式庫未涵蓋的部分，而當一個新移動證明其價值時，以相同的形式將其添加到函式庫中。

每個持續時間和曲線都應取自 references/motion-tokens.md，而非憑猜測。遵循 references/engine.md 中的約定和陷阱；它們來自真實的錯誤。

對於任何長度超過約 20 秒的影片，先進行快速的粗略節奏檢查：使用灰色方塊搭配真實的鏡頭移動和時間，以及一些靜態圖片。先讓節奏正確，然後在不改變節奏的情況下替換為真正的藝術作品。

6. 閘門檢查：聯絡表

使用 node scripts/record.mjs page.html stills/ --stills 1,3.5,... 渲染 8 到 16 個關鍵時刻，然後使用 bash scripts/contact-sheet.sh stills/ sheet.jpg 製作聯絡表。首先自己根據下面的檢查清單和品味檔案進行審查；修正並重新渲染。之後才展示給此人看。在靜態圖片正確之前，不要錄製完整的影片。

7. 錄製、配音、對位、混音

使用 --scale 1 --fps 30 錄製草稿供審查，並使用 --scale 2 --blur 4 錄製最終版本：超採樣，然後縮小，具有真實電影風格的動態模糊。當收到語音檔案時，執行 node scripts/voice-segments.mjs voice.wav 來找出每個口語台詞。使用時間扭曲表將動畫拉伸以配合語音。不要剪輯或加快語音速度。使用 node scripts/mix.mjs mix.json 放置台詞和音樂。

8. 交付

根據每個頻道進行匯出，加上縮圖和貼文文案（references/delivery.md）。驗證最終檔案：從 MP4 本身提取影格（每個影格一個 ffmpeg 呼叫）並檢查持續時間和響度。

9. 學習

當此人做出反應時，將他們喜愛或拒絕的內容以及原因，寫入他們的品味檔案中（建立 MOTION_TASTE.md，或者如果這是他們的個人品味而非專案品味，則寫入 ~/.claude/motion-video-taste.md）。如果某個經驗教訓對所有人都有幫助，建議將其添加到 references/taste.md 中。這就是每個影片都比上一個更好的方法。

品質檢查清單（每次聯絡表都要執行）

• 看起來像真實的品牌/產品： 使用相同的字體、顏色、圓角半徑、元件。沒有憑空發明的東西。
• 每個畫面一個點子。 如果眼睛必須同時閱讀兩件事，則刪除其中一個。
• 沒有被裁切、重疊或擠壓的內容： 文字整齊換行，標誌光學置中，卡片完整，保持安全邊距。
• 顏色真實： 沒有褪色濾鏡或灰色薄霧；文字有對比度。
• 動態具有重量： 緩入和緩出，彈簧效果收斂，僅時鐘和進度條使用線性動態。
• 轉場是有動機的（鏡頭移動、物件交接、推動），且場景在轉場期間仍然可讀。
• 畫面與語音一致： 正在說的內容就是那一刻畫面上顯示的內容。
• 事實是真實且可安全發布的（參見 delivery.md）。
• 結尾： 品牌標誌加上一個連結或一個動作。沒有此人未要求的額外呼籲。
• 在手機上可讀： 重要的文字在舞台上為 40 像素或更大，或者鏡頭放大到該尺寸。檢查縮小到大約 375 像素寬的聯絡表。
• 每個鏡頭都會穩定下來： 每次移動後都有一個足夠長的靜止時刻來閱讀（每詞 0.5 秒 + 0.3 秒）。
• 風格保持一致： 接合、顏色、文字和鏡頭從頭到尾遵循所選風格的配方。
• 展示動作，而非畫面： 每個鏡頭都展示某人在做某事，或某事的結果。
• 比例和節奏至少改變一次（近景 ↔ 遠景，慢 ↔ 快）。
• 強調色只有一個意義。
• 每張圖像都經過肉眼檢查： 正確的產品對應其標籤，正確的標誌，沒有裁切或拉伸。打開每一張；不要信任檔案名稱。
• 數字合理： 只有總數和增長的數量會遞增；價格和固定值則直接顯示。
• 清晰的轉場： 文字在某物越過它之前離開（沒有白上白被吞噬），且鏡頭之間沒有空白影格。
• 具體而非通用： 至少有一個時刻是只有該主題才能擁有的；僅在該主題有該動作時才使用移動庫。
• 原創： 它通過了替換測試，不使用禁止的主幹（originality.md），並且不與示範或使用此技能製作的上一個影片共享鏡頭順序。

在向任何人展示成果之前，對以下每個項目評分（滿分 10 分）：品牌匹配度、故事清晰度、動態品質、可讀性、轉場、聲音/語音同步度和完成度。先修正任何低於 8 分的項目。

檔案

• references/genres.md：影片類型，包含結構、長度和格式預設值。
• references/intake.md：需求訪談問題（包含預設值）、如何閱讀程式碼倉儲以了解使用者旅程和賣點，以及產品理解摘要。
• references/kinds/：每種影片類型一個指南（發布影片、主打廣告、解說影片、故事影片、角色影片、動態文字、精彩片段、預告片、氛圍展示、操作教學、展示影片、資料故事）：應問什麼、可能的形狀、世界、動作、範例、陷阱。kinds/README.md 是選單。
• references/plan.md：製作計畫格式：一頁的影片概述、外觀標記、逐影格的每個鏡頭、關鍵影格、風險。
• references/originality.md：首先閱讀。 每次獲得原創構想的方法：人性真相、8 個角度、剔除測試、禁止的陳腔濫調。它會覆蓋技能中的每個範例。
• references/patterns.md：基於對 15 部優秀發布影片逐影格研究的實地指南：它們幾乎都做了什麼、動態文字、轉場、展示產品運作、何時使用角度、結構、專業細節。在構想階段閱讀。
• references/styles.md：十二種不同的風格（電影級產品影片、旁白解說、卡片展示、操作教學、動態文字、資料故事、乾淨明亮產品影片、氛圍玻璃、日常生活、角色主導、主打鏡頭、精彩片段），每個都是一個完整的配方：鏡頭、文字、顏色、接合、節奏、弧線、陷阱。
• references/craft.md：深層原則、構想方法、構圖、動詞詞彙（巨集打字、結果牆、連接畫面、點擊縮放、鏡頭）、節奏。
• references/motion-tokens.md：數字：曲線、持續時間、彈簧、交錯、閱讀停留、手機文字尺寸

…（為翻譯而截斷）