1. 摘要
我用 TRAE SOLO 做了一个面向儿童的植物收录 Web App 「听见植物」：孩子只要“拍一下”，30 秒内即可完成“识别→确认→收录”全流程（朗读提示 + 语音感想 + 待整理任务卡引导整理，离线也可回看）。
本作品的 MVP 在成都 TRAE 活动 Workshop 中首次完成，并获得「城市最佳作品奖」，随后一周持续迭代打磨。
开发主要使用 Code with SOLO；而需求澄清 / MVP 范围确定 / 技术选型以及本帖的数据整理与撰写由 MTC 辅助完成。
2. 背景
我是一名前端开发，也是一位妈妈。带娃在户外时，孩子经常捡起一片叶子、观察一朵花，认真地给“新朋友”取名字，然后抬头问我：“妈妈，它叫什么？”
但很多时候我们当场也说不出答案——现有识别工具大多面向成人，操作复杂、信息过载；我还得反复打开豆包拍照识别再解释一遍，而且通用识别在植物场景下准确度也不够稳定。
所以我想做一个更适合孩子的方式：步骤更少、关键提示可朗读、孩子自己就能完成“识别—记录—整理—回看”。我也希望孩子不只是知道“它叫什么”，而是能在时间里反复遇见同一株植物，记录四季变化，把一瞬的好奇变成一段被珍藏的成长记忆。
3. 实践过程（用 SOLO 的过程与数据复盘）
3.1 我是怎么拆解任务的
为了在 Workshop 的时间压力下先做出 MVP、再用一周把它迭代到可用，我把「听见植物」拆成 3 条主线并行推进：
- 儿童主流程闭环（必须跑通）：拍照/选图 → 识别 → 确认 → 录音 → 收录
- 儿童可独立使用的交互：全程可听（朗读/TTS）+ 大按钮 + 防误触
- 真实场景的“中断续做”：引入“待整理任务卡”，把补完流程做成小任务
对应过程截图线索：
- MVP 范围：
- 关键需求：
- 实现路线：
3.2 我用了 SOLO 的哪些能力
- 需求澄清与范围收敛：把“想法”压到可交付的 MVP，并规划 Roadmap
- 技术选型与方案对比：识别服务选择、是否需要大模型、隐私与密钥策略
- 视觉设计到开发的闭环：先用 SOLO 生成视觉设计规范文档（色彩/字体/插画与贴纸风格/组件与间距等 UI 规则），再调用 Pencil MCP 自动生成设计稿；后续通过 Prompt 对设计稿进行多轮迭代，并让前端代码按设计稿逐页对齐
- 前后端开发与问题定位：围绕相机唤起、页面导航、返回逻辑、待整理闭环等问题快速迭代
- 文档与复盘沉淀：把临时讨论逐步固化为可复用的产品/技术文档与操作清单
solo修改pencil设计稿视频
通过网盘分享的文件：solo调教pencil.mp4
链接: 百度网盘 请输入提取码 提取码: cv1f
3.3 关键 Prompt / 操作过程（摘取代表性片段）
以下为我在过程里反复使用的几类“推动项目向前”的关键提问：
-
需求与目标（把场景讲清楚）
- “我快 5 岁的孩子喜欢植物……想做一款电子标本集：拍照识别、按时间季节归类、还能录感想……”
-
技术路线（把选型定下来）
- “技术栈 React，云识别你有什么推荐？”
- “不需要用到 AI 大模型吗？”
- “你能再给我讲下推荐的百度吗？我对这块不了解”
-
产品与交互（把儿童友好做实）
- “你不做一个原型设计？”
- “玩具/绘本感”
- “先生成设计规范文档，再用 Pencil MCP 出设计稿；然后边评审边迭代，让代码对齐设计稿”
-
工程化落地（把上线与安全兜住）
- “前端目前有用 Netlify，后端不知道如何部署”
- “你更能接受哪种托管方式？（会影响后端如何处理百度密钥）”
-
云识别技术确认：
-
了解百度接口：
-
模型选用/路线：
四个关键主题的推进轨迹（按天）
数据源：这张图直接用 按天（MM-DD） 的方式展示，并用关键词把每条 prompt 归到“UI/相机上传/待整理与路由/本地预览/设计交付/部署”等主题，从而还原“这几天主要在推进什么”。
说明：这里用日期做横坐标，是为了让读者直观看到推进强弱；真正的“在做什么”，需要结合主题曲线与截图一起看。
我刻意只保留 4 个最能代表推进过程的主题（UI、相机上传、待整理/路由状态、本地预览）。结合曲线的波峰波谷，可以读到一个更贴近真实开发的节奏：
- 先把“环境 + 采集入口”打通：在前两天（04-10~04-11）本地预览/启动与相机上传上升，说明我优先把“能在设备上跑起来、能拍/能选图”解决掉
- 中段进入“按设计稿对齐”的高强度打磨：中间几天 UI 对齐上升，同时待整理/路由状态也逐步抬头——代表“像素级对齐 + 流程闭环”并行推进
- 临近交付再集中补齐整理闭环：在 04-17 附近，待整理/路由状态与相机上传再次抬升——更符合“把真实使用时的中断与回访整理补齐到可交付”的收尾工作
3.4 中间踩过什么坑（以及怎么解决的）
- “能跑”不等于“孩子能用”：最大返工来自按钮误触、流程中断、返回路径混乱 → 用“待整理任务卡 + 明确回落路径”做闭环
- 相机/相册唤起与导航细节：移动端对 input/camera、返回键、页面跳转非常敏感 → 用截图对照逐页修正
- 隐私与密钥风险：识别服务的 Key 绝不能出现在前端 → 走后端代理 + 环境变量，避免泄露
4. 成果展示
4.1 产品截图
4.2 项目链接
-
在线体验（免费识别次数有限，不行了请私信我，如果出现页面加载不出来，关掉wifi，免费的部署条件总有些苛刻）：
移动端（不兼容华为浏览器，存在无法播放语音指引问题）
PC网站地址
https://electronicspecimencollection.netlify.app/ -
Web App 使用录屏
通过网盘分享的文件：听见植物使用视频.MOV
链接: 百度网盘 请输入提取码 提取码: t9ut
4.3 PWA 安装与更新方法
「听见植物」支持以 PWA（像 App 一样）安装到手机桌面。
安装
- iPhone/iPad（Safari）：扫描二维码 → 分享按钮 → 添加到主屏幕
- Android（Chrome）：扫描二维码 → 右上角菜单 → 安装应用 / 添加到主屏幕
更新
- 一般情况下：关闭 App → 重新打开，即会自动拉取最新版本
- 如果发现样式/功能仍是旧的：在页面内执行一次下拉刷新/刷新；仍不行再彻底退出后重开
- 仍无法更新（少见）：删除已安装的 PWA 后重新安装（等同于清空旧缓存）
5. 效果与总结
5.1 最终效果（作品层面）
- Workshop 现场完成 MVP 并获「城市最佳作品奖」：证明“在时间压力下也能交付可演示的闭环作品”
- 一周迭代把体验补齐：从“能跑通”走到“孩子能顺畅用完一次流程”（尤其是中断续做与整理闭环）
5.2 数据洞察（推进过程与卡点）
- 8 天 / 1403 条 交互记录：覆盖需求澄清、设计对齐、工程排查、上线方案等完整过程
下面几张图用于把“推进过程”“精力分配”和“卡点”讲清楚：
图｜Prompt 主题占比（推断，细化后）
解读（回答“主要精力花在哪”）：
可以看到占比靠前的并不是“写业务逻辑”，而是更贴近真实交付的几类工作：
- UI 设计/动效/对齐：大量迭代发生在“儿童能不能看懂、敢不敢点、点了反馈够不够明确”这类体验问题上
- 开发启动/本地预览（含跨设备）：移动端预览/摄像头/跨设备访问是典型时间黑洞
- 待整理任务卡/路由状态：围绕中断续做、返回路径、流程闭环的反复打磨
- 资源/图片/文件引用：说明过程里频繁用截图/设计稿/文件对齐细节，而不是只靠文字描述
图｜卡点主题 Top10（连续重复段≥3 次数，细化后）
解读：同一主题被连续追问/修正，通常就是推进卡点。它可能来自 prompt 信息不足（缺少可复现步骤/上下文），也可能来自 AI coding 在某些工程细节上需要多轮试错（相机权限、路由状态、移动端兼容等）。
图｜推进强度与复杂度（按天；条数 vs 主题数）
解读：这张图是按天（MM-DD)展示的，所以柱子的起伏代表“哪一天沟通/迭代更集中”。我一般这样读它：
- 条数高 + 主题数也高：交叉问题集中爆发（多条主线互相影响），需要回到“最小可复现 + 逐个击破”，并及时沉淀规则/清单
- 条数高 + 主题数不高：大概率是单一难题（例如跨设备预览/权限/路由状态）在反复攻坚
- 条数不高 + 主题数高：更多是收尾阶段的分散修补与查漏补缺
图｜Prompt 主题词云（Top 50）
解读：词云用更直观的方式补充说明“我到底在反复讨论什么”。你会看到关键词集中在 设计/按钮/拍照/识别/整理/返回/列表/录音 等，整体指向同一个目标：把产品从“能跑”打磨到“孩子能顺畅用完一次流程”。
5.3 SOLO 在我流程里做了什么（我觉得最有价值的 3 点）
- 帮我把模糊想法收敛成可交付的 MVP：明确主链路与优先级，先交付再迭代
- 帮我把“视觉设计 → 设计稿 → 代码对齐”跑成闭环：规范先行，设计稿可迭代，代码按稿对齐
- 帮我在卡点处快速定位与复盘：把问题拆成可复现步骤，边修边沉淀成文档与清单
5.4 可复用的方法（给同样想“用 AI 做出可交付作品”的人）
- 先用截图对齐，再写 Prompt：截图能极大降低歧义，比“描述 UI”更稳定
- 遇到卡点就换成“最小可复现”Prompt：环境、步骤、预期、实际、日志（必要时）一次给齐
- 把“中断续做/草稿箱”当成标配：越是多步骤流程越需要它，产品才会从“能演示”变成“能真实用”
- 多轮纠偏后要“对齐文档”，降低噪声：迭代过程中会产生大量临时结论与分叉方案；每次纠偏后，把最终选择写回到 1-2 份“唯一可信文档”（PRD/流程/视觉规范/部署说明等），避免团队（或自己）被历史噪声带偏
- 临近交付一定要做文档收口：把过程材料整理成清晰目录（README + docs 导航），把“怎么跑/怎么部署/关键取舍/已知问题”写明白，方便后续迭代时快速回到同一份共识、减少重复沟通与返工
5.5 普适价值（这套思路不止用于识花）
- 隐私敏感的媒体类记录（儿童/家庭/语音日记/随手记）适合 Local-First
- 多步骤流程天然需要“待整理/任务卡/草稿箱”来兜住中断
- 语音优先与无障碍适用于不识字儿童、老年人、以及需要边走边用的场景
