不用 Blender、不用影片模型，AI 也能畫手繪動畫？hand-drawn-canvas-animation 讓 AI 一張一張把短片畫出來

為什麼不直接丟給影片生成模型

現在要一段動畫，最快的做法當然是打一段提示詞給影片模型，等個一分鐘。問題出在等到之後：角色第二秒的手多了一根指頭、鏡頭莫名其妙抖了一下、結尾想多停兩秒讓字看得完——每一個都改不了，只能重抽。抽卡抽到第八次，你已經不記得第一次想要的是什麼。

這套 skill 的思路完全相反。動畫不是「生」出來的，是「畫」出來的：每一格都是 JavaScript 在 Canvas 2D 上畫的線條，角色的每一個關鍵姿勢都是一張完整的手繪。想改第 37 格小鳥的翅膀角度？找到那一張，改那幾行。想讓結尾多停兩秒？曝光表加兩秒。畫錯的地方修得動，這才是能拿來做正經東西的前提。

最讓人意外的是它的技術門檻：不用 Blender、不用 WebGL、不用任何影片模型。瀏覽器裡的 Canvas 2D 負責畫，Headless Chrome 負責一格一格截圖，ffmpeg 負責串成影片，連配樂都能用 Web Audio 從同一條時間軸合成出來。全部是你電腦上本來就有、或一行指令就裝得好的東西。

這套 skill 到底做什麼

一句話：讓 AI 產出一個 HTML 檔，打開就是一部能播、能拖時間軸、有聲音的手繪短片，再用附的腳本把它算成 MP4。作者把 Kevin Ngo 的四部手繪短片一格一格量過，拆出共同的核心與各自的差異，做成一套核心引擎加調色系統加五種「畫風」（他叫 look）：

• ink 墨線——毛筆式的自信線條，有壓力粗細、有留白，靠排線畫出體積。
• riso 孔版——色版分開疊印、刻意的套色偏移、紙的質感透出來，就是 Risograph 那種印刷感。
• screen 絹印——實心色塊、剪版邊緣、局部磨損。
• pencil 鉛筆——細石墨線、開放輪廓、還看得到打稿的構造線。
• doodle 照片塗鴉——一張真實物件的照片去背後放在粉彩紙上，用筆刷在照片前後與裡面畫東西，把它變成別的什麼。範例用的是大都會博物館開放授權的老茶壺、懷錶、小提琴。

畫風之外，還有三個「引擎」可以疊在核心上一起用：

• found motion 真實動作描摹——把真人或動物的影片一格一格描成線條，動作來自真實世界，畫面還是手繪。範例是重現 1878 年 Muybridge 那匹跑馬。
• sand 沙畫——整個畫面是一張背光玻璃上的沙，倒、抹、掃、吹，一鏡到底不重畫。
• paper in space 立體書——把畫好的紙張立在 3D 空間裡，翻頁、剪影升起、有光影。

repo 裡那部 60 秒的完整範例《Becoming》就把五種畫風、沙畫、立體書全串進同一個故事：一隻小雞在不同材質裡長大，印出來的風景變成實體書頁，紙鳥攤開成鳳凰，暴風雨穿過好幾層森林還會影響鳥的平衡。每換一種技法，故事都往前推一步，不是換皮秀。

怎麼裝

它是一個資料夾，裝法就是把資料夾複製到你的 agent 讀 skill 的地方。作者寫的是 ~/.agents/skills/，Claude Code 用戶放 ~/.claude/skills/（全域）或專案裡的 .claude/skills/ 也一樣吃：

git clone --depth 1 https://github.com/alesha-pro/tools.git
cp -r tools/skills/hand-drawn-canvas-animation ~/.claude/skills/

不想碰終端機，直接跟你的 AI 說也行，它會自己去抓：

幫我把 https://github.com/alesha-pro/tools 裡的 skills/hand-drawn-canvas-animation 這個資料夾裝進我的 skills 目錄，裝完告訴我要另外準備哪些軟體。

要真的算出影片，電腦上還得有這三樣，缺一不可：

• Node.js 22.12 以上。算圖腳本是 Node 寫的。
• Google Chrome 或 Chromium。它用 puppeteer-core 驅動你電腦上已經裝好的那個 Chrome，不會另外下載一份瀏覽器。
• ffmpeg。把一格一格的 PNG 串成 MP4、把配樂混進去，都靠它。

兩個選配：要做「真實動作描摹」得裝 Python 的 numpy、scipy、scikit-image、pillow；要做照片塗鴉，去背工具 rembg 有裝的話效果好很多，沒裝會退回單色填充去背，只在單色背景上撐得住。

實際怎麼用

裝好之後，講需求的方式跟導演開會一樣：主題、畫風、秒數，再加一個貫穿全片的錨點。README 給的範例就是這種寫法：

用 hand-drawn-canvas-animation 做一部 20 秒的短片：主題是「一個訂單在餐廳廚房裡走過的一生」，riso 孔版風，用一張訂單小紙條當貫穿全片的錨點。先做出最難的那個動作給我看，再擴成整部片。

