揭示上一期从需求整理到手机安装，一篇可以照着操作的完整教程

目标效果：按照指定拼豆色卡完成颜色匹配、色号显示与数量统计。

想把一张照片转换成拼豆图纸，却不会写代码？这篇教程将带你用 AI 编程助手做出一款拼豆生成器：上传图片后，系统自动生成网格图案，匹配拼豆色号，统计每种颜色的数量，还能继续修改和导出。

整个过程不要求你先学会 HTML、CSS 或 JavaScript。你负责说明需求、检查效果，AI 负责创建文件、运行项目和修复问题。不同 AI 工具的按钮名称可能不同，但操作顺序基本一致。

完成后你将得到一款可离线使用的拼豆图纸编辑器，支持图片导入、网格转换、221 色匹配、颜色统计、手动编辑、文件导出，并可进一步打包到 Android 手机。

准备工作

开始前，准备好下面几样东西：

1.一台电脑，以及可以创建文件、运行项目和测试页面的 AI 编程助手（我这里是codex）；

2.一张清晰的拼豆色卡图（按你自己的需求来），最好包含颜色编号和对应颜色；

3.两到三张测试图片，建议分别准备人物、卡通和简单图标；

4.如果需要安装到手机，再准备 Android 打包环境；第一次操作可先完成网页版。

新手建议先把网页版做通，再考虑打包 APK。网页版功能稳定后，手机打包会简单很多。

第一步：先让 AI 帮你整理需求

不要一上来只说“帮我做一个拼豆 App”。信息太少时，AI 会自行猜测页面和功能，做出来的结果很容易和你的想法不一致。先复制下面这段提示词，让 AI 把需求问清楚。

我是无代码新手，想制作一款“拼豆图纸生成器”，主要运行在电脑浏览器和 Android 手机上。它要解决的问题是：用户上传一张图片后，自动生成可以照着制作的拼豆网格图纸，并显示每种拼豆的色号和数量。请先不要写代码，也不要创建项目。请先帮我整理完整需求，包括：1. 目标用户和主要使用场景；2. 必须完成的核心功能；3. 页面布局和操作流程；4. 图片转换、颜色匹配和手动编辑规则；5. 异常提示、数据保存和导出方式；6. 电脑版和手机版的适配要求；7. 可以逐项检查的验收标准。有不清楚的地方请先向我提问，等我确认需求后再开始开发。

发送后，AI 通常会询问画布尺寸、色卡来源、最大用色数量、导出格式、界面风格等信息。不会回答也没关系，可以让它先给出推荐方案，再根据自己的使用习惯选择。

第二步：开启规划模式，确认功能清单

如果工具提供 Plan、规划或需求模式，先开启它。没有这个按钮时，就继续要求 AI“先输出方案，不要开发”。确认方案时，重点检查下面这些功能是否已经写进去：

1.图片导入：支持 JPG、JPEG、PNG、WebP；

2.画布设置：可自定义宽度和高度，并提供常用网格快捷尺寸；

3.自动转换：把图片缩放、像素化并匹配到拼豆色板；

4.颜色控制：可限制最大用色数量，避免图纸过于复杂；

5.手动编辑：支持画笔、橡皮、取色、撤销和重做；

6.图案处理：支持水平镜像、垂直镜像和旋转；

7.材料统计：显示颜色、色号、数量和总颗数；

8.保存导出：支持 PNG 图纸和 JSON 工程文件；

9.移动适配：在手机上也能看清按钮、色板和画布。

如果清单里有你不需要的功能，直接删掉；如果有遗漏，立即补充。第一版建议只保留真正会用到的功能，等基础版本稳定后再增加更多玩法。

第三步：把完整开发提示词交给 AI

需求确认后，再把下面这份开发提示词发给 AI。你可以直接复制，也可以替换软件名称、主题颜色和画布尺寸。

你是一名资深前端工程师和 Canvas 图形应用开发工程师。请直接在当前工作区开发一款名为《拼豆图纸编辑器》的离线 Web App。不要只提供教程、设计方案或代码片段。请创建完整可运行的项目文件，完成后自行运行、测试并修复明显问题。所有核心功能必须离线可用，不依赖外部 CDN。一、界面与布局1. 电脑端采用左、中、右三栏布局：左侧为图片与画布设置，中间为主画布，右侧为颜色和统计；2. 手机端改为顶部或底部工具栏，并允许各区域独立滚动；3. 采用简洁、专业、偏深色的工具界面，文字清晰，按钮有明显的悬停、点击和选中状态。二、画布功能1. 每个拼豆格子默认显示为 16px；2. 画布宽度和高度均可设置为 4 至 100 格；3. 提供 16×16、24×24、32×32、40×40、48×48、60×60 快捷尺寸；4. 画布水平和垂直居中，顶部与左侧可显示坐标标尺；5. 使用双层 Canvas：底层显示参考图，上层显示和编辑拼豆网格。三、绘图与编辑1. 提供画笔、橡皮和取色器；2. 支持鼠标或手指连续绘制；3. 支持撤销和重做，至少保存 50 步操作；4. 支持水平镜像、垂直镜像以及顺时针旋转 90 度。四、图片导入与自动转换1. 支持 JPG、JPEG、PNG、WebP；2. 可调节参考图透明度，使原图和拼豆网格同时可见；3. 提供“一键转换为拼豆图纸”按钮；4. 转换时按当前画布尺寸缩放并像素化图片；5. 根据指定的拼豆色板匹配最近颜色，优化浅色和近白色识别；6. 用户可设置最大用色数量，范围为 2 至 32 色。五、色板与统计1. 内置或导入 221 色拼豆色板；2. 每种颜色显示色块、色号、颜色名称和使用数量；3. 画布下方实时显示当前图纸用到的颜色图例和总颗数；4. 点击某个色块后，可直接切换为当前画笔颜色。六、保存与导出1. 支持导出高清 PNG 图纸；2. 支持导出和重新导入 JSON 工程文件；3. 自动保存最近一次编辑内容，刷新页面后可以恢复；4. 完成后输出运行方式、已实现功能、测试结果和仍存在的限制。

