一款名为 Anatomy 的开源技能（Skill）近日进入开发者视野：它并不沿用流程图或框图来解释技术概念，而是让 AI 先设想一台真实存在的物理装置，再用这台装置的运转过程来映射概念本身。举例来说，缓存淘汰策略被转化为一组弹子锁，GPU 上下文调度则被做成龙门绘图仪。项目以 MIT 许可证开放，只依赖 Node.js 内置模块，使用者无需额外安装其它件。
三种渲染模式：SVG、SVG+WebGL 与 3D（Beta）
Anatomy 的输出方式分为三档。其中 SVG 是主要路径：它把道具绘制成带四色调明暗的等距视图零件，依深度次序堆叠，最终产出可以是单独的 HTML 页面，也可以是纯 SVG 文件。SVG+WebGL 方式则在各 SVG 图层之间插入 WebGL 着色器，专门处理火焰、水流、光晕这类线条难以刻画的视觉效果。至于仍在 Beta 阶段的 3D 模式，允许零件在立体空间中真正旋转，例如转盘转动、手指弯折等带动效的场景。
几何审计：自动核对穿透、支撑与叠放次序
每当一幅图形构建完成，Anatomy 都会自动触发一次几何审计（audit），检查物品之间有没有相互穿透、每个端点是否都获得了支撑、全部重叠区域是否依照深度关系描绘。审计借助无头 Chrome 截图、局部特写以及慢动作接触表来推进，逐个确认每处关节都被核验过。
五个平台通用：遵循 Agent Skills 开放格式
该技能依照开放的 Agent Skills 格式实现，因而能装入 Claude Code、Antigravity、OpenCode、Codex 与 MiniMax Code 五个平台。安装方式一致，即执行命 npx skills add wheresryan22/anatomy -g，再用 -a 参数指明要安装到哪个平台。
从流程上看，Anatomy 要走过六个环节：读取文本提示、构思物理装置、列出零件明细、搭建几何体、执行审计验证，最后交付可交互图形。每幅图形都由数十个细小的实体零件构成，画面上呈现的所有数字读数，均出自驱动这些零件运动的同一个模型。
绘图库与依赖：iso-kit、lathe、tube、gl、turn
核心绘图库（kit）打包了等距相机、实体零件库、车削零件、管道电缆、WebGL 图层以及 3D 运行时等模块；在 React 组件之外，不再引入第三方依赖。运行环境方面，需要 Node.js 20.10 及以上版本，并配有 Chrome 或 Chromium。
装入后可直接在 Claude Code 下调用，比如输入 /anatomy explain how a token bucket rate limiter works, interactive 即可。项目已提供两个网址：代码仓库位于 https://github.com/wheresryan22/anatomy，项目主页为 https://skills.wheresryan.sh/anatomy。
适用对象与边界：机制示意图优于数据图表
Anatomy 服务的是需要高质量技术插图的开发者及技术文档撰写者。若文档、博客或产品落地页希望呈现一张能「动起来」的机制示意，它带来的观感胜过静态图表。它的长处是有清晰机械类比的题目，例如缓存、限流、连接池；而制图类型的数据图表、含人物的场景不在其擅场之内。值得说明的是，生成的图形归使用者所有，交付形式为源代码，既能置入 React/Next.js 项目，也可当作不含依赖的独立 HTML 页面使用。
小结：Anatomy 把「概念解释」转化为实体机械装置的演示，配合自动几何审计与五种 Agent 平台的兼容能力，为技术文档的插图生产提供了新做法。其 MIT 许可与源码交付属性，让生成结果可以合法地嵌入工程与官网场景。