Simon Willison用手机+Claude Code开发iNaturalist观察记录展示工具全过程

背景：一次露营途中完成的完整项目

Simon Willison——知名开发者、Datasette 创始人——在一次周末露营中，仅用手机和 Claude Code 就完成了一个完整的 Web 工具开发。Simon 是 Django Web 框架的联合创始人之一，后来创建了 Datasette——一个将 SQLite 数据库文件即时转化为可交互 API 和数据探索界面的开源工具。他长期倡导"小工具"理念，主张用最简单的技术栈解决具体问题，而非构建庞大的系统，同时也是 AI 辅助编程领域最活跃的实践者和记录者之一。

这个工具用于展示他在 iNaturalist（一个全球性的自然观察社区平台）上两个不同账号的观察记录，并按时间和地点进行智能分组。iNaturalist 是由加州科学院和国家地理学会联合运营的全球最大公民科学平台之一，拥有超过 2 亿条生物观察记录。用户通过拍照上传动植物观察，平台利用计算机视觉模型进行物种自动识别，再由社区专家进行验证。达到"研究级别"的观察数据会被同步到全球生物多样性信息网络（GBIF），直接用于学术研究。iNaturalist 提供了完善的 RESTful API，支持按用户、地理范围、分类群等维度查询观察数据，这正是 Simon 项目的数据基础。

整个项目的构建过程展示了 AI 辅助编程当前的实际能力边界——不需要坐在电脑前，不需要复杂的开发环境，一部手机加上 AI 编码助手就能完成从后端数据处理到前端展示的全链路开发。

技术架构：三层递进式设计

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

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

聚类的默认规则非常直观：时间间隔在 2 小时以内、地理距离在 5 公里以内的观察记录会被归为同一组。这意味着同一次户外活动中的所有发现会自动聚合在一起，形成一次完整的"目击事件"记录。

这种时空聚类方法本质上是一种基于阈值的连通分量聚类，类似于数据挖掘中经典的 DBSCAN（Density-Based Spatial Clustering of Applications with Noise）算法的简化版本。DBSCAN 通过定义邻域半径和最小点数来发现任意形状的簇，而 Simon 的实现更为简洁——仅使用时间差和空间距离两个阈值，将连续的观察记录串联成组。这种设计与户外活动的实际节奏高度吻合：一次徒步或观鸟活动通常持续数小时，活动范围在几公里以内。地理距离的计算通常使用 Haversine 公式，它基于球面三角学计算地球表面两点间的大圆距离，考虑了地球曲率的影响。

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

数据处理工具有了，接下来需要让数据保持更新。Simon 采用了他自己推广的 Git Scraping 技术——通过 GitHub Actions 定时运行脚本，将结果提交到 Git 仓库中。

Git Scraping 是 Simon Willison 在 2020 年提出并推广的一种数据追踪模式。其核心思想是将 Git 版本控制系统"滥用"为时间序列数据库：通过 GitHub Actions 的 cron 定时任务（基于 POSIX cron 语法，最高频率为每 5 分钟一次）定期运行爬虫脚本，将抓取结果提交到仓库。由于 Git 天然记录每次提交的差异（diff），用户可以通过 git log 和 git diff 追溯数据的完整变更历史。这种模式已被广泛应用于追踪政府公开数据变更、监控网站价格变动、记录 API 响应变化等场景。GitHub 对公开仓库提供免费的 Actions 运行时间（每月 2000 分钟），使得这种方案的运营成本几乎为零。

具体来说，simonw/inaturalist-clumps 仓库会自动运行 clumper 工具，并将聚类结果保存为 clumps.json 文件。由于该文件托管在 GitHub 上，天然支持 CORS 跨域访问，前端 JavaScript 可以直接通过 fetch 获取数据。

CORS（Cross-Origin Resource Sharing，跨源资源共享）是浏览器实施的一项安全策略。默认情况下，浏览器中的 JavaScript 只能向与当前页面同源（相同协议、域名、端口）的服务器发起请求，这就是同源策略（Same-Origin Policy）。当前端代码需要从不同域名获取数据时，目标服务器必须在 HTTP 响应头中包含 Access-Control-Allow-Origin 字段来明确授权。GitHub 的 raw.githubusercontent.com 域名默认设置了允许任意来源访问的响应头，使得任何网页都能直接通过 fetch API 获取托管在 GitHub 上的原始文件内容。

这种架构的巧妙之处在于：用 Git 仓库充当免费的 JSON API 服务，无需维护任何服务器或数据库。

第三层：Claude Code 生成纯前端展示页面

最后一步是构建前端展示页面，这一步完全通过一段自然语言 prompt 交给 Claude Code 完成。

