🌐实时体验 NatureFit: https://drishya-code.github.io/NatureFit/

🌿 NatureFit:把出门变成一场自然探索

如果出门不只是为了计步或计算卡路里呢?

如果你的锻炼还能让你放慢脚步,留意周围的事物,并真正与自然互动呢?

这就是NatureFit背后的理念。

我构建 NatureFit,是把它作为一个由 AI 驱动的户外健身体验,将身体活动和自然探索变成一个个小任务。

NatureFit 不是简单地告诉你去锻炼,而是给你一个出门的理由——去探索周围环境、活动身体,并完成一项挑战。

🌱 理念

大多数健身应用都高度聚焦于数字:

  • 步数
  • 卡路里
  • 距离
  • 锻炼时长

这些指标很有用,但我想尝试一些不同的东西。

如果自然本身成为锻炼的一部分呢?

NatureFit 在每一个任务中结合了两件事:

🌿 自然 + 🏃 运动

一个任务可以要求你在完成一项身体活动的同时,去发现或观察周围的某些事物。

目标很简单:

出门。动起来。留意一些事物。

并把它变成一项任务。

🎯 NatureFit 如何运作

基本流程是:

创建任务 → 获取自然 + 运动任务 → 开始 → 完成任务 → 提供证据 → 获得 XP → 建立你的日志

创建任务时,用户可以选择诸如活动类型、时长、健身水平和环境等选项。

随后 NatureFit 会生成一项自然与运动相结合的挑战。

例如,一个任务可能会要求你:

🌿 在自然中发现并观察一些有趣的事物。

🏃 完成一项简短的运动活动。

📸 提供所需的证据。

⭐ 完成任务后获得 XP。

这个理念是为了让户外活动感觉不再像一份清单,而更像一场小小的冒险。

🤖 AI 在哪里发挥作用

AI 用于根据用户选择的偏好生成多样化的户外任务。

我不想让 AI 成为整个产品。相反,它有一项特定的工作:帮助创造有趣且多样化的自然 + 运动挑战。

还有一个离线备用方案。

如果 AI 生成不可用,NatureFit 会改用其现成的任务库。

应用会明确告知用户何时使用了回退方案,而不是假装生成了一个 AI 生成的任务。

🔒 让 AI 保持诚实

我特别想避免的一件事,就是让 AI 做出应用实际上无法支持的说法。

NatureFit 不会不会假装自动验证用户的:

  • GPS 距离
  • 步数
  • 身体活动
  • 位置

照片证据目前是基于在场与否的,而不是假装 AI 模型已经理解了图像中的一切。

运动数据同样是用户自行上报的。

我认为,诚实地说明技术能验证什么、不能验证什么,比添加听起来很厉害的 AI 说法更重要。

🏆 无法轻易刷取的 XP

还有另一个我想思考的问题:

什么能阻止有人反复生成任务来刷 XP?

生成任务给予0 XP。

开始任务给予0 XP。

XP 是通过实际完成任务来获得的。

完成任务时,其完成奖励也只发放一次。

在测试期间,我实际上发现了一个 bug:快速双击“完成任务”按钮会发放两次完成奖励。

这个问题通过一次性完成防护修复了,并为此添加了回归测试。

这很好地提醒了我,测试真实的用户流程能揭示出仅仅阅读代码所无法发现的问题。

📱 以 PWA 形式构建

NatureFit 是作为渐进式 Web 应用构建的。

它可以在浏览器中使用,也能在支持的设备上像应用一样安装。

该应用还提供了带有现成任务的离线体验,因此失去网络连接不会完全中断体验。

目标是让 NatureFit 成为真正有意义的东西在户外,而不是只能在桌面上舒适使用的东西。

🧪 认真测试

我不想止步于:

“在我的机器上能跑。”

我对 NatureFit 进行了完整的测试,覆盖主要用户旅程、AI 行为、PWA 功能、无障碍性和边缘情况。

最终结果:

测试领域 结果
逻辑 24/24
AI 路径 39/39
端到端 40/40
PWA 20/20
无障碍性 17/17
边缘情况 13/13
总计 153/153

我还测试了多种视口尺寸,包括移动端和桌面端,并检查了键盘导航、焦点可见性、对比度、减少动态效果行为以及布局问题。

最终修改后,还测试了线上 GitHub Pages 部署。

🛠️ 技术栈

  • React
  • JavaScript
  • Vite
  • 渐进式 Web 应用
  • AI 驱动的任务生成
  • 本地浏览器存储
  • Playwright
  • Node.js

🌍 我为什么做它

动机很简单。

我们已经有很多应用告诉我们走了多少步。

我想做点东西,给我们一个理由真正走出去,并留意自己身在何处。

而不是:

“步行 30 分钟。”

NatureFit 可以把它变成:

“出门去,发现点有趣的东西,活动一会儿,完成你的任务。”

这个小改变让这项活动感觉更有目的性。

🚧 当前局限

NatureFit 仍是一个项目,所以有些事情它现在还做不到。

目前:

  • 没有 GPS 或距离追踪。
  • 运动证据由用户自行报告。
  • 照片验证基于是否在场。
  • 没有跨设备同步。
  • AI 任务生成需要联网。
  • 实体相机拍摄和 iOS PWA 安装仍需在真实设备上测试。

我宁愿记录这些局限,也不想假装这个应用能做到它目前做不到的事。

🔮 下一步?

有不少方向我想探索:

  • 更好的任务个性化
  • 更有趣的自然探索挑战
  • 更强的证据验证
  • 基于 GPS 的户外挑战
  • 更好的移动端传感器集成
  • 跨设备同步
  • 更高级的长期进度追踪

但核心理念会保持不变:

自然 + 运动 + 一点点好奇心。

🌿 试试 NatureFit

在线演示

https://drishya-code.github.io/NatureFit/

GitHub

https://github.com/Drishya-code/NatureFit


最后感想

构建 NatureFit 让我思考,技术在试图让我们更健康的同时,是多么容易把我们留在室内。

所以我想把技术用于相反的目的。

不是让你继续盯着另一个屏幕。

而是给你一个放下屏幕的理由。

走出去。

探索。

动起来。

留意点什么。

这就是 NatureFit。🌿


为Hacktoberfest 2026 第 1 周 — Touch Grass挑战而构建。

我很想知道:

你希望 NatureFit 为你生成什么样的户外任务?