A vs B：手写‘社区二手书交换站’网页 vs AI生成版——我赌赢了6小时，还顺手接了学校图书馆的改版单

上周，我跟大学室友打了场赌：

A队（我）：用Claude Code + Cursor，30分钟内做出可用网页；

B队（他，计算机系大三）：手写HTML/CSS/JS，不查文档，纯手工撸。

赌注：谁先上线、谁的页面被邻居真正用起来、谁的代码3天后还能轻松加新功能。

结果：我赢了6小时（他花了6.5小时），用户停留时长高2.1倍，第2天他主动来问：“你那个‘加筛选功能’怎么搞的？”

今天，不吹AI，只摆事实、列代码、晒数据。

---

⏱️ 开发耗时对比

| 环节 | 手写（B队） | AI生成（A队） |
|------|-------------|----------------|
| 页面骨架（标题/搜索栏/书卡列表） | 42分钟（调试Flex布局崩溃3次） | 3分钟（Claude一次性生成） |
| 响应式适配（手机端） | 1小时15分钟（媒体查询反复试错） | 0分钟（Claude默认含@media） |
| 书卡交互（点击展开详情） | 58分钟（JS事件监听+DOM操作） | 2分钟（Cursor指令：“给每张书卡加点击展开摘要”） |
| 部署上线（Vercel） | 25分钟（环境变量配错2次） | 45秒（拖拽HTML文件） |
| 总计 | 6小时50分钟 | 30分钟 |

> ✅ 我的30分钟明细：
> - 5分钟写Prompt（含3次微调）；
> - 2分钟复制粘贴；
> - 8分钟用Cursor加筛选功能；
> - 15分钟部署+生成二维码。

---

👥 用户行为数据（首日，37位邻居访问）

| 指标 | 手写版（B队） | AI版（A队） |
|------|----------------|----------------|
| 平均停留时长 | 1分23秒 | 3分47秒 |
| 点击书卡率 | 41% | 89% |
| 提交“求书”表单数 | 2份 | 15份 |
| 微信扫码咨询数 | 0 | 7人 |

💡 关键差异：AI版默认带「悬浮放大」动画+「书名高亮搜索」，而手写版因时间紧张，只做了基础列表。

---

🔧 二次修改成本实测（第2天上午）

需求：加「按年级筛选」功能（小学/初中/高中/大学）

B队：

- 重写HTML结构（加select下拉）；
- 改写JS过滤逻辑（for循环遍历+条件判断）；
- 重调CSS样式（下拉框宽度不一致）；
- 耗时：1小时42分钟，首页白屏2次。

A队：

- 在Cursor中对index.html执行：
> “在搜索栏下方添加下拉选择器：选项为‘全部年级’‘小学’‘初中’‘高中’‘大学’。选择后，只显示对应年级的书卡。年级信息已存在每张书卡的data-grade属性中。”
- Cursor生成12行代码（含事件监听+classList切换）；
- 我检查后，只改了1个拼写错误；
- 耗时：4分17秒，无刷新，实时生效。

---

📈 商业结果：为什么图书馆找上门？

第3天，学校图书馆老师看到邻居群转发的AI版网页，问：“能做成‘校内教材漂流’吗？要对接我们的借阅证系统。”

我答：“可以，但需要你们提供教材ISBN和年级字段。”

她当场发来Excel样本，并说：“预算3000元，两周内上线。”

✅ 这单的核心不是技术，而是：

用户已验证的交互路径（筛选→查看详情→发起交换）；

可预测的扩展方式（把data-grade换成data-isbn）；

零学习成本的协作模式（老师改Excel，我换Prompt，一天交付新版）。

---

🧭 给新手的3条硬核建议

别追求“完美第一版”：手写党总想把CSS类名起得语义化，AI党直接用card-active，但用户只关心“点不点得开”；

把Prompt当接口文档：下次加功能，先写清楚输入（字段）、输出（行为）、边界（如“不改原有结构”）；

部署即交付：Vercel链接就是你的合同附件，不是“待验收”，而是“已上线”。

---

📌 行动清单

✅ 复制本文Prompt，生成你的社区服务页；

✅ 用Cursor加1个功能（比如“按价格排序”）；

✅ 把链接发到3个群，记录第1个咨询者问的问题——那就是你下一个产品的种子。

> 💬 最后说句实在话：程序员的价值，正在从“写对代码”转向“定义对问题”。AI负责前者，你专注后者。

下期预告：《如何用同一套书交换网页，3分钟改成‘闲置乐器共享’‘毕业论文资料库’‘考研笔记互换’》。