【生活娱乐】
【生活娱乐赛道】做一个拼豆图纸生成应用
0. 先和大家打个招呼 
嗨，大家好，我是一名机械工程专业的大四学生。
说出来有点不好意思，这个网页不是什么毕设课题，是我给女朋友做的小工具。她最近迷上了拼豆，就是那种把一颗颗小塑料珠子摆到底板上，熨斗一烫融化成像素画的手工。我陪她去文具店买材料的时候，发现她在手机上对着一张模糊的动漫图，一格一格数颜色、数位置，画一个 30×30 的小图能数一下午，还经常数错重来。
我那时候就琢磨：这不就是个"像素化 + 配色"的问题吗？我们机械专业天天跟图纸打交道，把现实物体抽象成工程图，本质上和这个是一回事。只不过我把"零件"换成了"豆子"。
于是我用 TRAE 把这个网页撸了出来。说实话，我不是计算机专业的，JS 之前只在学校一门选修课里摸过一点。但 TRAE 真的让我有种"我说人话，它懂我意思"的感觉。比如我第一次跟它说"我想做一个像 Photoshop 但是只有像素画的画板"，它就直接给我搭出来一个 canvas 加工具栏的骨架。中间有好几次我描述得很模糊——比如"那个坐标轴对不齐"——它会先去看代码哪里可能出问题，再问我具体是哪个方向偏，一步一步把问题逼出来。那种感觉不像是在写代码，更像是在跟一个有耐心的搭档对方案。
最让我意外的是模板那一块。我女朋友说想要"一键画个爱心"，我以为这得自己手画 16×16 的阵列，结果跟 TRAE 说了之后它直接生成了一串 01 数据。虽然第一版画出来爱心是歪的（这个后面踩坑部分会讲），但那个"从想法到能跑的东西"只花了几分钟，是真的让我觉得原来做软件没我想的那么遥远。
1. Demo 简介
是什么 ：一个纯网页版的拼豆图纸设计器，浏览器打开就能用，不用装 App、不用注册。
面向谁 ：主要是拼豆爱好者——尤其是像我女朋友这样，喜欢照着图做但又不想花钱买现成图纸、想自己改图的人。也顺带照顾了一下想做原创像素画的人。
主要功能 ：
- 图片转拼豆 ：上传任意一张图，自动缩放到指定尺寸，并把你设定的颜色数量映射到 Perler / Hama / Artkal 三家主流拼豆品牌的真实色号上。等于说拍张照就能拿到一张"用什么颜色的豆、放哪一格"的施工图。
- 多品牌色卡 + 实时画板 ：内置了三家的色号库，点哪个颜色就画哪个，右侧实时显示用了多少种颜色、多少颗豆。支持画笔、橡皮、填充、直线、矩形、取色器这些基本工具，还有水平/垂直对称绘制（做对称图案特别省事）。
- 图纸导出 ：画完可以导出带坐标轴和网格线的 PNG 图纸（A-Z 列 / 1-N 行），打印出来照着摆就行；也能导 CSV 的颜色采购清单，直接拿去买豆子不会漏色。 建议在这里插 2-3 张截图：① 主界面全貌 ② 图片导入转拼豆的弹窗 ③ 导出的带坐标图纸效果
2. Demo 创作思路
灵感来源 ：纯是被女朋友"折磨"出来的。有次她对着手机上一张宝可梦图数了快两小时，数完发现整行错位，气得把豆子全推地上。我蹲在地上帮她一颗颗捡的时候就想，这事机器肯定比人靠谱。
想解决的问题 ：
- 数格子又累又容易错 ——手工对照原图数坐标，错一格全盘崩。
- 不知道该买哪些颜色、买多少 ——拼豆是按颜色分包卖的，买多了浪费，买少了断货。
- 现成图纸要么收费要么不好看 ——网上能搜到的图纸质量参差，自己喜欢的图又没有现成的。
为什么做这个方向 ：其实我一开始纠结过要不要做成小程序或者 App，后来还是选了网页。原因很现实：一是我只会前端这点东西，二是网页不用审核不用上架，做完直接发链接给女朋友她就能用，连安装都省了。这个取舍对我是对的——先让它"能用"比"做得大"重要得多。
另外我特意做了"图片转拼豆 + 限制颜色数"这个功能。因为我去贴吧翻了几天，发现大部分拼豆玩家卡在"喜欢的图颜色太多、买不全"这一步。让它自动把图压缩到比如 12 种颜色以内，再去匹配能买到的豆子，这个流程是真正能帮到人的，不是花架子。
3. 踩坑复盘（额外加的）
做的时候栽了几个跟头，挑两个印象深的讲：
坑一：模板画出来全是歪的。 我让 AI 生成爱心、星星这些模板的像素数据，第一版画出来爱心左右两个鼓包不一样大，星星是斜的。后来才发现问题是数据本身不对称——人眼看一眼就知道歪了，但机器不会自己检查。最后我把每个模板都改成"左半边镜像生成右半边"的方式，才保证对称。这事让我意识到，AI 生成的东西不能直接用，得自己验。
坑二：旋转功能差点翻车。 有天晚上测试"旋转 90°"按钮，发现转完之后画布直接乱码。查了半天才发现，旋转之后画布的宽和高应该交换（比如 24×16 转完是 16×24），但我只转了像素、没换尺寸，索引全乱了。这种"看起来对、实际错"的 bug 最坑，因为不报错，就是图不对。
4. 一点经验总结
这个项目做下来，我最大的感受是： 做软件不是写代码，是讲清楚需求。
我用 TRAE 的方式基本就是"像跟人说话一样描述我想要什么"。比如我会说"右侧栏太长了，整个页面被撑开，能不能让侧栏自己滚动、画布区域固定"，它就帮我改成了 Figma 那种工作区布局。这种描述方式对我来说没什么门槛——我平时跟同学聊设计图也是这么聊的。
当然也有它听不懂的时候，比如我说"布局有严重问题"这种太笼统的，它就得反过来问我具体哪里有问题。所以我后来学乖了，反馈尽量带具体现象："坐标轴和画布差了 4 个像素对不齐"比"坐标轴有问题"管用十倍。
这可能是我这个工科生从"用软件"到"做软件"最近的一次。虽然代码大部分不是我敲的，但每一步它做什么、为什么这么做，我都知道——这个过程中我对"产品是怎么从想法变成东西"的理解，比上十节课都实在。
index.zip (23.3 KB)
5. 对应的报名审核通过的帖子链接： 👉（6.16-7.15必看）初赛参赛指南—如何发布一篇容易入围复赛的Demo作品帖
Session ID：.2534795986613488:31b65e6239ff5a17a512bc528ae0bf9c_6a3cf78e464e29c285057296.6a3d1ad2464e29c2850578b4.6a3d1ad1f295ffce66ed35df:Trae CN.T(2026/6/25 20:10:58)
.2534795986613488:ae5d6635e6b330103397108ce90620b8_6a3cf78e464e29c285057296.6a3d1383464e29c285057724.6a3d1382f295ffce66ed35de:Trae CN.T(2026/6/25 19:39:47)
.2534795986613488:1580d1fa8f51c388d6395c43485d7d69_6a3cf78e464e29c285057296.6a3cf7de464e29c28505729b.6a3cf7def295ffce66ed35db:Trae CN.T(2026/6/25 17:41:50)
