Anatomy
一个 Claude 技能：通过把想法做成一件真实、可运转的物件，来解释这个想法。 用 SVG、WebGL 和 3D 打造精心制作、可交互的等距图，由许多细小而精确的零件组成。
examples/raptor-engine，浅色主题，点火状态。发动机与试验台是 SVG；尾焰是同一等距相机下的 WebGL 着色器。
让 Claude 画一张解释某个技术概念的图，Anatomy 会让他发明一件实体物件，让这件物件的运转方式本身就是那个想法。一个"内容没变就跳过工作"的缓存键，变成一把只有每根弹子都对齐到位才能转动的弹子锁。一个为多块画布提供服务的 GPU 上下文，变成一台单打印头依次巡访 16 个孔位的龙门绘图仪。
随后 Claude 用几十个细小、实心、带光影的零件把物件搭建起来，放进一张带标题、提示语和实时读数的框式卡片里，让它在指针和键盘下平稳地动起来，并通过放大检查每一个关节来验证自己的作品。图中显示的每个数字，都来自驱动零件运动的同一个小型模型。
快速开始
npx skills add wheresryan22/anatomy -g -a claude-code
然后在 Claude Code 中：
/anatomy explain how a token bucket rate limiter works, interactive
就这些。不需要 API 密钥，也无需 npm install：这套工具只使用 Node 的内置模块。
画廊
 |  |
| raptor-engine：悬停可拆解成 11 个组件。审查证明：无论静止、拆解还是两者之间的每一帧，都没有任何管道穿过其他物体。 | ripple-tank：SVG 装置叠加两层 WebGL（投在纸上的灯光与焦散、水中的倒影），由色散与光学模型驱动。 |
 |  |
