Simon Willison用手机+Claude Code搭建iNaturalist观察记录工具全过程

概述

Simon Willison（知名开发者、Datasette创始人）在一次露营旅行中，完全使用手机和Claude Code for web，构建了一个展示iNaturalist自然观察记录的完整工具链。这个案例展示了AI辅助编程如何让开发者在极简条件下，快速完成从后端数据处理到前端展示的全栈开发。

Simon Willison是Django框架的联合创始人之一，后来创建了Datasette——一个将SQLite数据库即时转化为可交互API和Web界面的开源工具。他是开发者社区中最早系统性探索LLM辅助编程的实践者之一，长期在博客中记录AI工具的使用心得。他提出的"Git Scraping"概念已被数百个开源项目采用，成为轻量级数据工程的标准模式之一。

项目背景：为什么要在手机上写代码

Simon在iNaturalist（一个全球性的自然观察社区平台）上有两个独立账户，他希望将两个账户的观察记录按时间和地点进行聚合展示。传统做法需要坐在电脑前花费数小时编码，但他选择了一种更具挑战性的方式——在露营途中，仅用手机和Claude Code完成整个项目。

iNaturalist是由加州科学院和国家地理学会联合运营的全球性公民科学平台，拥有超过1.5亿条观察记录和数百万活跃用户。用户通过拍照上传动植物观察记录，平台利用计算机视觉模型辅助物种识别，再由社区专家进行验证。经过验证的"研究级"数据会被同步到全球生物多样性信息网络（GBIF），供科学研究使用。该平台提供完善的REST API，允许开发者按用户、地点、物种等维度查询观察数据，这也是Simon项目的数据基础。

这不仅是一次技术实验，更证明了当AI编程工具足够成熟时，开发者的生产力不再受限于设备。

开发工具：Claude Code for Web

Claude Code是Anthropic推出的面向开发者的AI编程工具，其Web版本允许用户通过浏览器直接与Claude进行代码级别的对话协作。与传统的IDE插件式AI助手不同，Claude Code更接近一个具备完整上下文理解能力的"结对编程伙伴"，能够理解项目结构、生成多文件代码、执行命令行操作，甚至直接与GitHub交互进行代码提交。Web版本的优势在于不依赖本地开发环境，只需浏览器即可使用，这使得在移动设备上进行开发成为可能。

技术架构：三层设计详解

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

首先，他构建了一个名为inaturalist-clumper的Python命令行工具，用于获取和"聚合"观察记录。该工具的核心逻辑是将时间间隔在2小时以内、地理距离在5公里以内的观察记录归为同一组（clump）。这种聚合策略很好地模拟了"一次外出观察"的自然边界。

这里的聚合逻辑本质上是一种基于时空约束的聚类算法。2小时的时间阈值和5公里的距离阈值并非随意选择——它们模拟了一次典型的户外自然观察活动的时空范围。算法实现上，这类似于DBSCAN（基于密度的空间聚类）的简化版本：按时间排序后，依次检查相邻观察记录是否满足时间和距离约束，满足则归入同一组。地理距离计算通常使用Haversine公式，基于经纬度计算球面上两点间的大圆距离。这种方法的优势在于计算复杂度为O(n)，适合处理数千条观察记录。

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

第二步是设置simonw/inaturalist-clumps仓库，利用Simon自己推广的"Git Scraping"技术——通过GitHub Actions定时运行数据抓取脚本，将结果以JSON格式存储在仓库中。这样做的巧妙之处在于：

• 数据自动定期更新，无需人工干预
• GitHub提供免费的静态文件托管
• JSON文件可通过CORS被前端JavaScript直接获取
• Git历史记录提供了天然的数据版本管理

Git Scraping是Simon Willison在2020年提出并推广的一种数据工程模式。其核心思想是将GitHub仓库作为"数据库"使用：通过GitHub Actions的cron定时触发器（通常每小时或每天执行一次），运行脚本从外部API抓取数据，将结果写入仓库中的JSON/CSV文件，然后自动提交。每次数据变化都会产生一个Git commit，这意味着你不仅拥有最新数据，还拥有完整的变更历史。GitHub Pages或Raw URL提供免费的CDN级别文件托管，配合CORS头部设置，前端JavaScript可以直接fetch这些数据文件，完全无需后端服务器。这种模式特别适合更新频率不高（分钟级以上）、数据量适中（单文件不超过100MB）的场景。

第三层：前端展示页面

最后一步是构建前端展示页面。Simon对Claude Code发出了一段精确的提示词，要求生成一个HTML应用，具备以下功能：

• 从GitHub Raw URL获取clumps.json数据
• 使用iNaturalist的小尺寸缩略图（small.jpg）展示所有观察记录
• 图片使用loading=lazy实现懒加载优化性能
• 点击缩略图时在HTML模态框中显示大图（large.jpg）
• 显示物种的通用名称

HTML原生的loading="lazy"属性是浏览器级别的懒加载实现，于2019年在Chrome中首次支持，现已被所有主流浏览器采纳。当图片元素设置此属性后，浏览器会延迟加载视口之外的图片，直到用户滚动到接近该图片的位置时才发起网络请求。对于Simon的项目而言，一个账户可能有数百甚至数千条观察记录，每条都有缩略图，如果一次性加载所有图片将消耗大量带宽并严重影响首屏加载速度。懒加载确保用户只下载当前可见区域的图片，将初始页面加载时间从可能的数十秒降低到1-2秒。

AI辅助开发的关键启示

这个项目有几个值得开发者关注的特点：

极简开发环境也能高效产出

整个项目在手机上完成，不需要IDE、不需要本地运行环境，Claude Code承担了代码生成的主要工作。这打破了"全栈开发必须依赖重型工具链"的固有认知。

提示工程决定产出质量

Simon的提示词虽然只有一段话，但包含了完整的技术规格——数据源URL、图片URL模式、交互方式、性能优化要求（lazy loading）和功能细节（物种名称显示）。这体现了经验丰富的开发者如何高效地与AI协作：需求越精确，产出越可靠。

架构思维仍是人类核心竞争力

AI帮助生成代码，但整体架构设计（CLI → Git Scraping → 静态前端）仍然是人类开发者的智慧。这种无服务器、低维护成本的架构选择，展示了资深工程师的设计哲学。这种架构的运维成本几乎为零：GitHub Actions提供每月2000分钟的免费执行时间，GitHub仓库提供免费的存储和CDN，整个系统无需任何付费服务器，也不存在数据库维护、SSL证书续期、服务器安全补丁等传统运维负担。这正是"Serverless"理念的极致体现——不是使用云函数替代服务器，而是从根本上消除对服务器的需求。

总结

这个项目虽然规模不大，但完美诠释了现代AI辅助开发的工作流：开发者负责架构设计和需求定义，AI负责代码实现。当Claude Code这样的工具足够强大、提示词足够精确时，即使在手机上露营，也能完成一个功能完整的全栈应用。对于想要尝试AI编程的开发者来说，这是一个极具参考价值的实践案例。

核心要点

• Simon Willison在露营时完全使用手机和Claude Code完成了一个完整的全栈工具开发
• 项目采用三层架构：Python CLI数据处理 → Git Scraping自动更新 → 静态前端展示
• Git Scraping技术利用GitHub Actions定时抓取数据，实现零服务器成本的数据自动化
• 精确的提示词设计是AI辅助开发高效产出的关键，一段话即可定义完整的前端应用规格
• 架构设计仍是人类开发者的核心价值，AI更多承担代码实现层面的工作