本頁章節

15 種 MG 動態設計風格與程式碼渲染管線

文件類型
使用手冊
更新日期
閱讀時間
10 分

拆解 Vincentwei1021/mg-styles-15 開源專案：15 支由 Claude Opus 5.5 撰寫程式碼生成的 10 秒 MG 動態設計短片、mgaudio 音軌合成工具包、Puppeteer 無頭逐幀渲染器與 2 輪 AI 評審流程。

來源
文件資訊
Vincentwei1021/mg-styles-15
授權
MIT

不依賴生圖或生影片模型，全數由 Claude Opus 5.5 透過 SVG、Canvas、WebGL、Three.js 與 Blender 撰寫確定性時間函數，搭配 Python mgaudio 音訊合成與無頭 Chrome 逐幀渲染出 10 秒成片。

動態設計風格與完整提示詞
15
每支標準化 H.264 成片長度
10 s
CC0 VCSL 真實樂器採樣
103
AI 評審 10 分制終評區間
7.57–8.21

01專案定位

專案定位與架構

Vincentwei1021/mg-styles-15 公開 15 種 MG（Motion Graphics，動態設計）短片成片、風格說明、完整提示詞與全部原始碼（查核 commit 49052d80bfaf9fa8412cc9710530e5e95a3b8d8c）。15 支 10 秒（10.000 s）短片皆由 Claude Opus 5.5 依提示詞撰寫程式碼產生，涵蓋畫面繪製、動態緩動、配樂編曲與音效對位，不呼叫生圖或生影片模型。

每支短片皆為實作確定性時間函數 window.renderAt(t) 的網頁（位於 demos/<slug>/index.html），傳入時間點 t（秒）即繪出對應影格；僅 04-3d-render 例外，其主體畫面由 Blender 5.1（Cycles）渲染為序列影格，再由網頁疊加字卡與顆粒質感。音軌由各短片的 audio.py 呼叫 lib/audio（mgaudio）工具包與 103 個 CC0 VCSL 樂器採樣合成，再透過 harness/render.mjs 驅動無頭 Google Chrome 逐幀截圖，最後由 ffmpeg 封裝為 -14 LUFS 的 H.264 MP4 成片。

