anatomy

Anatomy 是由开发者 Ryan（GitHub 用户名 wheresryan22）发起并持续维护的开源 Agent Skill，核心定位是“用一个会动的实物，解释一个抽象的概念——它不画方框和箭头，而是让 AI 发明一台真实的、由数十个精密零件构成的等轴测机器，让这台机器的运转本身就是那个原理”。它不满足于做一份又一份的流程图或架构框图，而是将等轴测机械建模、四色明暗着色、SVG + WebGL 双图层渲染、指针与键盘交互、实时读数联动、自检审计整合于一套完整的技能体系中，全部配有 npx skills add 一行安装、零 API Key、零 npm 依赖（仅用 Node 内置模块），以及 MIT 开源协议。

一、Anatomy 是什么

Anatomy 采用“Agent 发明物件 + 绘图工具包执行 + 自检审计收尾”的三段式架构，通过 GitHub 完全开源发布，采用 MIT 许可证。项目由 Ryan 于 2026 年 10 月 8 日创建，上线三天即获得约 2,176 Stars，随后迅速攀升至 19,000–23,000 Stars 区间，成为当月 GitHub Trending 上最受关注的 Agent Skill 之一。它作为一个标准的 Agent Skill（根目录含 SKILL.md）运行，兼容 Claude Code、Antigravity、OpenCode、Codex 和 MiniMax Code。

Anatomy 的运作机制与市面上所有“AI 生成图表”工具都有本质区别。它的 SKILL.md 最顶部写着一句话：“The object is the explanation.”（物件本身就是解释。） 你告诉 Claude“解释一下令牌桶限流器怎么工作”，Anatomy 不会画一个方框写上“Token Bucket”——它会真的造一个桶、一个进料口、一个出料阀、一圈管道，按固定的等轴测相机把这一堆零件投到平面上，再按光源方向一层一层刷上明暗。缓存键被发明成一把弹子锁，只有每一根弹子都对齐才能转动；一个 GPU 上下文服务多个画布被发明成一台龙门绘图仪，单个打印头依次造访 16 个孔位。物件不是从参考图里抄的——参考图只给材质和氛围，物件本身是 Claude 现场发明的。

二、Anatomy 能做什么

三种图层模式：SVG、SVG + WebGL、3D（beta）（绘）——不是“只能画静态线稿”，而是“按内容需要选择最合适的渲染层”。SVG 是核心：实心等轴测零件、四色明暗、从后往前绘制，封装在一张带标题、提示和实时读数的卡片里，输出为独立 HTML 页面、独立 .svg 文件或 React/Next.js 组件。SVG + WebGL 用于“线条画不出来的东西”——火焰、尾气、水、焦散、灯光、辉光、蒸汽。Shader 在前后两层 SVG 之间的 Canvas 中运行，使用与图形本身相同的等轴测相机，所以 WebGL 效果“坐在画里面”，而不是飘在外面。3D（beta） 让零件在真三维中旋转——表盘转动、手指弯曲、零件脱落坠落——运动部件每一帧都被重新投影和着色，其余部分保持静态艺术。

交互与实时读数——物件会回应你，数字会跟着动（交）——不是“静态插图”，而是“可以拖、可以按、可以读的机器”。指针悬停可以拆解装配体：Raptor 发动机悬停后拆成 11 个总成，审计证明没有任何管道穿过其他物体——静止时、拆开时、以及两者之间的每一帧都成立。键盘可以控制时间：按 S 把时间放慢到二十分之一，再按一次到百分之一，你可以看到擒纵叉一次只放行半个齿的十五齿擒纵轮。每一个数字都来自驱动零件的同一个模型——不是贴上去的装饰标签。

从一行概念到一台机器的完整生成链路（生）——不是“你要画什么”，而是“你要解释什么”。提示词就是想法本身——“解释 LRU 缓存如何淘汰条目”就足够了，决定它应该是一个书架是 Claude 的工作，不是你的。三个关键词改变产出：interactive 让图形响应指针和键盘，省略则得到静态图；WebGL 为火焰、水、等离子体、流动空气启用着色器；3D 启用 beta 三维模式。生成完成后，Claude 会放大检查每一个关节来验证自己的工作。

自检审计与字节级可复现的 CI（验）——不是“画完就算”，而是“用另一套规则检查自己”。Raptor 发动机的审计规则是“没有任何管道穿过任何东西”，在静止、拆解和每一帧过渡中都成立。仓库附带 8 个示例，CI 在 macOS + Node 22 上重建每一个示例并要求输出字节级一致——这意味着同一份输入在任何机器上产生完全相同的结果。

零依赖、零 API Key 的极简工程（装）——不是“又要配环境、又要买 Key”，而是“一行命令，Node 内置模块搞定”。npx skills add wheresryan22/anatomy -g 即可安装，CLI 会询问你为哪个 Agent 配置；用 -a claude-code、-a antigravity、-a opencode、-a codex、-a minimax-code 可跳过询问。没有 API Key，没有 npm install，只用 Node 内置模块。也支持 git clone 到对应 Agent 的 skills 目录。

三、Anatomy 适合谁用

技术博主与科普创作者——需要把令牌桶、LRU 缓存、布隆过滤器这类抽象机制讲清楚，但不想再画一套“方框 + 箭头”的八股图。Anatomy 给你一台可以拆、可以按、有读数的机器，让读者在交互中“摸到”原理。

