要让一个 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 旋转或小数缩放——而是把它栅格化到网格上。一个精灵单元格等于一个网格单元格，场景中处处如此。
不要 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 则把视觉规则固定到位。
过去需要漫长逐帧制作周期的动画，现在通过几轮对话、预览和改进就能完成。希望这能给你自己的角色带来一些灵感。
← 返回博客