Communitygithub.com

qingtengCHINA/motion-graphics-video

製作作品集級動態圖形影片(15/30/60/自定秒):紀錄片證據流 + 液態玻璃設計系統 + 數據驅動時間軸 + TTS 旁白 + 分塊渲染與完整驗收。當用戶要求動態圖形影片/作品集影片/motion graphics/portfolio video/含旁白的宣傳片/模型發展史影片時使用。開工前必須詢問用戶三件事:需求主題、主模型、TTS 模型,推薦使用 Qwen 系列模型。

motion-graphics-video 是什麼?

這是一款專為動態圖形設計愛好者與開發者打造的 AI Agent 技能,能將用戶的簡短需求轉化為作品集級別的動態圖形影片。它不僅是一個影片生成工具,更是一套融合了紀錄片級真實性、液態玻璃設計美學與數據驅動精確時間軸的完整工藝流程。技能支援多種平台(如 Claude Code、Cursor、Codex)並可靈活設定影片時長(15、30、60 秒或自訂),確保每一秒的視覺與敘事都充滿價值。其核心工作流程包括:開工前必須蒐集用戶的需求主題、主模型(推薦千問系列)與 TTS 模型(推薦千問語音系列)三項關鍵資訊;接著進行嚴謹的事實核查與證據抓取,以確保所有上屏資訊都有可靠來源;然後透過學習動效案例、建立色彩與材質系統、生成旁白、並根據節拍與旁白長度反向計算時間軸;最後採用分塊渲染技術避免記憶體溢出,並經過包含響度、畫面凍結、踩拍率等多達十項的硬核驗收。此技能賦予 Agent 完全的創作自由,專注於卓越的視覺設計、大膽的藝術指導與引人注目的動態表現,最終交付單一影片檔案與完整劇本。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/qingtengCHINA/motion-graphics-video/tree/HEAD

在你喜歡的 AI 中提問

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

說明文件

Motion Graphics Video · 作品集級動態圖形影片

把「一段影片」當作一件動態設計作品來做,就像是履歷上的作品集一樣,使用任何你認為能產出最佳效果的工具或技術。agent 擁有完全的創作自由,優先追求卓越的視覺設計、大膽的藝術指導、引人注目的構圖和富有力量的動態表現,讓每一秒都有價值。全力以赴。 本 Skill 沉澱自一部 201 秒紀錄片級成片的完整工藝(事實核查 → 證據抓取 → 動效學習 → 視覺系統 → 數據驅動時間軸 → 配音回讀 → 分塊渲染 → 四軌混音 → 逐項驗收)。


0. 開工前:必須問用戶的三件事(不可跳過)

用 AskUserQuestion(或等價提問)一次性收集,缺任何一項都不開工:

  1. 需求 / 主題 —— 影片要講什麼?目標觀眾與投放場景?有無必須出現的事實、產品、人物、品牌色? 同時給出時長選項:15 / 30 / 60 / 自定 秒(預設 60)。時長是預算不是硬值:最終由內容密度與旁白時長反推。
  2. 主模型 —— 負責策劃、文案、程式碼與排程的模型。 推薦千問系列(如 Qwen4-Max / Qwen3.8-Plus):長上下文利於整片時間軸與多檔案工程,中文文案與事實核查品質穩定。用戶也可指定其他模型,尊重其選擇。
  3. TTS 模型 —— 負責旁白配音的模型。 強烈推薦千問 TTS 語音系列(如 qwen-audio-3.0-tts-plus):支援音色與語氣 instruction,紀錄片語氣自然。需同時確認:音色、語氣 instruction、語言。

另需確認(可給預設值):視覺風格偏好、解析度/幀率(預設 1920×1080@30)、是否需要配樂(預設需要)、是否需要音效(預設不加——合成音效易廉價,除非用戶明確要求)、用戶提供的參考檔案/圖片/網頁位址。

金鑰紀律:任何 API Key 只寫入專案 .env 並加入 .gitignore;不寫進文件、記憶、日誌,不在對話回顯。


1. 主提示詞(最佳化版 · 槽位隨用戶輸入變動)

將下列提示詞作為創作綱領交給執行 Agent;{{…}} 為槽位,按第 0 節收集結果填充:

製作一段 {{DURATION}} 秒的動態圖形影片,像履歷上的作品集一樣展示你作為動態設計師的水準。
主題:{{THEME}}。
你擁有完全的創作自由,使用任何能產出最佳效果的工具與技術;優先追求卓越的視覺設計、大膽的藝術指導、
引人注目的構圖與富有力量的動態表現,讓每一秒都有價值。全力以赴。

策劃與程式碼由 {{MAIN_MODEL}} 承擔;旁白由 {{TTS_MODEL}} 合成(音色 {{VOICE}},語氣 {{TTS_INSTRUCTION}})。
視覺風格:{{STYLE}};畫幅 {{RESOLUTION}}@{{FPS}}fps;配樂 {{MUSIC}};音效 {{SFX}}。

若需要 UI、符號、真實資料、影片素材或背景音樂,自行連網查找、下載、使用;
必須逐一查看並參考用戶給出的檔案、圖片與網站位址:{{REFERENCES}}。
先瀏覽 https://snapcn.dev/docs/components 的動效案例,博採眾長後再動手;會員元件只學習思路,不繞過付費與驗證。

工藝要求(不可妥協):
1 事實:每個上螢幕數字/日期/引語都要有來源 URL 與統計時點;近一年事件至少兩個獨立來源;措辭不得比證據更滿。
2 證據:真實截圖/錄製畫面/論文頁全幅或玻璃浮窗呈現;抓取時記錄 DOM 錨點,推近與劃線永遠對得上字;
  歷史鏡頭優先 Wayback 快照;彈窗在抓取階段隱藏;不繞過反爬與人機驗證。
3 鏡頭:三級景別(WIDE/MID/MACRO),每鏡頭 move→settle(≥18 幀,僅 0.5% 呼吸漂移)→exit;
  到位用平滑貝塞爾加減速,禁用線性攝影機運動;縮放上限 1.8×,保證被強調內容完整落在安全區內。
4 連貫性:遵循 Gestalt 連續律——任何元素不得生硬出現/消失,入場與出場都要有動畫;轉場詞彙固定且各有含義。
5 版式:安全區 ≥96px;同螢幕文字 ≤2 層(字幕 + 一個標題或一個數字);字幕固定位置、逐字填色、不參與其他動畫;
  螢幕文字不重複旁白,只給日期/型號/數值/來源;螢幕文字不加句末標點。
6 材質:卡片/浮窗/面板統一液態玻璃(frost≈18px、rim≈0.22、bend≈0.45、dispersion≈0.35);
  色板從主題取色(7–8 色),強調色只做記號筆;顆粒與暗角保留;快速運動才開運動模糊與色差。
7 節奏:硬剪吸附配樂節拍(±3 幀);問題卡/標題打字完成後必須停留 ≥1.5s;列表與牆類內容停留 ≥3s;
  時長由內容決定,不為湊時長而閃切,也不為壓時長而砍停留。
8 聲音:旁白 −16 LUFS;配樂在旁白下閃避 6–9dB(attack≈150ms/release≈400ms);章節情緒可用低通/靜音製造呼吸;
  預設不加音效;匯流排真峰 ≤ −1 dBTP。
9 工程:時間軸由腳本從旁白時長反推生成,場景只讀相對幀;分塊渲染的邊界落在鏡頭切點;渲染失敗自動降並發重試。
10 交付:只交付一個影片檔案 + 一份完整劇本(分鏡/旁白/螢幕文字/素材/動效/來源);中間產物移入資源回收筒而非刪除。

驗收(對交付檔案實測,逐項自檢):幀數=時間軸;解析度/幀率;I≈−16 LUFS 且 TP≤−1 dBTP;blackdetect 無意外真黑;
無連續 >1.5s 靜止;分塊接縫無重複/掉幀;≥70% 硬剪踩拍;每鏡頭 settle 中點 contact sheet 目檢;
運動鏡頭逐 4 幀序列檢查緩動與模糊;旁白逐句回讀比對(字級時間戳或本地 Whisper);來源清單與實際上螢幕一致。

槽位表(隨用戶輸入/選擇靈活變動)