技术文档与 API 文档作者——文档里的架构图和流程图往往“告诉你有这些部件，但不告诉你部件在做什么，读者得自己想象箭头代表的运动”。Anatomy 用实物运动替代箭头，让“这块在干什么”从脑补变成可视。

AI 编码 Agent 的重度用户——已经在用 Claude Code、Codex 等 Agent，想给 Agent 增加一项“把概念画成机器”的能力。安装零依赖、零 Key，不增加环境负担。

教育工作者与课程设计师——需要让学生“看见”抽象机制如何运转。慢放时间、拆解装配、实时读数的交互，把静态教材变成可以动手操作的教具。

Agent Skill 开发者与研究者——希望研究“Agent 如何用代码发明一个符合物理约束的物件、并自检其几何正确性”。Anatomy 的 SKILL.md 规则、绘图工具包和审计脚本，是一个可拆解、可复现的完整参考实现。

不适合谁——需要“标准流程图/架构框图”而非机械插图的场景；需要生产级工程图纸或 CAD 精度的场景；对生成时间敏感的场景（一个机械表芯示例由 Claude 自主工作约 1 小时 54 分钟完成）。

四、Anatomy 的应用场景是什么

抽象算法与数据结构的“实物化讲解”场景——讲令牌桶限流器，画一个桶、进料口、出料阀和管道，按等轴测相机投影、按光源刷明暗；讲 LRU 缓存淘汰，造一个四格书架，最近使用的放在最左边；讲布隆过滤器，做一台三卷轴的水果机，三个卷轴就是三个哈希函数，只有所有旗标都立起来才赔付。

技术概念科普视频的素材生成场景——有创作者将 Anatomy 生成的等轴测插画与网页逐帧录制、配音和编码流程结合，做出了新能源车刹车踏板讲解视频，并比较了两种模型的画面效果。Anatomy 本身不生成视频，但它为科普视频提供了“每一帧都讲得通”的视觉素材。

产品与技术原理的交互式文档插图场景——文档里嵌入一个可以拖、可以按、可以读数的等轴测机器，让读者从“读说明”升级为“操作说明”。输出格式支持独立 HTML、独立 SVG 和 React/Next.js 组件，可以嵌入任何前端项目。

Agent 自主生成复杂几何体的能力验证场景——一个机械表芯示例从一行提示词出发，Claude 自主工作 1 小时 54 分钟，完成整条擒纵链路的建模、着色、交互和读数联动。这为“Agent 能在多大程度上自主完成需要物理直觉和几何一致性的创作任务”提供了一个可观测的案例。

教学演示与课堂互动场景——按 E 拆开桥板看到下方轮系，按 S 放慢时间观察半齿放行，拖动表冠给发条上链看动力储备攀升。这些交互把“机械原理”从静态知识点变成可以亲手摆弄的过程。

五、Anatomy 为什么值得关注

从“画图表”到“造机器”的认知升维。大多数解释性图表告诉你“部件存在”，但不告诉你“部件在做什么”；箭头代表了运动，但运动本身要读者自己去想象。Anatomy 用一个极其简单但极其有力的规则翻转了这个范式：物件本身就是解释。缓存键不是方框，是一把只有弹子全对齐才能转动的锁；队列不是箭头，是一条弹珠轨道，弹珠在擒纵机构后面按顺序等待。这种“造物式解释”让抽象概念第一次有了可以被“摸到”的物理形态。

“让 Agent 发明物件，而不是执行绘图指令”的创作范式。你告诉它“解释 LRU 缓存如何淘汰”，它自己决定“应该造一个书架”——这个决定是 Claude 做的，不是你做的。这意味着 Agent 在这个任务里承担的不是“渲染器”角色，而是“发明者”角色。它要从概念中提炼出“什么物理结构的行为等价于这个原理”，然后用几十到上百个小零件把这个结构造出来。这种“概念→物理隐喻→机械实现”的完整创作链，在 Agent 工具中极为罕见。

自检审计 + 字节级 CI——把“好看”变成“可验证”。Raptor 发动机的审计规则是“没有任何管道穿过任何东西”，在静止、拆解和每一帧过渡中都必须成立。8 个示例在 CI 中被重建，要求输出字节级一致。这意味着 Anatomy 产出的不是“一张看起来不错的图”，而是一个几何关系可验证、渲染结果可复现的工程化产物。在一个“AI 生成即抽卡”的时代，这种可验证性本身就是稀缺品。

SVG + WebGL 的“图层内嵌”架构——用对的工具画对的材质。线条擅长画结构，但不擅长画火焰、尾气、水、焦散和辉光。Anatomy 让 WebGL shader 在前后两层 SVG 之间的 Canvas 里运行，使用图形本身的等轴测相机，所以火焰“坐在画里面”，而不是叠在外面。同时，没有 WebGL 时 SVG 仍然可读——这不是“要么全要要么全丢”的二元设计，而是渐进增强的工程思维。

零依赖、零 API Key——“轻”本身就是一种能力。npx skills add 一行安装，只用 Node 内置模块，不需要 npm install，不需要 API Key。在一个 Agent Skill 越来越重、越来越依赖外部服务的趋势中，这种“零负担接入”让尝试成本趋近于零。

19,000+ Stars、三天 2,100+ Stars 的社区验证。项目上线三天获得约 2,176 Stars，随后迅速增长至 19,000–23,000 Stars 区间，被多个技术媒体和社区收录报道。一个“解释概念”的 Skill 获得这种量级的关注，说明“把抽象讲清楚”是一个被严重低估的刚需。