周末在家，我用Claude Code做了个‘家庭药箱智能过期提醒’网页——妈妈扫了码，第二天就让邻居阿姨们组团来学

我妈的药箱在阳台柜子最上层，落灰、难找、过期药堆成山。上个月她吃错了一盒2021年的降压药，吓坏全家。

我没买智能药盒，没接IoT传感器，就在周末下午用Cursor+Claude Code做了个网页：她扫二维码，点「+新增药品」，输入药名、有效期（选日期）、数量，点保存——整个药箱列表立刻渲染出来，临期（≤30天）药品自动红底白字，过期药品闪动提醒。

最绝的是：所有数据存在微信浏览器的 localStorage 里，关掉页面不丢，换手机扫同一个码也不丢（只要还在同一台设备）。

✅ Step-by-step 教你搭（新手友好，全程图形界面）：

Cursor 新建 index.html → Ask Claude Code：

> “生成一个单页HTML药箱管理器：① 表单含药品名（文本框）、有效期（日期选择器）、数量（数字框）；② 提交后存入localStorage，键名为‘medicine-cabinet’；③ 页面加载时读取并渲染表格，每行显示药名、有效期、剩余天数；④ 剩余≤30天标红，≤0天闪烁；⑤ 表格右上角加‘清空全部’按钮；⑥ 适配微信浏览器，字体加大，按钮加阴影。”

Claude 返回后，微调两处（提升体验）：

- 日期选择器默认值设为今天：<input type="date" value="2024-06-15"> → 改为 JavaScript 动态写入：

     document.querySelector('input[type=date]').valueAsDate = new Date();
     

- 闪烁效果用 CSS 动画（避免JS频繁重绘）：

     @keyframes blink { 50% { opacity: 0.3; } }
     .expired { animation: blink 1.5s infinite; }
     

部署：Vercel → 得到链接 → 用「草料二维码」生成带Logo的扫码图（上传药箱照片作背景图）→ 打印贴药箱上

妈妈实操教学（3分钟搞定）：

- 扫码 → 点「+新增药品」→ 输“阿司匹林肠溶片” → 点日期选“2025-03-20” → 输数量“30” → 点保存；
- 页面立刻刷新，表格里出现一行，剩余天数显示“282”（绿色）；
- 她又加了“维生素D滴剂 2024-07-10”，剩余天数“25” → 自动变红；
- 第三天她加了“氯雷他定片 2024-06-12”，剩余“-3” → 开始闪烁，她笑着拍视频发群：“快来看，药自己喊过期了！”

💡 接单升级点（已成交3单）：

给社区养老中心定制版：增加「语音录入」按钮（用Web Speech API），老人说“速效救心丸，2025年1月到期”，自动填充表单；

加「导出Excel」功能（SheetJS内联），物业上门服务时一键导出全楼老人药箱清单；

做成微信小程序（用 Taro），复用同一套逻辑，提交审核时备注“纯前端本地存储，无用户数据上传”，过审极快。

技术不在多，而在准。解决一个真实痛点，比十个炫酷Demo更有力量。