发送前检查把“221 色拼豆色板”替换成你实际使用的品牌或色卡；如果没有完整 RGB 数据，可以同时把色卡图片交给 AI，并要求它先整理成颜色编号表。

第四步：让 AI 创建、运行并测试项目

发送开发提示词后，让 AI 直接在工作区创建文件。第一版通常会生成 index.html；为了支持安装或离线缓存，也可能生成 manifest.json、sw.js 等文件。不要只看它回复“已完成”，还要让它真正启动项目。

请现在运行项目并进行基础测试：1. 导入一张 JPG 和一张 PNG；2. 分别测试 24×24 和 60×60 画布；3. 测试自动转换、颜色限制、画笔、橡皮、取色、撤销和重做；4. 测试 PNG 与 JSON 导出，再重新导入 JSON；5. 检查手机尺寸下的按钮、色板和画布是否能正常操作；6. 发现问题后直接修改，并重新测试。完成后请用清单说明每项测试是否通过。

如果页面能打开，但某个按钮没有反应，就把具体现象告诉 AI，例如：“导入 PNG 后画布空白”“撤销只能使用一次”“手机上右侧色板被遮住”。问题描述越具体，修复越快。

第五步：加入 221 色拼豆色卡

拼豆图纸是否实用，关键在颜色匹配。最稳妥的方式，是准备一份包含色号和 RGB 值的色卡数据。如果只有色卡图片，也可以先让 AI 提取并整理。

请根据我提供的 221 色拼豆色卡建立颜色数据表。每条数据必须包含：色号、颜色名称、HEX、RGB。转换图片时只能从这 221 种颜色中选择，并允许用户设置最大用色数量。请优化浅色、肤色、灰色和近白色的判断，避免大面积区域被错误识别成纯白。转换完成后，在画布下方显示色号、色块、使用数量和总颗数。

完成后，用三张差异较大的图片测试：一张颜色简单的卡通图、一张人物照片、一张深色背景图片。如果生成结果颜色过多，就降低最大用色数量；如果主体失真，就适当增加画布尺寸。

第六步：打包到 Android 手机

网页版功能通过后，再告诉 AI 需要在 Android 手机上运行。它可以选择合适的 WebView 容器或移动端打包方案，把现有网页放进 Android 项目。不要在这一步重新开发全部功能，重点是复用已经稳定的网页版。

网页版已经测试通过。现在请把它打包成可离线运行的 Android App。要求：1. 复用现有页面和功能，不重新改写业务逻辑；2. 所有资源随 App 打包，不依赖网络；3. 适配常见 Android 手机屏幕；4. 保留图片导入、PNG/JSON 导出和本地自动保存；5. 生成可安装的 APK，并说明安装方法；6. 完成后检查启动、文件权限、图片选择、返回键和横竖屏表现。

安装测试示意：生成 APK 后，在真实 Android 手机上检查启动与核心功能。

安全提示只安装自己构建或来源明确的 APK。发布给其他人使用前，应完成签名、权限、兼容性和隐私检查。

第七步：按照清单完成验收

最后不要凭感觉判断是否完成，按下面的顺序逐项检查：

1.应用可以正常打开，断网后仍能使用主要功能；

2.JPG、PNG、WebP 图片都能正常导入；

3.不同画布尺寸均能生成完整网格；

4.最大用色数量变化后，图案与统计同步更新；

5.色号、颜色名称、数量和总颗数显示正确；

6.画笔、橡皮、取色、撤销、重做、镜像和旋转均可使用；

7.PNG 导出清晰，JSON 可以重新导入并继续编辑；

8.刷新页面或重启 App 后，最近内容能够恢复；

9.手机上的按钮足够大，画布和色板不会被遮挡；

10.至少用三张不同类型的图片完成实际测试。

常见问题与修改方法

图片导入后画布空白。

让 AI 检查文件读取方式、图片格式、Canvas 尺寸和绘制时机，并提供出现问题的具体图片格式。

浅色区域全部变成白色。

要求优化颜色距离算法和浅色阈值，并用肤色、灰色、米色做单独测试。

生成的颜色太多，实际很难准备材料。

把最大用色数量调低到 12 至 20 色，再比较主体细节是否仍然清楚。

手机上按钮太小或色板被遮挡。

要求移动端使用底部工具栏、可折叠面板和至少 44px 的可点击区域。

APK 打开后黑屏。

让 AI 检查本地资源路径、WebView 权限、入口文件和离线资源是否全部打包。

结尾总结

做这类小工具，不需要一次就把所有功能做到完美。最有效的顺序是：先整理需求，完成最小版本；再用真实图片测试；最后才增加色卡、导出和手机安装。每次只解决一个明确问题，AI 的修改会更稳定。

当你完成这款拼豆生成器后，同样的方法也可以用来做十字绣图纸、像素头像、库存统计、报价计算和课程排期等工具。换掉需求和验收标准，就能从同一套流程开始。

记住这条顺序先梳理需求，再生成项目；先完成网页版，再打包手机；先真实测试，再公开发布。

如果你也在尝试用 AI 做自己的小工具，欢迎在评论区留下想做的功能。