A vs B：手写「家庭菜谱分享」vs AI生成版——我赌赢了4小时，还顺手接了美食博主的改版单
上周，美食博主@阿棠（12w粉）找我改她的小程序：“现在的菜谱页太丑，粉丝说像Word文档。”
我跟她打了个赌：
> “我用手写React Native重做一遍，你付¥3000；
> 或者用AI从零生成新版，你付¥1800——如果AI版上线后7日留存＞45%，你再加¥500。”
她笑了：“你疯啦？AI写的能看？”
结果：AI版上线第3天，留存率48.7%，她主动转账+追加需求：“把我的‘厨房妙招’专栏也AI化。”
下面，是这场真实对决的逐帧复盘。
---
对比维度1：开发耗时（单位：分钟）
| 阶段 | 手写版 | AI版 | 差值 |
|------|--------|------|------|
| 需求拆解 & UI草图 | 32 | 15（Claude Code自动输出Figma描述+组件树） | -17 |
| WXML/WXSS/JS生成 | — | 28（Cursor中3次
Ctrl+K，分别生成列表页/详情页/搜索页） | -28 || 数据Mock与联调 | 87 | 12（AI自动写
mockData.js，含20道家常菜JSON） | -75 || 图片适配（封面图/步骤图） | 45 | 0（Prompt里写明
使用unpkg上的免费food-icons，AI直接引用CDN） | -45 || 真机测试与Bug修复 | 102 | 14（Cursor「Explain Error」准确定位图片宽高比异常） | -88 |
| 总计 | 312 | 79 | ↓233分钟（3h53min） |
---
对比维度2：用户体验（7日数据，同一批500名种子用户）
| 指标 | 手写版 | AI版 | 提升 |
|------|--------|------|------|
| 平均停留时长 | 2m18s | 3m41s | +65% |
| 步骤图展开率 | 31% | 68% | +119% |
| 分享到朋友圈率 | 12% | 34% | +183% |
💡 关键原因：AI版默认启用「步骤渐显动画」（animation: step-in 0.3s ease），而手写版为赶工期没加动效——用户反馈：“点开像在翻食谱书”。
---
对比维度3：扩展性（谁更容易加新功能？）
为每道菜增加“听做法”按钮，点击调用wx.getRecorderManager().start()，重新生成 → 新增功能仅用21分钟---
实战：如何复刻AI版？（3步走）
Step 1：喂给Claude Code的黄金Prompt
你是一位资深微信小程序UI架构师。请生成一个「家庭菜谱分享」小程序，要求：
首页：瀑布流展示菜谱卡片（封面图+标题+难度标签+浏览数），支持下拉刷新
卡片点击进入详情页：大图轮播（3张步骤图）+ 分步骤文字说明（每步带序号+emoji图标）+ 底部“收藏”“分享”按钮
使用微信原生组件，禁止外部库；图片用https://cdn.jsdelivr.net/npm/food-icons@1.0.0/下的svg；
所有交互需有反馈：按钮点击变色、图片加载失败显示“🍳”图标；
输出WXML/WXSS/JS三文件，用 ``
Step 2：Cursor里关键2次操作
生成后，在 中手动添加"style": "v2"（启用新版组件样式）
在详情页JS中，把 stepText字段的渲染逻辑，用Cursor的「Refactor → Convert to map loop」一键转为数组遍历（避免手写for循环出错）Step 3：上线前必做1件事
在project.config.json中，把libVersion设为3.4.0（确保新式---
这场A/B测试让我彻底相信：AI不写更好的代码，但写更贴近用户心理的代码——它默认考虑动效、容错、情感符号，而人类工程师常被deadline压得忽略这些。
现在，你的赌局也可以开始了。
> 📌 文末资源包：
> - 手写版vs AI版完整代码仓库（GitHub链接）
> - 500名用户原始行为数据表（Excel）
> - 美食博主验收视频（含她夸AI版的原声）
> 全部在woshird.com/getting-started/caipu-share-ai-vs-handwritten