手机+Claude Code：露营时搭建iNaturalist观察记录展示工具

背景：一个露营周末的即兴开发

Simon Willison——知名开发者、Datasette 创始人——在一次露营旅行中，仅凭手机和 Claude Code，从零搭建了一个完整的 iNaturalist 观察记录展示工具。这个案例完美展示了 AI 编程助手如何让「随时随地写代码」成为现实。

Simon Willison 是 Django Web 框架的联合创始人之一，后来创建了 Datasette——一个将 SQLite 数据库即时转化为可交互 API 和数据探索界面的工具。他的技术哲学一直强调「小而锋利的工具」：每个工具只做一件事，但通过组合可以解决复杂问题。这种 Unix 哲学的现代演绎贯穿了他近年来的所有项目，从 sqlite-utils 到 llm 命令行工具，再到本文介绍的这个露营项目。

iNaturalist 是一个全球性的自然观察社区平台，由加州科学院和国家地理学会联合发起，目前拥有超过 200 万活跃用户和超过 1.5 亿条观察记录。用户上传动植物照片后，平台会结合计算机视觉模型（基于卷积神经网络训练的物种识别系统）和社区专家的人工审核来确认物种。iNaturalist 提供了完善的 RESTful API，允许开发者按用户、地点、时间、物种分类等维度查询观察数据，返回包含地理坐标、物种分类学信息、多分辨率图片 URL 等结构化 JSON 数据。Simon 拥有两个 iNaturalist 账号，他希望将两个账号的观察记录按时间和地点聚合展示在一个页面上。

三层技术架构：小工具组合的精巧设计

整个项目由三个独立但紧密协作的组件构成，体现了 Simon 一贯的「小工具组合」哲学。这种架构思路源自 Unix 的管道设计理念——每个组件通过标准化的数据格式（这里是 JSON）进行通信，彼此独立部署和迭代，任何一层都可以被替换而不影响其他层。

Python CLI 数据处理工具

Simon 首先构建了 inaturalist-clumper，一个 Python 命令行工具，用于从 iNaturalist API 获取观察数据并进行「聚类」（clumping）处理。默认的聚类规则是：时间间隔在 2 小时以内、地理距离在 5 公里以内的观察记录会被归为一组。

这个设计非常巧妙——它本质上是在还原用户的「一次外出观察」行为。当你在某个公园散步两小时，期间拍摄的所有动植物自然应该归为同一次「观察之旅」。从算法角度看，这是一种基于时空约束的贪心聚类方法：按时间排序后，逐条检查相邻记录是否满足时间和空间阈值，满足则归入当前簇，否则开启新簇。相比 DBSCAN 等通用聚类算法，这种方法计算复杂度更低（线性时间），且语义更直观——它假设人类的观察行为在时间上是连续的，不会出现同一次散步中间隔三小时的情况。5 公里的空间阈值则覆盖了大多数步行或短途驾车的观察场景。

Git Scraping 实现自动化数据更新

Simon 利用了他自己推广的 Git Scraping 技术，创建了 inaturalist-clumps 仓库。通过 GitHub Actions 定时运行 clumper 工具，将结果写入 clumps.json 文件并提交到仓库。

Git Scraping 是 Simon 在 2020 年提出并推广的一种轻量级数据追踪模式。其核心思路是：用 GitHub Actions 的 cron 定时任务定期抓取外部数据源，将结果写入仓库文件，然后执行 git add 和 git commit。如果数据没有变化，Git 不会产生新提交；如果数据发生了变化，变化会被精确记录在 Git 的 diff 历史中。这样不仅实现了自动化更新，还天然获得了数据的版本历史——你可以回溯任意时间点的数据状态，分析数据的变化趋势。与传统的爬虫+数据库方案相比，Git Scraping 无需维护数据库服务器，无需编写数据迁移脚本，所有基础设施由 GitHub 免费提供。目前已有数百个公开项目使用这一模式追踪从政府公开数据到航班信息等各类数据源。

更关键的是，GitHub 上的 JSON 文件可以通过 raw.githubusercontent.com 直接被前端 JavaScript 通过 CORS 跨域请求访问——免费的 API 和 CDN 一步到位。

CORS（Cross-Origin Resource Sharing，跨域资源共享）是浏览器的一项安全机制：默认情况下，网页中的 JavaScript 只能请求与当前页面同源（相同协议+域名+端口）的资源。当前端页面托管在 github.io 而数据文件位于 raw.githubusercontent.com 时，这属于跨域请求。GitHub 的 Raw 文件服务在 HTTP 响应头中设置了 Access-Control-Allow-Origin: *，明确允许任何域名的前端代码访问这些文件。这意味着你只需将 JSON 文件推送到 GitHub 仓库，它就自动变成了一个全球可访问的只读 API 端点，无需配置任何服务器、API 网关或 CDN——对于数据量不大、更新频率不高的个人项目来说，这是一个极其优雅的零成本方案。

纯前端单页展示应用

最后一步是构建前端展示页面。Simon 向 Claude Code 发送了一段精确的 prompt，要求生成一个 HTML 应用：

