A vs B：手写「垃圾分类助手」vs AI生成版——一场2小时的真实对决

为了验证AI生成质量，我做了个硬核实验：

A组：用Vue3 + 微信小程序原生框架，手写「垃圾分类助手」（拍照识别+语音输入+分类百科）

B组：用Claude Code生成同等功能，仅做UI微调

同时上线两个体验版，邀请86位邻居扫码试用，记录3项核心指标

结果令人意外——不是A赢，而是B在用户停留时长和微信分享率上反超37%。今天公开全部测试数据与代码级复盘。

---

📊 AB测试关键数据

| 指标 | A组（手写） | B组（AI生成） | 差距 |
|------|-------------|----------------|------|
| 平均识别准确率 | 92.4% | 91.7% | -0.7% |
| 平均单次使用时长 | 1.8分钟 | 2.5分钟 | +39% |
| 微信分享率（点击「分享给朋友」） | 11.2% | 15.4% | +37% |
| 用户主动反馈「界面舒服」比例 | 63% | 89% | +26% |

> 💡结论：AI版本胜在「直觉化交互」——Claude默认添加了：
> - 拍照后自动放大识别框（手写需额外计算坐标）
> - 语音输入时显示波形动画（手写嫌麻烦省略）
> - 分类结果旁带「为什么属于此类」小图标（hover显示法规原文）

---

🔍 深度代码对比（Why B组更讨喜？）

A组手写 camera.js 关键片段：

// 简单调起相机，拍完就停
wx.chooseImage({ success: res => { /* 上传 */ } })

B组AI生成 camera.js（Claude输出）：

// 自动优化体验
Page({
  data: { previewUrl: '', isAnalyzing: false },
  takePhoto() {
    this.setData({ isAnalyzing: true })
    wx.chooseImage({ success: res => {
      // 1. 显示加载动画
      wx.showLoading({ title: 'AI正在思考...' })
      // 2. 上传后立即显示缩略图（提升反馈感）
      this.setData({ previewUrl: res.tempFiles[0].tempFilePath })
      // 3. 调用云函数识别
      wx.cloud.callFunction({ name: 'classifyGarbage' }).then(...)
    }})
  }
})

→ AI天然理解「用户等待时需要安抚」，而人类开发者常陷入功能实现，忽略情绪路径。

---

🧩 如何复刻B组效果？3步Prompt法

描述场景，不止功能：

> “生成垃圾分类小程序，用户拍完垃圾照片后，立即显示模糊预览图+旋转加载动画+文字提示‘AI正在思考，请稍候’，识别结果以卡片形式展开，每张卡片带法规依据小问号”

指定技术约束：

> “使用微信原生语法，不引入第三方UI库，兼容iOS/Android”

要求交付格式：

> “输出/pages/camera/index.wxml/.wxss/.js/.json四文件，直接可运行”

---

🌟 给所有新手的启示

✅ AI不是替代你，而是把「用户体验细节」变成可声明式配置

✅ 手写代码的优势在可控性，AI的优势在人性化直觉

✅ 真正的竞争力，是你会用Prompt把「我要让用户开心」翻译成机器可执行指令

这个对比实验让我明白：编程的终点，不是写出完美代码，而是让普通人愿意为你的产品多停留10秒。而AI，正把这10秒的创造权，还给每一个敢想的人。

> 附：AB测试原始数据表、两版完整源码、Prompt优化清单，公众号「我是RD」回复【垃圾】获取。