手机+Claude Code搭建iNaturalist观察记录展示工具实战

项目背景

Simon Willison（知名开发者、Datasette创始人）近日分享了一个有趣的项目：他在露营期间，完全使用手机和Claude Code for web，构建了一个展示iNaturalist自然观察记录的工具。这个项目展示了AI辅助编程在移动端的实用性，以及如何通过巧妙的架构设计将多个简单组件串联成完整的数据管道。

Simon Willison在开发者社区中有着深厚的影响力。他是Django Web框架的联合创始人之一，早在2005年就参与了Django的早期开发。近年来，他将精力投入到数据探索工具Datasette的开发中——这是一个能够将SQLite数据库即时转化为可交互API和Web界面的开源工具，被广泛应用于新闻数据分析、政府开放数据发布等场景。Simon同时也是AI辅助编程领域最活跃的实践者和记录者之一，他的博客长期追踪和评测各类LLM工具在实际开发中的表现，其观点在技术社区中具有相当的参考价值。

iNaturalist是一个全球性的自然观察社区平台，用户可以记录和分享自己观察到的动植物。该平台由加州科学院（California Academy of Sciences）和国家地理学会（National Geographic Society）联合运营，是"公民科学"（Citizen Science）运动中最成功的项目之一。截至目前，iNaturalist已积累超过2亿条观察记录，覆盖超过40万个物种，这些数据被全球生态学研究者广泛引用。平台提供了完善的RESTful API，允许开发者按用户、物种、地理区域等维度查询观察数据，这也是Simon这个项目得以实现的技术基础。Simon希望将自己两个不同账户的观察记录按时间聚合展示在一个页面上。

技术架构：三层组件设计

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

Simon首先构建了一个名为inaturalist-clumper的Python命令行工具，用于获取和"聚合"观察记录。其核心逻辑是将时间间隔在2小时内、地理距离在5公里内的观察记录归为一组（clump）。这种聚合策略非常合理——同一次户外活动中的观察通常满足这两个条件。

这种基于时空邻近性的聚类方法在地理信息系统（GIS）领域有着广泛的应用。2小时的时间窗口和5公里的空间半径，恰好对应了一次典型的户外徒步或自然观察活动的时空范围。类似的算法思想也出现在Google Photos的"旅行相册"自动分组、Strava的运动轨迹识别等产品中。在学术领域，这类方法被称为ST-DBSCAN（时空密度聚类）的简化版本——完整的ST-DBSCAN算法会动态调整密度阈值，而Simon的实现采用了固定阈值的贪心策略，对于个人数据规模来说已经足够有效，同时保持了代码的简洁性。

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

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

Git Scraping是Simon Willison在2020年提出并推广的一种数据采集模式。其核心思想极其简洁：利用GitHub Actions的cron定时触发功能（最高频率为每5分钟一次），定期运行一段脚本从外部API或网页抓取数据，然后通过git commit将结果文件提交到仓库。如果数据没有变化，Git不会产生新的提交；如果数据发生了变化，Git的版本历史天然地记录了每次变化的时间点和具体差异。这意味着你不仅获得了最新的数据快照，还免费获得了完整的数据变更历史。相比传统的数据管道方案（如搭建Airflow调度器、配置数据库存储、维护服务器运行），Git Scraping几乎零成本——GitHub Actions对公开仓库提供每月2000分钟的免费额度，对于大多数定时抓取任务来说绑绑有余。目前已有数百个开源项目采用这一模式追踪从疫情数据到政府政策文件的各类信息源。

这个设计的精妙之处在于：GitHub托管的JSON文件天然支持CORS跨域请求，可以直接被前端JavaScript获取，无需额外搭建API服务器。

具体来说，CORS（Cross-Origin Resource Sharing，跨域资源共享）是浏览器的一项安全机制。默认情况下，网页中的JavaScript只能请求与当前页面同源（相同协议、域名、端口）的资源。当前端代码需要从其他域名获取数据时，目标服务器必须在HTTP响应头中包含Access-Control-Allow-Origin字段来明确授权。GitHub的raw.githubusercontent.com域名在响应头中设置了宽松的CORS策略，允许任意来源的网页请求其托管的文件。这意味着你只需将JSON文件推送到GitHub公开仓库，就自动获得了一个支持跨域访问的静态数据API——无需配置Nginx、无需部署云函数、无需管理API网关。对于个人项目和原型开发来说，这是一个极具性价比的方案。

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

最后一步是生成前端页面。Simon向Claude Code提供了一段简洁的Prompt：

构建inat-sightings.html——一个通过fetch()获取JSON数据，使用small.jpg缩略图（带lazy loading）展示所有观察记录的应用，点击缩略图时在HTML模态框中显示large.jpg大图，同时显示物种的通用名称。

这段Prompt清晰地描述了功能需求、数据源URL、图片加载策略和交互方式，Claude Code据此生成了完整的单页应用。

