交互式解释

当我们失去对 agent 编写的代码如何工作的追踪时，我们就承担了认知债务。

对于很多事情来说这并不重要：如果代码从数据库获取一些数据并作为 JSON 输出，实现细节可能简单到我们不需要关心。我们可以尝试新功能并对其工作原理做出非常可靠的猜测，然后浏览代码确认。

但通常细节确实很重要。如果我们应用程序的核心变成了一个我们不完全理解的黑盒，我们就不再能有信心地推理它，这使得规划新功能变得更困难，最终像累积的技术债务一样减缓我们的进度。

如何偿还认知债务？通过提高我们对代码如何工作的理解。

我最喜欢的做法之一是构建交互式解释。

理解词云

在《一个 AI agent 编码怀疑论者尝试 AI agent 编码，过度详细》中，Max Woolf 提到用以下提示测试 LLM 的 Rust 能力：创建一个 Rust 应用，可以根据长输入文本创建”词云”数据可视化。

这激发了我的想象力：我一直想知道词云是如何工作的，所以我启动了一个异步研究项目——这里有初始提示，这里有代码和报告——来探索这个想法。

这非常有效：Claude Code for web 为我构建了一个 Rust CLI 工具，可以生成像这样的图像：

词云示例

但它是如何实际工作的呢？

Claude 的报告说它使用”阿基米德螺旋布局，每个单词带有随机角度偏移，以获得自然的外观”。这对我没有太大帮助！

我请求了一个代码库的线性演示，这帮助我更详细地理解了 Rust 代码——这是那个演示（和提示）。这帮助我理解了 Rust 代码的结构，但我仍然没有直观理解”阿基米德螺旋布局”部分是如何实际工作的。

所以我请求了一个动画解释。我是这样做的：将一个链接到现有的 walkthrough.md 文档粘贴到 Claude Code 会话中，以及以下提示：

创建一个交互式动画，展示词云算法是如何工作的。
使用 HTML5 canvas 和 JavaScript。
展示每个单词如何尝试放置在页面上，
通过显示一个框，检查该框是否与现有单词相交。
如果是，它继续尝试找到一个好的位置，
从中心向外以螺旋方式移动。

你可以在这里玩结果。这是一个动画 GIF 演示：

动画演示

这是使用 Claude Opus 4.6，事实证明它在构建解释动画方面相当有品味。

如果你仔细观察动画，你可以看到对于每个单词，它尝试通过显示一个框将其放置在页面上的某个位置，运行检查该框是否与现有单词相交。如果是，它继续尝试找到一个好的位置，从中心向外以螺旋方式移动。

我发现这个动画真的帮助我理解了算法的工作方式。

我一直是动画和交互式界面的粉丝，用来帮助解释不同的概念。一个好的 coding agent 可以按需生成这些来帮助解释代码——它自己的代码或他人编写的代码。