手机上用Claude Code构建iNaturalist观察记录展示工具全流程

项目背景：露营时用手机写代码

Simon Willison（知名开发者、Datasette 创始人）最近分享了一个周末项目：露营期间，他完全用手机和 Claude Code for web，搭建了一个展示 iNaturalist 自然观察记录的工具。没有笔记本电脑，没有本地开发环境，整个过程在手机浏览器里完成。

Simon Willison 是 Django Web 框架的联合创始人之一，后来创建了 Datasette——一个将 SQLite 数据库即时转化为可交互 API 和数据浏览界面的开源工具。他长期倡导"数据新闻"和"个人数据基础设施"理念，认为每个人都应该能轻松地探索和发布结构化数据。他也是 AI 辅助编程领域最活跃的实践者和记录者之一，在博客上持续分享使用 LLM 进行软件开发的经验。

iNaturalist 则是由加州科学院和国家地理学会联合运营的全球最大公民科学平台之一，用户可以上传在野外拍摄的动植物照片，平台通过 AI 图像识别和社区专家协作来鉴定物种。截至 2024 年，该平台已积累超过 2 亿条观察记录，覆盖 40 多万个物种。iNaturalist 提供了完善的开放 API，允许开发者按用户、地理区域、物种分类等维度查询数据，这正是 Simon 这个项目的数据基础。

这个项目本身功能不复杂，但它背后的开发方式值得关注——当 AI 编程助手足够强大时，开发者在任何场景下都能把想法快速变成可用的工具。

三层架构设计详解

第一层：Python CLI 数据处理工具

Simon 首先构建了一个名为 inaturalist-clumper 的 Python 命令行工具，负责从 iNaturalist API 拉取观察数据并做"聚类"处理。

核心逻辑是：将时间间隔在 2 小时内、地理距离在 5 公里内的观察记录归为一组（clump），相当于按"一次出行"的维度自动组织数据。这种做法很巧妙——不需要用户手动标记哪些观察属于同一次活动，算法通过时空邻近性自动推断。

这种聚类方法本质上是一种基于密度的时空邻近聚类，与经典的 DBSCAN（Density-Based Spatial Clustering of Applications with Noise）算法思路相似。DBSCAN 通过定义邻域半径和最小点数来发现任意形状的簇，而 Simon 的简化版本用两个直观的阈值——2 小时时间窗口和 5 公里空间距离——来判断两条记录是否属于同一次"出行"。这种方法避免了 K-Means 等算法需要预先指定簇数量的局限性，特别适合处理自然观察这类时空分布不均匀的数据。

第二层：Git Scraping 实现自动化数据更新

Simon 用他自己推广的 Git Scraping 技术，创建了 simonw/inaturalist-clumps 仓库。GitHub Actions 定时运行 CLI 工具，把结果写入 clumps.json 并自动提交。

Git Scraping 是 Simon Willison 在 2020 年提出并推广的一种数据采集模式。其核心思想是：利用 GitHub Actions 的定时任务（cron job）功能，定期运行脚本从外部 API 或网页抓取数据，将结果以 JSON、CSV 等格式存入 Git 仓库，并自动提交变更。由于 Git 天然记录每次提交的差异（diff），这种方式自动形成了数据的完整变更历史，相当于一个免费的时间序列数据库。与传统的爬虫+数据库方案相比，Git Scraping 无需维护数据库服务器，数据天然具备版本控制，且 GitHub 的 Raw 文件服务自带 CDN 和 CORS 支持，可以直接作为静态 API 使用。

Git Scraping 在这里带来了几个实际好处：

