用AI编程做了个睡眠计算器，结果我每天都能准时醒了
😴 睡得准，起得轻松，只需要一个AI计算器。 市面上的“睡眠计算器”很多，但大多是些静态表格，没逻辑、没个性、也没灵魂。我们想做的，是一个真正 贴合你生活节奏、懂你睡眠习惯 的AI小工具。 结果真做出来了，而且越用越上头。 📍地址送上： 👉 https://sleep.aiprime.us （开发体验版） 👉 https://sleepcal.pro（专业增强版） 🧠 睡眠节律的科学基础：为什么需要计算？ 睡眠不是简单地“睡够八小时”就好。现代研究表明： 人类的睡眠以 90分钟为一个周期，每周期包括浅睡、深睡与REM阶段； 若在深度睡眠中被闹钟惊醒，醒后会持续“脑雾”； 正确的做法是：规划睡眠点或起床点，让自己在周期结束自然醒来。 而市面上许多睡眠计算器只是粗略的“倒推7.5小时”，我们觉得不够，于是重写逻辑。 ✨ Sleep Calculator 的核心功能逻辑 我们设计的核心Prompt逻辑如下： 如果用户输入“起床时间”，我们生成： 最佳睡眠时间候选（3~5个），以90分钟为单位回退 加入入睡缓冲时间（默认15分钟） 如果用户输入“现在就想睡”，我们生成： 最佳起床时间候选（从现在起推演每90分钟周期） 用视觉提示强调“第1个最推荐”的时间点 Prompt 示例： “基于用户选择的起床时间（如7:00AM），请计算5个对应的睡眠时间点，考虑每个睡眠周期为90分钟，并额外加入15分钟入睡时间。” 输出会形成结构良好的数组，再由JS前端展示为卡片 UI。 🧪 技术实现说明：用AI辅助构建网页 整套计算器采用 Hugo + PaperMod 作为静态网站架构，页面完全用 HTML/CSS/JS 实现，不依赖后端。 构建步骤： Sleep Cycle 计算逻辑（JS函数） function calculateSleepTimes(wakeTime) { const cycle = 90 * 60 * 1000; // 90分钟 const fallAsleepBuffer = 15 * 60 * 1000; // 15分钟 let results = []; for (let i = 6; i >= 3; i--) { let sleepTime = new Date(wakeTime.getTime() - i * cycle - fallAsleepBuffer); results.push(sleepTime); } return results; } 前端样式 UI 设计 每个时间点显示为圆角卡片 使用 Tailwind CSS 定制风格 使用动画（framer-motion）提升交互体验 音频播放功能（助眠音效） <audio id="white-noise" loop> <source src="/audio/white-noise.mp3" type="audio/mpeg" /> </audio> 用户点击“Bed Now”后，会切换页面并默认播放所选音效。 ...