我和 AI，一起做了一个手机 App

正文

最近，我完成了一件很有成就感的事：做出了一款属于自己的拼豆工具——青衫拼豆生成器。

它可以把手机里的图片自动拆分成拼豆图纸，显示每一格应该使用的豆子色号，统计各种颜色的数量，还能导出带坐标、网格、色号和用量图例的完整图纸。更重要的是，它已经被打包成 APK，可以直接安装在安卓手机上，并且能够离线使用。

如果只看最后的结果，可能会觉得这只是一个普通的小工具。但对我来说，它更像是一段完整的 AI 学习过程：从提出一个模糊想法，到不断补充需求、发现问题、验证结果，再到真正得到一个可以使用的 App。

一、最开始，我只有一个简单的想法

我的第一个要求并不复杂：

我希望它是暗黑电竞风格，有左侧工具栏、中间画布、右侧色板和统计区域。画布需要支持网格、坐标、色号、画笔、橡皮、取色器、撤销重做，以及镜像和旋转。

AI 很快做出了第一个可以运行的网页版本。那一刻，我第一次清楚地感受到：当需求表达得足够具体时，一个想法真的可以很快变成看得见、点得动的产品。

图 1 最初的网页版三栏界面

二、能打开还不够，我希望它真的能在手机上用

网页版本完成后，我又提出了新的要求：

于是，项目开始从一个离线 HTML 页面，逐步变成安卓应用。我们检查了电脑里的 Android 开发环境，把网页放进原生 WebView，处理手机文件选择、图片导入和本地文件保存，最后生成并签名 APK。

这个过程让我明白，“网页能运行”和“手机 App 好用”之间还有很长一段距离。

手机有状态栏、刘海屏、底部导航栏，还有手指触控和双指缩放。电脑上看起来正常的导出按钮，到了手机上可能会太靠上；电脑上的鼠标坐标没问题，放大画布以后，触控位置却可能产生偏移。

这些问题不是一次就能全部想到的，很多都是在实际查看和使用之后才发现。

图 2 手机端画布、工具、色板三个底部标签页

三、最难的不是画格子，而是让颜色更准确

图片转拼豆图纸看起来只是“把图片缩小，再找最接近的颜色”，但真正做起来，颜色识别是整个项目里最需要反复调整的部分。

最初的匹配方式比较简单，部分浅色、肤色和灰色会被错误地识别成白色，暗部层次也容易丢失。我把实际效果截图反馈给 AI，要求继续提高准确度。

之后，颜色识别经历了几次升级：

从简单的 RGB 距离，升级为更符合人眼感受的 Lab 与 CIEDE2000 色差计算。

增加对白色区域的保护，避免米色、浅灰和肤色被大面积识别成纯白。

改进每个格子的区域采样，不再只读取单个像素。

加入高精度混色，让相邻豆子的综合色彩更接近原图。

最终接入MARD 221 色标准色板，图纸直接显示 A1、C8、H20 等可以用于准备实体豆子的色号。

当色板从早期的几十种颜色扩展到 221 色后，照片里的肤色、灰阶、棕色、蓝绿色和紫色过渡明显丰富了很多。

这让我学到一个很重要的思维：“颜色多”不等于“颜色准”，真正的准确来自色板、采样和匹配算法一起配合。

图 3 同一张图片不同版本的颜色识别对比

四、导出图纸，也经历了从“能导出”到“真正能用”

最早的导出功能只生成普通图片，但我希望得到的是可以照着摆豆子的正式图纸。

我给出了一张参考图，要求导出结果具备：

上、下、左、右四边坐标；

每个色块内显示真实拼豆色号；

每五格显示更明显的辅助线；

底部展示色号、颜色和使用数量；

大尺寸画布也能导出清晰图片。

后来又遇到了手机导出失败的问题。检查后发现，浏览器下载方式在原生 App 中并不稳定，于是增加了 Android 原生保存窗口，让用户可以自己选择保存位置。

这次经历让我意识到：一个功能按钮能够被点击，并不代表这个功能已经完成。只有文件确实保存下来，而且导出的内容能直接使用，才算真正完成。

图 4 带四边坐标、格内色号和底部用量图例的导出图纸

五、一次次“再检查一下 Bug”，让它越来越像真正的产品

开发过程中，我说得最多的一句话可能就是：

每一次检查，都能发现一些之前没有注意到的细节。例如：

大画布虽然居中了，但顶部和左侧可能被裁切，无法滚动过去；

高分辨率手机上的 Canvas 文字不够清晰；

透明 PNG 的透明区域被误识别成白色豆子；

载入 JSON 图纸后，之前的参考底图还留在画布下面；

新建图纸后，界面仍显示上一张图片的文件名；

连续选择同一个文件时，第二次可能不会触发导入；

双指缩放后，手指点击的格子可能和实际绘制位置不一致；

图片转换后出现无意义的重复重绘，影响性能。

这些问题后来都通过专项测试逐一解决。

我还测试了 16×16、60×60 和 100×100 画布，检查了高 DPI、透明图片、纯白图片、触控绘制、撤销重做、非正方形旋转、旧图纸迁移、JSON 保存和 PNG 导出。

我越来越理解，AI 生成代码只是起点，测试、观察、反馈和继续迭代，才是把代码变成产品的过程。

六、最终，我拥有了一款真正属于自己的工具

现在的“青衫拼豆生成器”已经具备这些主要能力：

安卓手机离线运行；

自定义 4～100 格画布；

221 色 MARD 标准色板；

图片自动拆分与高精度混色；

画笔、橡皮、取色器；

撤销、重做、镜像和旋转；

画布缩放和双指缩放；

参考底图显隐、透明度和移除；

实时豆子数量与颜色统计；

JSON 工程保存和继续编辑；

导出完整拼豆图纸；

透明图片区域自动保留为空格；

高 DPI 手机清晰显示。

最后，我还给它换上了自己喜欢的名字：青衫拼豆生成器

图 5 手机桌面上的“青衫拼豆生成器”图标

七、这次 AI 共创带给我的三个收获

1. 不需要一开始就把所有事情想明白

最初只要明确核心目标，就可以先做出第一个版本。看到真实界面以后，再判断哪里不好用、哪里需要增加功能，比一直停留在想象中更有效。

2. 给 AI 的反馈越具体，改进越明显

“颜色不好看”只是感受；“浅肤色被识别成白色”“导出按钮在手机上太靠上”“大画布顶部无法滚动到”才是能够执行的反馈。

截图、测试结果和具体操作步骤，都是和 AI 协作时非常重要的信息。

3. AI 不是替我完成一切，而是帮助我把想法推进下去

整个过程中，真正决定产品方向的人仍然是我。我需要判断什么功能重要、什么效果不满意、什么问题必须继续修复。

AI 的价值，是把我的想法快速变成可以验证的结果，并在我提出问题后继续分析、修改和测试。

总结写在最后

以前，我可能会觉得“做一个 App”离自己很远，需要先学习很久，才有资格开始。

这次经历让我改变了想法：学习不一定要等到全部准备好才开始。也可以先从一个真正想完成的作品出发，在开发、测试和解决问题的过程中逐步理解技术。

“青衫拼豆生成器”对别人来说可能只是一个小工具，但对我来说，它记录了我第一次把 AI 当作长期协作伙伴，完成一个真实产品的过程。

这不是终点。以后我还想继续完善色板搜索、更多导出方式和更方便的图纸管理功能。

如果你也有一个一直想做、却觉得自己暂时不会做的小工具，也许可以从今天开始，把第一句需求告诉 AI。

先让它出现，再让它一点点变好…