从手绘图到小程序，我用AI花了2个小时完成
不使用各种 spec/mcp/skill 的情况下，尝试去掌握 AI 开发小程序的流程
📍 开发流程的诞生背景
用 AI 开发小程序的痛点：不是不会写代码，而是 不知道该怎么和 AI 协作。
- 直接让 AI 写代码？经常跑不通。
- 让 AI 自己看着办？结果驴唇不对马嘴。
解决方案：4 步 AI 协作工作流
提需求 → 讨论 -> 确认需求，固本本地文件 → 实现/循环每个步骤有明确的 Prompt 模板，AI 不会跑偏。
今天用「AI 题库小程序」完整演示，从一个想法/手绘图，到真实的可运行的小程序的过程。
实测结果：2 小时从想法到可运行，不需要手写一行代码。
🚀 懂得如何和 AI 打交道，才是关键
💡 先看结果
手绘图
最后的结果程序
🔬 实战验证：AI 题库小程序
功能需求：
- 📷 题目拍照（腾讯云 OCR）
- 🤖 AI 生成解析
- ✂️ 一图多题
- 🔐 微信登录
- ☁️ 云存储
🧪 实验准备
工具清单
| 工具 | 用途 |
|---|---|
| Claude Code | AI 对话，生成代码 |
| MiniMax coding plan | 底层模型 |
| MiniMax MCP | 图片理解（分析手绘图） |
| 微信开发者工具 | 预览和调试 |
| 微信公众号平台 | 新建一个小程序 |
| 腾讯云开发平台 | 新建一个环境 |
🚀 Claude Code 用于输入提示词，微信开发者工具 用于预览结果
实验目标
验证 「AI 辅助开发」 的可行性：
- 从想法到可运行，需要多长时间？
- AI 生成的代码质量如何？
- 哪些环节可以完全交给 AI？
⚠️ 实验变量：所有步骤使用相同的提示词模板，确保可复现
📌 步骤 1：需求
实验条件：直接告诉 AI 我的想法
🚀 USER PROMPT
我想要开发一个简单的题库微信小程序，功能包括：
1. 题目拍照 - 直接拍照，后续接腾讯云 OCR
2. 解析 - AI 自动生成
3. 拆题 - 把一张图片里的多道题拆出来
4. 有答案 - 每道题都有答案
5. 登录 - 微信登录
6. 保存 - 云环境存储
后端用微信云开发，前端先用 mock 数据。
简单一点，不要复杂的功能。实验结果：
- ✅ AI 理解了需求
- ✅ 主动提出了优化建议
- ⚠️ 需要继续引导以获得更详细的设计
实验小结：
💡 AI 可以理解需求，但需要更具体的输入才能给出设计方案
📌 步骤 2：手绘设计图
实验条件：画一张手绘界面图，让 AI 分析
我随手画了这样一张「鬼画符」👇
（此处应有手绘图：登录页 + 首页 + 拍照页 + 详情页）
🚀 USER PROMPT
使用 MiniMax MCP 的 understand_image 工具
我有一张手绘的微信小程序界面图片 @handwrite_path.jpg ，请帮我：
1. 分析这张手绘图片，描述每个页面的布局和元素
2. 整理成线框图，包含以下 4 个页面：
- 登录页：头像 + 微信登录按钮
- 检查页（首页）：顶部左侧「拍」按钮 + 图片卡片列表
- 拍照页：取景框 + 快门按钮，拍摄后返回首页
- 详情页：顶部缩略图 + OCR识别的题目列表
3. 画出页面之间的跳转逻辑图
UI 风格：简约白色实验结果：
- ✅ 准确识别了手绘图的意图
- ✅ 生成了专业的线框图
- ✅ 输出了清晰的页面跳转逻辑
- ✅ 自动识别了 4 个核心页面
实验小结：
💡 这就是差异的地方！ AI 不仅能读懂「鬼画符」，还能自动补全专业的设计规范
预期输出：AI 分析结果 + 线框图描述
📌 步骤 3：确认设计 + 保存文档
🚀 USER PROMPT
把上述的讨论整理成文档，保存到以下文件：
1. doc/requirements.md - 需求文档
2. doc/wireframes.md - 线框图 + 跳转逻辑 + 卡片状态说明实验结果：
- ✅ AI 保存了 2 个设计文档
- ✅ 后续开发可直接参考
📌 步骤 4：技术选型
实验条件：让 AI 根据需求和设计确定技术栈
🚀 USER PROMPT
根据需求和线框图，我们需要确定技术栈。
本项目使用的技术栈：
- 前端：TypeScript + Sass + 微信小程序原生框架
- 渲染模式：Skyline + glass-easel
- 后端：微信云开发（云函数 + 云数据库 + 云存储）
- OCR：腾讯云 QuestionSplitOCR API
请帮我整理成技术文档，包括：
1. 每个技术选型的理由
2. 技术之间的配合方式
3. 潜在的坑和注意事项
4. 保存到 doc/tech-stack.md实验结果：
- ✅ 生成了完整的技术选型文档
- ✅ 列出了潜在的坑（很实用！）
- ✅ 输出了
doc/tech-stack.md
实验小结：
💡 AI 给出的技术建议很实用，特别是「潜在的坑」部分，避免了很多弯路
📌 步骤 5：页面开发
🚀 USER PROMPT
请参考 doc/wireframes.md 中的线框图和页面跳转逻辑，
帮我创建以下 4 个页面（使用 mock 数据，暂不连接后端）：
1. 登录页（pages/login/）
- 中间大标题「AI 题库」+「智能拍照答题」
- 底部绿色按钮「微信登录」
- 点击登录后保存状态并跳转到检查页
2. 检查页/首页（pages/check/）
- 顶部左侧「拍」按钮 + 右侧标题「AI 题库」
- 卡片列表：缩略图 + 拍摄时间 + 状态（识别中灰色/已识别绿色/失败红色）
- 空状态显示「还没有题目哦～」
- 点击「拍」跳拍照页，点击卡片跳详情页
3. 拍照页（pages/camera/）
- 全屏相机预览
- 底部大圆形快门按钮
- 拍照后保存本地存储，自动返回检查页
4. 详情页（pages/detail/）
- 顶部返回按钮 + 标题「题目详情」
- 题目图片（可点击放大）
- 题目列表：内容 + 答案（绿色）+ 解析 + 选项
为每个页面创建对应的 .ts、.wxml、.scss、.json 文件。实验结果：
- ✅ 4 个页面一次生成，代码完整可运行
- ✅ 布局美观，符合设计规范
- ✅ 页面跳转逻辑正确
📌 步骤 6：后端服务
实验条件：云数据库 + 云存储
🚀 USER PROMPT
请参考 doc/tech-stack.md 和 doc/requirements.md，
实现之前 mock 的后端服务和对象存储，直接使用 云数据库 + 云存储
OCR 服务，后续给出，暂时还是 mock 先实验结果：
- ✅ AI 理解了云开发的概念
- ✅ 自动创建了数据库集合
- ⚠️ 需要手动在微信开发者工具中确认权限
📌 步骤 7：OCR 服务
前提准备
- 腾讯云切题的 OCR https://cloud.tencent.com/document/product/866/115930 ，到时候粘贴到提示词中
- 最优方法，得到可运行的代码块和返回结果，保存到本地文件中，方便 AI 去引用，比如 ocr.md 中
🚀 USER PROMPT
请参考 doc/tech-stack.md，
API 参考 https://cloud.tencent.com/document/product/866/115930。 调用和返回参考 ocr.md 文件
帮我创建云函数 ocrScheduler：
- 定时任务：每 30 秒扫描「识别中」卡片
- 调用腾讯云 QuestionSplitOCR API 识别题目
- 识别成功后更新数据库状态
请输出完整的云函数代码。实验结果：
- ✅ AI 生成了完整的 OCR 云函数代码
- ⚠️ 需要手动开通腾讯云 OCR 服务，配置 SecretId/SecretKey 到环境变量，这个比较欺负人，哎，就这里比较卡点
⚠️ 中途还有很多讨论的过程没有详细的罗列出来，如果遇到请自行与他讨论
总结
- AI 擅长理解需求和生成代码，但需要清晰的结构化输入
- 提示词质量决定结果质量，好的提示词事半功倍
- 上下文保存在本地，方便 AI 每个步骤去检查
与 AI 协作 通用 4 步工作流
📍 步骤 1：写需求（提示词）
↓
📍 步骤 2：中间沟通和讨论很多次
↓
📍 步骤 3：确认设计 + 保存本地
↓
📍 步骤 4：实现，递归，返回步骤 1⚠️ 本文仅仅是一个启发，论如何和 AI 协作，整个小程序还有很多的改进的空间，比如 题目显示的优化，每个用户有自己的题库空间等。
🎉 行动建议
现在就去试试吧！
- 打开 Claude Code
- 把你的想法用自然语言写出来
- 画一张手绘图（随便画，AI 能看懂）
- 按照上面的 4 步走
🚀 2 个小时后，你就能看到自己的小程序跑起来了！
📢 最后的最后
欢迎添加 公_主_号 ，小兵张咔咔， xiaobinzhangkaka，里面有更加详尽的说明，同时分享你的建议和意见，或者你感兴趣的主题，期待与你交流。
我还会持续分享更多 AI + 前端的实用技巧，记得关注我！
你的反馈是我最大的动力！ 🚀
标签：#ClaudeCode #AI开发 #微信小程序 #Minimax #VibeCoding