一個 IP 若要真正顯得有生命力，就不能只停留在單一角色插圖。
我們需要把它擴充成貼圖、表情符號、動畫 GIF 和其他資產，讓角色能出現在更多情境中——並幫助更多人看見它、使用它、記住它。
在完全手動的工作流程中，這要花上相當多的時間。像素動畫尤其費工：每個動作都是一格一格建構出來的，同時角色的比例、色彩、形狀和視覺語言都必須保持一致。
如今，只要和 Claude 進行幾段簡短的對話，就能在保留原有設計風格的前提下，大幅加快擴充既有 IP 的速度。本文分享我為 AirJelly 製作動畫 GIF 時遇到的問題，以及我最後採用的工作流程。
直接請 Codex 和 Claude 生成 GIF
它們能很快產出一隻動畫水母，但結果不太對。角色動了，可是動畫沒有捕捉到 AirJelly 像素藝術設計的精髓。
像素大小、輪廓、比例、色彩限制、觸手形狀和影格節奏都很重要。只要其中任何一項偏離太多，結果就會開始看起來像一個相似的新角色，而不是 AirJelly 本身。
所以真正的挑戰不是生成動畫，而是建立足夠清楚的約束，讓角色的視覺識別能一路保持下去。
hi
happy把 Pixelorama 連接到 Claude
我選擇 Pixelorama，因為它是專門為像素藝術和逐格動畫打造的。它提供網格、像素級編輯、影格管理、動畫預覽和透明背景匯出。
這些工具層級的限制反而成了有用的創作約束。它們給 Claude 一個遵循像素動畫邏輯的環境，而不是只靠文字描述去近似像素藝術風格。
photoPixelorama 沒有原生 MCP，所以 Claude 自己建了一個
Pixelorama 並未隨附 MCP 伺服器，所以第一步是請 Claude 寫一個並接入工作流程。零 npm 依賴、單一檔案、Node ≥ 18。它做兩件事：直接寫入 .pxo 專案檔（依 Pixelorama v1.1.10 原始碼實作，pxo_version 6），以及驅動 Pixelorama 的無介面 CLI 來匯出圖片。
整合完成後，最難的問題——風格一致性——大致解決了。剩下的是在對話中描述動作、表情、節奏和細節，然後讓 Claude 預覽並調整。
claude| 工具 | 用途 |
|---|---|
| pixelorama_info | 回報所包裝的 Pixelorama 版本與安裝路徑 |
| create_pxo | 從原始 RGBA 影格資料建立 .pxo 專案（多影格動畫） |
| export_image | 無介面匯出為 png/gif，支援整數縮放、影格範圍、精靈表 |
| project_info | 讀取既有 .pxo 的尺寸與影格數 |
claude mcp add pixelorama -- node ~/pixelorama-mcp/server.mjs
把反覆得到的教訓變成可重複使用的 Skill
除了工具整合之外，我把提示詞、設計規則和製作流程整理成一個 Skill。這表示我每次製作新動畫時，不必再向 Claude 解釋同樣的規則——Claude 會重複使用既定的視覺語言，工作流程也會隨著時間越來越一致。
think絕不要用 CSS 旋轉或小數縮放像素 sprite——而是把它點陣化到網格上。一個 sprite 格等於一個網格格，場景中處處如此。
不要 alpha 淡入淡出，也不要半透明的中間影格。東西要透過裁切、移動、逐列顯現、硬切或抖色來出現。
離散的跳格賦予影格動畫那種跳躍感。連續的線性插值會讓它滑順，而那種滑順正是讓它不再讀起來像像素藝術的原因。
預備動作、超越、跟隨動作——以離散方式表達。把最終角度和落點隨機化，讓重複出現的動作永遠不會顯得機械。
一起預覽全部，然後分批匯出
把所有動作依類別整理，並在單一 HTML 頁面上一起預覽。這樣一來，要在整套動作中比較角色比例、動作幅度、播放速度和整體風格就容易得多——而且能在匯出之前、而不是之後，就發現不一致的地方。
每個動作都調整好之後，把整套匯出成透明 GIF。一起設計、一起檢視、一起匯出，能讓一整個系列的資產保持一致，這是邊做邊匯出永遠做不到的。
guitar
sleep
drink
wave把同樣的資產延伸成更多 IP 產品
GIF 不必是最終產出。從動畫中挑出最有表現力的靜態影格，轉成 SVG，帶進 Figma 做第二輪處理——輪廓、色彩、筆畫、版面——然後把圖稿改編成貼圖、壓克力吊飾和徽章。
同樣的動態資產也能重複用在影片上：AirJelly 作為動畫主持人頭像，用相應的表情對旁白做出反應。從動態表情符號到平面圖形，再到實體周邊，再到影片角色，一整套 IP 資產不斷被拆解、重組、重複使用。
like
thanks取得工具包
兩部分都在同一個壓縮檔裡——Pixelorama MCP 伺服器和像素動畫 Skill，外加一份含安裝步驟的 README。把角色名稱和檔案路徑換成你自己的專案即可。
pixel-animation-kit.zipserver.mjs · SKILL.md · README — 8 KBPixelorama 本身來自 pixelorama.org 或 GitHub releases。在 macOS 上預設路徑是 ~/Applications/Pixelorama.app；其他情況請設定 PIXELORAMA_BIN。重新啟動 Claude Code 後，工具會以 mcp__pixelorama__* 的形式出現。
真正改變了什麼
Claude 在這裡的價值不在於它畫圖更快，而在於它能延伸一個 IP 既有的設計語言——由 Pixelorama MCP 提供工具層級的約束，由 Skill 把視覺規則固定住。
以前需要漫長逐格製作週期的動畫，現在只要幾輪對話、預覽和調整就能完成。希望這能給你一些關於自己角色的靈感。
← 返回部落格