拼豆图纸生成器

把照片变成真正能照着拼的 MARD 拼豆图纸

在线体验 · 本地运行 · 安装 Skill

亮点

🎨 MARD 291 色	🧩 真正能拼
自动匹配接近的 MARD 色号，并统计每种颜色的用量。	区分白色豆与空白格，控制颜色数量并清理零碎色块。
✏️ 逐格精修	🔒 本地优先
裁剪、像素化、逐格修改，持续保存当前图纸。	无需注册；默认在浏览器处理，作品只保存在当前设备。

快速开始

git clone https://github.com/kuizuo/pin-dou.git
cd pin-dou
bun install
bun run dev

打开 http://localhost:3000，选择图片即可开始。

可选：安装 Skill

在支持 Skill 的工具中，也可以通过对话生成拼豆图纸：

npx skills add kuizuo/pin-dou --skill image-to-pindou -g -y

安装后，发送图片并说：

使用 $image-to-pindou，把这张图片做成 50×50 的拼豆图纸，移除背景，最多使用 18 种颜色。

转换流程

flowchart LR
    A[原图] --> B[整理主体]
    B --> C[识别背景]
    C --> D[划分像素格]
    D --> E[保留轮廓与细节]
    E --> F[匹配 MARD 色号]
    F --> G[合并近似色并清理碎色]
    G --> H[完成图纸]

Loading

复杂照片会先整理成轮廓清楚、色块稳定的像素稿；简洁插画可以直接转换。背景只从画面边缘开始识别，减少误删主体内部的浅色区域。

AI 与 Cloudflare 配置

AI 模式支持 Cloudflare AI 和 Gemini 3.1 Flash Image。Gemini 密钥只保存在当前浏览器，不会写入作品或备份。

本地联调 Cloudflare 时，将 .env.example 复制为 .env.local，将 worker/.dev.vars.example 复制为 worker/.dev.vars，再分别运行 bun run dev 和 bun run worker:dev。

开发检查

bun run test
bun run lint
bun run typecheck
bun run build
bun run worker:check

数据与许可

• maxcleme/beadcolors：提供 MARD 291 色数据。
• magic-wand-tool：用于识别与图片边缘相连的纯色背景。
• react-zoom-pan-pinch：用于画布缩放与平移。
• color-diff：用于将图片颜色匹配到 MARD 色号。
• CIawevy/pindou-skill：拼豆图纸 Skill 的参考项目。