像素mcp
一个MCP（模型上下文协议）服务器，允许AI编码代理（Claude Code、Cursor、Windsurf等）以编程方式创建像素艺术。没有守护进程，没有套接字，没有Go运行时——只有一个轻量级的TypeScript服务器，通过 npx.
安装
与Claude Code一起使用
从项目目录运行以下命令：
claude mcp add pixel-art npx -- pxcli-mcp --export-dir ./assets/sprites这将在项目范围内的Claude Code配置中注册服务器。验证它是否已连接 /mcp.
与任何MCP客户端一起使用
npx pxcli-mcp --export-dir ./output来源
npm install
npm run build
node dist/index.js --export-dir ./output快速开始
配置后，Claude（或任何MCP客户端）可以直接使用这些工具：
create_canvas(name: "hero", width: 16, height: 16)
fill_rect(canvas: "hero", x: 0, y: 0, width: 16, height: 16, color: "black")
set_pixel(canvas: "hero", x: 8, y: 4, color: "#ff0000")
draw_line(canvas: "hero", x1: 0, y1: 15, x2: 15, y2: 15, color: "white")
export_png(canvas: "hero", filename: "hero.png")工具
| 工具 | 说明 |
|---|---|
create_canvas | 创建具有给定尺寸的命名画布（最大256x256） |
list_canvases | 列出所有活动画布及其大小 |
set_pixel | 设置单个像素颜色 |
get_pixel | 读取像素的颜色 |
fill_rect | 用纯色填充矩形 |
draw_line | 在两点之间画一条线（Bresenham算法） |
clear | 将整个画布清除为一种颜色（默认：透明） |
export_png | 将画布导出为PNG文件 |
undo | 撤消上次绘图操作 |
redo | 重做上次撤消的操作 |
所有绘图工具都接受 canvas 参数（默认为 "default")，因此您可以同时处理多个精灵。
颜色格式
- 十六进制：
#rgb,#rrggbb,#rrggbbaa - 名称：
red,green,blue,white,black,transparent,yellow,cyan,magenta,orange,purple,gray,grey,pink,brown,lime,navy,teal,maroon,olive
CLI选项
| 标志 | 描述 |
|---|---|
| `--export-dir | |
| ` | 导出PNG的目录（默认为CWD） |
游乐场（现场预览）
回购包括 viewer.html --一个基于浏览器的游乐场，用于观看实时绘制的像素艺术。
- 在本地提供文件：
npx serve .- 打开
http://localhost:3000/viewer.html在浏览器中
操场有两根柱子：
- 左：缩放像素画布，悬停坐标跟踪器
- 正确的：提示字段、画布设置（名称、尺寸、比例、背景、导出目录）、操作按钮和实时操作日志
画布显示全局绘图功能(px, rect, line)可以从浏览器控制台或通过浏览器自动化工具（例如Chrome中的Claude）调用。这使得在逐步绘制像素艺术时，可以很容易地进行视觉验证。
从浏览器控制台绘图
// Set a red pixel at (10, 5)
px(10, 5, 255, 0, 0, 255)
// Fill a blue rectangle
rect(0, 0, 16, 16, 0, 0, 255, 255)
// Draw a green line
line(0, 0, 15, 15, 0, 255, 0, 255)
// Update status message
setStatus('Drawing complete!')发展
npm install
npm run build
npm test # runs 22 tests (unit + MCP integration)
npm run dev # watch mode for TypeScript compilation学分
灵感来自并建立在 vossenwout/像素艺术cli --感谢您最初基于Go守护进程的pixel-art CLI，使这一切成为可能。