Claude Code 是 Anthropic 推出的命令行 AI 编码代理工具，与传统的聊天式 AI 助手不同，它能够直接在终端环境中读取项目文件、执行命令、编写和修改代码。它基于 Claude 大语言模型，支持理解完整的项目上下文并进行多步骤的代码生成与调试。在 Simon 的案例中，Claude Code 通过终端应用在手机上运行，接收自然语言描述的需求后，自动生成包含 HTML 结构、CSS 样式和 JavaScript 交互逻辑的完整前端代码。这种工作模式将编程的瓶颈从"代码编写"转移到了"需求表达"——开发者的核心工作变成了如何精确描述想要的技术行为。

Simon 的提示词非常精确，包含了以下关键技术要求：

• 使用 fetch() 从 GitHub 原始文件地址获取 JSON 数据
• 使用 iNaturalist 的 small.jpg URL 格式展示缩略图
• 添加 loading=lazy 实现图片懒加载
• 点击缩略图时在 HTML 模态框中展示 large.jpg 大图
• 同时显示物种的常见名称（如果有的话）

HTML 原生的 loading=\"lazy\" 属性是 2019 年引入的浏览器级别懒加载方案，目前已获得所有主流浏览器支持。其工作原理是：浏览器通过 Intersection Observer API 监测图片元素与视口（viewport）的交叉状态，只有当图片即将进入可见区域时才发起网络请求加载图片资源。在此之前，开发者需要手动编写 JavaScript 代码或引入第三方库来实现类似功能。对于 Simon 这种包含大量自然观察照片的画廊页面，懒加载可以显著减少初始页面加载时间和带宽消耗——用户可能有数百甚至数千张缩略图，但首屏通常只需加载十几张。

一条 prompt，一个完整的交互式图片画廊就生成了。

值得关注的几个设计理念

无服务器架构的极致实践

整个项目没有任何传统意义上的后端服务器。数据存储用 GitHub 仓库，数据更新用 GitHub Actions，前端是纯静态 HTML。这种"零运维"架构对于个人项目来说几乎是理想方案——没有服务器费用，没有宕机风险，没有维护负担。

这种模式也被称为 Jamstack 架构的一种变体。Jamstack（JavaScript、APIs、Markup）强调预构建和解耦，将动态功能交给第三方 API 和客户端 JavaScript 处理，静态资源则通过 CDN 全球分发。Simon 的实现更为极端——连专门的静态站点生成器都省略了，直接用一个 HTML 文件加上远程 JSON 数据完成所有工作。

手机编程：AI 正在改变写代码的方式

这个案例的特殊之处在于它的开发环境——手机。Simon 在露营途中完成了整个项目，这说明 AI 编码工具正在重新定义"什么时候可以写代码"。当 Claude Code 能够理解一段结构化的自然语言描述并生成可用的代码时，键盘和 IDE 不再是编程的必要条件。

这一转变的深层意义在于，编程正在从一种需要精确语法记忆和快速键入能力的技能，转向一种更接近"架构思维"和"需求工程"的能力。开发者的价值越来越体现在对问题的分解能力、对技术方案的判断力，以及对 AI 输出结果的审查和修正能力上。手机屏幕上的小键盘不再是障碍，因为你需要输入的不再是数百行精确的代码语法，而是几段清晰的自然语言描述。

Prompt 工程的实用范例

Simon 给 Claude Code 的 prompt 值得仔细研读。它不是模糊的需求描述，而是包含了具体的 URL 模式、HTML 特性（lazy loading、modal）、数据字段（common species names）等精确信息。好的 AI prompt 本质上就是一份精简的技术规格说明书。

这种 prompt 编写方式体现了一个重要原则：给 AI 的指令应该在"做什么"层面足够具体，但在"怎么做"层面保留灵活性。Simon 明确指定了数据源 URL、图片尺寸规格、交互行为等确定性需求，但没有规定具体的 CSS 布局方案或 JavaScript 实现细节。这种"约束边界条件、释放实现空间"的策略，能让 AI 在其擅长的代码生成领域充分发挥，同时确保输出结果符合开发者的核心预期。

总结

这个项目虽然规模不大，但它完整展示了一种现代个人工具开发的范式：用 Python 处理数据、用 Git Scraping 实现 GitHub Actions 自动化、用 Claude Code 生成前端代码、用 GitHub 托管一切。整个流程中，开发者的核心价值不在于写了多少行代码，而在于架构设计的巧思和对工具链的精准把控。

对于想要尝试 AI 辅助编程的开发者来说，这是一个极好的参考案例——从一个真实需求出发，用最轻量的技术栈，在最受限的环境下，交付一个完整可用的产品。这也印证了软件开发领域一个正在发生的深刻转变：编程的核心竞争力正在从"代码实现能力"向"系统设计能力"和"工具编排能力"迁移，而 AI 正是加速这一转变的关键催化剂。