手机+Claude Code：零服务器搭建iNaturalist观察记录工具全流程

背景：一次露营中的即兴开发

Simon Willison——知名开发者、Datasette 创始人——在一次周末露营中，仅用手机和 Claude Code 就完成了一个完整的自然观察记录展示工具。这个项目展示了 AI 编程助手如何让开发者在任何场景下都能快速构建实用工具。

Simon Willison 是 Django Web 框架的联合创始人之一，后来创建了 Datasette——一个将 SQLite 数据库即时转化为可浏览、可查询 API 的开源工具。他长期倡导"数据即基础设施"的理念，是 Git Scraping 技术的主要推广者，也是 AI 辅助编程领域最活跃的实践者和记录者之一。他的博客和社交媒体上持续分享大量 LLM 编程实践案例，对开发者社区产生了广泛影响。

他的需求很简单：将自己在 iNaturalist（一个全球性的自然观察社区平台）上两个不同账号的观察记录，按时间和地点进行聚合展示。iNaturalist 是由加州科学院和国家地理学会联合运营的全球最大公民科学平台之一，拥有超过 1.5 亿条物种观察记录。用户通过拍照上传动植物观察，平台结合社区鉴定和计算机视觉模型进行物种识别。其开放 API 允许开发者按用户、地理区域、物种分类等维度查询数据，返回包含坐标、时间戳、分类学信息和多分辨率图片 URL 的结构化 JSON。这种开放数据生态使得像 Simon 这样的开发者能够在其基础上构建个性化工具。

但实现过程涉及了 CLI 工具开发、自动化数据抓取和前端页面构建三个环节。

技术架构：三层递进的优雅设计

第一层：Python CLI 数据聚合工具

Simon 首先构建了一个名为 inaturalist-clumper 的 Python 命令行工具，用于从 iNaturalist API 获取观察数据并进行"聚合"（clumping）处理。

聚合的逻辑很实用：默认将时间间隔 2 小时以内、地理距离 5 公里以内的观察记录归为同一组。这意味着一次散步或一次野外考察中的所有发现会被自然地归类在一起，而不是散落成零碎的单条记录。这种基于时空邻近性的聚类方法在地理信息系统（GIS）领域被广泛使用，核心思想是：如果两条记录在时间和空间上足够接近，它们很可能属于同一次活动。通过参数化设计（时间阈值和距离阈值均可配置），工具在通用性和易用性之间取得了良好的平衡。

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

第二步是设置 simonw/inaturalist-clumps 仓库，利用 Simon 自己推广的 Git Scraping 技术——通过 GitHub Actions 定时运行脚本，将结果提交到仓库中的 clumps.json 文件。

Git Scraping 是 Simon Willison 在 2020 年系统化提出的一种数据采集范式。其核心思想是利用 GitHub Actions 的定时触发（cron）功能，周期性地运行脚本抓取外部数据源，然后将结果以 JSON、CSV 等格式提交到 Git 仓库。由于 Git 天然记录每次提交的差异，这种方式不仅实现了数据的持续更新，还自动获得了完整的变更历史——开发者可以回溯任意时间点的数据状态。相比传统的数据库存储方案，Git Scraping 无需维护服务器、数据库或 API 层，GitHub 免费账户即可支撑大量小型数据采集任务。目前社区已有数百个基于此模式的项目，涵盖政府数据监控、价格追踪、疫情数据归档等场景。

这个设计的巧妙之处在于：GitHub 上的原始文件天然支持 CORS 跨域访问，任何前端页面都可以直接通过 fetch() 请求获取这份数据，无需额外搭建 API 服务器。具体来说，GitHub 提供的 raw.githubusercontent.com 域名用于直接访问仓库中的原始文件内容，其响应头中包含 Access-Control-Allow-Origin: * 设置，意味着任何域名下的前端 JavaScript 代码都可以直接请求这些文件，而不会被浏览器的同源策略拦截。此外，GitHub 在全球部署了 CDN 节点对这些静态文件进行缓存分发，虽然缓存刷新存在几分钟的延迟，但对于非实时性要求的数据展示场景已经完全够用。Git Scraping 本质上把 GitHub 仓库变成了一个免费的、带版本历史的数据托管平台。

第三层：AI 生成的前端展示页面

最后一步是最令人印象深刻的部分。Simon 对 Claude Code 发出了一段精确的 Prompt，要求生成一个单页 HTML 应用：

从 GitHub 获取 JSON 数据
使用 iNaturalist 的缩略图 URL（small.jpg）展示所有观察记录
支持 loading=lazy 懒加载优化性能
点击缩略图时在模态框中展示大图（large.jpg）
同时显示物种的常见名称