| turning-dial：3D 模式（beta）。拖动拨盘时，约 90 个零件在每一帧都被重新投影、重新着色。 | dial-indicator：最小的示例，约 300 行。悬停滑动托架，表针逐块读数。 |
每一张截图都是 examples/ 中某个页面的浅色主题，由技能自带的 scripts/capture.mjs 和 scripts/drive.mjs拍摄。构建好的页面已提交：打开 examples/ 中任意 .html 即可试玩。
它会做出什么
三种图形。三者共用同一套工具、同一台相机和同一套工艺规则。
| 类型 | 是什么 | 示例 |
|---|---|---|
| SVG | 核心。四色调明暗的实心等距零件，从后到前绘制，放进带实时读数和缓动动画的卡片里。以独立 HTML 页面、内嵌样式的独立 .svg 文件或 React/Next.js 组件形式交付。 | dial-indicator、desk-computer、test-rig |
| SVG + WebGL | 用于线条画不出的东西：火焰、尾气、水、焦散、灯光、辉光、蒸汽。着色器运行在后层与前层 SVG 之间的画布上，使用图形自身的等距相机，因此它嵌在画面内部。没有 WebGL 时 SVG 依然可读。 | raptor-engine、ripple-tank |
| 3D beta | 真正在三维中转动的零件：旋转的拨盘或转台、弯曲的手指、断裂坠落的碎片。活动零件在每一帧都由工具自身的规则重新投影、重新着色；图形其余部分保持静态艺术。 | turning-dial |
每张图都有浅色与深色两种主题。浅色是技能优先设计的主题，着色器也包括在内。
安装
Anatomy 是一个标准的 Agent Skill：一个根目录下带 SKILL.md 的文件夹。本仓库就是那个文件夹。任选一种方式：
| 命令 | 安装到 | |
|---|---|---|
| skills CLI，个人 | npx skills add wheresryan22/anatomy -g -a claude-code | ~/.claude/skills/anatomy |
| skills CLI，单个项目 | npx skills add wheresryan22/anatomy | .claude/skills/anatomy |
| git，个人 | git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy | ~/.claude/skills/anatomy |
| git，单个项目 | git clone https://github.com/wheresryan22/anatomy.git .claude/skills/anatomy | .claude/skills/anatomy |
| 下载，不用 git | 见下文 | ~/.claude/skills/anatomy |
使用 skills CLI
skills CLI 会找到本仓库根目录下的 SKILL.md，并将其安装为 anatomy。默认情况下它安装到当前项目，并询问要为哪些代理设置。-g 表示按用户安装，-a claude-code 表示只为 Claude Code 设置。
该 CLI 会复制整个仓库，包括示例（约 10 MB）。它需要较新的 Node.js：CLI 的 1.7.1 版本要求 Node 22.20 或更高。
使用 git
把仓库克隆进 Claude Code 的某个技能文件夹，使 SKILL.md 位于 <skills folder>/anatomy/SKILL.md。项目级安装时，请提交 .claude/skills/anatomy，这样你的团队也能得到它。之后更新时，在该文件夹内执行 git pull。
下载，不用 git
下载 ZIP，解压，然后移入 ~/.claude/skills/。
或者在 macOS 或 Linux 上一行搞定：
mkdir -p ~/.claude/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.claude/skills/anatomy
Claude Code 会在运行中的会话里识别新技能。如果会话启动时 skills 文件夹尚不存在，请运行 /reload-skills。
用法
输入 /anatomy 并说明这张图应该解释什么：
/anatomy explain how a token bucket rate limiter works, interactive
你不一定非要指名这个技能。当你要求画一张等距插画、为文档/博客/落地页配说明图，或要一个可交互的解释器时，Claude 也会加载它。
更多提示词，来自技能的评测集
/anatomy a figure for our Next.js docs on database connection pooling: a pool of 10 connections, requests borrow one and give it back, and when all 10 are busy new requests wait in a queue. A React component plus a static HTML preview, dark theme.
/anatomy an isometric SVG explaining how a CDN edge cache works, cache hit vs miss, TTL of 60 s, for a dark landing page. Just the SVG file and a PNG preview.
/anatomy a Bunsen burner on a lab bench: opening the air collar turns the lazy yellow flame into a roaring blue cone. WebGL for the flame, one HTML file, dark theme.
/anatomy a heat-exchanger espresso machine with the side panel off: boiler, heat-exchanger tube, group head, pump, steam wand and gauge. Show the water flowing when you pull a shot. Standalone HTML, light theme.
三个习惯能换来最好的图：
- 说出想法，而不是画法。 说明它应该解释什么，并给出真实数字（尺寸、数量、速率、阈值）。Anatomy 负责发明那个物件；这是大部分工作，而且它做得比描述一堆方框和箭头更好。
- 或者说出物件。 如果你已经知道想要什么机器（意式咖啡机、本生灯、一把锁），直接说，并说明什么应该动。
- 说明它会在哪里使用。 独立 HTML 页面、独立 SVG 文件，还是 React/Next.js 组件；浅色还是深色。不同用途的构建方式不同。
成品以归你所有的源码形式交付：一个 Node 构建脚本和它写出的页面；如果是 React，则是几何模块、一个负责静态艺术的服务端组件和一个负责动画的客户端组件。整套工具随附其中。
示例
每个无框架示例都带一个 Node 构建脚本，在旁边写出独立页面。加 --light 使用浅色主题。
| 示例 | 展示什么 | 构建 |
|---|---|---|
dial-indicator | 一个架在量块滑座上的百分表。最小的示例，约 300 行。 | node examples/dial-indicator/build.mjs |
desk-computer | 一台 1984 风格、带可打字键盘的台式电脑。打出的字出现在画在机壳正面平面上的 CRT 里；关机时画面塌缩成一条线和一点。约 85 个实体。 | node examples/desk-computer/build.mjs |
raptor-engine | 试验台上的 Raptor 2 发动机。可拆解成 11 个组件，WebGL 尾焰、激波、水花与蒸汽渲染在后层与前层 SVG 之间。密集管道、平滑明暗、淡入淡出与审查的标杆。构建需要几分钟。 | node examples/raptor-engine/build.mjs |
ripple-tank | 一个架在纸屏上方高腿上的教学波纹水槽，从 44° 俯角观看。两层 WebGL 与等距平面严格对齐，由 model.mjs 中的纯模型驱动。 | node examples/ripple-tank/build.mjs |
test-rig | 一个来自 React/Next.js 网站的生产级图形：弹簧托架上的玻璃按钮、轨道上的指形探针，以及读取倾角的百分表。53 个实体。无构建脚本：直接复制进 React 应用。 | 无 |
spot-plate | 同一网站的第二个图形：点滴板上的六对玻璃液滴，当一把扇形塞尺片张开时，它们汇流成一块玻璃。每对都由同一个距离场绘制。无构建脚本：直接复制进 React 应用。 | 无 |
turning-dial | 3D 模式：一个真正在三维中转动的密码拨盘，上面停着一只小机器人手、一根三铰链手指会抬起，还有一个吊舱作为自由体断裂脱离。stress.mjs 是杂乱工坊里一只 380 零件的机械手，用于测量性能。 | node examples/turning-dial/build.mjs |
node examples/raptor-engine/build.mjs --audit 和 node examples/turning-dial/build.mjs --light --audit 也会运行几何审查。3D 审查较慢；见 references/3d.md。
工作原理
SKILL.md是 Claude 阅读的入口。它规定工作流：先收集真实数字，发明物件，写零件清单，规划世界，用工具一次性构建几何，从后到前绘制，装框，让它活起来，然后像批评家一样验证。它也以短形式承载工艺规则。kit/是图形所基于的绘图库：等距相机、实体与零件库（iso-kit）、任意轴上的圆形零件（lathe.mjs）、管道与线缆（tube.mjs）、WebGL 层（gl.mjs）、3D 运行时（turn*.mjs）以及 React 组件（react/）。除这些组件所需的 React 外，它没有任何依赖。references/是 Claude 需要时打开的长文指南：工艺、工具 API、动画、React、验证、WebGL、设计走查和 3D 模式。- 验证。
kit/audit.mjs证明几何：没有任何零件穿过另一个零件，每个端点都落在安装座上，每一处重叠都按深度顺序绘制（node build.mjs --audit）。在无头 Chrome 中，scripts/capture.mjs和scripts/drive.mjs拍摄截图、特写和慢放关联表，scripts/lines.mjs让任何悬在半空的线条检查失败，scripts/turn-check.mjs检查 3D 图形。技能会指示 Claude 阅读它生成的每一张 PNG。
仓库结构
anatomy/
├── SKILL.md 技能本体：工作流、设置与工艺规则
├── kit/ 绘图库
│ ├── iso-kit.ts 核心：相机、实体、零件、SVG 渲染器、卡片与页面、CSS
│ ├── iso-kit.mjs 同一核心的纯 ESM 版本，供 Node 构建脚本使用
│ ├── iso.css 该库的 CSS，含两套主题
│ ├── react/ draw.tsx（服务端安全组件）、live.tsx（客户端钩子）
│ ├── lathe.mjs 任意轴上的圆形零件
│ ├── tube.mjs 管道、管子与线缆
│ ├── audit.mjs 几何审查
│ ├── gl.mjs 用于图形内部着色器的 WebGL 层
│ ├── turn.mjs 3D 运行时（beta）
│ ├── turn-build.mjs 3D 构建器
│ ├── turn-audit.mjs 3D 环绕审查
│ └── turn-fixed.mjs, canvas-painter.mjs, gl-shared.mjs
│ 实验性变体，尚未文档化，示例也未使用
├── references/ 长文指南，Claude 按需阅读
│ ├── craft.md kit.md motion.md react.md
│ └── verify.md webgl.md walkthrough.md 3d.md
├── scripts/ 无头 Chrome 检查与构建辅助
│ ├── capture.mjs 截图与特写
│ ├── drive.mjs 脚本化会话与联系表
│ ├── lines.mjs 线条端点检查（配合 line-ends.mjs）
│ ├── inline-kit.mjs 以源码形式内联进独立页面的绘图库
│ ├── turn-check.mjs 浏览器内的 3D 检查（配合 turn-fidelity.mjs）
│ └── turn-bench.mjs Node 中的 3D 计时
├── examples/ 七个完整示例，构建后的页面已提交
├── evals/evals.json 测试提示词与合格答案应包含的内容
└── .github/ 问题表单、PR 模板、CI、README 图片
要求
| 用于 | 说明 | |
|---|---|---|
| Claude Code | 一切 | 该技能是为它编写的。 |
| Node.js 20.10+ | 构建、工具、检查 | 仅使用内置模块：无需 npm install。示例在 Node 20.19 和 22.11 上逐字节重建。在 Node 20 上，浏览器脚本以 --experimental-websocket 自行重启。 |
| Chrome 或 Chromium | 检查 | capture.mjs、drive.mjs、lines.mjs 和 turn-check.mjs 会在 macOS、Linux 和 Windows 的常规位置以及 Playwright 的缓存中查找。其他任何二进制文件请设置 CHROME_PATH。它们以开启 WebGL 的无头模式运行。 |
| React 18+ | 仅 React 输出 | kit/react/、examples/test-rig/ 和 examples/spot-plate/。 |
局限
- 它不是图表库。 没有坐标轴、序列或数据绘图。数字以模型驱动的实时读数形式出现，也以零件的真实尺寸和数量形式出现。
- 它画机器、仪表、工具和家具。 不画人物或精确地图。一个没有机制可构建的想法，产出的图会偏弱。
- 它刻意很慢。 一张图需要很长一段会话：零件清单、几何、审查，以及两种主题下每个关节的特写。Raptor 的构建要花几分钟，而对 30 个零件做一次完整的 3D 环绕审查需要 15 到 20 分钟。
- 着色器需要 WebGL。 没有它 SVG 依然可读；在"减少动态效果"模式下，每张图都会静止。
[!NOTE] 3D 模式是 beta。 它只在自身示例和一个测试图形上验证过，尚未在生产级图形上验证。小型 3D 图形可跑 60 帧/秒；380 零件的压力测试机械手在 1440 像素宽、高负载机器上测得约 20 帧/秒，在限速的手机模拟档下为 13 到 15 帧/秒。
贡献
欢迎提交 issue 和 pull request。请先阅读 CONTRIBUTING.md：它涵盖如何构建示例、运行检查，以及任何改动都必须遵守的内部规则（其中包括：代码中不写注释，且对工具的改动必须让每个现有示例保持逐字节一致）。请遵守行为准则，并按 SECURITY.md 中的说明报告安全问题。
许可
MIT © 2026 Ryan · @wheresryan22
如果 Anatomy 为你画出了有用的东西，一个 ⭐ 能帮更多人找到它。
有疑问、有建议、想分享自己的实践？欢迎加入我们的微信群交流
