Anatomy

Anatomy是一款Claude技能包，也可在OpenCode与Codex上运行，核心思路是把抽象技术概念，转化为一套真实可交互的实体模型来完成讲解。例如把缓存键机制类比弹子锁，GPU多画布上下文类比单打印头遍历16个工位的龙门绘图仪。模型由大量精细零件组成，支持SVG、WebGL、3D三种渲染形式，自带指针与键盘驱动动画，还会自检每个关节细节，图面上显示的数值和部件运动共用同一套底层模型。

模型输出类型

一共三类可视化方案，共享同一套相机与制作规范：

• SVG：基础等距零件，四色调着色，输出独立HTML、内嵌样式SVG，或是React/Next组件，示例：拨号指示器、台式计算机、测试台
• SVG + WebGL：用于火焰、水流、光晕、蒸汽等光学特效，WebGL画布嵌入SVG等距场景，无WebGL环境下SVG仍可正常展示，示例：引擎、波纹水槽
• 3D beta：支持旋转转盘、可活动机械部件，每一帧重新投影着色，其余画面保持静态，示例：可旋转刻度盘

同时提供浅色、深色两套主题，浅色为默认设计基准。

安装方式

通过skills CLI一行命令快速安装：

npx skills add wheresryan22/anatomy -g

CLI会询问目标Agent，可追加 -a claude-code / -a antigravity / -a opencode / -a codex 跳过交互。

也支持Git克隆、直接下载压缩包手动部署，安装位置随Agent不同区分目录。工具仅依赖Node内置模块，不需要API Key，也不用额外npm安装依赖。

Codex环境注意：模型自检会启动无头Chrome，沙箱可能拦截；可修改配置放开权限，或手动执行图片捕获脚本完成校验。

使用示例

Claude Code、Antigravity、OpenCode使用 /anatomy，Codex使用 $anatomy。

示例指令：

/anatomy explain how a token bucket rate limiter works, interactive

无需手动唤起技能，只要要求生成等距插图、文档/博客交互式原理图，Agent会自动调用Anatomy。

最佳实践要点：描述需要解释的原理与真实参数，交由工具自行构思实体；或者直接指定实体对象+运动效果；同时说明输出载体（独立HTML、SVG、React组件）与主题。

生成产物的源码完全归使用者所有，包含构建脚本、几何模块、静态与动态组件。

要点小结

1. Anatomy是Agent技能，将抽象技术概念转化为可交互等距实物模型，覆盖SVG、WebGL、3D三种形式，适配Claude Code、OpenCode、Codex。
2. 一行CLI命令部署，仅依赖Node内置模块，无需API密钥；产物可输出HTML、SVG、React组件，源码归属用户。
3. 支持令牌桶、连接池、CDN缓存等技术原理可视化，自带动画、实时读数与自检机制，适合技术文档与博客配图。