接下來 AI 會照 SKILL.md 的流程走：先填一份簡報（brief）確認格式與畫風、開一個專案資料夾把核心模組複製進去、先把角色的輪廓與關鍵姿勢畫定、把最難的那個動作做到能看，才開始擴成整部片。這個「先做一個代表性鏡頭再擴」的順序是作者刻意規定的——先把一個動作做對，比一次做十個半成品鏡頭有價值。

算圖有三種預覽模式跟一個正式模式。想自己跑範例感受一下，照這幾條：

cd ~/.claude/skills/hand-drawn-canvas-animation
cd scripts && npm i --no-audit --no-fund && cd ..
node scripts/render.mjs examples/sketchbook-bird.html --look pencil --grid 24 --out /tmp/bird
node scripts/render.mjs examples/sketchbook-bird.html --strip 48,12 --out /tmp/bird-strip
node scripts/render.mjs examples/sketchbook-bird.html --look pencil --width 1920 --out /tmp/bird

• --grid 24：幾秒內吐一張 24 格的縮圖表，先看整體節奏對不對。
• --strip 48,12：從第 48 格起連續抽 12 格，專門檢查快速動作或接觸點有沒有穿幫。
• --only 48：單獨輸出第 48 格的原尺寸，看細節。
• 不帶預覽旗標、給 --width 1920：正式算整部 MP4，有配樂的話會一起混進去。

算完的 HTML 檔用瀏覽器直接打開，就能拖時間軸、聽聲音。sketchbook-bird.html 這個 6 秒的鉛筆範例是作者指定的主教材：九張完整的身體關鍵格、輔助中間格、一個眨眼替換畫，沒有任何骨架綁定。想搞懂「用畫的」跟「用骨架擺的」差在哪，看這個就對了。

它逼 AI 遵守的幾條規矩

這套 skill 好看的地方不在程式庫多大，在 SKILL.md 裡那些「不准」。抄幾條出來，做過動畫的人會會心一笑：

• 角色預設是整張重畫的姿勢，不是拼出來的橢圓四肢貼一層紋理。骨架可以拿來輔助構圖跟接觸點，但最後上片的必須是一張真正的畫。
• 先設計關鍵格與分解格，再談材質。「材質救不了不清楚的姿勢」——這句話直接寫在流程第三步。
• 每一格的線條在曝光期間要保持不動。隨機性一律用固定種子、一張畫只產生一次筆觸；整張畫面不停抖動、永遠在沸騰的線、貼一層紙紋，都不能拿來代替真正的畫功。
• 預設 24 fps，但一格畫可以停一格、兩格、三格。鏡頭運動、畫的曝光、角色位移三條時間軸分開管，避免重複量化。
• 檢查的是編碼後的影片，不是 PNG。縮圖表過關不算過關，要用正常速度播過、一格一格看過，才能說動作 OK。
• 不准因為程式碼跑過、檢查清單勾完，就說這部片是「錄影室等級」。要拿實際畫面跟選定的視覺參考比。

這些規矩的價值在於：它把「動畫師的直覺」翻譯成 AI 能執行的檢查點。你不用懂動畫也能靠它拿到不會太離譜的結果；懂動畫的人，會發現它講的跟課本一樣。

幾個先講在前面的坑

• 它不是給 UI 動畫或簡報用的。SKILL.md 開頭就寫明「Not for UI animation or slide decks」。要做網頁動效或簡報轉場，走別的工具。
• 時間成本比想像高。每個鏡頭都要畫關鍵格、排曝光表、算圖檢查再修，一部 20 秒的片對 AI 來說是好幾輪來回，不是一句話的事。算圖時間也跟畫的張數、解析度、材質成正比。
• Windows 用戶要留意路徑。範例指令全是 /tmp/... 這種 Unix 路徑，PowerShell 底下要自己換成 Windows 路徑；Chrome 裝在非預設位置的話，puppeteer-core 可能找不到，要指定執行檔路徑。
• 用到真實照片或影片，授權要自己顧。skill 規定要記錄來源與授權；範例全用大都會博物館 CC0 開放素材，換成你自己的素材就是你的責任。
• 字型會讓不同電腦算出不同像素。要跨機器重現，得自帶字型檔或改用路徑文字。
• 舊版是 12 fps，新版預設 24。拿舊範例或舊專案來跑，要明確寫 fps:12 才會保留原本的節奏。

今天可以做的一件事

不用一開始就拍自己的片。把 skill 裝好，跑一次 sketchbook-bird 的 --grid 24，看那張 24 格縮圖表——九張整張重畫的小鳥、輔助的中間格、一個眨眼。看懂那張表，你就看懂了這套 skill 在堅持什麼；之後再叫 AI 拍你的第一部 10 秒短片，主題挑一個你天天在做的事。畫得醜沒關係，改得動就好——這句話對動畫成立，對你正在做的系統也成立。