手机上用Claude Code开发iNaturalist观察记录工具全过程
Simon Willison用手机和Claude Code在露营中构建了零成本无服务器Web应用
Simon Willison在露营旅行中完全使用手机和Claude Code，构建了一个展示iNaturalist自然观察记录的Web工具。项目采用三层架构：Python CLI工具通过时空聚类智能分组观察数据，GitHub Actions定期抓取数据实现Git Scraping自动化管道，前端静态页面由一条精确提示词生成。整个系统无需服务器，维护成本几乎为零，展示了AI辅助编程在移动端的可行性和精确提示词工程的重要性。
项目背景：露营途中的手机编程实验
Simon Willison（知名开发者、Datasette创始人）在一次露营旅行中，完全使用手机和Claude Code完成了一个完整的Web工具开发。这个工具用于展示他在iNaturalist（一个自然观察社区平台）上的观察记录，并按时间和地点进行智能分组。
Simon Willison是Django框架的联合创始人之一，后来创建了Datasette——一个将SQLite数据库即时转化为可交互API和Web界面的开源工具。他长期倡导数据民主化和低门槛数据探索，Git Scraping正是他在这一理念下提出的实践模式。他的tools仓库收录了大量用AI辅助生成的单页Web工具，已成为AI编程实践的标杆案例库。
iNaturalist本身是由加州科学院和国家地理学会联合运营的公民科学平台，全球拥有超过2亿条生物观察记录。用户上传野生动植物照片后，社区成员和AI模型会协助进行物种鉴定。该平台提供完善的RESTful API，支持按用户、地点、时间等维度查询观察数据，这为Simon的项目提供了稳定的数据源。
这个项目展示了AI辅助编程在移动端的实际应用能力，也体现了一种"Git Scraping"数据管道的巧妙架构设计。
技术架构解析：三层分离的零成本方案
Python CLI工具：数据采集与时空聚类
Simon首先构建了一个名为inaturalist-clumper的Python命令行工具，用于从iNaturalist API获取观察数据并进行"聚类"（clumping）处理。默认的聚类规则是：将时间间隔在2小时内、地理距离在5公里内的观察记录归为一组。
这里采用的时空聚类（Spatiotemporal Clustering）是地理信息科学中的经典问题。常见算法包括ST-DBSCAN（基于密度的时空聚类）和简单的阈值分割法。Simon采用的是后者——通过设定时间阈值（2小时）和空间阈值（5公里）进行贪心分组：按时间排序后，依次判断相邻观察记录是否同时满足两个阈值条件，满足则归入同一组。这种方法计算复杂度低，非常适合数据量不大的个人项目场景。
这个设计非常实用——当你在某个地点进行自然观察时，短时间内拍摄的多张照片自然属于同一次"出行"，通过时空聚类可以自动还原这种逻辑关系。
Git Scraping数据管道：GitHub Actions自动化
接下来，他创建了simonw/inaturalist-clumps仓库，利用GitHub Actions定期运行上述CLI工具，将结果写入clumps.json文件。
Git Scraping是Simon长期推广的一种数据采集模式：利用GitHub Actions的定时任务能力，周期性地抓取数据并提交到Git仓库。其核心思想是将Git仓库当作时序数据库使用。GitHub Actions为公开仓库提供每月2000分钟的免费执行额度，每次执行时拉取外部数据源、生成结构化文件并git commit。由于Git天然记录每次提交的差异，开发者可以通过git log和git diff追溯数据的历史变化。Simon在2020年首次提出这一概念，目前已有数百个开源项目采用此模式追踪政府数据、API变更、价格波动等信息。
这样做的好处包括：
- 数据自动更新，无需维护服务器
- Git历史记录提供了天然的版本追踪
- GitHub托管的文件支持CORS跨域访问，可直接被前端JavaScript调用
关于最后一点值得展开说明：GitHub的raw.githubusercontent.com域名默认设置了Access-Control-Allow-Origin: *响应头，这意味着任何网页的JavaScript代码都可以通过fetch()直接请求该域名下的文件，无需配置代理服务器。这一特性使得GitHub仓库中的JSON文件可以直接充当免费的静态API端点，是Git Scraping模式能够与纯前端应用无缝衔接的关键技术基础。
前端展示页面：一条提示词搞定
最后一步是构建前端展示页面。Simon对Claude Code发出了一条精确的提示词，要求生成一个HTML应用：
- 通过
fetch()从GitHub获取JSON数据 - 使用iNaturalist的小尺寸缩略图（small.jpg）展示所有观察记录
- 添加
loading=lazy实现图片懒加载 - 点击缩略图时在HTML模态框中展示大图（large.jpg）
- 显示物种的常见名称
其中，loading=\"lazy\"是HTML原生的延迟加载属性，由浏览器内置实现。当图片元素设置此属性后，浏览器会在图片即将进入视口（viewport）时才发起网络请求，而非页面加载时一次性请求所有图片。对于包含大量缩略图的页面，这一技术可以显著减少初始页面加载时间和带宽消耗。在此之前，开发者需要依赖Intersection Observer API手动实现类似功能，而原生属性的引入大幅降低了实现成本。
整个前端页面通过一条提示词就完成了开发，最终部署在他的tools仓库中。
值得关注的设计理念
无服务器架构：维护成本几乎为零
整个系统没有任何传统意义上的后端服务器：
- 数据采集由GitHub Actions承担
- 数据存储使用Git仓库
- 数据分发利用GitHub的CDN
- 前端是纯静态HTML/JS
这种架构的维护成本几乎为零，且完全免费。对于个人项目和小型数据展示需求来说，这是一种极具性价比的方案。
手机端AI编程的可行性验证
Simon特别提到这个项目"entirely on my phone"完成。这说明Claude Code已经具备了足够的能力，让开发者在没有传统开发环境的情况下也能完成有意义的项目。
Claude Code是Anthropic推出的命令行AI编程工具，支持在终端环境中通过自然语言指令进行代码生成、文件编辑和项目管理。在手机端，开发者可以通过Termux（Android）或iSH/a-Shell（iOS）等终端模拟器运行命令行工具，也可以通过SSH远程连接到云端开发环境。Simon的实践表明，对于以提示词驱动为主的AI编程工作流，手机的输入限制并不构成实质性障碍——关键瓶颈从代码编写转移到了需求描述的精确性上。
对于周末露营这种场景，手机+AI编程助手的组合展现了极大的灵活性。这也意味着开发者不再被绑定在电脑前——碎片化时间同样可以产出有价值的代码。
提示词工程：精确描述是关键技能
有意思的是，Simon的提示词非常具体——包含了确切的URL模式、交互行为描述和功能需求。这种精确的提示词写作能力，本身就是高效使用AI编程工具的关键技能。模糊的需求描述往往导致反复修改，而一次性给出完整约束条件能大幅提升开发效率。
这实际上反映了AI编程时代一个重要的范式转变：开发者的核心能力正在从"如何写代码"转向"如何精确描述需求"。传统软件工程中，需求规格说明书（SRS）往往由产品经理编写，开发者负责实现；而在AI辅助编程场景下，编写精确提示词的过程本质上就是在做需求规格定义，只不过执行者从人类程序员变成了AI模型。
总结：个人数据工具的最佳实践
这个项目虽然规模不大，但完美展示了现代AI辅助开发的工作流：将问题分解为数据采集、数据管道和前端展示三个清晰的层次，每一层都用最简单的工具实现，最终组合成一个实用的应用。
对于想要快速构建个人数据展示工具的开发者来说，Git Scraping + GitHub Actions + 静态前端的组合是一个值得参考的架构模式，而Claude Code则让整个开发过程变得更加轻量和高效。
核心要点
- Simon Willison完全使用手机和Claude Code在露营期间构建了一个完整的Web应用
- 项目采用Git Scraping模式，利用GitHub Actions定期抓取数据，实现零成本无服务器架构
- Python CLI工具通过时空聚类（2小时/5公里）智能分组iNaturalist观察记录
- 前端展示页面通过一条精确的提示词由AI生成，支持懒加载和模态框大图预览
- 整体架构展示了数据管道设计的简洁性：GitHub Actions采集 → Git存储 → CDN分发 → 静态前端消费
相关推荐
产品体验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编程新范式。