--- title: "Anatomy Claude Code 技能：交互式 SVG 文档指南" canonical: https://wavect.io/zh/blog/anatomy-claude-code-interactive-svg/ language: zh description: "安装 Anatomy Claude Code 技能，将交互式 SVG 嵌入技术文档。包含可复用提示词、HTML 与 React 方案、WebGL 降级处理，以及模型、键盘操作和页面性能检查。" image: "https://wavect.io/img/blog/headers/header_anatomy-claude-code-interactive-svg.png" author: ["Kevin Riedl"] published: "2026-10-12" updated: "2026-10-12" reviewed: "2026-10-12" --- # Anatomy Claude Code 技能：用于技术文档的交互式 SVG [**返回**](/zh/blog/overview/) [![Kevin Riedl](/img/team/kevin.webp)](/zh/team/kevin-riedl/) [Kevin Riedl](/zh/team/kevin-riedl/) https://linkedin.com/in/wsdt 10 分钟 阅读 · 2026年10月12日 最近审核 2026年10月12日 [**下一篇**](/zh/blog/claude-code-design-system-files/) 要点速览 Anatomy 可将技术需求转为可编辑的等距投影 SVG 和 JavaScript，并提供可选的 WebGL 效果及测试版 3D 模式。在 Claude Code 中安装后，先明确一个机制和可验证的数值，再选择独立 HTML 或 React 输出来保留交互。img 标签适合静态版本。发布前应检查模型、键盘与触摸操作、减少动态效果设置，以及页面性能。 让读者拆开发动机、改变波的频率，或者发送一组突发 API 请求。每次操作都会带来可见的结果。这样的需求能让技术插图发挥作用，而 Anatomy 为编程智能体提供了实现它的方法。 **Anatomy 是由 `wheresryan22` 开发的开源智能体技能，可以将交互式等距投影插图生成为可编辑的网页代码。**SVG 负责几何图形，JavaScript 控制行为。WebGL 可以添加水面或尾焰等效果，独立的 3D 模式则处理部件旋转。 [Anatomy README](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/README.md) 介绍了独立 HTML、SVG 和 React/Next.js 输出。 它值得探索的用途，是制作读者可以操作、开发者可以审查的文档组件。下面介绍如何安装技能、给出精确需求，并选择能保留交互的嵌入方式。 来源审查日期：2026年10月12日，仓库提交 `689dcf9`。演示说明依据项目源码。下文的提示词和验收示例是 Wavect 提出的工作流程；我们尚未对 Anatomy 进行基准测试，也未运行该提示词。 ## 火箭发动机、水波槽和旋钮演示展示了什么？ 可以先打开 [作者的交互式作品集](https://skills.wheresryan.sh/anatomy) 。发布介绍中的三个示例，展示了帮助读者理解机制的不同方式。 | 示例 | 展示内容 | 适合解释什么 | | --- | --- | --- | | [火箭发动机](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/examples/raptor-engine/build.mjs) | 包含 11 个总成的分解视图，将 SVG 结构与 WebGL 尾焰效果结合。 | 说明哪些部件组成一个总成，以及各总成的作用。 | | [水波槽](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/examples/ripple-tank/model.mjs) | 由波动和光学模型驱动水槽的视觉表现，包括水面效果。 | 说明改变输入如何改变可观察到的结果。 | | [旋钮](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/examples/turning-dial/build.mjs) | 旋钮转动时，部件在三维空间中旋转，再投影回插图。 | 解释需要通过旋转展示的朝向或机械关系。 | [3D 参考文档将该模式标记为测试版](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/references/3d.md) 。这些示例可以说明项目采用了怎样的渲染方法。发动机插图再精细，也不能证明它具备工程准确性、适合制造，或属于经过验证的仿真。 ## 如何在 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)`。只有余额至少为一枚令牌时，请求才会消耗令牌。分配器的动画不能改变这些规则。 ### 用可重复的操作顺序验证说明 | 按顺序执行的操作 | 剩余令牌 | 放行请求 | 被拒绝请求 | | --- | --- | --- | --- | | 重置 | 8 | 0 | 0 | | 在同一时刻发送 10 个请求 | 0 | 8 | 2 | | 推进 0.5 秒 | 1 | 8 | 2 | | 发送 1 个请求 | 0 | 9 | 2 | | 推进 10 秒 | 8 | 9 | 2 | 这些是根据示例计算得出的预期值，并非 Anatomy 的实测结果。逐项核对可以发现看似合理的插图是否补充过快、超出容量，或存在计数器与动画状态不一致的问题。 ## 如何把 Anatomy 插图嵌入网站？ **根据所需的交互选择输出格式。**独立 HTML 页面适合作为第一步，因为它将插图的标记、样式和行为放在一起。React 组件则更便于与现有应用紧密集成。 | 输出格式 | 适用场景 | 集成工作 | | --- | --- | --- | | SVG 或 PNG 图片 | 文章头图、演示文稿、印刷材料和静态说明 | 提供描述性的替代文本，并确保说明本身清楚易读。 | | 独立 HTML | 文档页面中可供读者操作的插图 | 托管已审查的文件，并使用配置适当的 iframe 嵌入。 | | 内联 SVG 加 JavaScript | 需要与页面其他部分共享状态的控件 | 审查脚本、限定样式作用域，并避免多个实例使用重复的 SVG ID。 | | React/Next.js 组件 | 需要持续维护的文档组件或产品组件 | 集成模型、静态图形、客户端行为和生命周期清理逻辑。 | ### 为什么 SVG 放进 img 标签后就无法交互？ SVG 作为图片使用时，会受到图片上下文的限制。 [MDN 说明，这种情况下 JavaScript 会被禁用，外部资源也会受到限制](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) 。因此，`` 适合静态插图，无法保留交互页面中的 JavaScript 控件。 如果需要交互式嵌入，请让智能体输出 HTML，或将 SVG 及其行为集成到应用中。同时保留静态图片，用于预览和分享。 ### 嵌入独立 HTML 将审查过的自包含文件保存到下面的示例路径后，可以从以下嵌入代码开始： ``` ``` 在网站样式表中添加响应式尺寸： ``` .anatomy-figure { display: block; width: 100%; height: clamp(24rem, 65vw, 42rem); border: 0; } ``` [MDN 的 iframe 参考文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe) 解释了 title、loading 和 sandbox 属性。这是一份适用于自包含文件的起始配置，具体嵌入需求仍需单独验证。请测试网站的内容安全策略，以及插图所需的资源加载方式。确保窄屏下的所有控件都可以操作。 将学习目标、假设和预期结果以普通 HTML 写在插图周围的正文中。即使嵌入内容无法加载，读者也应能理解其中的机制。Google 的 [搜索 AI 功能指南](https://developers.google.com/search/docs/appearance/ai-features) 也建议以文本形式提供重要内容。结构清晰的说明有助于读者和检索系统理解，但不保证排名或引用。 ### 在 React 和 Next.js 中使用 Anatomy 项目的 [React 集成指南](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/references/react.md) 将静态几何图形和服务端渲染的图形，与负责运动的客户端组件分开。它也要求在水合（hydration）之前保持静止姿态一致。 集成插图时，应保留这条边界。审查时加载完整的文档页面，包括同一组件的多个实例。检查 hydration 警告、ID 冲突，以及页面跳转后仍在运行的动画循环。对于字体、颜色和已批准的界面模式，可以向智能体提供 [Claude Code 设计系统文件](/zh/blog/claude-code-design-system-files/) 。 ## 发布前应该检查什么？ Anatomy 的 [验证流程](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/references/verify.md) 包含几何和视觉检查，可以帮助发现渲染缺陷。还需要由熟悉该领域的人单独审查，确认机制、标签、单位和简化假设是否传达了正确的知识。 它的 [动效与交互指南](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/references/motion.md) 介绍了键盘输入、触摸、减少动态效果，以及停止屏幕外任务。请把这些要求逐项落实到生成结果的检查中。 - **检查模型。** 执行一组结果已知的简短操作。在动画进行到一半时重置，并确认标签仍与状态一致。 - **使用键盘和手机测试。** 所有关键操作都应无需悬停即可完成。显示焦点、说明控件用途，并避免让屏幕阅读器播报每一帧动画。 - **分别关闭动效和 WebGL。** 启用减少动态效果设置后，有用的输入操作仍应保留。着色器不可用时，基础 SVG 和文字也应能说明主题。 - **测量完整页面。** 在所有插图同时存在时，检查加载体积、输入响应和滚动表现。先使用 SVG，只有当 GPU 效果能帮助解释内容时再添加。 - **检查网络请求。** 生成的浏览器插图可以在没有额外模型调用的情况下运行。请确认实际输出没有意外加载远程字体、分析工具或服务。 - **保留可维护的源码。** 将提示词、模型假设、选定的技能版本、构建源码和通过验收的输出保存在一起，并指定后续修改的负责人。 源码工具包采用 [MIT 许可证](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/LICENSE) 。重新分发代码时，应保留许可证要求的声明。开源许可与使用编程智能体、审查其输出所产生的成本是两回事。 ## 先选一个读者经常难以理解的问题 合适的主题包括组件的装配顺序、缓冲区逐渐填满，或阀门如何改变流量。先从已经反复引发疑问的说明入手。请几位目标读者预测下一状态，再将他们的答案与插图结果比较。这能帮助你具体判断插图是否有用。 简单的依赖关系，用常规示意图可能就够了。数值趋势适合用图表。只有当亲手操作一个机制有助于理解时，Anatomy 才更值得使用。 生成的插图通常经过构建和审查后，作为页面资源发布。如果你的目标是让界面随对话动态变化，我们的 [Intelligent UI 与 OpenUI 实现指南](/zh/blog/openai-intelligent-ui-vs-openui/) 介绍了那种不同的应用架构。 如果要将这种方式引入团队文档流程，请先准备一个难以讲清楚的问题，以及它正确的预期行为。Wavect 的 [AI Enablement 服务](/zh/services/ai-enablement/) 可以帮助团队建立可重复执行的智能体工作流和审查流程。 ## Anatomy 技能常见问题 ### Anatomy Claude Code 技能是什么？ Anatomy 是开源项目 wheresryan22/anatomy。它引导编程智能体使用 SVG 和 JavaScript 创建等距投影插图，并提供可选的 WebGL 效果和测试版 3D 模式。它可以输出独立页面或应用组件。 ### Anatomy 可以免费使用吗？ 源码工具包采用 MIT 许可证。编程智能体的使用、实现和审查仍可能产生成本。完成后的浏览器插图并不需要为每次交互都调用 AI。 ### 可以把交互式 Anatomy SVG 放进 img 标签吗？ 以图片方式嵌入无法保留 JavaScript 交互。请使用独立 HTML 嵌入，或将 SVG、脚本和控件集成到页面中。另保留图片版本用于静态预览。 ### Anatomy 支持 React 和 Next.js 吗？ 支持。仓库包含 React 集成指南，将静态图形与客户端动效分开。发布前应检查完整页面的 hydration、重复实例和清理逻辑是否存在问题。 ### Anatomy 能替代工程仿真工具吗？ 该项目提供插图工作流和渲染检查，无法据此认定生成的模型适合支持工程决策。请与相应领域的负责人一起验证公式、假设和单位。 ### 每张 Anatomy 插图都需要 WebGL 吗？ 不需要。SVG 是核心渲染方式，WebGL 用于补充水面或尾焰等效果。只有当效果有助于解释主题时才选择它，并单独测试 SVG 降级方案。 智能体工程 ## 接下来读什么 编程智能体、MCP、上下文系统、评估与可靠自动化控制。 [从这里开始**AI 智能体的图工程：知识图谱什么时候值得做？**](/zh/blog/graph-engineering-ai-agents/) - [Google AX Agent Executor：预算、沙箱与自托管](/zh/blog/google-ax-agent-executor-security-self-hosting/) - [WikiSkill：智能体如何从经验中进化 SKILL.md](/zh/blog/wikiskill-self-evolving-agent-skills/) - [腾讯 Octop 评测：开发者真正免费获得了什么](/zh/blog/tencent-octop-ai-assistant-review/) - [Wigolo 评测：AI Agent 的本地优先 Web Intelligence](/zh/blog/wigolo-local-web-intelligence-mcp-review/) - [Supermemory：AI 智能体记忆、RAG 与本地部署指南](/zh/blog/supermemory-ai-agent-memory/) [下一篇文章**Google AX Agent Executor：预算、沙箱与自托管**](/zh/blog/google-ax-agent-executor-security-self-hosting/) [**返回**](/zh/blog/overview/) [![Kevin Riedl](/img/team/kevin.webp)](/zh/team/kevin-riedl/) [Kevin Riedl](/zh/team/kevin-riedl/) https://linkedin.com/in/wsdt 10 分钟 阅读 · 2026年10月12日 最近审核 2026年10月12日 [**下一篇**](/zh/blog/claude-code-design-system-files/)