• 通过 fetch() 拉取 GitHub 上的 JSON 数据
• 使用 iNaturalist 的缩略图 URL（small.jpg）展示所有观察记录
• 图片采用 loading=lazy 实现懒加载
• 点击缩略图时在模态框中展示大图（large.jpg）
• 同时显示物种的常见名称

一段不到 100 词的 prompt，就描述清楚了一个功能完整的单页应用。这里提到的 loading=lazy 是 HTML 原生的延迟加载属性（2019 年起被主流浏览器支持），它告诉浏览器只有当图片即将进入视口（viewport）时才开始下载，对于包含大量图片的页面可以显著减少初始加载时间和带宽消耗。在 iNaturalist 这类场景下，一次数据拉取可能包含数百张观察照片，懒加载是必不可少的性能优化手段。

值得关注的工程实践

手机端完成全流程开发

整个项目是在露营期间完全使用手机完成的，这得益于 Claude Code 的 Web 版本。Claude Code 是 Anthropic 推出的 AI 编程助手，支持通过对话方式生成、修改和调试代码。与传统 IDE（如 VS Code 或 JetBrains 系列）不同，它不需要本地安装编译器、包管理器或运行时环境——所有代码生成和逻辑推理都在云端完成，用户只需要一个浏览器和网络连接。这意味着开发者可以在手机浏览器中完成从需求描述到代码生成的全过程，然后通过 GitHub 的 Web 界面或 API 将代码推送到仓库，由 GitHub Actions 完成后续的构建和部署。

这不是一个简单的 demo，而是包含后端数据处理、自动化流水线和前端展示的完整系统。AI 编程助手正在重新定义「开发环境」的边界——你的开发环境就是你能打字的任何地方。

零成本无服务器架构

这个项目没有任何传统意义上的服务器：

功能层	实现方式	成本
数据处理	GitHub Actions 免费算力	免费
数据存储	GitHub 仓库	免费
数据分发	GitHub Raw CDN（支持 CORS）	免费
前端托管	GitHub Pages	免费

零成本运维，零服务器管理，但功能完整、自动更新。对于个人项目和小型工具来说，这套方案几乎是最优解。值得注意的是，GitHub Actions 对公开仓库提供每月 2000 分钟的免费运行时间，GitHub Pages 对单个站点有 1GB 的存储限制和每月 100GB 的带宽限制，Raw CDN 也有速率限制。但对于个人工具级别的项目，这些限制几乎不会触及。这套架构的真正局限在于：它只适合读多写少、数据量可控的场景——一旦需要用户交互写入、实时数据处理或大规模并发访问，就需要引入真正的后端服务。

Prompt 即规格说明书

Simon 给 Claude Code 的 prompt 堪称范本：明确指定了数据源 URL、图片 URL 模式、交互行为（点击放大）、性能优化（懒加载）和内容要求（物种名称）。没有模糊的描述，每一句都是可验证的功能需求。

这提醒我们：与 AI 协作编程的核心能力，是精确描述需求的能力。模糊的指令只会得到模糊的结果，而结构化的需求描述能让 AI 一次性生成可用的代码。这种能力本质上与传统软件工程中的「需求规格说明书」（SRS, Software Requirements Specification）编写能力高度重合。区别在于，传统 SRS 是写给人类开发团队的，需要考虑沟通效率和理解歧义；而写给 AI 的 prompt 更接近于形式化规约——越具体、越可验证、越少歧义，AI 的输出质量就越高。Simon 的 prompt 之所以有效，是因为他作为资深开发者，能够在脑中完成架构设计，然后将实现细节精确地传达给 AI。这说明 AI 编程工具放大的是开发者已有的设计能力，而非替代它。

总结：AI 编程工具的真正价值

这个小项目浓缩了现代开发的多个趋势：AI 辅助编程降低了开发门槛和环境依赖，Git Scraping 提供了轻量级的数据自动化方案，GitHub 生态则充当了免费的全栈基础设施。当一个经验丰富的开发者遇上趁手的 AI 工具，即使在露营帐篷里用手机，也能在短时间内交付一个完整可用的产品。

这或许就是 AI 编程工具最有价值的应用场景——不是替代开发者，而是让开发者在任何时间、任何地点，都能将灵感快速转化为现实。从更宏观的视角看，这个案例代表了一种正在形成的新开发范式：开发者的核心价值从「编写代码」转向「设计系统和描述需求」，AI 承担了从需求到实现的翻译工作，而云端基础设施（GitHub、Cloudflare Workers、Vercel 等）则消除了运维负担。在这个范式下，一个人加一个 AI 就能完成过去需要小团队数天才能交付的工作——前提是这个人具备清晰的架构思维和精确的需求表达能力。

核心要点

• Simon Willison 在露营期间仅用手机和 Claude Code 构建了完整的 iNaturalist 观察记录展示系统
• 项目采用三层架构：Python CLI 数据聚类工具 + Git Scraping 自动化更新 + 纯前端展示页面
• 利用 GitHub 生态（Actions + Raw CDN + Pages）实现零成本、零服务器的全栈部署
• 一段不到 100 词的精确 prompt 就能让 AI 生成功能完整的单页应用
• 展示了 AI 编程助手如何让「随时随地开发」成为现实