Editable Pixel — 像素艺术编辑器 + MCP 服务器 + Claude/Codex Skill

技能简介

Editable Pixel 是一款本地优先的像素艺术工作台，同时集成了 MCP 服务器和 Claude/Codex Skill。它允许用户导入 AI 生成的像素图像或精灵图，将图片转换为可编辑的像素网格，然后在浏览器中手动精修——或直接让 Claude 或 Codex 通过 MCP 协议连接同一个画布进行精确编辑。

与传统的像素编辑工具不同，Editable Pixel 的核心价值在于人机协作编辑：AI 和人工操作共享同一份像素文档、同一份历史记录和同一个选择区域，双方的修改实时同步。这意味着可以让 AI 完成繁琐的重复性调整（如批量换色、帧对齐），而人类保留对最终效果的完全掌控。

该工具支持 PNG、WebP、JPEG、Pixel JSON 等多种格式导入，可导出颜色图、法线图、Lit PNG、GIF、精灵图等，适合独立游戏开发者和 AI 艺术创作者工作流。

核心能力

Editable Pixel 提供以下核心能力：

1. 像素级精确编辑 — 支持坐标、矩形、遮罩、连通区域、颜色索引、图层、帧或剪贴板等多种选择方式，对每个像素进行精确修改。

2. AI 协同画布共享 — Claude 或 Codex 通过 MCP 连接后，可以看到用户在浏览器中选择的区域，双方共享撤销/重做链和自动保存历史。

3. 批量调色盘替换 — 将角色从橙色改为蓝色时，自动映射全部 35 种暖色调阴影（高光/中间调/暗部），而非简单的一对一替换颜色，保持光影层次完整。

4. 帧动画对齐修复 — 对多帧精灵图进行地面接触对齐、帧时长调整、播放预览和洋葱皮查看。

5. 法线图与光照导出 — 支持 Smooth Lighting 或 Toon Palette 两种模式，配合预先准备的法线图导出 Lit PNG，用于游戏引擎。

6. 等距网格支持 — 提供 2:1 等距网格引导，可选择菱形瓦片，适用于等距视角游戏开发。

7. 多格式导入/导出 — 导入 PNG、WebP、JPEG、Pixel JSON、项目文件或精灵图序列；导出 Color PNG、Normal PNG、Lit PNG、GIF、精灵图、Pixel JSON 或完整项目文件。

安装配置

环境要求

• Node.js 24+（核心依赖）
• 操作系统：macOS、Linux 或 Windows（PowerShell/命令提示符，不支持 install.sh）
• 安装路径避免含 & 字符（Windows npm .cmd 包装器限制）

安装步骤

方式一：npm 全局安装（推荐）

npm install --global editable-pixel
editable-pixel open

方式二：安装脚本（macOS/Linux）

curl -fsSL https://raw.githubusercontent.com/NariP/editable-pixel/main/install.sh | sh

重复运行自动更新；指定版本：sh install.sh --version X.Y.Z

方式三：源码构建（需要 pnpm 10.29.3）

git clone https://github.com/NariP/editable-pixel.git
cd editable-pixel
corepack enable pnpm
pnpm install --frozen-lockfile
pnpm build
node packages/pixel-cli/dist/cli.js open

使用步骤

步骤一：打开编辑器

安装完成后，在终端运行：

editable-pixel open

编辑器在 127.0.0.1 本地启动，打开空白项目或已有 .pixel-project.json / .pixel.json 文件。

步骤二：导入图像或精灵图

支持以下导入方式：

• 替换画布：将当前画布替换为导入图像
• 添加帧：将导入图像作为新帧追加到当前项目
• 保留源：保留原始图像作为可重新转换的来源

步骤三：连接 Claude 或 Codex

运行以下命令，将 MCP 服务器和 Skill 注册到主机：

editable-pixel install-skill --host both   # 注册到 Claude 和 Codex
# 或
editable-pixel install-skill --host claude # 仅 Claude
editable-pixel install-skill --host codex  # 仅 Codex

重启主机或重载 MCP 连接，即可在对话中使用。

步骤四：通过自然语言让 AI 编辑

示例请求：

"把所有 8 帧中的橙色机器人改为蓝色，保留阴影和青色高光。"
"将第 8 帧向下移动 13 像素，使其与第 1 帧地面位置对齐。"
"使用准备好的法线图和 Smooth 光照导出 Lit PNG。"
"将帧 1 时长设为 160ms，帧 4 设为 100ms。"

AI 通过 MCP 读取元数据、检查相关区域，然后对同一项目应用结构化编辑，无需模拟鼠标点击。

适用场景

Editable Pixel 适用于以下场景：

1. 独立游戏像素美术资产制作 — 创建游戏角色、道具、场景瓦片，导出为游戏引擎可用格式。

2. AI 生成像素艺术的精修 — 用 Midjourney、DALL-E 等工具生成的像素图导入后，由人工或 AI 进行精确修正。

3. 精灵图动画清理 — 对 AI 生成的多帧精灵图进行地面对齐、帧时长调整、换色等批量操作。

4. 等距视角游戏开发 — 使用 2:1 等距网格引导创建等距瓦片地图。

5. 游戏原型快速迭代 — 不用启动完整游戏引擎，直接在像素工作台中调整视觉效果并导出。

适用人群

• 独立游戏开发者 — 需要快速制作和迭代像素游戏资产。
• AI 艺术创作者 — 使用 AI 生成图像后需要精确像素级修改的工作流。
• 像素美术师 — 希望借助 AI 提升调色、帧对齐等重复性工作效率。
• 游戏工作室美术团队 — 为 AI 生成的资产提供人工审核和精修环节。

工作原理

Editable Pixel 的架构分为三层：

本地编辑器层：基于浏览器的像素编辑界面，运行在 127.0.0.1。编辑器的所有操作实时保存到本地工作区，不会将数据发送到任何远程服务器。

MCP 服务器层：内置的 MCP 服务器通过标准 I/O（stdio）与 Claude/Codex 通信。服务器暴露画布元数据查询、像素区域操作、帧管理、导出等工具。AI 的操作通过 MCP 协议转换为结构化编辑指令。

Skill 层：bundled Claude/Codex Skill 引导 AI 先读取项目元数据、检查相关区域，然后对同一画布应用编辑。人类和 AI 共享选择、历史和自动保存，两者的修改相互可见。

隐私说明：编辑器、MCP 服务器和渲染逻辑均在本地运行。Claude/Codex 提供的上下文由各自主机自行处理；Editable Pixel 不会让本地编辑器成为离线 AI 主机。

官方链接

• npm：https://www.npmjs.com/package/editable-pixel
• GitHub：https://github.com/NariP/editable-pixel
• 文档：https://github.com/NariP/editable-pixel/blob/main/docs/getting-started.md
• MCP 集成文档：https://github.com/NariP/editable-pixel/blob/main/docs/mcp.md