Pixel Art Studio

像素艺术工作室

基于浏览器的像素艺术编辑器，使用React+TypeScript+Vite构建。带有霓虹绿色色调的深色终端美学。

直播： 特立独行的皮克斯工作室.vercel.app

特性

• 绘图工具 -铅笔、橡皮擦、泛色填充、带Bresenham线插值的颜色选择器（笔划中没有间隙）
• 图层 -每帧多个图层，具有不透明度和可见性控制
• 动画 -多帧时间线、预览播放、洋葱皮
• 导入 -加载任何具有自动像素化和颜色量化功能的图像（支持拖放）
• AI生成 -使用Google Gemini API生成像素艺术（带上您自己的API密钥）
• 出口 -PNG导出、精灵表导出（PNG+JSON元数据）
• 画布 -缩放、平移、网格叠加、X轴对称镜像、像素悬停高亮显示
• 调色板 -具有可自定义调色板的颜色选择器，从导入中提取颜色
• 取消/重做 -双栈撤销/重做最多100步，仅记录实际修改
• 响应式 -调整侧边栏宽度以适应较小的屏幕

入门指南

npm install
npm run dev

命令

键盘快捷键

建筑

React 19+TypeScript+Vite。没有外部状态库--使用自定义 useProjectStore() 钩住 useState + useRef 用于双堆栈撤消/重做历史记录。画布渲染使用屏幕外ImageData合成来提高性能（像素渲染到一个小缓冲区，然后通过 drawImage).

数据模型

ProjectState -> Frame[] -> Layer[] -> Color[][] (2D pixel grid)

关键文件

• src/store.ts -状态管理挂钩
• src/types.ts -数据模型类型
• src/components/Canvas.tsx -主绘图画布
• src/components/Toolbar.tsx -工具选择和操作
• src/export.ts -PNG和精灵表导出
• src/pixelize.ts -图像到像素的艺术转换
• src/gemini.ts -Gemini API集成

AI集成

该编辑器包括使用Google Gemini 2.0 Flash生成客户端AI像素艺术。输入您自己的API密钥（存储在localStorage中，从不发送到任何服务器）和文本提示以生成像素艺术。

MCP 服务器

MCP（模型上下文协议）服务器包含在 mcp-server/，使AI代理（Claude、Cursor等）能够以编程方式创建、编辑和导出像素艺术。

cd mcp-server
npm install && npm run build

添加到您的Claude代码配置中：

{
  "mcpServers": {
    "pixel-art-studio": {
      "command": "node",
      "args": ["/path/to/pixel-art-studio/mcp-server/dist/index.js"]
    }
  }
}

22种可用工具： 创建项目，导入/像素化图像，绘制（像素、线条、矩形、圆形、填充），管理层和动画帧，导出PNG和精灵表。看 mcp服务器/README.md 查看完整文档。

部署

该项目作为静态站点部署在Vercel上。推至 master 自动部署。

支持

如果你觉得这个项目有用：

• 给我买杯咖啡

许可证

CC 4.0