凌晨3点，我把「考研自习室」小程序发到豆瓣小组——24小时后，3所高校考研群主动来问源码

大家好，我是RD社区的编辑小满，也是去年跨考成功上岸的“前考研人”。今天不讲理论，只拆解一个真实发生、可复制、没加一行手写代码的AI编程实战：如何用Cursor和Claude Code，在97分钟内完成需求分析→生成→调试→上线→冷启动传播全流程。

> ✅ 不需要注册开发者账号（先用微信开发者工具模拟）
> ✅ 不需要懂API/数据库（Claude Code自动补全mock逻辑）
> ✅ 不需要设计UI（直接用微信原生组件+AI润色CSS）

---

第一步：一句话定需求（别急着打开Cursor！）

在豆瓣「考研自习室」小组翻了2小时帖子，我提炼出3个高频痛点：

“图书馆抢不到座，刷10次小程序才进得去” → 需要实时余座状态+刷新提示

“怕被占座，想看‘最后扫码时间’” → 需要座位绑定+时间戳显示

“想约研友一起学” → 需要一键分享座位二维码

✅ 关键动作：把这3点整理成一段清晰Prompt，复制进Claude Code：

请生成一个微信小程序页面，实现以下功能：
展示8个自习座位卡片，每张卡片显示：座位号、当前状态（空闲/已预约/维护中）、最后扫码时间（格式：10:23）、二维码图标（点击生成该座位专属预约码）；

状态为‘空闲’时，卡片背景为#e6f7ff，文字为#1890ff；状态为‘已预约’时，背景#fff1f0，文字#cf1322；

使用微信原生组件（view, button, image），不引入第三方UI库；

所有数据用mock数组模拟，无需后端；

生成WXML + WXSS + JS三部分代码，结构清晰，注释中文。

---

第二步：Cursor里一键生成+微调（实测耗时18分钟）

新建项目 → 选择「微信小程序模板」→ 在pages/index/index.js光标处按Ctrl+K（Windows）或Cmd+K（Mac）唤出Claude Code

粘贴上述Prompt → 回车等待（约25秒）→ 自动生成完整三端代码

关键微调2处：

- 在WXSS中将.seat-card的border-radius从4px改为8px（更圆润）
- 在JS里把mock数据中的lastScanTime统一改为动态时间（new Date().toLocaleTimeString('zh-CN', {hour12:false, hour:'2-digit', minute:'2-digit'})）

💡 小技巧：在Cursor里右键选中某段CSS → Ctrl+Shift+P → 输入「Explain CSS」→ AI立刻告诉你这行干嘛，新手不怕改崩。

---

第三步：真机预览+埋点优化（32分钟）

用微信开发者工具导入项目，点击「预览」→ 生成体验版二维码 → 扫码到手机：

发现问题①：二维码图标太小 → 在WXSS里把.qrcode-icon的width从24rpx调至40rpx

发现问题②：点击二维码没反应 → 原来Claude Code默认写了bindtap="generateQr"但没定义函数 → 光标放函数名上按Ctrl+. → Cursor自动补全空函数体，再粘贴一段轻量QR生成代码（用wx.canvasToTempFilePath + wx.showModal）

✅ 这里不教canvas原理——我们直接用Cursor的「Insert Snippet」功能：输入qr wx → 选中wx.createCanvasContext模板 → 替换变量名即可。

---

第四步：冷启动传播——为什么豆瓣比朋友圈更有效？

我把小程序截图+一句文案发到豆瓣「考研自习室」小组：
> “刚做的自习室座位实时看板（无后端、纯前端），扫码就能试用。如果你们学校也缺这个，我把源码+Prompt打包好了，评论区扣【要】我私你。”

结果：

2小时内获赞142，收藏217

3所高校考研群管理员主动加我微信：“能帮我们定制学院楼层版吗？”

后续接单2个：华科东九教学楼版（报价¥800）、广外图书馆版（含预约表单，¥1200）

💡 核心洞察：用户不要技术，要解决当下痒点。豆瓣小组里全是“正在找座”的真人，朋友圈里全是“已上岸”的观众。

---

附：你能立刻复用的3个增效组合

| 场景 | 操作 | 效果 |
|------|------|------|
| 快速改UI | 在WXSS任意样式行按Ctrl+Shift+P → 输入「Rewrite with modern CSS」 | 自动转为flex/grid+语义化命名 |
| 查错定位 | 把报错信息（如Cannot read property 'xxx' of undefined）直接拖进Claude Code对话框 | AI精准指出哪行JS该加?.或|| [] |
| Prompt提效 | 用「角色+约束+输出格式」三段式写法：
你是一名微信小程序架构师，请基于以下限制……输出WXML/WXSS/JS三块代码，用`分隔 | 生成准确率提升60% |

现在，你的第一个可传播的小程序已经诞生。它不一定完美，但它真实、可用、有人愿意转发——而这，正是副业接单的第一块敲门砖。

下次更新预告：《为什么我用同一套Prompt，批量生成5个高校版自习室小程序？》

---

> 📌 文末彩蛋：在woshird.com/getting-started/kaoyan-zixishi-douban-viral 下载本项目完整源码包 + 豆瓣发帖话术模板 + 3个高校定制询价单PDF（可直接发客户）