这是什么
Anatomy 是一个开源的 Agent Skill，由开发者 wheresryan22 创建，旨在通过构建真实、可工作的物体来直观解释技术概念。它利用 Claude Code 等 AI 代理，生成高度精细的等距（isometric）交互式插图，这些插图以 SVG 为核心，可选配 WebGL 着色器和 3D 效果，让抽象的原理变得触手可及。
该技能的核心思想是：当你要求 AI 解释一个技术想法时，Anatomy 会发明一个物理实体，其工作原理恰好体现了该概念。例如，一个缓存键（cache key）在数据未变化时跳过工作，可以被设计成一个弹子锁，只有当每个弹子都匹配时才能转动。这种“用实物讲原理”的方式，让复杂的技术知识变得直观且易于理解。
Anatomy 生成的每个图形都包含数十个小型、实心、带阴影的部件，并放置在一个带标题、提示和实时读数的框架卡片中。图形会在鼠标悬停和键盘操作下平稳运动，AI 还会通过放大检查每个关节来验证自己的作品。图中显示的每个数字都来自驱动部件运动的同一个模型，确保准确性和一致性。
适合谁
Anatomy 特别适合以下人群：
- 技术博主和内容创作者：需要将复杂的技术概念以视觉化方式呈现给读者，提升文章或视频的吸引力。
- 教育工作者：在教学中使用交互式插图，帮助学生更直观地理解抽象原理。
- 开发者：希望快速生成技术文档中的示意图，或为项目创建精美的可视化组件。
- 产品经理和技术传播者：需要向非技术背景的受众解释技术方案。
无论你是技术专家还是初学者，只要你有想法，Anatomy 都能帮你将其转化为精美的视觉作品。
能做什么
Anatomy 可以生成三种类型的图形，所有图形共享同一套工具、相机和工艺规则：
| 类型 | 说明 | 示例 |
|---|---|---|
| SVG | 核心类型。实心等距部件，四色调阴影，从后到前绘制，带实时读数和缓动动画。可输出为独立 HTML 页面、独立 SVG 文件或 React/Next.js 组件。 | dial-indicator, desk-computer, arcade-cabinet, test-rig |
| SVG + WebGL | 用于线条无法表现的火焰、废气、水、焦散、灯光、辉光、蒸汽等效果。着色器在前后 SVG 之间的画布中运行，使用图形自身的等距相机，因此效果融入图形内部。即使没有 WebGL，SVG 仍可正常阅读。 | raptor-engine, ripple-tank |
| 3D（测试版） | 支持真正 3D 旋转的部件：可旋转的表盘、转台，可弯曲的手指，可断裂掉落的部件。移动部件每帧重新投影和着色，其余部分保持静态艺术。 | turning-dial |
每个图形都支持浅色和深色主题，浅色是技能优先设计的主题，包括着色器效果。
使用前准备
要使用 Anatomy，你需要：
- 安装 Node.js 20.10 或更高版本（技能本身无依赖，仅使用 Node 内置模块）。
- 一个支持的 AI 代理：Claude Code、OpenCode、Codex 或 Antigravity。
- 无需 API 密钥，无需额外 npm 安装。
安装方法
Anatomy 是一个标准的 Agent Skill，即一个包含 SKILL.md 的文件夹。你可以通过以下几种方式安装：
使用 skills CLI（推荐）
对于 Claude Code，全局安装：
npx skills add wheresryan22/anatomy -g -a claude-code对于其他代理，替换 -a 参数：-a antigravity、-a opencode 或 -a codex。若仅安装到当前项目，去掉 -g。
使用 git 克隆
例如，对于 Claude Code 用户级安装：
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy对于其他代理，将目标路径替换为对应的技能文件夹。
下载 ZIP
从 GitHub 下载 ZIP 文件，解压后将文件夹重命名为 anatomy，移动到对应的技能目录。macOS/Linux 一行命令示例：
mkdir -p ~/.claude/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.claude/skills/anatomy安装后，Claude Code 会在会话中自动识别新技能。如果技能文件夹在会话启动时不存在，运行 /reload-skills。其他代理可能需要重启。
使用示例
安装完成后，在 Claude Code 中直接输入命令：
/anatomy explain how a token bucket rate limiter works, interactive在 OpenCode 中使用相同的 /anatomy 命令；在 Codex 中则输入 $anatomy。AI 会生成一个交互式等距插图，展示令牌桶限流器的工作原理。
你还可以尝试其他示例，例如：
/anatomy explain how a cache key works—— 生成一个弹子锁插图。/anatomy explain GPU context sharing—— 生成一个龙门绘图仪插图。
生成的图形会以 HTML 页面形式呈现，你可以直接打开查看交互效果。
风险与注意事项
- Codex 沙箱限制：技能会通过启动无头 Chrome 来检查图形，但 Codex 的沙箱可能阻止 Chrome 运行。此时图形仍会生成，但检查会失败。建议在 Codex 提示时批准在沙箱外运行检查，或调整
~/.codex/config.toml中的审批策略。 - Node.js 版本：确保 Node.js 版本不低于 20.10，否则可能无法正常运行。
- 3D 模式为测试版：3D 功能仍在开发中，可能不稳定，建议用于实验性项目。
- 资源占用：生成的图形可能包含大量部件，交互时对性能有一定要求，建议在较新的设备上使用。
- 开源协议：该项目使用 MIT 许可证，你可以自由使用和修改，但需保留版权声明。
Anatomy 是一个强大的可视化工具，能够将抽象概念转化为精美的交互式插图，极大地提升技术传播的效率。如果你需要向他人解释复杂的技术原理，不妨试试这个技能。