值得关注的设计理念

零运维的无服务器架构

整个项目不需要任何后端服务器运行。数据处理通过GitHub Actions完成，数据存储在Git仓库中，前端是纯静态HTML/JS。这种架构几乎零运维成本，且具有极高的可靠性。

值得注意的是，这里的"无服务器"（Serverless）与AWS Lambda等商业Serverless平台有着本质区别。商业Serverless平台仍然需要你编写和部署函数代码、配置触发器、管理权限和监控告警，只是将服务器运维外包给了云厂商。而Simon的方案更加彻底——整个系统由GitHub Actions（计算）、Git仓库（存储）和静态HTML（展示）三个完全托管的组件构成，开发者无需关心任何基础设施层面的问题。即使GitHub Actions偶尔执行失败，上一次成功生成的JSON文件仍然可用，前端页面不会受到影响，这种天然的容错性是传统实时API架构难以匹敌的。

手机端AI编程已经可行

这个项目完全在手机上使用Claude Code for web完成，证明了AI辅助编程正在降低开发环境的门槛。开发者不再需要坐在电脑前才能构建有意义的工具。

Claude Code是Anthropic推出的面向开发者的AI编程工具，其Web版本允许用户直接在浏览器中通过自然语言对话生成、修改和调试代码。与传统的IDE（集成开发环境）不同，Claude Code不要求用户在本地安装任何开发工具链——没有Node.js、没有Python环境、没有包管理器。这种"零配置"的特性使得手机浏览器成为了一个可行的开发终端。Simon的这次实践具有标志性意义：它表明AI辅助编程不仅仅是在已有开发环境中提高效率的"副驾驶"，更有潜力重新定义"开发环境"本身的概念。当Prompt成为主要的编程界面时，全尺寸键盘和多显示器不再是必需品，开发行为可以发生在任何有网络连接的场景中。

Prompt即规格说明书

Simon的Prompt写作值得学习：它包含了明确的文件名、数据源URL、具体的图片尺寸规格、性能优化要求（lazy loading）和交互细节（模态框）。这种精确的Prompt能够一次性生成可用的代码。

其中提到的lazy loading（延迟加载）是现代Web性能优化的关键技术之一。在传统的图片加载模式中，浏览器会在页面加载时同时请求所有<img>标签的图片资源，对于包含数百张缩略图的页面来说，这意味着巨大的初始带宽消耗和漫长的页面加载时间。HTML5引入的loading="lazy"属性改变了这一行为：浏览器只会加载当前视口（viewport）内及其附近的图片，当用户滚动页面时才逐步加载后续图片。这个原生属性目前已被所有主流浏览器支持，无需引入任何JavaScript库。对于Simon这个展示大量自然观察照片的页面来说，lazy loading的效果尤为显著——用户可能只浏览前几组记录就离开页面，此时未进入视口的数百张图片根本不会被下载，极大地节省了带宽和加载时间。

对开发者的启示

这个项目体现了一种"组合式开发"的思路：将问题拆解为数据获取、数据存储、数据展示三个独立层次，每一层都使用最简单的技术方案。Git Scraping作为"穷人的数据管道"，配合GitHub的免费托管和CDN，再加上AI生成的前端代码，构成了一个完整且优雅的解决方案。

这种架构思想与Unix哲学一脉相承——"做好一件事，然后通过组合完成复杂任务"。每个组件都足够简单，可以独立测试和替换：如果未来iNaturalist的API发生变化，只需修改Python CLI工具；如果想换一种前端展示风格，只需重新生成HTML文件；如果数据源从iNaturalist换成eBird（另一个流行的鸟类观察平台），只需替换数据获取层，存储和展示层完全不受影响。这种松耦合的设计使得项目的长期维护成本极低。

对于想要构建个人数据展示项目的开发者来说，这套模式具有很强的可复制性——无论是追踪运动记录、阅读数据还是其他API可获取的个人数据，都可以采用类似的架构。例如，你可以用同样的模式定期抓取Goodreads的阅读记录、Last.fm的音乐收听历史、GitHub自身的贡献数据，甚至是天气API的历史数据，然后通过一个AI生成的静态页面进行可视化展示。整个过程的总成本为零，唯一的投入是你的创意和一段精心编写的Prompt。

核心要点

• Simon Willison在露营时完全使用手机和Claude Code构建了iNaturalist观察记录展示工具
• 项目采用三层无服务器架构：Python CLI数据处理 + Git Scraping自动更新 + 纯静态前端展示
• 利用GitHub仓库托管JSON数据，天然支持CORS跨域访问，无需额外API服务器
• 通过精确的Prompt描述，Claude Code一次性生成了包含lazy loading和模态框交互的完整前端页面
• Git Scraping模式为个人数据项目提供了零成本、高可靠性的数据管道方案