🌿 把阳台变成‘数字植物园’：5步做出物业都想接入的养护页

上周末浇花时，我发现薄荷又蔫了。翻手机相册，全是三个月前的‘刚买回来超精神’合影，中间毫无记录。我妈说：「你连多肉死几回都记不住，还养啥？」

当天下午，我在Cursor里输入一句Prompt，10分钟做出一个《阳台绿植生长记录》网页：

结果？物业李主任路过我家阳台，看见我手机扫了下二维码，点开网页拍了张龟背竹照片，随口问：「这能连我们新装的土壤传感器吗？」——我愣了3秒，然后笑着敲出1行代码，真连上了。

下面，带你亲手做这个「会呼吸的网页」。

---

✅ Step 1：用Claude Code生成骨架（3分钟）

在Cursor新建index.html，右键 → Ask Claude，输入：

> 生成一个纯前端阳台绿植记录页。要求：
> - 首屏显示3个示例植物（绿萝、薄荷、多肉），每张卡片含：植物名、照片占位图、最近浇水时间、下次提醒倒计时
> - 点击「+ 添加植物」弹出表单（名称、品种、购入日期）
> - 点击「拍照」调用手机摄像头（用HTML5 <input type="file" accept="image/*">）
> - 所有数据存localStorage，关页面不丢
> - 用中文界面，字体够大，适配老年人手指点击

Claude返回代码。复制运行，预览正常。

---

✅ Step 2：加「浇水」功能（2分钟）

找到「浇水」按钮对应代码（通常类似<button onclick="waterPlant('luoluo')">浇水</button>），在<script>里补函数：

function waterPlant(name) {
  const now = new Date();
  const next = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000); // 7天后
  localStorage.setItem(${name}-last-water, now.toISOString());
  localStorage.setItem(${name}-next-water, next.toISOString());
  updateCountdowns(); // 刷新倒计时
}

再加倒计时刷新函数（Claude可帮你写）：

function updateCountdowns() {
  document.querySelectorAll('.countdown').forEach(el => {
    const name = el.dataset.plant;
    const next = localStorage.getItem(${name}-next-water);
    if (next) {
      const diff = new Date(next) - new Date();
      const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
      el.textContent = days > 0 ? 还有 ${days} 天 : '该浇水啦！';
    }
  });
}

---

✅ Step 3：接入真实传感器（关键！1分钟）

物业IoT平台提供HTTP接口：GET https://iot.xx.com/api/sensor/soil?device=balcony-1
返回JSON：{ "moisture": 32, "temperature": 26.4 }

在网页底部加：

<div class="sensor-status">
  <strong>土壤湿度：</strong><span id="moisture-value">--%</span>
</div>
<script>
  fetch('https://iot.xx.com/api/sensor/soil?device=balcony-1')
    .then(r => r.json())
    .then(d => document.getElementById('moisture-value').textContent = d.moisture + '%');
</script>

✅ 注意：需物业后台将域名iot.xx.com加入CORS白名单（他们5分钟就能配好）。

---

✅ Step 4：免部署上线（1分钟）

---

✅ Step 5：升级为「物业合作版」（可选）

当李主任问「能接传感器吗」，我只做了两件事：

他当天就把链接嵌进物业小程序「社区服务」菜单——现在整栋楼32户都在用。

---

💡 这不是种花，是训练AI理解「真实场景」

> 🌟 真实延伸：这个模板已复用到「社区流浪猫喂食点记录」「老年大学书法课作品墙」——底层逻辑完全一样：拍照+时间戳+本地存储+扫码即用。

动手试试：把你家最常忘记照顾的植物，做成卡片发群里。截图打卡#life-hacks，抽3人送《阳台植物养护Prompt手册》电子版。