本頁章節

Huashu Art Motion 程式碼藝術動畫與解說片段算繪工作流程

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

拆解 alchaincyf/huashu-art-motion（版本 1.2.0）的 36 種實做藝術風格、17 種研究配方、9 種解說動畫語法與 17 個 Canvas 繪圖庫，整理分鏡 Lint、Playwright 逐幀算繪與 film_gate 交付流程。

來源
文件資訊
alchaincyf/huashu-art-motion
授權
MIT

透過 Canvas 與 SVG 繪圖庫、參數化 JSON 片段與雙重門禁腳本，將藝術名畫筆觸與 9 種 YouTube 解說動畫語法轉為逐幀可控的影片。

藝術風格配方卡
5336 種實做風格與 17 種研究配方
解說動畫語法
98 種附參數化片段與 1 種講解員快照
內建繪圖與動畫庫
17涵蓋筆刷、鏡頭、排版、圖表與拼貼

01風格配方、9 種解說語法與雙軌模式

系統定位

alchaincyf/huashu-art-motion（版本 1.2.0）由花叔（alchaincyf）以 MIT 授權開源，是針對程式碼動畫設計的 Agent 技能，最初源於對 X 使用者 Tak（@cherry_mx_reds）15 秒《Art History Speedrun》的純程式碼拆解與重繪。儲存庫內建可完整複製的 scripts/engine/ 動畫工程，整合 17 個 JavaScript 繪圖與運鏡庫、53 張藝術風格配方卡（36 種既有實做＋17 種原作錨定研究配方）、9 種解說動畫語法，以及涵蓋分鏡檢查、逐幀算繪與反 PPT 門禁的驗收工具鏈。

SKILL.md 依模型能力區分兩套執行路徑：開闊檔適用於 Claude Opus 5.5 或同級以上模型，可自由組合繪圖庫、自訂渲染器與路由表；軌道檔適用於其他模型，強制依序執行「撰寫鏡頭表 → storyboard_lint.py 紅燈門禁 → 逐鏡算繪（單段參數化片段上限 8 秒）→ ffmpeg 拼接混音 → qa.py 量化驗收 → deliver.py 交付」。

