深夜改完「自习室座位监控」小程序，凌晨2点收到3条微信：‘能加个‘考研倒计时’吗？’

11月12日凌晨1:47，我给「青藤自习室」小程序上线了第7个功能：实时座位热力图（绿色=空闲，红色=占用）。刚关电脑，微信弹出：

同学A：“座位图太强了！但能加个倒计时吗？我想每天看到还剩几天…”

同学B：“如果倒计时旁边显示‘今天已学4h22m’就完美了！”

同学C：“求加‘冲刺阶段每日计划’模板！”

3条微信，指向同一个真相：工具的价值，不在功能本身，而在它唤起的‘状态感知’。

今天，教你用AI把「功能叠加」变成「呼吸般自然」。

---

原始需求：极简座位监控

Prompt（Claude Code）：

微信小程序：首页显示自习室平面图（SVG），每个座位是圆形按钮。点击后弹出「确认占用」/「释放座位」。状态实时同步到云数据库，所有用户可见。
用云数据库watch监听变化，自动刷新SVG颜色。

✅ 生成代码含SVG动态渲染、云监听、按钮状态管理，10分钟上线

第一次叠加：考研倒计时（15分钟）

关键Prompt升级：
> “在首页顶部增加横幅：‘距2025考研还有 [X] 天 [Y] 小时’，X/Y实时计算（2025-12-21减去今天）。用setInterval每分钟更新，确保精准。”

💡 实操注意：Claude生成的setInterval需包裹在onShow生命周期里，避免切后台耗电。我在Cursor中右键→「Fix with Claude」粘贴报错信息，秒得修复方案。

第二次叠加：学习时长统计（22分钟）

Prompt技巧：用「状态变量」代替功能描述：
> “新增全局状态：studyStartTime（用户点击‘开始学习’时记录），studyEndTime（点击‘结束’时记录）。首页显示‘今日累计：[H]h[M]m’，数据存本地storage。”

✅ 生成后，我仅需：

把「开始学习」按钮加到座位确认弹窗里

在onUnload中自动触发「结束」逻辑（防忘记点）

第三次叠加：冲刺计划模板（8分钟）

Prompt范式转变：
> “生成一个页面/pages/plan/index：显示3个预设模板（‘最后30天’‘最后15天’‘最后7天’），点击后加载对应JSON数据（含每日任务、重点章节、休息建议）。JSON硬编码在js里，不请求网络。”

✨ 巧妙点：所有模板数据由Claude Code直接生成JSON字符串，我复制粘贴即可，连格式校验都省了。

---

为什么能这么快？揭秘「状态驱动Prompt」法

别再写“加个倒计时”，而是写：
> “当前页面需维护以下状态变量：
> - countdown: {days, hours} // 基于固定日期计算
> - todayStudy: {hours, minutes} // 基于storage记录
> - activePlan: string // ‘30d’/‘15d’/‘7d’
> 请生成UI组件，响应式显示这些状态，并提供修改入口。”

AI不再猜你要什么功能，而是专注管理状态——这才是零基础敢叠功能的底气。

---

你的行动清单

今晚：在现有小程序里，加一个状态变量（如userMood: 'good'|'tired'|'focused'），用Prompt让AI生成切换UI

明早：把状态变量存入云数据库，实现「跨设备同步心情」

本周：收集3条用户问“能加XXX吗”的微信，用状态驱动法，1小时内交付Demo

工具存在的意义，是让用户忘了工具本身，只记得“我做到了”。

> 🌟 源码已更新至v1.3：[github.com/woshird/mini-studyroom](https://github.com/woshird/mini-studyroom)

小程序 # 实战 # ai编程 # claude-code