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

Simon Willison在露营时用手机和Claude Code构建了iNaturalist观察记录可视化工具。
知名开发者Simon Willison在露营期间,仅用手机和AI编程助手Claude Code,构建了一个iNaturalist自然观察记录的可视化工具。项目采用三层解耦架构:Python CLI工具抓取并聚类数据,Git Scraping通过GitHub Actions实现零成本自动化数据更新,纯前端页面完成可视化展示。该项目展示了AI编程助手在移动端的可行性,以及精确Prompt编写和优雅数据管道设计的重要性。
项目背景:露营途中的开发灵感
Simon Willison——知名开发者、Datasette 创始人——最近分享了一个有趣的周末项目:他在露营期间,完全使用手机和 Claude Code 构建了一个 iNaturalist 观察记录的可视化工具。这个项目展示了 AI 编程助手在移动端的实用性,也体现了一种优雅的数据管道设计思路。
Simon Willison 是 Django Web 框架的联合创始人之一,后来创建了 Datasette——一个将 SQLite 数据库即时转化为可交互 API 和数据浏览界面的开源工具。他长期关注数据新闻、开放数据和开发者工具领域,近年来成为 AI 辅助编程领域最活跃的实践者和布道者之一,经常在博客上分享使用 LLM 进行实际开发的详细案例。
为什么要做这个工具
iNaturalist 是一个广受欢迎的自然观察社区平台,用户可以上传动植物照片并获得物种识别。该平台由加州科学院和国家地理学会联合运营,拥有超过 1.5 亿条观察记录,是全球最大的公民科学(Citizen Science)平台之一。其核心功能是通过社区协作和计算机视觉模型对用户上传的照片进行物种识别,识别结果经社区专家验证后可达到研究级别(Research Grade),被广泛用于生态学研究和生物多样性监测。平台提供开放的 REST API,允许开发者按用户、地点、物种等维度查询观察数据。
Simon 拥有两个 iNaturalist 账号,他希望将两个账号的观察记录合并在一起,并按时间和地点进行分组展示。这个需求看似简单,但 iNaturalist 官方并没有提供跨账号的聚合视图。于是 Simon 决定自己动手,而且是在露营途中用手机完成的。
三步架构:CLI → Git Scraping → 前端
整个项目的架构设计非常巧妙,分为三个层次,每一层都值得细看。
第一步:用 Python CLI 工具抓取和聚类数据
Simon 首先构建了 inaturalist-clumper,一个 Python 命令行工具,用于从 iNaturalist API 获取观察数据并进行"聚类"(clumping)。默认的聚类规则是:将时间间隔在 2 小时以内、地理距离在 5 公里以内的观察记录归为一组。
这里的聚类本质上是一种基于时空邻近性的连通分量聚类方法:如果两条观察记录在时间上相隔不超过 2 小时、空间上距离不超过 5 公里,就认为它们属于同一次"出行"。这种方法类似于数据科学中的 DBSCAN 密度聚类思想,但规则更简单直观。地理距离的计算通常使用 Haversine 公式,根据两点的经纬度计算球面距离。这些阈值参数可以根据实际使用场景调整——比如骑行观察可能需要更大的距离阈值,而城市公园观察则可以缩小范围。
这个设计很实用——当你在某个地点散步观察自然时,这些记录自然会被归为一次"出行",而不是零散的独立记录。
第二步:用 Git Scraping 实现零成本自动化
第二步是 Simon 的招牌技术——Git Scraping。他创建了 simonw/inaturalist-clumps 仓库,通过 GitHub Actions 定期运行 CLI 工具,将聚类结果写入 clumps.json 文件并提交到仓库。
Git Scraping 是 Simon 在 2020 年提出的一种数据采集模式:利用 GitHub Actions 的定时任务能力,定期抓取数据并以 Git 提交的形式记录变化。其核心思想是将 Git 仓库当作一个时序数据库来使用。GitHub Actions 提供了 cron 定时触发能力,最高频率可达每 5 分钟一次(实际调度可能有延迟)。每次执行时,脚本抓取目标数据源的最新数据并写入仓库中的文件,如果数据发生变化,就会产生一个新的 Git commit。这意味着你可以通过 git log 和 git diff 精确追踪数据的每一次变化。这种模式已被广泛应用于追踪政府公开数据变化、监控网站内容更新、记录 API 返回值变化等场景。Simon 维护了一个包含数百个 Git Scraping 项目的列表,涵盖了从疫情数据到航班信息的各种用例。
这种方式有三个明显的好处:
- 零成本托管:GitHub 免费提供存储和 CDN
- 完整版本历史:每次数据变化都有 Git 记录,方便回溯
- CORS 友好:GitHub 的 raw 文件可以被浏览器端 JavaScript 直接 fetch,无需后端代理
关于第三点值得展开说明:CORS(Cross-Origin Resource Sharing,跨源资源共享)是浏览器的一项安全机制,默认阻止网页 JavaScript 向不同域名发起请求。如果你的前端页面托管在 A 域名,想用 fetch() 获取 B 域名的数据,B 域名的服务器必须在响应头中明确允许跨域访问。GitHub 的 raw.githubusercontent.com 域名默认设置了宽松的 CORS 策略,允许任何来源的前端代码直接读取仓库中的文件内容。这一特性使得开发者可以将 JSON 数据文件存储在 GitHub 仓库中,前端页面无需搭建任何后端 API 服务器就能直接获取数据,极大降低了小型项目的基础设施成本。
第三步:用 Claude Code 生成纯前端展示页面
最后一步是构建前端页面。Simon 对 Claude Code 发出了一段精确的 prompt,要求它:
- 从 GitHub raw URL 获取 JSON 数据
- 使用 iNaturalist 的缩略图 URL 展示所有观察记录
- 支持
loading=lazy懒加载优化性能 - 点击缩略图时在模态框中显示大图
- 显示物种的常见名称
其中 loading=lazy 是 HTML 原生的图片懒加载属性,于 2019 年在 Chrome 中首次实现,现已被所有主流浏览器支持。当图片设置了这个属性后,浏览器只会在图片即将进入视口(viewport)时才发起网络请求加载图片资源,而不是在页面加载时一次性请求所有图片。对于像 iNaturalist 观察记录这样可能包含数百张缩略图的页面,懒加载可以显著减少初始页面加载时间和带宽消耗,提升用户体验。在此之前,开发者通常需要使用 Intersection Observer API 或第三方 JavaScript 库来实现类似功能。
这段 prompt 写得非常具体,包含了 URL 模式、交互逻辑和数据字段要求。最终生成的工具托管在 Simon 的 tools 站点 上。
这个项目值得关注的几个点
手机端 AI 编程已经可行
整个项目在手机上完成,这说明 Claude Code 的能力已经足够强大,可以在移动设备上完成有意义的开发工作。Claude Code 是 Anthropic 推出的命令行 AI 编程工具,支持在终端环境中通过自然语言对话来编写、修改和调试代码。在手机上使用 Claude Code,通常需要通过 SSH 客户端(如 Termius、Blink Shell 等)连接到远程服务器,或者使用支持终端模拟的移动应用。虽然手机屏幕和键盘的限制使得传统编码几乎不可能高效进行,但 AI 编程助手改变了这一局面——开发者只需要用自然语言描述需求,AI 负责生成完整的代码,这使得输入量大幅减少,手机上的开发体验变得可行。
对于开发者来说,这意味着灵感来了随时可以动手,不必等到回到电脑前。
Prompt 写得好,代码一次就能用
Simon 给 Claude Code 的 prompt 堪称范本:它不是模糊的需求描述,而是包含了具体的 URL 格式、技术细节(lazy loading、modal 弹窗)和数据处理逻辑。
这体现了 Prompt Engineering 领域的几个关键原则:首先是具体性(Specificity),他没有说"做一个展示页面",而是明确指定了数据源 URL、图片 URL 的拼接模式、具体的 HTML 属性和交互行为;其次是提供上下文(Context),他描述了数据的结构和字段含义,让 AI 理解数据模型;最后是约束边界(Constraints),明确了技术栈(纯前端、无框架依赖)和性能要求。这种写法与软件工程中的"好的需求文档"异曲同工——越精确的输入,越能得到可直接使用的输出,减少来回迭代的次数。
这种精确的 prompt 大大提高了一次性生成可用代码的概率,也是高效使用 AI 编程工具的关键技巧。
数据管道的解耦设计值得借鉴
将数据获取(CLI)、数据存储(Git Scraping)和数据展示(前端)完全解耦,是一种非常实用的架构模式。每一层都可以独立迭代,前端是纯静态的,不需要后端服务器,维护成本几乎为零。
这种解耦设计遵循了 Unix 哲学中"做好一件事"的原则:CLI 工具只负责数据抓取和聚类逻辑,GitHub Actions 只负责定时调度和版本化存储,前端只负责数据的可视化呈现。任何一层出现问题或需要升级,都不会影响其他层。例如,如果 iNaturalist 的 API 发生变化,只需要修改 CLI 工具;如果想换一种前端展示方式,数据管道完全不需要改动。这种模式适用于很多个人项目和小型数据展示场景,尤其适合那些数据更新频率不高、但需要长期维护的项目。
总结:手机+AI,随时随地把想法变成工具
这个项目虽然规模不大,但它展示了现代开发者工具链的强大能力:Claude Code 这样的 AI 编程助手降低了编码门槛,Git Scraping 提供了免费的数据管道,GitHub Pages 提供了免费的托管。一个周末露营的间隙,一部手机,就能把一个想法变成一个可用的工具。
这或许就是 AI 辅助编程最令人兴奋的地方——不是替代开发者,而是让开发者在任何时间、任何地点都能将想法快速落地。当编码的门槛从"需要一台电脑、一个 IDE、几个小时的专注时间"降低到"一部手机、几段自然语言描述",创造力的释放将不再受限于物理条件。Simon 的这个露营项目,或许只是这种新开发范式的一个小小缩影。
相关推荐
产品体验Qoder vs Cursor实测对比:同样20美金谁更强?
实测对比Qoder和Cursor两款AI IDE,从Agent自主修复能力、人工沟通次数、架构决策等维度评测。Qoder仅需2次沟通完成任务,Cursor需8次。详细分析两者差异,帮你选择最适合的AI编程工具。
产品体验Cursor云Agent演示:打通软件开发全链路瓶颈
深度解析Cursor云Agent最新Demo,展示如何通过云端虚拟机、自动测试产物和全链路控制平面,系统性消除软件开发生命周期中的人类瓶颈,让Agent自主运行、人按需介入。
产品体验Cursor 3.0深度解析:多Agent并行、Design Mode与Best-of-N模型对比
Cursor 3.0正式发布,从AI辅助编程工具进化为Agent舰队指挥中心。本文详解多智能体并行、Design Mode可视化编辑、Best-of-N多模型择优等核心功能,解读AI编程新范式。