mg-styles-15 單支 10 秒短片程式碼生成與 2 輪評審管線

  1. Stage 1 · 風格提示詞與時間軸定義：prompts/*.md 與 cues.json

    • 固定輸出規格：1920x1080 或 1080x1920、30 fps、10.000 s、-14 LUFS
    • Creative seed 敘事節拍與 Signature features 視覺技法約束
    • 共用時間點設定檔 cues.json 同步管理視覺動態與音訊觸發點

  2. Stage 2 · 確定性畫面與音軌程式碼合成：demos/<slug>/

    • 網頁實作時間渲染函數與就緒旗標：SVG、Canvas、WebGL、Three.js
    • 04-3d-render 先以 Blender 腳本渲染序列影格再由網頁合成字卡與顆粒
    • audio.py 載入 mgaudio 工具包與 103 個 VCSL 採樣輸出 24-bit audio.wav

  3. Stage 3 · 無頭逐幀渲染與獨立 AI 評審：harness/ 與 rubric.md

    • harness/render.mjs 透過 Puppeteer 與無頭 Chrome 逐幀截圖並支援 tmix 動態模糊
    • ffmpeg 以 libx264、CRF 14、bt709 與 AAC 320k 合成 video.mp4
    • 獨立 AI 會話依 rubric.md 進行 7 項維度評分與 2 輪修改迭代

從風格提示詞出發，所有畫面與音軌皆為時間 t 的確定性函數，支援逐幀重現與自動化評審修正。

15 種動態設計風格與技術路線總覽

儲存庫內建 15 套風格提示詞（prompts/*.md）與對應原始碼目錄（demos/*）。每支短片皆經過 2 輪 rubric.md 獨立 AI 評審與修改，終評分數介於 7.57 至 8.21 分（滿分 10 分）：

展示序號目錄代號風格名稱示範成片主題核心視覺與動態特徵
0105-cel-boil逐幀手繪 / 線條沸騰手作 HAND MADE手繪質感、線條沸騰（Line Boil）與逐幀動態節奏
0203-isometric等軸 2.5DISOPOLIS等軸測投影視角、模組化建築生長與空間層次
0301-flat-vector扁平向量動畫popwise — One Dot純色幾何色塊、角色關節綁定、彈性緩動與形狀擦除轉場
0402-line-art線條動畫ATELIER LINEA連續路徑描繪、筆觸粗細變化與連續線條構圖
0504-3d-render3D 渲染系soft. — Soft LandingBlender Cycles 充氣字母網格、碰撞模擬與柔和材質光影
0608-morph形變動畫morphe.跨物件平滑路徑形變（Shape Morph）與連續主體轉換
0719-paperclip粗描邊貼紙人科普 MG手機化學元素科普解說粗描邊貼紙角色、高密度資訊圖表與科普解說節奏
0822-hud賽博龐克 HUD / FUIKESTREL-9 · 目標鎖定戰術介面、Natural Earth 地圖數據、掃描線與鎖定數據流
0906-collage拼貼剪貼NOGGIN Quarterly報刊剪紙貼圖、去背照片、定格抽幀感與紙張紋理
1012-aurora-glass彌散漸層 / 玻璃擬態Aurora自訂 GLSL 著色器、彌散光暈、毛玻璃折射與科技感字卡
1109-bauhaus幾何構成 / 包浩斯KONSTRUKTION · 20 拍構成原色幾何構成、嚴格網格對齊與 20 拍機械節奏同步
1210-synthwave復古 80s Synthwave / VHSNEON DRIVE · 1986霓虹透視網格、夕陽掃描線、VHS 磁帶雜訊與合成器浪潮
1320-pixel像素風PIXEL QUEST整數倍像素網格、8-bit 晶片音樂合成與復古遊戲轉場
1407-liquid液態流動drop.表面張力融合、水滴飛濺物理感與流體轉場
1518-hanazi綜藝花字喵嗚日記 EP.07 · 9:16 直式9:16 直式構圖、多層描邊綜藝字卡、彈跳音效與快節奏剪輯

02安裝與環境

環境需求與安裝步驟

本機執行原始碼渲染與音軌合成需安裝 Node.js 22.12（或更新版本）、Python 3.11（或更新版本）、Google Chrome 與 ffmpeg。若需重跑 04-3d-render 的 3D 序列影格，另需安裝 Blender 5.1。

Step 1：複製儲存庫並安裝 Node.js 與 Python 依賴

於終端機執行以下指令，安裝 puppeteer-core、three、d3、opentype.js、simplex-noise、topojson-client 等前端與渲染套件，以及 numpy、scipy、soundfile、numba、pedalboard、pyloudnorm、librosa 等音訊與素材處理套件：

bash
git clone https://github.com/Vincentwei1021/mg-styles-15.git
cd mg-styles-15
npm install
pip install -r requirements.txt

Step 2：確認無頭 Chrome 與 ffmpeg 環境

harness/render.mjs 在 macOS 預設讀取 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome。在其他作業系統或自訂路徑執行時，請設定環境變數 MG_CHROME：

bash
export MG_CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
ffmpeg -version

Step 3：配置本地字體檔案（選用但影響字形一致性）

由於字體授權各異且中文字體體積較大，儲存庫未內附字體二進位檔。若需讓渲染字形與官方成片一致，請依 assets/fonts/README.md 清單將 Alibaba PuHuiTi、HarmonyOS Sans SC、Inter、DM Sans、JetBrains Mono 等字體放入 assets/fonts/cjk/ 與 assets/fonts/latin/ 對應路徑（03-isometric、07-liquid、08-morph、10-synthwave 另使用各自目錄下的靜態字重檔）。

03核心工具鏈

核心技能與工具鏈

專案包含提示詞生成、音軌合成、時間軸預覽、逐幀無頭渲染與 AI 評審工具鏈。

Phase 01 · Prompt Reuse

prompts/<slug>.md

15 套可直接發送給 AI 編碼代理的結構化導演提示詞

每份提示詞固定包含 Output 規格、Suggested technical route、Creative seed 分秒節拍與 Signature features 技法清單，可在保留風格辨識度的前提下替換自有品牌與文案。

Phase 02 · New Style Authoring

template.md

擴充全新 MG 動態設計風格的 4 段式提示詞模板

將通用工作流（How to work、Rules、Craft checklist、Deliver）與風格專屬區塊分離，只需填寫 Style、Output、Suggested technical route、Creative seed 與 Signature features 即可定義新風格。

Phase 03 · Deterministic Audio

python3 demos/<slug>/audio.py

基於 mgaudio 與 103 個真實採樣的程式化配樂與音效合成

內建 15 種曲風配方（synthwave、darksynth、chiptune、techno、pop、future_bass、lofi、ambient、variety、explainer 等）與 12 大類 SFX 函數，自動將主響度母帶化至 -14 LUFS 與 <= -1 dBTP。

Phase 04 · Interactive Scrubbing

harness/preview.html?demo=<slug>

瀏覽器時間軸拖曳與影格即時檢視器

透過本機 HTTP 伺服器載入目標短片，支援任意拖曳時間軸呼叫 window.renderAt(t)，在進入完整逐幀渲染前快速檢查構圖、字距與安全邊距。

Phase 05 · Headless Frame Renderer

node harness/render.mjs demos/<slug>

Puppeteer 無頭 Chrome 逐幀截圖與 ffmpeg 音畫封裝器

自動等待 window.__ready === true 與 document.fonts.ready，支援多 worker 分段平行渲染、tmix 子影格動態模糊、PNG 靜態抽幀（--stills）與 Fritsch-Carlson 曲線時間重映射（--tmap）。

Phase 06 · AI Jury Loop

rubric.md

7 項維度量化評分與 2 輪修正提示詞

由獨立 AI 會話抽取 0.5 秒間隔縮圖表與關鍵高解析度影格，針對 style_fidelity、concept_wow、motion_craft 等 7 項維度進行 1 至 10 分嚴格評審並輸出 5 至 10 項具體時間碼修改指令。

harness/render.mjs 常用命令列參數

參數預設值用途說明
--w / --h1920 / 1080（或讀取 window.DEMO）指定輸出畫面寬高像素
--fps / --duration30 / 10指定輸出影格率與總秒數
--mb / --shutter1 / 0.5子影格動態模糊採樣數（如 --mb 4）與快門開角比例
--workers1啟動多個獨立無頭 Chrome 實例平行渲染不同影格區段
--stills無傳入逗號分隔秒數（如 0.5,2,4.25）僅輸出 out/stills/*.png 關鍵影格
--scale1調整 deviceScaleFactor（如 --scale 0.5 快速輸出低解析度預覽）
--crf14libx264 編碼品質參數
--noaudio / --audio自動偵測 out/audio.wav停用音軌封裝或指定外部 WAV 音檔路徑
--mkv無輸出無損 ffv1 編碼之 MKV 檔案（跳過 x264 與音訊合成）

04進階技巧

社群與進階技巧

以下做法整理自 README.zh-CN.md、template.md、rubric.md 與 lib/audio/README.md。

改寫 Creative seed 時務必保留 Signature features

每份 prompts/*.md 裡只有 Creative seed 描述具體故事、品牌名、文案與色票。換成自有內容或改為 1080x1920 直式規格時，切勿刪除 Signature features 區塊，因為具體的緩動參數（如 cubic-bezier(0.34,1.56,0.64,1)）與錯峰影格數（stagger 2–4 frames）是維持風格辨識度的關鍵。

先用 --stills 抽檢 6 至 10 張海報級靜態影格再跑動態

提示詞工作流第 2 步規定「Key frames before motion」。先用 node harness/render.mjs demos/<slug> --stills 0.5,1.8,3.5,5.0,6.8,8.5 輸出靜態 PNG，檢查字距、行高、5% 安全邊距與負空間，確認畫面無預設模板感後再調整動態曲線。

利用 mgaudio 的 sync 對齊機制直接傳入視覺時間點

在 lib/audio 中，所有 sfx 函數皆內建感知同步點（sync point）：撞擊音效對齊瞬態起點，whoosh 對齊經過畫面中心的峰值，riser 與 reverse_cymbal 則對齊結尾撞擊點。撰寫 audio.py 時直接將 cues.json 的視覺事件秒數傳給 at=t，無須手動倒推前置偏移量。

另開獨立 AI 會話執行 rubric.md 的 2 輪評審

初次生成的成片通常落在 5 至 7 分（學生作業至一般模板水準）。將輸出之 video.mp4 交由未參與製作的另一個 AI 會話依 rubric.md 抽出每 0.5 秒縮圖表與關鍵幀審查，強制列出 5 至 10 個附時間碼與具體數值的修改項，回貼原會話迭代 2 輪即可提升完成度。

05實戰範例

完整實戰範例

以下示範在本機合成 01-flat-vector（扁平向量動畫 popwise — One Dot）的音軌、抽檢關鍵靜態幀、渲染 10 秒 MP4 成片，並在瀏覽器啟動時間軸預覽器。

Step 1：合成確定性配樂與音效（audio.py）

於儲存庫根目錄執行 demos/01-flat-vector/audio.py，腳本會讀取 demos/01-flat-vector/cues.json 的影格時間點並透過 lib/audio 輸出 24-bit WAV 音檔：

bash
python3 demos/01-flat-vector/audio.py
ls -lh demos/01-flat-vector/out/audio.wav

Step 2：抽取關鍵時間點靜態 PNG 與完整 MP4 渲染

先使用 --stills 抽取關鍵秒數的靜態畫面確認構圖與字體載入，再執行 300 影格（1920x1080、30 fps、10.000 s）渲染並合成 out/audio.wav：

bash
node harness/render.mjs demos/01-flat-vector --stills 0.5,2.0,4.5,6.5,8.8
node harness/render.mjs demos/01-flat-vector

Step 3：啟動根目錄 HTTP 伺服器並開啟時間軸預覽器

每支短片內部的素材路徑（如 /assets/... 與 /node_modules/...）皆相對於儲存庫根目錄，必須從根目錄啟動靜態伺服器，再於瀏覽器開啟 harness/preview.html：

bash
python3 -m http.server 8000
# Open http://localhost:8000/harness/preview.html?demo=01-flat-vector

Step 4：執行 mgaudio 音訊品質與對位檢查

使用 mgaudio 內建的 CLI 工具輸出頻譜圖並驗證響度（-14 LUFS）、真峰值（<= -1 dBTP）與視覺撞擊點對位誤差：

bash
PYTHONPATH=lib/audio python3 -m mgaudio demos/01-flat-vector/out/audio.wav --png demos/01-flat-vector/out/spec.png --hits 0.5,0.8,1.33,5.0,8.0

06限制與注意事項

注意事項

07延伸學習

下一步

完成 mg-styles-15 的本機渲染與提示詞結構拆解後，若需將動態設計工作流延伸至 AI 漫劇分鏡、高密度藝術動態網頁或長片剪輯管線，可接續閱讀以下手冊：

  1. 華叔 AI 藝術與動態設計技能庫（skills-atlas-huashu-art-motion）：涵蓋 53 套藝術風格配方卡、9 種解說動畫語法與 17 套搭配 Playwright 渲染的 Canvas/SVG 視覺函式庫，可與 mg-styles-15 的程式碼渲染管線搭配使用。

  2. AI 姿勢畫廊提示詞庫（skills-atlas-ai-pose-gallery-zh）：提供結構化人物姿態與鏡頭構圖提示詞，可作為人物類 MG 動畫或拼貼短片的視覺分鏡參考。

  3. 數位人口播自動化產線（skills-atlas-digital-human-koubo）：結合 Renoise MCP 數位人口播生成、whisper.cpp 逐字時間軸對齊與 Remotion 4 視覺包裝（5 套模板與 48 個包裝元件），可將 mg-styles-15 產出的 10 秒視覺片頭嵌入口播影片。

參考資料