Anatomy Claude Code 技能：用于技术文档的交互式 SVG

返回

Kevin Riedl

10 分钟 阅读 · 2026年10月12日
最近审核 2026年10月12日

下一篇

让读者拆开发动机、改变波的频率，或者发送一组突发 API 请求。每次操作都会带来可见的结果。这样的需求能让技术插图发挥作用，而 Anatomy 为编程智能体提供了实现它的方法。

Anatomy 是由 wheresryan22 开发的开源智能体技能，可以将交互式等距投影插图生成为可编辑的网页代码。SVG 负责几何图形，JavaScript 控制行为。WebGL 可以添加水面或尾焰等效果，独立的 3D 模式则处理部件旋转。Anatomy README 介绍了独立 HTML、SVG 和 React/Next.js 输出。

它值得探索的用途，是制作读者可以操作、开发者可以审查的文档组件。下面介绍如何安装技能、给出精确需求，并选择能保留交互的嵌入方式。

来源审查日期：2026年10月12日，仓库提交 689dcf9。演示说明依据项目源码。下文的提示词和验收示例是 Wavect 提出的工作流程；我们尚未对 Anatomy 进行基准测试，也未运行该提示词。

火箭发动机、水波槽和旋钮演示展示了什么？

可以先打开作者的交互式作品集。发布介绍中的三个示例，展示了帮助读者理解机制的不同方式。

3D 参考文档将该模式标记为测试版。这些示例可以说明项目采用了怎样的渲染方法。发动机插图再精细，也不能证明它具备工程准确性、适合制造，或属于经过验证的仿真。

如何在 Claude Code 中安装 Anatomy？

如果要为个人 Claude Code 环境安装，请运行 README 中的命令：

npx skills add wheresryan22/anatomy -g -a claude-code

-g 表示安装到当前用户的环境，-a claude-code 用于选择 Claude Code。技能目录中应包含 ~/.claude/skills/anatomy/SKILL.md，以及配套工具和参考文件。

需要分别确认两项 Node 版本要求。Anatomy 自身的构建与检查要求 Node.js 20.10+。其 README 说明，文中所用的 skills CLI 版本要求 Node.js 22.20+。浏览器验证需要 Chrome 或 Chromium；只有选择 React 输出时才需要 React 18+。

如果更习惯使用 Git，仓库也提供了以下安装方式：

git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy

在项目中使用第三方技能前，先审查其内容。将所选版本记录在项目说明中，方便后续有计划地更新。当前 README 也介绍了 OpenCode 和 Codex 支持，不过本指南以 Claude Code 为例。

输入 /anatomy 并附上需求即可调用。如果技能目录是在当前 Claude Code 会话中创建的，但技能仍未出现，README 建议运行 /reload-skills。

向 Anatomy 说明机制、学习目标和可验证的数值

第一张插图最好只回答一个问题。例如，在 API 文档中，可以解释：为什么一小段突发请求能够成功，紧接着的请求却被拒绝？

下面是一份原创提示词示例。它描述了一个刻意简化的令牌桶，并使用手动推进的教学时钟。发布前，请调整模型，使其符合你的 API 行为。

/anatomy
为 API 文档创建一张交互式等距投影插图。
用一个最多容纳 8 枚令牌的分配器解释突发请求限制。

模型：
- 初始状态为 8 枚令牌。每个放行的请求消耗 1 枚令牌。
- 每秒补充 2 枚令牌，上限为 8 枚。
- 可用令牌少于 1 枚时拒绝请求，不将其加入队列。
- 使用教学时钟：只有操作时间控件时，时间才会推进。

控件：
- 发送 1 个请求；在同一时刻发送 10 个请求。
- 推进 0.5 秒；推进 10 秒；重置。
- 显示剩余令牌数，以及累计放行和被拒绝的请求数。
- 所有部件运动和数值显示都从同一份状态推导。

交付一个自包含的 HTML 文件及其可编辑的构建源码。
使用 SVG，不添加远程字体、分析工具或模型调用。
支持键盘、触摸、可见焦点和减少动态效果设置。
关闭装饰性动效后，控件仍须可用。
附上静态说明，以及各控件操作后的预期结果。
列出模型简化之处和已执行的检查。

模型足够简单，才容易审查。补充规则为 balance = min(8, balance + 2 * elapsedSeconds)。只有余额至少为一枚令牌时，请求才会消耗令牌。分配器的动画不能改变这些规则。

用可重复的操作顺序验证说明

这些是根据示例计算得出的预期值，并非 Anatomy 的实测结果。逐项核对可以发现看似合理的插图是否补充过快、超出容量，或存在计数器与动画状态不一致的问题。

如何把 Anatomy 插图嵌入网站？

