Simon Willison's Weblog

iNaturalist Sightings

7.2内容质量
iNaturalist Sightings

TL;DR · AI 摘要

Simon Willison 构建了一个轻量级前端工具 iNaturalist Sightings，通过 CLI 抓取 + GitHub 托管 JSON + 纯 JS 渲染，实现跨账号观鸟记录聚合与懒加载展示。

核心要点

  • 用 Claude Code 在手机上快速生成完整工具链，体现 LLM 辅助个人开发的新范式
  • 采用 Git scraping 模式将动态数据静态化，兼顾可追溯性与部署简易性
  • 纯前端 fetch + modal 展示方案规避后端依赖，适合个人数据小规模可视化

结构提纲

按章节快速跳转。

  1. §工具目标

    聚合多个 iNaturalist 账号的观测记录，并按时空邻近性分组展示。

  2. ·数据获取层

    开发 inaturalist-clumper CLI 工具，支持按 2 小时/5km 规则聚类观测数据。

  3. ·数据托管层

    通过 Git scraping 将 clumps.json 提交至 GitHub，提供 CORS 可访问的静态 JSON 接口。

  4. ·前端渲染层

    用纯 HTML/JS 实现懒加载缩略图与点击弹出高清图的交互逻辑。

  5. ›AI 辅助开发

    全程在手机端使用 Claude Code 生成代码，验证 LLM 驱动个人工具开发的可行性。

思维导图

用一张图看清主题之间的关系。

查看大纲文本（无障碍 / 无 JS 友好）
  • iNaturalist Sightings 工具链
    • 数据层
      • inaturalist-clumper CLI
      • Git scraping → clumps.json
    • 交付层
      • GitHub raw CDN 托管
      • CORS 友好静态接口
    • 前端层
      • fetch + lazy loading
      • modal 图片查看器

金句 / Highlights

值得收藏与分享的关键句。

  • 我 camping 这个周末所以完全在手机上用 Claude Code 构建了这个工具。

    — 正文第 2 段

    ⬇︎ 下载 PNG𝕏 分享到 X
  • inaturalist-clumper 默认按 2 小时内、5 公里内观测进行‘clumping’（聚类）。

    — 正文第 3 段

    ⬇︎ 下载 PNG𝕏 分享到 X
  • GitHub 托管的 JSON 文件天然支持 CORS，可被前端直接 fetch，无需后端代理。

    — 正文第 4 段

    ⬇︎ 下载 PNG𝕏 分享到 X
  • prompt 明确指定：用 small.jpg 懒加载缩略图，点击后 modal 展示 large.jpg 并显示物种通用名。

    — 正文第 5 段

    ⬇︎ 下载 PNG𝕏 分享到 X
#iNaturalist#CLI#Git scraping#LLM#frontend
打开原文

Tool: iNaturalist Sightings

[Simon Willison’s Weblog](http://simonwillison.net/)

Subscribe

Sponsored by:MongoDB — Join MongoDB.local London 2026 on 7 May to learn how teams move AI from prototype to production.

1st May 2026

Image 1: A white crowned sparrow singing
Image 1: A white crowned sparrow singing

TooliNaturalist Sightings

I wanted to see my iNaturalist observations - across two separate accounts - grouped by when they occurred. I'm camping this weekend so I built this entirely on my phone using Claude Code for web.

I started by building an inaturalist-clumper Python CLI for fetching and "clumping" observations - by default clumps use observations within 2 hours and 5km of each other.

Then I setup simonw/inaturalist-clumps as a Git scraping repository to run that tool and record the result to clumps.json.

That JSON file is hosted on GitHub, which means it can be fetched by JavaScript using CORS.

Finally I ran this prompt against my simonw/tools repo:

Build inat-sightings.html - an app that does a fetch() against https://raw.githubusercontent.com/simonw/inaturalist-clumps/refs/heads/main/clumps.json and then displays all of the observations on one page using the https://static.inaturalist.org/photos/538073008/small.jpg small.jpg URLs for the thumbnails - with loading=lazy - but when a thumbnail is clicked showing the large.jpg in an HTML modal. Both small and large should include the common species names if available

Posted 1st May 2026 at 7:35 pm

Recent articles

This is a beat by Simon Willison, posted on 1st May 2026.

tools 60ai 1996inaturalist 9generative-ai 1769llms 1735claude-code 109

Monthly briefing

Sponsor me for $10/month and get a curated email digest of the month's most important LLM developments.

Pay me to send you less!

Sponsor & subscribe