Simon Willison用手机+Claude Code搭建iNaturalist观察记录展示工具

Simon Willison 在一次露营旅行中，仅凭手机和 Claude Code，从零搭建了一个展示 iNaturalist 自然观察记录的完整工具链。这个项目展示了 AI 编程助手如何让"随时随地开发"成为现实。

项目背景：用手机开发的起因

iNaturalist 是全球最大的公民科学平台之一，由加州科学院和国家地理学会联合运营，截至2024年已积累超过2亿条观察记录，覆盖超过40万个物种。它的核心机制是社区驱动的物种鉴定——用户上传照片后，其他用户和AI模型会协助识别物种，当多人达成共识时，记录被标记为"研究级别"，这些数据会被同步到全球生物多样性信息网络（GBIF）供科学研究使用。平台提供完善的REST API，支持按用户、地理范围、时间段等维度查询观察记录。

Simon Willison 拥有两个 iNaturalist 账号，他想要一个简单的方式，把两个账号的观察记录按时间分组展示在同一个页面上。

这个需求看似简单，但涉及数据获取、聚合处理、定时更新和前端展示等多个环节。有趣的是，他选择在露营期间、完全在手机上使用 Claude Code 来完成整个开发。Claude Code 是 Anthropic 推出的命令行AI编程工具，它能够直接读写文件系统、执行shell命令、管理Git操作。与传统IDE不同，Claude Code 的纯文本交互界面使其天然适合在手机终端应用中运行。开发者只需通过SSH连接到远程服务器或直接在本地终端中与Claude Code对话，就能完成代码编写、调试和部署的完整流程，这消除了对图形化IDE和大屏幕的依赖。

技术架构：三层无服务器工具链

整个项目由三个独立但相互配合的组件构成，架构设计简洁而巧妙，完全不需要后端服务器。

Python CLI 数据处理工具

Simon 首先构建了一个名为 inaturalist-clumper 的 Python 命令行工具，用于从 iNaturalist API 获取观察记录并进行"聚合"（clumping）处理。所谓聚合，是指将时间间隔在 2 小时以内、地理距离在 5 公里以内的观察记录归为同一组。这种聚合逻辑很好地模拟了"一次外出观察"的概念——你在一次散步或远足中拍到的所有物种，会被自然地归为一组。

这种设计借鉴了轨迹分析中的停留点检测（stay point detection）思想。算法按时间排序遍历观察记录，当相邻记录的时间差超过2小时或空间距离超过5公里时，就开始一个新的分组。地理距离计算通常使用 Haversine 公式，它能根据两点的经纬度计算球面上的大圆距离。这种简单但有效的启发式规则，避免了复杂的聚类算法（如DBSCAN），同时在大多数场景下能准确还原用户的实际出行模式。

Git Scraping 实现自动化更新

第二个组件是 inaturalist-clumps 仓库，采用了 Simon 自己推广的 "Git Scraping" 模式。

Git Scraping 是 Simon Willison 在2020年提出并推广的一种数据采集模式。其核心思想是将 GitHub Actions 的定时任务（cron job）与 Git 的版本控制能力结合：每隔固定时间运行脚本抓取外部数据源，将结果写入仓库中的 JSON/CSV 文件，然后自动提交。如果数据没有变化，Git 不会产生新的提交；如果有变化，差异会被精确记录。这种模式已被广泛用于追踪政府数据变更、监控价格变动、记录 API 响应变化等场景。相比传统的数据库方案，它的优势在于完全免费、自带审计日志、且数据以纯文本形式存储便于分析。

这个设计有几个核心优势：

• 免费托管：GitHub 提供免费的静态文件托管
• CORS 支持：raw.githubusercontent.com 上的文件可以被浏览器端 JavaScript 直接 fetch
• 版本历史：每次更新都有 Git 记录，天然具备数据变更追踪能力
• 零运维成本：不需要维护服务器或数据库

关于 CORS 支持这一点值得展开说明：CORS（跨源资源共享）是浏览器的安全机制，默认阻止网页 JavaScript 请求不同域名下的资源。GitHub 的 raw.githubusercontent.com 域名在响应头中设置了适当的 CORS 策略，允许任何来源的网页通过 fetch API 获取其上托管的文件内容。这意味着开发者可以将 JSON 数据文件存放在 GitHub 仓库中，然后从任何域名的前端页面直接读取这些数据，无需搭建专门的 API 服务器或配置代理。结合 GitHub Pages 或其他静态托管服务，就能实现完全无后端的动态数据展示应用。

纯前端单页展示应用

最后一层是一个单页 HTML 应用，通过 fetch() 请求 GitHub 上的 clumps.json 文件，然后在页面上渲染所有观察记录。页面使用 iNaturalist 的图片 CDN 加载缩略图（small.jpg），点击后在模态框中展示大图（large.jpg），并显示物种的常见名称。图片使用 loading=lazy 实现懒加载，优化了页面性能。

用一段 Prompt 让Claude Code生成前端应用

最引人注目的是前端页面的开发方式。Simon 对 Claude Code 输入了一段描述性的 prompt，明确指定了数据源 URL、缩略图和大图的 URL 模式、懒加载需求、模态框交互以及物种名称展示等所有关键细节。Claude Code 据此直接生成了可用的 HTML 页面。

这段 prompt 的质量值得学习——它没有模糊的描述，每个技术细节都有明确的规格说明。这也印证了一个观点：与 AI 协作编程的核心能力，是精确描述需求的能力。

对开发者的启示

这个项目虽然规模不大，但展示了几个重要趋势：

1. 移动端AI编程的可行性：借助 Claude Code 等 AI 编程助手，在手机上完成完整项目开发不再是天方夜谭
2. 无服务器架构的极致应用：整个项目没有后端服务器，完全依赖 GitHub Actions + 静态文件 + 客户端渲染
3. Git Scraping 模式的实用性：这种将 Git 仓库当作简易数据库的模式，适合个人项目和小规模数据场景
4. AI 辅助的快速原型开发：从想法到可用工具，整个过程可以在露营间隙完成

Simon Willison 一直是 AI 工具的深度实践者，这个项目再次证明，当开发者具备清晰的架构思维和精确的需求表达能力时，AI 编程助手能够极大地加速开发流程，让"周末项目"真正在一个周末内完成。