根据所需的交互选择输出格式。独立 HTML 页面适合作为第一步，因为它将插图的标记、样式和行为放在一起。React 组件则更便于与现有应用紧密集成。

为什么 SVG 放进 img 标签后就无法交互？

SVG 作为图片使用时，会受到图片上下文的限制。MDN 说明，这种情况下 JavaScript 会被禁用，外部资源也会受到限制。因此，<img src="figure.svg"> 适合静态插图，无法保留交互页面中的 JavaScript 控件。

如果需要交互式嵌入，请让智能体输出 HTML，或将 SVG 及其行为集成到应用中。同时保留静态图片，用于预览和分享。

嵌入独立 HTML

将审查过的自包含文件保存到下面的示例路径后，可以从以下嵌入代码开始：

<iframe
  class="anatomy-figure"
  src="/illustrations/anatomy-rate-limit.html"
  title="API 突发请求限制的交互式说明"
  loading="lazy"
  sandbox="allow-scripts">
</iframe>

在网站样式表中添加响应式尺寸：

.anatomy-figure {
  display: block;
  width: 100%;
  height: clamp(24rem, 65vw, 42rem);
  border: 0;
}

MDN 的 iframe 参考文档解释了 title、loading 和 sandbox 属性。这是一份适用于自包含文件的起始配置，具体嵌入需求仍需单独验证。请测试网站的内容安全策略，以及插图所需的资源加载方式。确保窄屏下的所有控件都可以操作。

将学习目标、假设和预期结果以普通 HTML 写在插图周围的正文中。即使嵌入内容无法加载，读者也应能理解其中的机制。Google 的搜索 AI 功能指南也建议以文本形式提供重要内容。结构清晰的说明有助于读者和检索系统理解，但不保证排名或引用。

在 React 和 Next.js 中使用 Anatomy

项目的 React 集成指南将静态几何图形和服务端渲染的图形，与负责运动的客户端组件分开。它也要求在水合（hydration）之前保持静止姿态一致。

集成插图时，应保留这条边界。审查时加载完整的文档页面，包括同一组件的多个实例。检查 hydration 警告、ID 冲突，以及页面跳转后仍在运行的动画循环。对于字体、颜色和已批准的界面模式，可以向智能体提供 Claude Code 设计系统文件。

发布前应该检查什么？

Anatomy 的验证流程包含几何和视觉检查，可以帮助发现渲染缺陷。还需要由熟悉该领域的人单独审查，确认机制、标签、单位和简化假设是否传达了正确的知识。

它的动效与交互指南介绍了键盘输入、触摸、减少动态效果，以及停止屏幕外任务。请把这些要求逐项落实到生成结果的检查中。

• 检查模型。执行一组结果已知的简短操作。在动画进行到一半时重置，并确认标签仍与状态一致。
• 使用键盘和手机测试。所有关键操作都应无需悬停即可完成。显示焦点、说明控件用途，并避免让屏幕阅读器播报每一帧动画。
• 分别关闭动效和 WebGL。启用减少动态效果设置后，有用的输入操作仍应保留。着色器不可用时，基础 SVG 和文字也应能说明主题。
• 测量完整页面。在所有插图同时存在时，检查加载体积、输入响应和滚动表现。先使用 SVG，只有当 GPU 效果能帮助解释内容时再添加。
• 检查网络请求。生成的浏览器插图可以在没有额外模型调用的情况下运行。请确认实际输出没有意外加载远程字体、分析工具或服务。
• 保留可维护的源码。将提示词、模型假设、选定的技能版本、构建源码和通过验收的输出保存在一起，并指定后续修改的负责人。

源码工具包采用 MIT 许可证。重新分发代码时，应保留许可证要求的声明。开源许可与使用编程智能体、审查其输出所产生的成本是两回事。

先选一个读者经常难以理解的问题

合适的主题包括组件的装配顺序、缓冲区逐渐填满，或阀门如何改变流量。先从已经反复引发疑问的说明入手。请几位目标读者预测下一状态，再将他们的答案与插图结果比较。这能帮助你具体判断插图是否有用。

简单的依赖关系，用常规示意图可能就够了。数值趋势适合用图表。只有当亲手操作一个机制有助于理解时，Anatomy 才更值得使用。

生成的插图通常经过构建和审查后，作为页面资源发布。如果你的目标是让界面随对话动态变化，我们的 Intelligent UI 与 OpenUI 实现指南介绍了那种不同的应用架构。

如果要将这种方式引入团队文档流程，请先准备一个难以讲清楚的问题，以及它正确的预期行为。Wavect 的 AI Enablement 服务可以帮助团队建立可重复执行的智能体工作流和审查流程。