【生活娱乐赛道】拼豆工坊 —— 在线拼豆图案智能设计与编辑工具
0. 先和大家打个招呼吧 
-
我是从建筑学专业转行到算法工程师、再到机器人嵌入式研发的一名开发者。平时喜欢动手做东西，也会关注一些能把创意快速变成产品的小工具。
这个 Demo 的诞生其实挺偶然的。一个月前，女朋友带我去体验了一次拼豆，我发现要把喜欢的图片做成拼豆图案特别麻烦——要么手动描图，要么用现有工具硬转出一大堆用不上的色号。当时我就在想，能不能做一个真正适合拼豆人使用的在线工具？
回家后我就打开 TRAE，把自己的想法一点点讲给它：上传图片、生成像素图案、匹配色号、导出 Excel……结果一个晚上的时间就做出了第一个能跑通的 Demo。后来刚好赶上 TRAE 的活动，我就继续沿着这个方向完善：加了在线编辑画板、撤销重做、智能背景去除、项目管理，还把页面排版和交互细节一点点调顺。
整个过程中最让我惊讶的是，换做以前，这样一个带图片处理、Canvas 画板、Excel 导出、项目管理的平台，自己一个人从头开发至少需要三个月的时间；但借助 TRAE，核心功能在一两天内就跑通了。很多原本以为要折腾很久的功能——比如 Canvas 在线编辑、Excel 带颜色导出、本地项目存储——TRAE 都能很快帮我搭出框架，我再把自己的需求描述清楚，它就能继续迭代。我几乎没有在编辑器里手动写过代码，更像是和一个技术搭档在讨论产品方案。
希望这个工具也能帮到和我一样喜欢拼豆的朋友们
该项目也成功获得「TRAE AI 创造力大赛・城市站——广州」 线下活动 人气榜第三名
~~~~
1. Demo 简介
-
是什么： 「拼豆工坊」是一个基于 React + TypeScript + Vite 开发的在线网页应用（Web App），用户上传任意参考图片后，即可一键生成适配 MARD 拼豆色号的像素图案，并支持在线二次编辑、图案下载与 Excel 色号表导出。
面向谁：
-
拼豆手工爱好者、手工博主
-
想为孩子制作亲子拼豆图案的家长
-
喜欢「赛博电子拼豆」、习惯在 Excel 里一格一格填色的创作者
-
需要把 IP 形象、表情包、照片快速转成可拼豆图纸的设计师
主要功能：
-
图片上传与智能图案生成 支持点击或拖拽上传参考图片，自动按所选画板尺寸（29×29、52×52、104×104等）进行像素化处理，并匹配 MARD 拼豆色号。
-
智能背景去除 基于图片四个角落采样识别背景色，从边缘向内 flood fill 去除连续背景区域，避免主体图案被误删。
-
色号系统与数量控制
-
内置 MARD 拼豆全色号库
-
可限制最终使用的色号数量，避免生成杂乱用不上的颜色
-
支持优先使用常用色号系列，让图案更易用现有材料拼出
-
-
在线像素编辑（画板）
-
Excel 式在线编辑：选择当前图案中的色号进行绘制或擦除
-
原图对照模式：编辑时同时显示参考原图与实时整体预览
-
画布操作：缩放、平移、快速定位到指定位置
-
撤销 / 重做（支持 Ctrl+Z / Ctrl+Y 快捷键）
-
自定义鼠标指针，清晰指示当前画笔颜色
-
-
一键导出图纸
-
导出高清图案图片（PNG）
-
导出带色号标注、颜色背景、色号统计的 Excel 文件
-
Excel 中支持根据色号自动计算数量与配方
-
-
项目管理
-
保存当前项目到浏览器本地（IndexedDB）
-
项目列表带缩略图预览
-
加载、导出图案、导出 Excel、删除项目
-
-
响应式页面排版
-
左侧工具栏可收起/展开，最大化编辑区域
-
在线编辑模式下自动收起侧边栏
-
适配手机端浏览，电脑端操作体验更佳
-
项目开发说明：
「拼豆工坊」从项目初始化、目录结构搭建、核心功能实现、复杂模块开发、Bug 修复、新需求迭代，到页面排版与交互优化，全流程由 TRAE AI 编程助手生成完成，本人未在该项目中手动编写任何一行代码。
其中复杂功能包括：Canvas 像素画板、Excel 公式与样式导出、在线编辑撤销重做系统、基于角落采样的智能背景去除、本地项目管理与预览等。
-
-
产品截图/界面展示：
-
产品首页展示：
-
工作台展示，以及对应色号工具栏等：
-
上传图片效果：
-
在线编辑功能效果：
-
excel导出功能（可在excel上进行赛博电子拼豆）：
-
全自动联动色号统计功能（使用次数会随着excel的色号修改联动变化）：
-
项目管理功能：
2. Demo 创作思路
-
灵感来源： 身边也有朋友喜欢玩拼豆手工，但经常抱怨：看到喜欢的图片想做成拼豆挂件，却要在 PS 或 Excel 里手动描点、对色号，做一个 52×52 的小图案就要花一两个小时。我希望用 TRAE 做一款工具，把这条链路自动化。
想解决的问题：
-
手动描图效率低、容易错色漏色。
-
现有在线像素生成工具大多是「硬转」，生成色号杂乱，不适合真正拼豆使用。
-
生成后的图案无法在线修改，用户只能接受机器结果，缺少创作控制权。
为什么做这个方向： 拼豆是一个小众但粘性很高的手工爱好，玩家对「色号准确」「可编辑」「可导出图纸」有强需求，而市场上缺少真正围绕拼豆 workflow 设计的免费工具。生活娱乐赛道里，这款工具有明确的目标用户和真实痛点，Demo 完成度也能直观体现 TRAE 在图像处理、Canvas 绘图、Excel 导出等方面的开发能力。
-
3. Demo 体验地址（三选一）
-
在线部署链接
-
在线体验地址：http://8.163.33.93/
-
已使用
npm run build构建生产产物，并部署至服务器，可直接打开体验完整功能。
-
4. TRAE 实践过程
-
开发完整流程：
-
需求拆解与原型设计 在 TRAE 中通过多轮对话，把「上传图片 → 生成图案 → 在线编辑 → 导出图纸」的主流程拆解为可执行的组件结构。
-
核心功能实现 使用 TRAE 完成以下关键模块：
-
useImageProcessor：图片加载、像素化、MARD 色号匹配、背景去除 -
PatternPreview：Canvas 图案预览、在线编辑、缩放平移、撤销重做 -
excelExport：带色号与颜色背景的 Excel 导出 -
ProjectManager：本地项目保存、加载、导出
-
-
UI 与交互优化 通过 TRAE 多次调整布局：左侧工具栏收起、在线编辑全屏化、色号位置调整、按钮文案优化等。
-
测试与构建 使用 TRAE 运行
npm run check与npm run build，修复类型错误并生成生产产物。
开发关键步骤截图：
-
- excel导出功能
- 在线编辑功能
- 项目构建与部署
- 截图询问部署教程
-
关键任务对话的 Session ID：
以下 Session ID 用于证明「拼豆工坊」由 TRAE 开发完成，可从 TRAE 对话列表中双击对应任务复制验证。
项目初始化与基础功能
- 创建项目：
.142298602801963:86b83d33c820ed985b5e532dd67accfb_6a24d58645cdde1cf6a67141.6a24d9d545cdde1cf6a67143.6a24d9d5699d96d0b3b66dc1:Trae CN.T(2026/6/7 10:39:17)
色号系统与导出功能
-
MARD 色号确定更正检索：
.142298602801963:2f1b8ebc2a41214b7ad959473a2cc82c_6a24d58645cdde1cf6a67141.6a24ee7f45cdde1cf6a672e5.6a24ee7e699d96d0b3b66dc8:Trae CN.T(2026/6/7 12:07:27) -
常见色给用户选择：
.142298602801963:0d86951c0dbda29e38094e3007bbccc3_6a24d58645cdde1cf6a67141.6a24f8a145cdde1cf6a67371.6a24f8a0699d96d0b3b66dcc:Trae CN.T(2026/6/7 12:50:41) -
导出 Excel 功能：
.142298602801963:73117ae59998d933516de4bcfa2887d7_6a24d58645cdde1cf6a67141.6a250f4145cdde1cf6a6747c.6a250f41699d96d0b3b66dd5:Trae CN.T(2026/6/7 14:27:13)
部署与服务器配置
-
截图询问部署教程与选项（1）：
.142298602801963:29130e9a94f5535d8de14d276494f533_6a24d58645cdde1cf6a67141.6a259cde45cdde1cf6a6795d.6a259cde699d96d0b3b66e08:Trae CN.T(2026/6/8 00:31:26) -
截图询问部署教程与选项（2）：
.142298602801963:1f4f5da2378929c323b2486604e5d54a_6a24d58645cdde1cf6a67141.6a259d6945cdde1cf6a67967.6a259d69699d96d0b3b66e09:Trae CN.T(2026/6/8 00:33:45) -
截图询问部署教程与选项（3）：
.142298602801963:b975f558a5f203f2e09425067256c8c2_6a24d58645cdde1cf6a67141.6a259d9a45cdde1cf6a67971.6a259d99699d96d0b3b66e0a:Trae CN.T(2026/6/8 00:34:34)
在线编辑与项目管理
-
优化新需求，在线编辑功能：
.142298602801963:0ec8f5e92fc390b90a0508251b5a3cd3_6a3281780d67f9d64bf62bcb.6a328d0d55acd9bf126483c7.6a328d0c24e47f6576f74d85:Trae CN.T(2026/6/17 20:03:25) -
在线绘制时的鼠标处理：
.142298602801963:600afed357f18339be4489319842df75_6a3281780d67f9d64bf62bcb.6a32941955acd9bf12648518.6a32941924e47f6576f74d88:Trae CN.T(2026/6/17 20:33:29) -
项目管理功能：
.142298602801963:a0cc16624164adb4ab9b7e74a6db54b4_6a3281780d67f9d64bf62bcb.6a32af2155acd9bf12648742.6a32af2124e47f6576f74d8e:Trae CN.T(2026/6/17 22:28:49)
- 创建项目：
社区报名帖链接
拼豆工坊——在线拼豆图案智能设计与编辑工具 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区
技术栈
-
React 18
-
TypeScript
-
Vite
-
Tailwind CSS
-
Zustand
-
xlsx / xlsx-js-style