零运维：数据自动更新，不需要维护任何服务器
天然支持前端调用：GitHub Raw 文件支持 CORS（Cross-Origin Resource Sharing，跨源资源共享），前端 JavaScript 可以直接 fetch。CORS 是浏览器的一项安全机制，默认情况下网页中的 JavaScript 无法请求与当前页面不同域名的资源。GitHub 的 Raw 文件服务在响应头中设置了 Access-Control-Allow-Origin: *，意味着任何域名下的前端代码都可以直接获取 GitHub 仓库中的文件内容，这是 Git Scraping 模式能够与纯前端应用无缝配合的关键技术前提。
变更可追溯：Git 提交历史自动记录每次数据变化
完全免费：GitHub Actions 为公开仓库提供完全免费的 CI/CD 运行时间，私有仓库则每月有 2000 分钟的免费额度。对于 Git Scraping 这类轻量任务，每次运行通常只需几十秒到几分钟，即使每小时执行一次，一个月的总消耗也远低于免费额度上限。不过需要注意，GitHub 对 Actions 的 cron 调度有一定限制：最短间隔为 5 分钟，且在仓库长时间无活动（通常 60 天）后会自动禁用定时任务，需要手动重新启用。

第三层：纯前端展示页面

最后一步是前端。Simon 给 Claude Code 写了一条精确的 prompt，要求生成一个单页 HTML 应用：

通过 fetch() 获取 GitHub 上的 JSON 数据
用 iNaturalist 的 small.jpg 缩略图展示所有观察记录
加上 loading=lazy 做图片懒加载
点击缩略图时弹出 HTML 模态框，显示 large.jpg 大图
同时展示物种的通用名称

其中 loading=\"lazy\" 是 HTML 原生的图片懒加载属性，于 2019 年在 Chrome 中首次实现，现已被所有主流浏览器支持。当浏览器遇到带有该属性的 <img> 标签时，只有当图片即将进入视口（viewport）时才会发起网络请求加载图片资源。对于包含大量缩略图的页面，懒加载可以显著减少初始页面加载时间和带宽消耗。在此之前，开发者通常需要使用 Intersection Observer API 或第三方 JavaScript 库来实现类似功能，原生属性的出现大大简化了实现成本。

一条 prompt 完成整个前端，这体现了 AI 编程助手在需求明确时的执行效率。

技术亮点分析

手机就是开发环境

整个项目在露营途中通过手机完成。Claude Code for web 让浏览器变成了开发终端，彻底打破了对桌面环境的依赖。

Claude Code 是 Anthropic 推出的面向开发者的 AI 编程工具。其 Web 版本允许用户直接在浏览器中与 Claude 进行代码级别的交互，包括编写、调试和部署代码，而无需安装任何本地开发环境。与传统的 IDE 插件式 AI 助手（如 GitHub Copilot）不同，Claude Code for web 本身就是一个完整的开发界面，这意味着它可以在任何有浏览器的设备上运行——包括手机和平板电脑。这种"零安装"的特性，正是 Simon 能够在露营途中仅凭手机完成整个项目的技术基础。

对于经常有灵感但不在电脑前的开发者来说，这种体验意味着"随时随地可以动手"。

无服务器的完整系统

回顾整个架构，没有用到任何传统意义上的服务器：

功能	实现方式
数据处理	GitHub Actions 定时执行
数据存储	GitHub 仓库中的 JSON 文件
前端托管	纯静态 HTML 页面
运维成本	零

所有组件免费且免维护，特别适合个人项目和原型验证。

Prompt 工程的关键：精确的技术规格

Simon 的 prompt 虽然只有一段话，却包含了完整的技术细节：数据源 URL、图片 URL 的拼接规则、交互行为定义、性能优化策略和内容展示需求。这种精确的需求描述，是高效使用 AI 编程工具的前提。模糊的 prompt 只会换来反复修改，精确的 prompt 一次到位。

对开发者的启示

这个项目规模不大，但它展示了一种可复用的现代开发模式：

分层解耦：数据获取、数据存储、数据展示各自独立，任何一层都可以单独替换
善用免费基础设施：GitHub Actions + GitHub Raw + 静态页面，能撑起大量轻量级应用
AI 负责执行，人负责设计：开发者把精力放在架构思考和需求定义上，代码实现交给 AI
渐进式搭建：先做 CLI 工具验证逻辑，再加自动化流水线，最后补前端展示，逐步构建完整系统

如果你也想快速搭建个人数据展示工具，"Git Scraping + 静态前端 + AI 编程"这套组合拳值得一试。不需要服务器，不需要复杂的部署流程，甚至不需要电脑——一部手机就够了。