🧩
画懂一台机器：让 AI 把技术概念变成看得懂的图解
Anatomy：把抽象概念"做成一个真实能动的物件"再画成等距 SVG/WebGL/React 图解，零第三方依赖
12.9k Star
MIT
零第三方依赖
📖 它是什么
Anatomy（仓库 wheresryan22/anatomy）是一个 Claude / Agent Skill，官方一句话定位：A Claude skill that explains an idea by building it as a real, working object——把一个技术概念"做成一个真实能动的物理物件"来讲解。它不像 Mermaid 那样给你满屏的方框箭头，而是把抽象概念发明成一个实体机构，再画成很多小零件拼起来的等距图解：缓存 key 跳过早该跳过的工作 → 变成一把每根销都匹配才转得动的弹子锁；一个 GPU 上下文服务多个画布 → 变成一台单打印头巡回 16 个井的龙门绘图机。
输出非常精致：SVG / SVG+WebGL / React·Next.js 组件三种形态，带标题、提示和实时读数，鼠标和键盘下会平稳地动，还能自己放大每个关节检查画得对不对；图上的每个数字都来自驱动零件运动的同一个模型。2026-10-08 上线，一周多已拿到 12.9k Star、947 Fork，采用 MIT 协议，官网在 skills.wheresryan.sh/anatomy。
要强调的是：零第三方依赖——官方明说 "No API keys and nothing to npm install: the kit uses only Node's built-in modules"。只需 Node.js 20.10+，外加一个 Chrome 或 Chromium（仅用于它自动自检自己的图），就能跑。除 React 输出那一档需要 React 18+ 外，其余完全内建。
📎 仓库：github.com/wheresryan22/anatomy ｜ 官网：skills.wheresryan.sh/anatomy ｜ 作者：@wheresryan22
✨ 核心亮点
🔧
概念做成实物
把抽象 idea 发明成"能动的物理物件"来讲解
🎨
等距 SVG/WebGL
几十个小零件拼成的精致等距图解，可选着色器/3D
🪶
零第三方依赖
只用 Node 内建模块，无 API key、无需 npm install
🖥️
多 Agent 可用
Claude Code / Antigravity / OpenCode / Codex / MiniMax Code
🖥️ 环境要求
| 系统 | macOS / Linux / Windows 均可（浏览器自检脚本覆盖三平台） |
| 运行环境 | Node.js 20.10+（示例在 20.19 / 22.11 重建通过；内建模块，零 npm 依赖） |
| 硬件 | 常规即可；WebGL/3D 输出建议有支持 GPU 的浏览器 |
| Agent 宿主 | Claude Code，或 Antigravity / OpenCode / Codex / MiniMax Code（开放 Agent Skills 格式） |
| 关键依赖 | Chrome 或 Chromium（仅自动自检用，可设 CHROME_PATH）；React 18+ 仅 React 输出档需要 |
🚀 上手步骤
① 安装到你的 Agent
在命令行用官方一键安装命令，CLI 会问你要装到哪个 Agent（Claude Code / Antigravity / OpenCode / Codex / MiniMax Code）：
npx skills add wheresryan22/anatomy -g想跳过选择、直接指定宿主，加对应参数，例如：-a claude-code、-a opencode、-a codex、-a minimax-code。
② 在 Agent 里调用
在 Claude Code / Antigravity / OpenCode / MiniMax Code 里输入 /anatomy 加你要解释的概念（Codex 里用 $anatomy）：
/anatomy explain how a token bucket rate limiter works, interactive它就会发明一个能动的物理物件、画出等距图解，并放大每个关节自检。
③ 拿成品
产出是一张带标题/提示/实时读数的成品图，可输出为独立 HTML 页、单个 .svg 文件（样式内嵌）或 React/Next.js 组件（这档需 React 18+）。把图放进你的文档、博客或演示即可。
④ 关于自检与 Chrome
它会自动用 headless Chrome 检查自己的图。若 Codex 沙箱拦了 Chrome，允许那几条命令即可；也可自己用 node scripts/capture.mjs page.html --out shots/page.png 手动出图。
📊 关键速查
| 安装 | npx skills add wheresryan22/anatomy -g（可加 -a 指定宿主） |
| 调用 | /anatomy 概念（Codex 用 $anatomy） |
| 输出形态 | SVG / SVG+WebGL / React·Next.js 组件（React 输出需 React 18+） |
| 依赖 | Node 20.10+ 内建模块（零第三方）；Chrome/Chromium 仅自检用 |
| 协议 | MIT © 2026 Ryan（@wheresryan22） |
🎯 典型玩法
📚 技术文档配图：给缓存、限流、消息队列配"能动的"示意图
🎓 教学/科普图解：把抽象机制画成可拆解的实体机构
🧑💻 系统设计讲解：架构、状态机、管线用等距物件讲清楚
✍️ 博客/公众号配图：高质量等距 SVG 直接嵌入网页
🛠️ 给代码补图：在代码库里加说明组件，随文档一起维护
📊 和同类做法比
| Mermaid / 手绘流程图 | 满屏方框箭头、语法驱动、难表达"机制怎么动" |
| 截图/标注工具 | 只能标注已有图，不能把概念"发明"成可动物件 |
| 绘图库（SVG.js 等） | 手写几十个零件的坐标和动画，工作量大且静态 |
| Anatomy | Agent 把概念做成实体机构 + 自检 + 等距可交互，零依赖 |
原理一句话：让 Agent 用"造一台能动的机器"的方式去理解并讲解概念——零件运动本身承载原理，每个数字来自驱动零件运动的同一个模型，所以"画出来就是讲清楚"。
❓ 常见问题
Q：完全免费吗？可以商用吗？
MIT 协议，个人与商用都可用、可改、可分发（保留版权声明即可）。
Q：需要装 npm 包或配 API key 吗？
不需要。官方明说 "No API keys and nothing to npm install"，只用 Node.js 内建模块。
Q：我的电脑要装什么才能跑？
Node.js 20.10+，外加一个 Chrome 或 Chromium（仅用于它自动自检自己的图，可设 CHROME_PATH 指定）。
Q：React 输出需要什么？
只有 React 输出那一档需要 React 18+（涉及 kit/react、examples/test-rig 等）；只出 SVG/HTML 则不需要。
Q：能跑在哪些 AI 上？
Claude Code 原生支持，也兼容 Antigravity、OpenCode、Codex、MiniMax Code（Codex 里用 $anatomy 调用）。
Q：装完怎么开始？
输入 /anatomy（Codex 用 $anatomy）加一句你想解释的概念，例如"解释 token bucket 限流器"。若技能没出现，重启会话或跑 /reload-skills。
Q：它画的图是静态的吗？
不是。成品带实时读数、鼠标/键盘可控，会平稳地动；还可输出 WebGL 着色器效果（火、水、光晕等）和 3D。
Q：我能自己给它贡献图或代码吗？
可以。Issues / PR 都欢迎，先读 CONTRIBUTING.md（有硬性家规：代码不留注释、改 kit 必须让既有示例字节级不变）；画廊有 Submit a figure 入口。
Q：想支持作者？
README 结尾原话："If Anatomy drew something useful for you, a ⭐ helps other people find it."——画到了有用的图，就点个 Star 帮别人找到它。
📎 GitHub 搜索 wheresryan22/anatomy
关注「AI工具匠」，获取更多 AI 工具实操教程