网站入口：[拼豆工坊 · Perler Bead Pattern Generator](file:///E:/1%E5%A4%A7%E5%AD%A6/vibecoding/%E6%8B%BC%E8%B1%86/%E6%8B%BC%E8%B1%86%E5%B7%A5%E5%9D%8A.html)
一、项目概述
本项目是一款面向拼豆（Perler Bead）爱好者的在线工具“拼豆工坊”。用户上传任意图片后，网站可自动生成拼豆图纸，并支持调整配色、精细度、轮廓强度等参数，同时可以手动编辑微调，最终导出PNG图纸或带色卡的PDF图纸。
开发方式采用课程要求的Vibe Coding模式，即通过与 AI 编程助手（SOLO）的自然语言对话，生成并迭代代码。整个过程未手动编写代码，所有功能实现、问题修复均通过指令完成，且大部分指令由开发者向DeepSeek阐述想法后，再由DeepSeek生成。
二、开发环境与工具
项目与说明如下：
AI 编程工具：Trae CN（初始生成）/ Trae Solo（后续迭代）
运行环境：纯前端，单HTML文件（内联CSS+JS）
外部依赖：jsPDF(CDN)、FileSaver.js
辅助分析：浏览器开发者工具（F12 Console）
版本管理：手动备份app_backup.js等副本
三、功能设计
3.1 核心功能
一、图片上传：支持JPG/PNG，点击或拖拽上传。
二、拼豆图纸生成：像素马赛克风格，可调宽度/高度。
三、参数调节：
1. 图纸宽度/高度（颗粒数）
2. 颜色量化等级（控制颜色数量）
3. 锁定原图比例
4. 忽略过小色块（杂色过滤）
5. 边缘平滑/抗锯齿
6. 轮廓强度
四、多级调色板：MARD 221/144/72/36色、标准24色、灰度10色。
五、手动编辑模式：单击选中、框选批量修改、格式刷（单次/连续）、撤销/重做、放大镜。
六、图纸导出：PNG/PDF（含边框尺寸标注、格内色号、底部颜色对照表）。
七、移动端适配：响应式布局，保存到相册。
3.2 UI 设计
一、彩色主题，可爱圆角卡片风格
二、主标题使用“站酷快乐体”，副标题使用像素字体
三、上传区拼豆SVG图标
四、参数问号悬浮注释（移动端点击触发）
四、技术实现要点
4.1 颜色量化与匹配
初始使用RGB欧几里得距离，后改为“饱和度阈值判断+加权RGB距离混合匹配”混合模型，即先判断饱和度是否低于阈值（无彩色），若是则强制匹配到灰度色卡，否则使用加权RGB欧氏距离匹配彩色色卡。保证低饱和度像素强制匹配到纯灰色系色卡，尽量避免黑色/灰色被识别为深紫或深绿。
4.2 锁定比例联动
实现双向联动：拖动宽度时高度自动按比例缩放，反之亦然，同时通过 isUpdating 锁防止循环触发。
4.3 导出功能
一、电脑端：优先使用File System Access API弹出“另存为”对话框，但该 API 目前仅 Chrome/Edge 支持，且需要用户手势触发，存在兼容性限制。
二、移动端：调用 navigator.share 弹出系统分享菜单，用户可选择“保存到相册”。
三、导出选项：
1. PNG图片：仅图纸，不包含色卡或色号。
2. PDF文档：使用jsPDF动态绘制，内嵌色号标注和颜色对照表
4.4 手动编辑模式
一、画布点击事件通过handleEditViewClick处理，坐标换算获取色块行列
二、格式刷模式状态机：null/‘formatOnce’/‘formatCont’
三、撤销功能维护操作历史栈undoStack，每步存储改动前后的颜色
五、Vibe Coding 实践过程与挑战
5.1 开发流程
1. 初始生成：在 Trae CN 中输入完整需求指令，一次性生成基础网站。
2. 切换工具：使用 Trae Solo 打开同一项目文件夹，进行后续修改。
3. 迭代修改：通过自然语言指令调整样式、修复Bug、增加功能。
5.2 遇到的主要问题
（1）预览与导出效果不一致
预览时字体正常，保存/刷新后失效。排查发现是国内CDN加载不稳定，换用 fonts.font.im 解决。
（2）锁定比例功能未实现
只实现了“拖宽度→更新高度”，缺少反向联动。在高度滑块添加反向计算逻辑后修复。后又发现勾选时仅在切换状态同步一次，而非拖动时实时联动，进一步修改为 input 事件触发，最后解决问题。
（3）颜色匹配偏差
这是整个开发中的核心难题。问题具体表现如下：
1. 纯黑白照片出现深红/浅灰红/浅灰绿残留
2. 黑色被识别为深紫、深绿色
3. 彩色图片背景出现杂乱色块
经过多次迭代，并逐步收紧无彩色阈值（标准为饱和度 < 0.08）、引入边缘去噪、切换为 HSV+加权 RGB 混合模型，问题基本解决，但仍然差强人意。这也反映了纯算法方案面对复杂图像的局限性。
（4）手动编辑面板交互死循环
这是最令人挫败的问题。框选后，弹出的颜色面板与全局点击关闭逻辑产生事件冲突，面板刚显示即被 click 事件触发关闭。开发者先后尝试了三种方案：（1）时间戳比对（面板显示后100ms 内忽略关闭）；（2）一次性事件捕获器（mouseup后临时拦截click）；（3）状态机标记（isPanelOpen）。均因事件冒泡顺序或时序问题失败。最终方案：在 document 捕获阶段监听click，配合 justFinishedRectDrag 标志位（框选结束后 150ms 内跳过关闭逻辑），彻底解耦框选触发与面板关闭的事件流。
（5）PDF色卡乱码
初始使用字体不支持中文，改为Canvas图片方式渲染中文后修复。
5.3 对 Vibe Coding 的认识
一、优势
1. 在极大程度上降低了前端开发门槛，即使不熟悉复杂编程也能做出功能完整的网站。
2. 原型搭建极快，若指令描述清楚，则一次性生成效果较好。
3. 适合快速试错和概念验证。
二、局限性
1. 调试极其困难。AI容易陷入“修补一处、破坏另一处”的循环。例如，修复面板关闭逻辑时，意外破坏了格式刷的连续刷状态。
2. 长对话上下文丢失。迭代次数多后，AI可能忘记之前的约束或已修复的问题。例如，第 20 轮后 AI 忘记了selectedCell 的初始定义，导致面板定位逻辑出现空指针异常，需要重新声明变量用途。
3. 复杂交互逻辑（如状态管理、事件冲突）容易出错且难排查。
4. 需要人工承担决策与架构：算法选择、交互设计仍需人工判断和拍板
三、经验总结与反思：
1. 架构选择：仍会采用单HTML文件架构，但会提前规划好模块划分。
2. 状态管理：先用纸笔梳理核心状态机，再让AI实现。
3. 测试策略：关键功能应提前准备测试用例。
4. 勤备份。每次大改前手动备份文件，必要时回退。
5. 拆分小指令。一次只让 AI 做一件事，尽量避开死循环。
6. 学会放弃、接受不完美。某些问题可能超出当前纯算法的能力边界，在时间与能力限制下，尽可能保持功能完善、不过分追求细节也可行。
六、项目成果
最终交付的是一个功能完整的在线拼豆图纸生成器，包含以下功能：
1. 图片上传与实时预览
2. 8项可调参数
3. 6种调色板（含MARD 221色的色卡）
4. 完整的手动编辑工作台
5. PNG/PDF双格式导出
6. 桌面端与移动端双端适配
尽管颜色识别与交互细节仍不够完美，但作为首次使用Vibe Coding方式完成的开发项目，也基本达到了预期目标。
七、个人反思
使用Vibe Coding ，需要持续引导、诊断、决策，需要人去把控方向、权衡取舍。人机协作的过程中，反复的试错与修复虽然令人沮丧，但也锻炼了我分析问题、拆解问题的能力。
拼豆工坊或许不够完美，但它是我与AI共同完成的第一个实用工具。这段经历让我对人与AI共存的未来有了更加深刻的认识。