它解决什么
问 Claude 解释一个技术概念时，Anatomy 会发明一个物理物件，让这个物件的运作本身就是那个概念：
- 缓存 key 命中才跳过工作 → 一把弹子锁，每根弹子对齐才转得动
- 一个 GPU context 服务多个 canvas → 一台龙门绘图仪，单个打印头依次拜访 16 个工位
然后 Claude 用几十个小而精确的、有立体感和阴影的零件把这个东西搭出来，放进一张带标题、提示和实时读数的卡片里，让它随着鼠标和键盘平静地动起来，还会自己放大每一处关节做检查。图里显示的每个数字，都来自同一个驱动它动作的小模型。
三种形态
| 形态 | 说明 | 例子 |
|---|---|---|
| SVG（核心） | 四色调阴影的实心等距零件，从后往前绘制，卡片内带实时读数与缓动 | dial-indicator、desk-computer、arcade-cabinet |
| SVG + WebGL | 画线画不出的东西：火焰、尾焰、水、焦散、灯光、辉光、蒸汽。着色器在前后两层 SVG 之间、用同一套等距相机运行 | raptor-engine、ripple-tank |
| 3D（beta） | 真正旋转的零件：转盘、曲柄、屈伸的手指、断裂坠落的部件，每帧按同一套规则重新投影与着色 | turning-dial |
每张图都有明暗两套主题（浅色优先设计，含着色器）。产物可导出为独立 HTML 页、内嵌样式的单个 SVG，或 React / Next.js 组件。
安装
Anatomy 是标准的 Agent Skill（一个带 SKILL.md 的文件夹），支持 Claude Code、Antigravity、OpenCode、Codex、MiniMax Code：
# 全局安装（会问你要给哪个 agent 装）
npx skills add wheresryan22/anatomy -g
# 指定 agent
npx skills add wheresryan22/anatomy -g -a claude-code
npx skills add wheresryan22/anatomy -g -a opencode
npx skills add wheresryan22/anatomy -g -a codex
或用 git 直接克隆进对应 skills 目录：
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy # Claude Code
git clone https://github.com/wheresryan22/anatomy.git ~/.config/opencode/skills/anatomy # OpenCode
要求：Node ≥ 20.10，零依赖（只用 Node 内置模块，无需 API key、无需 npm install）。
用法
Claude Code 里：
/anatomy explain how a token bucket rate limiter works, interactive
OpenCode / Antigravity / MiniMax Code 用同样的 /anatomy；Codex 里输入 $anatomy。
亮点
- 零依赖：不用装任何 npm 包，纯 Node 内置模块
- 自检机制：生成后自己放大检查每处关节，还有「无管道穿模」的审计（静止、拆解、以及中间每一帧）
- 讲解即构造：不是画示意图，而是造出一个真的能动、数字自洽的实体
- 产物可直接用：独立 HTML / 单文件 SVG / React 组件，方便嵌进文档、博客、教学材料
适合谁
- 写技术博客/文档，需要一眼看懂的配图（而不是又一张方块流程图）
- 做技术讲解、课程、教学材料
- 想给复杂的系统设计（缓存、限流、并发、数据流）找物理直觉的人
- 玩 Agent Skill 生态、想给自己的 agent 加一个"可视化输出"能力的人
▶ 前往 GitHub 仓库 · 12697★