HTML 原生的 loading=\"lazy\" 属性是浏览器级别的延迟加载机制，于 2019 年在 Chromium 内核中首次实现，现已被所有主流浏览器支持。当图片元素设置此属性后，浏览器会根据图片与视口（viewport）的距离自动判断加载时机——只有当用户滚动到图片即将进入可视区域时才发起网络请求。对于包含大量缩略图的画廊类页面，这一优化可以将初始页面加载时间减少 50% 以上，同时显著降低带宽消耗。在移动网络环境下（如露营场景中的手机热点），这种优化的实际效果尤为明显。

一段 Prompt，一个完整的交互式图片画廊就此诞生。

值得关注的技术亮点

手机端也能做全栈开发

整个项目是在手机上完成的。Claude Code 是 Anthropic 推出的面向开发者的 AI 编程工具，支持通过终端命令行或 Web 界面进行交互式编程。其 Web 版本可在移动浏览器中运行，使开发者无需安装本地 IDE 即可进行代码生成、调试和项目构建。Claude Code 能够理解项目上下文、读写文件系统、执行 shell 命令，并根据自然语言描述生成完整的代码文件。这种能力在传统移动开发场景中几乎不可能实现——手机上缺乏成熟的代码编辑器、终端模拟器和构建工具链，而 AI 编程助手通过将复杂的编码操作抽象为自然语言对话，从根本上绕过了这些限制。

在露营这种非典型开发场景下，AI 编程助手弥补了移动设备上缺乏完整 IDE 的短板，重新定义了"开发环境"的边界。

Prompt 驱动开发：一段描述就是规格说明书

Simon 给 Claude Code 的 Prompt 本身就是一份精炼的技术规格说明。它包含了数据源 URL、图片 URL 模式、交互行为、性能优化要求（懒加载）和内容展示需求。这种 Prompt 驱动开发的模式正在成为越来越多开发者的日常工作流。

值得注意的是，Prompt 驱动开发对开发者提出了新的能力要求：你需要足够清晰地描述技术需求，包括数据结构、交互逻辑、边界条件和性能约束。这本质上是一种"声明式编程"的延伸——开发者描述"要什么"，AI 负责实现"怎么做"。但与传统声明式编程不同的是，Prompt 使用的是自然语言而非形式化语法，这既降低了入门门槛，也对表达的精确性提出了更高要求。经验丰富的开发者往往能写出更高质量的 Prompt，因为他们清楚哪些技术细节是关键的、哪些可以留给 AI 自行决策。

零服务器架构：完全基于 GitHub 基础设施

整个系统没有任何自建服务器：

数据获取：GitHub Actions 定时任务
数据存储：GitHub 仓库（JSON 文件）
数据分发：GitHub 原始文件 CDN
前端托管：GitHub Pages

这是一个完全基于 GitHub 基础设施的零成本解决方案，对个人项目和小型工具来说极具参考价值。这种架构模式有时被称为"GitHub 全家桶"——将 GitHub 从单纯的代码托管平台扩展为集 CI/CD、数据存储、静态托管于一体的全栈基础设施。当然，这种方案也有其局限性：GitHub Actions 免费额度每月 2000 分钟（公共仓库无限制）、单个文件大小限制 100MB、原始文件 CDN 存在缓存延迟等。但对于数据量适中、更新频率不高的个人项目，这些限制几乎不构成实际障碍。

对开发者的启示

Simon Willison 的这个小项目虽然规模不大，但它清晰地展示了 AI 辅助开发的实际价值——不是替代开发者的思考，而是加速从想法到实现的过程。架构设计、数据流规划、技术选型这些核心决策仍然由开发者完成，AI 负责处理具体的代码实现。

当一个经验丰富的开发者能在露营途中、用手机就完成一个涵盖数据采集、自动化更新和前端展示的完整项目时，我们或许应该重新思考"开发环境"这个概念的边界。工具在变，但架构思维和工程判断力的价值不会改变。

核心要点

Simon Willison 在露营中仅用手机和 Claude Code 完成了一个完整的 iNaturalist 观察记录展示工具
项目采用三层架构：Python CLI 数据聚合 → Git Scraping 自动化更新 → AI 生成的前端页面
利用 Git Scraping 技术将 GitHub 仓库变为免费的数据托管和分发平台，实现零服务器架构
通过一段精确的 prompt 即可生成包含懒加载、模态框交互的完整前端应用
展示了 AI 辅助开发的核心价值：开发者负责架构决策，AI 加速代码实现