解說語法代號與名稱典型鏡頭時長主緩動與主轉場適用內容與核心機制
y1_kurzgesagt（扁平科普）硬切 7–9 秒；視覺單元 4.6–6.7 秒MO.k75、lensReveal / matchCut將抽象概念畫成具體物件並置於可對數縮放的世界，相機在尺度間穿行
y2_vox（調查拼貼）慢檔中位 3.3 秒（3–7 秒）；快檔 1.4–1.8 秒MO.sineInOut、元素 12 fps 步進、same / cut真實檔案、新聞與截圖鋪於桌面，紅線與毛邊螢光筆依 12 fps 步進標註
y3_whiteboard（白板手繪）每塊停留中位 6.6 秒MO.sineInOut（1.2–2.4 秒平移）、0.8 秒甩鏡邊講邊畫的推理鏈，開寫時刻比對應口播短語晚約 0.5 秒，收尾拉遠看全圖
y4_storytime（故事簡筆角色）平均 2.43 秒（中位 1.87 秒）MO.expoOut（0.1 秒換姿）＋MO.settle、24 fps第一人稱經歷與笑點，姿勢 0.1 秒快切後定住，靠反應特寫與停頓製造節奏
y5_kinetic_type（動態文字）120 BPM 下每小節約 2 秒MO.expoOut、MO.springHz、fillZoom / bands清單、金句與章節卡，主詞踩重音砸入，同畫面僅保留單一視覺焦點
t1_3b1b（數學與機制形變）單動畫 1–3 秒＋停 1 秒；單概念 8–20 秒MO.smooth、zoomThrough / fadeShift黑底上以 Transform 將前一概念直接形變為下一概念，顏色對應固定概念名
t2_keynote_ui（發布會介面）演講 5–8 秒；產品快剪 1.5–3 秒MO.spring、MO.appleOut、blurPush / expandRect產品截圖或實物滿幅推近，名詞與數字於口播說出時落定，毛玻璃卡作選配包裝
t3_finance_chart（財經圖表）單張圖 2.5–6 秒MO.quintOut、MO.smooth、slidePush / zoomThrough先畫座標系、後長數據、最後只標註一件事；柱狀圖強制從 0 起算
y6_presenter_explainer（講解員科普）依口播整片段落配置結合白板、圖表與講解員角色幀第 9 種語法，提供語法卡與需自備角色音訊的整片參考程式碼快照（reference_films/）
Huashu Art Motion 雙軌動畫生產與門禁架構

  1. 分鏡與風格定義層

    • 36 種實做風格（35 個 Canvas 場景 + 37_rick_morty SVG）
    • 17 種原作錨定研究配方（編號 38 至 55，跳過 54）
    • storyboard_lint.py 畫風鎖、色板與 6 種做壞方式檢查

  2. 引擎與算繪執行層（scripts/engine/）

    • 17 個繪圖庫（MO / CAM / DG / TY / CH / UI / CL / MD / TOON 等）
    • 8 種參數化 JSON 片段（clip.html + clips/*.js）與長卷穿越骨架
    • Playwright Chromium + render.py 輸出 H.264 MP4 或 ProRes 4444 MOV

  3. 量化驗收與交付門禁層

    • clip_lint.py 與 render.py --audit（每 0.25 秒查出界與疊字）
    • qa.py 穩定度、效率、動感與文字框景檢測
    • film_gate.py 與 deliver.py（攔截翻頁 PPT、0.3 秒空畫面與 30% 藍紫底）

軌道檔強制先過 storyboard_lint.py 才允許寫碼；交付時必須通過 film_gate.py 與獨立 Agent 審片才複製成片並寫入指紋交付說明。

README.md 資料表列出 53 張風格配方卡與 53 個 scripts/engine/scenes/ 場景，而 SKILL.md 前言第 3 行與風格總索引標題第 1 行仍保留「36 種既有實做＋16 種研究配方」字樣；實際核對風格總索引第 13 行「新增研究配方（17 種）」表格（編號 38_giotto 至 55_dunhuang，中間未設 54 號），研究配方確為 17 張（自評 65–82 分、獨立覆核 53–74 分，因未達 80 分門檻皆列為研究配方），合計 53 張風格配方卡。

02Skills CLI 安裝、Playwright Chromium 與環境依賴

安裝與驗證

  • 未完成：

    本機需安裝 Python 套件管理工具 uv、ffmpeg，以及供無頭瀏覽器逐幀截圖算繪的 Playwright Chromium。

  • 未完成：

    基礎程式碼動畫無須配置語音或生圖 API 金鑰；僅在需要角色生圖或語音克隆時，才透過 scripts/capabilities.py 與 scripts/images.py 按需啟用。

  • 未完成：

    字型已內建於 scripts/engine/lib/fonts/（採 SIL OFL 1.1 授權，PuHui 與 LXGWWenKai-500 涵蓋 GB2312 共 6,763 個漢字子集）。

本報告僅查閱原始碼、配方卡與腳本邏輯，未在本機啟動 Playwright Chromium 執行影片算繪。

路徑一：透過 npx skills 或 Git 安裝技能

bash
npx skills add alchaincyf/huashu-art-motion

若需直接克隆儲存庫至本機或手動掛載至 ~/.claude/skills/：

bash
git clone https://github.com/alchaincyf/huashu-art-motion.git
cd huashu-art-motion
uv run --with playwright playwright install chromium

路徑二：單幀試渲與參數化片段最小驗證

在儲存庫根目錄執行梵高風格（09_postimp）單幀抽檢與財經圖表（t3_finance_chart）參數化片段算繪：

bash
uv run --with playwright python scripts/engine/render.py \
  --solo 09_postimp \
  --stills 0.3 \
  --out preview_stills

uv run --with playwright python scripts/engine/render.py \
  --spec scripts/engine/examples/t3_finance_chart.json \
  --out preview_chart.mp4

03算繪引擎、拆解工具與三道交付門禁

核心能力

參考片量化拆解

uv run scripts/analyze/breakdown.py

將既有參考動畫拆解為可寫碼的結構地圖

自動量測參考影片的轉場切點、節拍網格（BPM）與各段落運動熱圖，作為機制復刻與分鏡設計的量化依據。

分鏡表紅燈檢查

uv run scripts/storyboard_lint.py

在寫碼前攔截違反導演規範的鏡頭表

檢查表前畫風鎖、色板色值、角色定義、每鏡具體物件名詞與動作動詞、連推 3 鏡、結尾字卡，以及畫面數字與口播稿的一致性。

雙模式逐幀算繪引擎

uv run --with playwright python scripts/engine/render.py

算繪藝術場景、長卷穿越或 JSON 參數化片段

支援 --solo 單景、--film 整片、--spec 參數化片段、--alpha 輸出 ProRes 4444 透明通道，以及 --audit 每 0.25 秒檢查文字出界與重疊。

片段規格與壓力測試

clip_lint.py / stress_clip.py / regress_clips.py

校驗 JSON spec 並執行 4 種版面變體壓測

clip_lint.py 檢查欄位與時間合理性；stress_clip.py 自動測試直式螢幕、超長文字、英文與方形畫面 4 種變體，確保排版不破版。

量化品質驗收

uv run scripts/qa.py

量測穩定度、每幀耗時、動感與文字框景線索

對單段 spec 或整片工程計算確定性、運動分佈與孤立跳變（2 秒內平滑推拉橫移記為鏡頭事件，不計入跳變）。

反 PPT 門禁與交付封裝

uv run scripts/deliver.py

執行 film_gate.py 門禁並產出帶指紋的交付說明

快速運動幀佔比 < 0.035、中段連續 0.3 秒空畫面或藍紫底佔比 >= 30% 即亮紅燈拒絕出片；通過後才複製成片並寫入可驗證指紋。

scripts/engine/lib/ 內建的 17 個核心庫透過全域命名空間供所有場景與參數化片段呼叫：

繪圖庫檔案命名空間核心能力與代表函式
motion.js / util.jsMO / U鏡頭動作常數 PULSE、砸入曲線 slam、12 fps 步進 step、Manim 緩動 smooth、Bezier k75 / appleOut、SwiftUI spring 與拍點對齊 onBeat
camera.jsCAM對數縮放 zlerp、穿孔倍率 coverZoom、關鍵幀路徑 at、鏡頭動作表 track（push / pull / glide / punch / pan / slam / shake / cut）與視差 layer
diagram.js / chart.jsDG / CH逐筆描繪 drawPartial、手繪抖動 hand、形變 morph、Manim 公式 write、白板時間線 board；座標軸 grid、柱狀圖 bars、K 線 candles 與引線標註 callout
typo.js / ui.jsTY / UI自動縮字折行 fit（確保長英文詞不出框）、逐字上浮 charsIn、打字機 typed、數字滾動 count；光斑底 mesh、毛玻璃卡 glass、掃光 sheen 與偽 3D persp
collage.js / media.jsCL / MD紙紋 fillPaper、撕邊 tornRect、網點照片 halftone、紅線 string、毛邊螢光筆 highlight；滿幅素材 cover、拍立得沖印件 print（素材缺失直接報錯停機）
brush.js / paint.js / medium.js / post.js / finish.js藝術媒介層流場筆觸、水彩洗染、點彩混色、金箔壓花、墨暈飛白、16 號協議媒介通道，以及整段成片質感 finish（soft / film / punch）
toon.js / rig.js / rig_huashu.jsTOON / 骨架雙色分面 flat、姿勢切換與回彈 poseAt、口型包絡 mouth（bean 豆子人僅供預演，禁止進入成片）

04運鏡節拍、畫風一致性與六種做壞方式

操作原則

單個參數化片段不超過 8 秒並鎖定同一 theme

duration 超過 8 秒會導致單一版式停留在畫面上過久而產生 PPT 感。整支影片應拆分為多鏡（每鏡 2 至 6 秒），所有 spec 寫入同一個 theme 色板名（paper、poster、ink、navy、bauhaus、snow、wood、chalk），且全片最多混用 2 種解說語法。

過渡用緩推拉遠，重音才用快推與砸入

畫面本身在動或觀眾讀字時鏡頭應停住；帶視線移動用緩推（push）、橫移（glide）或拉遠（pull，0.6 至 1.5 秒），且推進後必須拉出或硬切，禁止連續 3 鏡往裡推。快推（camera=snap，0.28 秒）與砸入（0.17 秒）僅用於揭曉與關鍵數字。

有真實素材時直接滿幅呈現，不用程式碼重畫

當手頭有產品截圖、照片、錄影或原文檔案時，必須透過 MD.cover 或 MD.print 作為主畫面等比滿幅呈現，程式碼僅負責標註、引線與推近運鏡。用程式碼硬畫示意圖或塞入 Q 版程式碼小人會觸發「六種做壞方式」紅燈。

禁用藍紫漸層底，35 格速通構圖不可照搬至新題材

film_gate.py 會檢測全片藍紫底比例，達 30% 以上直接紅燈拒交（除非題材確需藍紫並加上 --allow-blue-purple 參數寫明理由）。此外，35 種藝術風格樣片共用同一房間構圖僅為速通片機制，製作新題材時必須重新設計構圖，且新的風格或角色方向須先出 3 種不同構圖供使用者挑選。

針對人物角色，SKILL.md 規定除明確選用 37_rick_morty 或 52_south_park 平面卡通風格可編寫原創語義 SVG 角色外，其餘畫風一律採用「AI 生幀＋程式碼合成」，若無生圖工具則僅在畫面中呈現手部或背影。

05軌道檔從參數化片段檢查到成片交付流程

操作範例

以下示範複製 scripts/engine 工程並建立參數化片段專案，依序執行 JSON 檢查、--audit 版面審計、MP4 與 ProRes 4444 透明通道算繪、qa.py 驗收與 deliver.py 門禁交付。

1. 複製引擎工程並執行規格與版面審計

bash
mkdir -p projects/demo_clip
cp -R scripts/engine projects/demo_clip/engine
cp scripts/engine/examples/t3_finance_chart.json projects/demo_clip/clip01.json

python3 scripts/clip_lint.py projects/demo_clip/clip01.json
uv run --with playwright python projects/demo_clip/engine/render.py \
  --spec projects/demo_clip/clip01.json \
  --audit

2. 算繪標準 H.264 影片與透明通道疊層片段

bash
uv run --with playwright python projects/demo_clip/engine/render.py \
  --spec projects/demo_clip/clip01.json \
  --out projects/demo_clip/clip01.mp4 \
  --stills 0.5,2.0

uv run --with playwright python projects/demo_clip/engine/render.py \
  --spec projects/demo_clip/clip01.json \
  --alpha \
  --out projects/demo_clip/clip01_alpha.mov

3. 執行量化 QA 與門禁交付

bash
uv run scripts/qa.py \
  --spec projects/demo_clip/clip01.json \
  --out projects/demo_clip/qa/clip01

uv run scripts/deliver.py projects/demo_clip/clip01.mp4 \
  --spec projects/demo_clip/clip01.json \
  --qa projects/demo_clip/qa/clip01 \
  --out projects/demo_clip/output/

uv run scripts/deliver.py --verify projects/demo_clip/output/

06授權例外、研究配方狀態與測試邊界

限制與注意事項

限制項目技術邊界與合規要求
筆順資料與字型獨立授權reference_films/spacex/spacex_wb/assets/strokes.js 筆順衍生資料沿用 Arphic Public License；scripts/engine/lib/fonts/ 內字型沿用各自的 SIL OFL 1.1 授權（詳見同目錄 LICENSES.md）
17 張研究配方尚未達實做線編號 38 至 55 的 17 張新增研究配方雖附單場景原型（--film style_studies），但獨立覆核分數介於 53–74 分（未達 80 分實做門檻），跨場景使用前須先依 15 號與 16 號協議驗證
第 36 種風格為獨立 SVG 管線37_rick_morty（內部編號 37，因 36_picasso_blue 已佔用）採用獨立 SVG 渲染器與 HTML 預覽，不包含在 35 格歷史總覽與 Canvas gallery 中，且不含行走骨架
口播整片參考碼非一鍵工程reference_films/ 與第 9 種語法 y6_presenter_explainer 為程式碼快照，需自備角色素材與音訊；且所有示範片之構圖、角色與素材嚴禁原樣搬入新成片
跨代理商線上回歸狀態依 references/compatibility.md，三家平台安裝與重裝皆通過、Codex 線上回歸通過，而 Claude Code 與 Kimi 的線上回歸受測試帳戶條件限制仍標示為待補驗

07長卷穿越骨架、風格提煉與官方參考

後續操作

  • 若需製作角色從左至右跨越多個藝術時代的橫向長卷影片，可複製 scripts/engine/demos/long_scroll/ 骨架並參閱 11 號方法文件配置段落邊界與角色換幀。

  • 若需將特定藝術家風格遷移至全新題材，先執行 scripts/analyze/fetch_reference.py 拉取原作，依 15 號與 16 號協議透過 lib/medium.js 媒介通道實作，並用 scripts/engine/compare.py 產出並排對照圖。

  • 若需將本技能產出的 --alpha 透明通道解說片段接入數位人口播主軌道，可搭配本站的 Digital Human Koubo 使用手冊串聯逐字時間軸與混音流程。

來源固定於 8a0d7d72ca65fcce6f8ba82c4a6c8dfe35b8422c。官方參考文件：

參考資料