Anatomy 实测：用「实物比喻」解释抽象技术概念的 Agent Skill

7459 stars · MIT · Agent Skill（Claude Code / OpenCode / Codex）

它解决什么问题

技术概念的解释长期依赖框图：方块 + 箭头。但框图只描述"是什么"，不解释"为什么"------除非读者已经懂了。

Anatomy 换了个路径：把抽象概念翻译成一个真实、可运转的物理装置，再把该装置渲染成可交互的等距图。

举例（项目原文的思路）：

抽象概念	它画成什么
缓存命中才跳过计算	一把弹子锁：所有弹子顶到同一高度才转得动
令牌桶限流	一个真的会漏水的桶
并发控制	一套齿轮咬合机构

技术形态

项	说明
类型	Agent Skill（非独立软件）
兼容	Claude Code / OpenCode / Codex
输出	SVG，可选 SVG+WebGL、3D
依赖	无（仅用 Node 内置模块，不需要 npm install）
API Key	不需要
许可证	MIT

安装与使用

sh 复制代码

# Claude Code（全局）
npx skills add wheresryan22/anatomy -g -a claude-code

# OpenCode / Codex 把 agent 换掉
npx skills add wheresryan22/anatomy -g -a opencode
npx skills add wheresryan22/anatomy -g -a codex

调用（Claude Code / OpenCode）：

text 复制代码

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

Codex 中使用 $anatomy。

生成结果包含标题、提示信息与实时读数卡片，支持交互操作（如拨动弹子观察锁芯状态）。

适用与不适用

适合：

需要向非技术方解释机制（方案评审、客户沟通、技术分享）
技术文档 / 文章配图
教学场景：用具体装置建立直觉

不适合：

需要精确尺寸与工程规范的图纸（输出为风格化等距图，非工程图）
无 agent 环境的场景（依赖 Claude Code / OpenCode / Codex）
替代业务判断（它能解释"机制如何运作"，不解决"该不该这么做"）

小结

这个项目的价值不在渲染质量（虽然输出确实精细），而在它把一个被忽略的问题单独处理了：从抽象到具体的翻译。这一步过去靠人的灵感，现在可以交给 agent 反复尝试，挑出最贴切的比喻。

项目地址：https://github.com/wheresryan22/anatomy