摘要
一句话总结
作者借助 AI 编程智能体（Claude）为博客开发了“Beats”功能，将自己在 GitHub、TIL 博客等平台的五种在线动态以徽章链接的形式集成到网站的时间线视图中。
关键要点
- 功能表现：“Beats”以带有徽章的内联链接形式呈现，融入了博客的主页、搜索页和归档页的时间线中。
- 五种内容类型：目前集成了 GitHub 开源项目发布（Releases）、TIL 博客文章、niche-museums 博客文章、个人网站的 HTML/JS 工具，以及 AI 生成的研究项目。
- 数据获取方式：通过 GitHub Actions 构建的 JSON、Datasette 实例的 SQL 查询以及自定义 JSON 订阅源等方式拉取数据。
- 高效开发：借助 Claude Code 编程智能体，作者仅用一个上午就完成了这五种自定义数据集成。
- UI 与搜索集成：Claude 处理了网站 UI 的集成工作，并确保新内容能被网站的分面搜索引擎（faceted search engine）正确处理。
- 原型设计：初期使用常规版 Claude 克隆 GitHub 仓库，并通过生成包含内联 HTML/CSS 的 Artifact 视觉稿来验证概念可行性。
- 关键代码提交：核心功能实现对应 PR #592，博物馆内容导入器对应 PR #595。
风险与不足
- 解析方案脆弱：在处理“研究”项目时，使用 AI 生成的正则表达式直接解析原始 Markdown README 是一种相对脆弱的解决方案；作者指出，如果面对不受自己控制的数据源，这种做法的风险会很高。
正文
一直以来，我都想在博客中展示我在其他平台上的各种在线活动。最近，我上线了一个名为“Beats”（取自故事节拍 story beats，起名字真难！）的新功能。它为我的网站新增了五种内容类型，均对应我在其他地方的活动。
Beats 是一些带有徽章的内联链接，它们融入了网站的不同内容时间线视图中，包括主页、搜索页和归档页。
五种 Beats 内容类型
目前，Beats 包含以下五种类型：
- 发布（Releases）：我在 GitHub 上众多开源项目的发布版本，通过 GitHub Actions 构建的 JSON 文件导入。
- TILs（今天我学到了）：来自我的 TIL 博客的文章，通过对驱动该网站的 Datasette 实例执行基于 JSON 和 HTTP 的 SQL 查询来导入。
- 博物馆（Museums）：我的 niche-museums.com 博客上的新文章，从自定义 JSON 订阅源导入。
- 工具（Tools）：我在 tools.simonwillison.net 网站上通过“vibe-coding”编写的 HTML 和 JavaScript 工具。
- 研究（Research）：AI 生成的研究项目，托管在我的
simonw/research仓库中。
借助 AI 编程智能体高效开发
这涉及五种不同的自定义集成来拉取所有数据。好消息是，这种集成项目正是编程智能体（Coding Agents）非常擅长的领域。我在一个上午就搞定了大部分功能，同时还在并行处理其他事情。
以“研究”项目为例，我原本没有一个有用的结构化订阅源，但这无关紧要。我直接给了 Claude Code 一个指向列出所有项目的原始 Markdown README 链接，它就生成了一个正则表达式解析器。由于源头和目标端都由我自己负责，所以我完全可以接受这种相对脆弱的解决方案（如果面对我无法控制的数据源，这样做风险会很高）。
Claude 还处理了所有可能显得繁琐的网站 UI 集成工作，确保新内容在所有不同的页面类型上都能正常显示，并被我的分面搜索引擎（faceted search engine）正确处理。
使用 Claude 进行原型设计
实际上，我最初是在常规版 Claude（而不是 Claude Code）中对 Beats 的概念进行原型设计的，利用了它现在可以从 GitHub 克隆公共仓库的功能。
我首先让它克隆我的博客仓库，并向我说明其中的模型和视图。在随后的头脑风暴中，我提出了这样的需求：
“使用这个仓库中的模板和 CSS 创建一个新的 Artifact，将所有 HTML 和 CSS 内联，向我展示混合了这些内联内容类型的主页效果。”
经过几次迭代，我们得到了一个 Artifact 视觉稿。这足以让我确信这个概念是可行的，并值得交由完整的 Claude Code 来实现网页端。
如果你想了解后续的构建过程，最有趣的 Pull Requests 是实现核心功能的 Beats #592，以及添加博物馆内容类型的 Add Museums Beat importer #595。