槽位來源預設
{{DURATION}}第 0 節時長選擇60
{{THEME}}用戶需求原文必填
{{MAIN_MODEL}}用戶選擇Qwen3-Max(推薦)
{{TTS_MODEL}} / {{VOICE}} / {{TTS_INSTRUCTION}}用戶選擇qwen-audio-3.0-tts-plus / 沉穩紀錄片音色 / 沉穩磁性莊重、語速適中
{{STYLE}}用戶選擇液態玻璃紀錄片
{{RESOLUTION}} / {{FPS}}用戶選擇1920×1080 / 30
{{MUSIC}} / {{SFX}}用戶選擇需要(CC 授權曲目) / 不加
{{REFERENCES}}用戶提供的檔案/圖片/URL無則留空並自行連網

2. 工藝流水線(執行順序)

  1. 詢問三要素 → 落 data/brief.json。
  2. 事實核查 → data/facts.md:逐條 URL + 統計時點 + 口徑差異;措辭修正表(刪「第一次/打平/首超」類過滿表述,除非證據原句)。
  3. 素材與錨點 → Playwright dpr2 全頁截圖 + anchors.json(DOM 包圍盒/字級 Range)+ meta.json(capturedAt/sha256);滾動鏡頭逐幀 scrollTo 截圖保證 30fps 平滑;終端/思考流等文字必須來自真實執行或官方公開範例。
  4. 動效學習 → 瀏覽 snapcn 元件庫,提煉原語(詞組彈簧入場、規格掃光、數字砸落、折線騎點、模型牆漂移、karaoke 字幕…),自研實現,不照搬會員程式碼。
  5. 視覺系統 → 色板/字型/玻璃材質/安全區/轉場詞彙/質感分區(每章一種質感與一個標誌鏡頭)。
  6. 旁白 → 逐句 TTS + 讀音替換表(如 QwQ→Q W Q)+ 靜音修剪 + 響度歸一;本地 Whisper 回讀比對,低分句重合成。
  7. 節拍與時間軸 → librosa 節拍圖;鏡頭時長 = max(預算,留白+旁白+留白);切點吸附節拍;分塊邊界=切點;輸出 timeline.gen.json,場景只讀相對幀。
  8. 渲染 → Remotion 分塊渲染(CRF16、yuv420p、BT.709),失敗降並發重試;拼接後封裝。
  9. 混音 → 旁白/配樂雙軌(預設無音效);閃避 + 章節低通 + 句前靜音;兩遍 loudnorm(I=−16,TP≤−2 留 AAC 餘量)。
  10. 驗收與交付 → 第 1 節驗收清單逐項實測;contact sheet + 運動序列目檢;清理中間產物(移資源回收筒);交付單影片 + 劇本.md。

3. 硬性約束

  • 金鑰只存 .env(入 .gitignore);文件/日誌/對話零回顯。
  • 刪除一律移入 ~/.Trash,禁止 rm。
  • 不繞過反爬、人機驗證、付費牆;被阻則換源並在事實表註明。
  • 只交付一個影片檔案;再創作畫面必須角標「示意動畫」。
  • 螢幕文字與旁白分離;螢幕文字無句末標點;旁白數字用阿拉伯數字、不加千分位逗號。

4. 常見失敗與回退

  • 懶載入頁面錨點缺失 → 抓取前預滾動 + 對缺失錨點 scrollIntoViewIfNeeded 重試;場景停點/幀數按實際錨點動態計算,保證聲畫同步。
  • 內滾容器頁面 fullPage 截不全 → fullPage:true + clip;超長頁按錨點局部裁切並重基錨點座標。
  • 彈窗/重新導向模態 → 抓取階段 CSS 隱藏或按文字定位隱藏其 fixed/absolute 祖先;不要點擊會跳轉的按鈕。
  • 設備外殼螢幕不透明 → 錄製畫面層置於外殼 PNG 之上,按模板螢幕百分比裁切。
  • 縮放裁切關鍵文字 → 縮放上限 1.8× + 焦點矩形完整入安全區;面板內裁切窗用 cx/cy 對齊面板中心。
  • 靜止檢測誤報 → 用「均值 + 變化畫素佔比」雙指標、960×540@10fps;settle 保留 0.5% 呼吸漂移。
  • AAC 真峰超標 → loudnorm 目標 TP 留 0.5–1dB 餘量(如 −2.2),封裝後複測。

相關技能