开源技能 Anatomy：一句话让 AI 生成可交互 3D 机械图解

Anatomy 是一个给编程智能体使用的开源技能，能把你输入的一行抽象技术概念，直接变成一台可交互、在运转的等轴测立体机械。

平时解释系统架构或底层算法，大家习惯画方框、箭头和流程图。Anatomy 换了个思路：它放弃抽象图表，把原理具象化为几十个精密的机械零件。比如解释跳过重复计算的缓存机制，它会画成一把弹子锁，只有每个锁销完全对齐钥匙才会转动；解释多个画布共享单个 GPU 上下文，它会画成一台带有移动打印头的绘图仪。

它能生成什么

通过 Anatomy 生成的图解支持三种形态，而且全部遵循统一的等轴测视角和光影规范。

第一种是纯 SVG 矢量图。这是核心模式，零件具有四色阶阴影，按由远到近层层绘制，配有实时读数卡片和缓动动画。输出物可以直接作为独立 HTML 网页、内嵌样式的单个 SVG 文件，或者 Next.js 与 React 组件，非常适合塞进技术文档或官网博客。

第二种是 SVG 混合 WebGL 着色器。当画面涉及火焰、废气、水流、焦散光斑、蒸汽这类线条无法表现的流体时，它会在前后两层 SVG 之间夹一个 WebGL 画布，比如模拟猛禽火箭发动机喷气或水波槽实验。

第三种是测试中的 3D 模式。针对旋转刻度盘、机械手指弯曲或零件脱落等场景，智能体会对移动部件逐帧重新投影并计算明暗，兼顾立体运动与静态质感。

怎么装进你的智能体

Anatomy 本质上是一个标准的 Agent Skill 规范目录，核心是一份指令文件，完全使用 Node.js 原生模块，不需要额外的 API Key，也不用安装多余的 npm 依赖。

你可以通过命令行一键全局安装：运行 npx skills add wheresryan22/anatomy -g 即可。它支持五大编程智能体环境，包括 Claude Code、Antigravity、OpenCode、Codex 以及 MiniMax Code。如果使用 Git，直接把项目代码克隆到对应工具的 skills 目录下也能直接加载。整个仓库连同样例大约 10 MB，运行需要 Node.js 22.20 或更高版本。

安装完成后，在智能体对话中输入 /anatomy 加上你想解释的机制即可。例如输入 explain how a token bucket rate limiter works, interactive，模型就会自动推导物理隐喻、编写代码、甚至在后台启动无头浏览器检查零件之间是否有穿模。

为什么重要

我们认为 Anatomy 是技术写作和交互演示领域极其聪明的微创新。过去开发者写技术博客或架构文档，想要高质量动图要么靠三维建模软件硬做，要么只能贴简陋的流程图。Anatomy 抓住大模型擅长打比方和写前端代码的特长，把枯燥的参数映射成齿轮转动与指针摆动，让复杂的工程原理一目了然。

如果你经常需要写开源文档、技术博客或产品主页，现在就很值得把它集成到本地开发工作流中。不过需要提醒的是，自动化检查依赖无头 Chrome 环境，如果在 Codex 等具备沙箱限制的环境下运行，需要手动放宽部分本地网络或临时目录写入权限。