# Anatomy **Repository Path**: binonline/anatomy ## Basic Information - **Project Name**: Anatomy - **Description**: 来源：https://github.com/wheresryan22/anatomy - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2026-11-03 - **Last Updated**: 2026-11-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

Anatomy

一个 Claude 技能：把抽象想法做成真实、可运转的物体来解释它。
也可在 Antigravity、OpenCode、Codex、MiniMax Code 中运行。
用 SVG、WebGL 和 3D 制作精细、可交互的等距插图。

Claude Code 技能 兼容 Agent Skills MIT 许可证 Node 20.10 以上 零依赖 CI Gitee 镜像

猛禽 2 号发动机吊在试车台上点火：红色尾焰由 WebGL 着色器绘制，落到试车台底板上。卡片上写着 Fig 1、Raptor 2 test stand、Pc 300 bar、230 tf。

examples/raptor-engine，浅色主题，点火状态。发动机和试车台是 SVG，尾焰是同一等距相机下的 WebGL 着色器。

--- > **本仓库说明** > > 这是 [wheresryan22/anatomy](https://github.com/wheresryan22/anatomy) 的 Gitee 镜像，代码与上游一致，按 MIT 许可证分发。英文原文见 [README.en.md](README.en.md)。本中文版由小板栗翻译整理，同步日期 2026-10-26。 > > Gitee 地址：`git@gitee.com:stone700/anatomy.git` > > 上游地址：`https://github.com/wheresryan22/anatomy` ## 这个技能做什么 你让 Claude 画一张解释技术原理的图，Anatomy 会先发明一个真实物体，让这个物体的运转方式正好等于你要讲的原理。缓存键在内容没变时跳过工作，可以变成一把弹子锁：只有每根弹子都对上，锁芯才会转。一个 GPU 上下文服务很多画布，可以变成一台龙门绘图仪：一个打印头依次访问 16 个孔位。 然后 Claude 用几十个小的、实心的、有明暗的零件把这个物体搭出来，放进带标题、操作提示和实时读数的卡片里，让它在鼠标和键盘下平稳运动，再放大检查每一个接头。图里出现的每个数字，都由驱动零件运动的同一个模型算出来。 ## 快速开始 推荐直接从本 Gitee 镜像安装到 Claude Code 的用户级技能目录： ```sh git clone git@gitee.com:stone700/anatomy.git ~/.claude/skills/anatomy ``` 也可以使用上游的 skills 命令行工具。注意这条命令安装的是上游仓库，不是本镜像；新版 CLI 需要 Node 22.20 以上： ```sh npx skills add wheresryan22/anatomy -g -a claude-code ``` 安装后在 Claude Code 里输入： ```text /anatomy 解释令牌桶限流器如何工作，做成可交互的 ``` Codex 里用 `$anatomy`；Antigravity、OpenCode、MiniMax Code 里同样用 `/anatomy`。 不需要 API key，也不需要 `npm install`。kit 只使用 Node 内置模块。 ## 示例画廊
猛禽 2 号发动机在试车台里拆开：各组件、管路和线束悬停在支架之间。 一台学校水波槽，四条高腿，上方灯臂挂着灯。振动杆上的两个振子产生干涉波，焦散投影到槽下的纸屏上。
raptor-engine：悬停可以把发动机拆成 11 个组件。审计会证明，无论是静止、拆开还是中间每一帧，没有任何管路穿过别的物体。 ripple-tank：SVG 器材叠两层 WebGL（纸屏上的灯光与焦散、水面反射），由一套色散和光学模型驱动。
一块抬高的门板上有密码拨盘。一只金色和铬色的小机械手搭在拨盘上，跟着一起转；一根指尖下有绿光亮起。 一块底板上方有带支架的指针式量表，底板带刻度条。测头停在一块可滑动滑架上的三个量块之一上面。
turning-dial：3D 模式（测试版）。拖动拨盘时，约 90 个零件每帧重新投影和重新着色。 dial-indicator：最小的示例，约 300 行。悬停可以让滑架移动，指针读出每个量块的尺寸。
每张截图都是 [`examples/`](examples) 里页面的浅色主题，用技能自带的 [`scripts/capture.mjs`](scripts/capture.mjs) 和 [`scripts/drive.mjs`](scripts/drive.mjs) 截取。构建好的页面已经提交在仓库里，直接打开 `examples/` 里的任意 `.html` 就能试。 ## 能做什么 技能产出三类图。三类图共用一套 kit、一个相机和一套工艺规则。 | 类型 | 是什么 | 示例 | |---|---|---| | **SVG** | 核心类型。实心等距零件，四色阶明暗，从后往前绘制，放在带实时读数和缓动动画的卡片里。可以输出独立 HTML 页面、内嵌样式的单个 `.svg` 文件，或 React/Next.js 组件。 | `dial-indicator`、`desk-computer`、`arcade-cabinet`、`test-rig` | | **SVG 加 WebGL** | 画线画不出来的东西：火焰、尾焰、水、焦散、灯光、辉光、蒸汽。着色器运行在前景 SVG 和背景 SVG 之间的画布里，使用同一套等距相机，所以效果落在图里面。没有 WebGL 时，SVG 仍然能读。 | `raptor-engine`、`ripple-tank` | | **3D** 测试版 | 真正在三维里转动的零件：旋转的拨盘或转台、弯曲的手指、断裂掉落的部件。运动零件每帧按 kit 的规则重新投影和着色，其余部分保持静态画面。 | `turning-dial` | 每张图都可以做浅色或深色。技能优先设计浅色，着色器也一样。 ## 安装 Anatomy 是一个标准的 [Agent Skill](https://agentskills.io)：一个根目录带 `SKILL.md` 的文件夹。本仓库就是那个文件夹。选一种方式安装。 | 方式 | 命令 | 安装位置 | |---|---|---| | 本 Gitee 镜像，Claude Code 用户级 | `git clone git@gitee.com:stone700/anatomy.git ~/.claude/skills/anatomy` | `~/.claude/skills/anatomy` | | 本 Gitee 镜像，项目级 | `git clone git@gitee.com:stone700/anatomy.git .claude/skills/anatomy` | `.claude/skills/anatomy` | | 上游 skills CLI | `npx skills add wheresryan22/anatomy -g -a claude-code` | `~/.claude/skills/anatomy` | | 上游 git | `git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy` | `~/.claude/skills/anatomy` | | 下载 ZIP | 解压后把文件夹改名为 `anatomy`，放进 `~/.claude/skills/` | `~/.claude/skills/anatomy` | 其他客户端的目录： | 客户端 | 用户级目录 | 项目级目录 | |---|---|---| | Antigravity | `~/.gemini/antigravity/skills/anatomy` | `.agents/skills/anatomy` | | OpenCode | `~/.config/opencode/skills/anatomy` | `.opencode/skills/anatomy` | | Codex | `~/.agents/skills/anatomy` | `.agents/skills/anatomy` | | MiniMax Code | `~/.minimax/skills/anatomy` | `.minimax/skills/anatomy` | Claude Code 会在运行中的会话里发现新技能。如果会话启动时 `skills` 文件夹还不存在，运行 `/reload-skills`。Antigravity 和 OpenCode 在聊天里列出 `/anatomy`，不显示就重启。Codex 在 `/skills` 下列出，用 `$anatomy` 运行，不显示就重启 Codex。MiniMax Code 列出 `/anatomy`，不显示就重启 `mcode`。
Codex：浏览器校验被沙箱拦住时
技能会启动无头 Chrome 来检查自己画的图。Chrome 会写一个临时配置目录，并通过本地端口通信。Codex 在沙箱里运行命令，沙箱可能拦住 Chrome。图仍然会生成，只是校验失败。按优先级处理： 1. 当 Codex 询问是否在沙箱外运行校验时，批准那一条命令。这需要默认的 `approval_policy = "on-request"`。 2. 或者在 `~/.codex/config.toml` 里允许一次： ```toml approval_policy = "on-request" sandbox_mode = "workspace-write" [sandbox_workspace_write] network_access = true writable_roots = ["/tmp"] ``` 新版 Codex 可能改了这些设置的名字，请对照你所用版本的配置说明。 3. 或者你在普通终端里自己跑校验，例如 `node scripts/capture.mjs page.html --out shots/page.png`。 用 `--sandbox danger-full-access` 启动 Codex 也能跑通，但它会解除该会话的所有限制，只对信任的项目使用。
## 用法 输入 `/anatomy`，然后说清楚这张图要解释什么： ```text /anatomy 解释令牌桶限流器如何工作，做成可交互的 ``` 你不一定要写出技能名。只要你说要等距插图、文档配图、博客或落地页的解释图、可交互讲解，Claude 也会自动加载它。Antigravity、OpenCode、Codex、MiniMax Code 同理。
更多提示词，来自技能的 evals
```text /anatomy 给我们的 Next.js 文档画一张数据库连接池的图：池里有 10 个连接，请求借走一个再还回来，10 个都忙时新请求排队。要一个 React 组件加一个静态 HTML 预览，深色主题。 ``` ```text /anatomy 画一张等距 SVG，解释 CDN 边缘缓存怎么工作：命中与未命中，TTL 60 秒，放在深色落地页上。只要 SVG 文件和 PNG 预览。 ``` ```text /anatomy 实验台上的一盏本生灯：打开空气环，慵懒的黄色火焰变成咆哮的蓝色锥形焰。火焰用 WebGL，单个 HTML 文件，深色主题。 ``` ```text /anatomy 一台拆掉侧板的热交换式咖啡机：锅炉、热交换管、冲煮头、泵、蒸汽棒和压力表。萃取时显示水流。独立 HTML，浅色主题。 ```
三条经验能让图的质量明显提高： 1. **说清要解释的想法，不要只说画什么。** 告诉它这张图要解释什么，并给出真实数字，例如尺寸、数量、速率、阈值。Anatomy 会自己发明物体，这是最有价值的部分，比描述一堆方框和箭头有效。 2. **或者直接说物体。** 如果你已经知道想要什么机器，例如咖啡机、本生灯、锁，就直接说，并说明哪个部分应该动。 3. **说清交付到哪里。** 独立 HTML 页面、单个 SVG 文件，还是 React/Next.js 组件；浅色还是深色。不同交付的构建方式不同。 图会以你可修改的源码形式交付：一个 Node 构建脚本和它写出的页面；如果是 React，就是几何模块、负责静态画面的服务端组件，以及一个负责运动效果的客户端组件。kit 会一起给你。 ## 示例 每个不依赖框架的示例都有一个 Node 构建脚本，在脚本旁边写出独立页面。加 `--light` 生成浅色主题。 | 示例 | 展示什么 | 构建命令 | |---|---|---| | [`dial-indicator`](examples/dial-indicator) | 底板滑架上方的一台指针式量表。最小的示例，约 300 行。 | `node examples/dial-indicator/build.mjs` | | [`desk-computer`](examples/desk-computer) | 一台 1984 年风格的台式电脑，键盘可以打字。打出的字会出现在机箱正面平面里的 CRT 屏幕上，关机时画面塌缩成一条线和一个小点。约 85 个实体。 | `node examples/desk-computer/build.mjs` | | [`arcade-cabinet`](examples/arcade-cabinet) | 一台拆掉侧板的立式街机柜。投一枚硬币，硬币沿投币槽滚下，经过投币开关线，落进钱箱；一个脉冲沿电缆传到主板，CRT 预热后进入演示模式，画面画在倾斜屏幕的平面里。约 240 个实体和 15 根线缆。 | `node examples/arcade-cabinet/build.mjs` | | [`raptor-engine`](examples/raptor-engine) | 试车台里的猛禽 2 号发动机。可以拆成 11 个组件，WebGL 的尾焰、激波、水花和蒸汽画在前后 SVG 之间。是密集管路、平滑着色、淡出和几何审计的参考。构建需要几分钟。 | `node examples/raptor-engine/build.mjs` | | [`ripple-tank`](examples/ripple-tank) | 一台学校水波槽，四条高腿，纸屏在上方，视角从 44 度俯看。两层 WebGL 对齐到等距平面，由 `model.mjs` 里的纯数学模型驱动。 | `node examples/ripple-tank/build.mjs` | | [`test-rig`](examples/test-rig) | 来自真实 React/Next.js 站点的生产图：弹簧滑架上的玻璃按钮、导轨上的手指测头、读出倾斜量的指针式量表。53 个实体。没有构建脚本，复制进 React 应用即可。 | 无 | | [`spot-plate`](examples/spot-plate) | 同一站点的第二张生产图：点滴板上有六对玻璃水滴，随着扇形塞尺张开，每对水滴合并成一整块玻璃。每一对都由同一个距离场绘制。没有构建脚本，复制进 React 应用即可。 | 无 | | [`turning-dial`](examples/turning-dial) | 3D 模式：一个真正在三维里旋转的密码拨盘，上面有一只小机械手；三关节手指会抬起，一个舱体会作为自由体断裂。旁边的 `stress.mjs` 是杂乱车间里约 380 个零件的手，用来测性能。 | `node examples/turning-dial/build.mjs` | 猛禽发动机和街机柜还可以打印。`node scripts/print.mjs examples/raptor-engine/sheet.mjs --format all` 会从构建好的浅色页面写出三份 A4 PDF：一页海报、一页工程图、两页详解。任何图都可以让 Anatomy 写对应的 `sheet.mjs`，详见 [`references/print.md`](references/print.md)。 `node examples/raptor-engine/build.mjs --audit`、`node examples/arcade-cabinet/build.mjs --audit` 和 `node examples/turning-dial/build.mjs --light --audit` 还会运行几何审计。3D 审计很慢，见 [`references/3d.md`](references/3d.md)。 ## 工作原理 - **[`SKILL.md`](SKILL.md)** 是 Claude 读的文件。它规定工作流：先收集真实数字，再发明物体，写零件清单，规划世界坐标，用 kit 一次性构建几何体，从后往前绘制，装框，让它动起来，最后像审稿人一样逐项检查。它还包含简短的工艺规则。 - **[`kit/`](kit)** 是画图库：等距相机、实体和零件库（`iso-kit`）、任意轴上的圆形零件（`lathe.mjs`）、管路和线缆（`tube.mjs`）、WebGL 图层（`gl.mjs`）、3D 运行时（`turn*.mjs`）和 React 组件（`react/`）。除了 React 组件需要的 React，没有其他依赖。 - **[`references/`](references)** 是 Claude 按需打开的长文指南：工艺、kit API、运动、React、校验、WebGL、设计走查和 3D 模式。 - **校验。** [`kit/audit.mjs`](kit/audit.mjs) 证明几何体成立：没有东西穿过别的东西，每个端点都落在支座上，每个重叠都按真实深度顺序绘制（`node build.mjs --audit`）。在无头 Chrome 里，[`scripts/capture.mjs`](scripts/capture.mjs) 和 [`scripts/drive.mjs`](scripts/drive.mjs) 截取截图、特写和慢放截帧拼图，[`scripts/lines.mjs`](scripts/lines.mjs) 会让任何悬空的线端失败，[`scripts/turn-check.mjs`](scripts/turn-check.mjs) 检查 3D 图。技能要求 Claude 读自己生成的每一张 PNG。
仓库结构
```text anatomy/ |-- SKILL.md 技能说明：工作流、环境设置和工艺规则 |-- kit/ 画图库 | |-- iso-kit.ts 核心：相机、实体、零件、SVG 渲染器、卡片和页面、CSS | |-- iso-kit.mjs 同一核心的普通 ESM 版本，给 Node 构建脚本用 | |-- iso.css kit 的 CSS，包含两套主题 | |-- react/ draw.tsx（服务端安全组件）、live.tsx（客户端 hooks） | |-- lathe.mjs 任意轴上的圆形零件 | |-- tube.mjs 管路、管子和线缆 | |-- audit.mjs 几何审计 | |-- gl.mjs 图内着色器的 WebGL 图层 | |-- turn.mjs 3D 运行时（测试版） | |-- 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 把 kit 作为源码内联进独立页面 | |-- turn-check.mjs 浏览器里的 3D 检查（配合 turn-fidelity.mjs） | |-- turn-bench.mjs Node 里的 3D 计时 |-- examples/ 八个完整示例，构建好的页面已提交 |-- evals/evals.json 测试提示词和合格答案应包含的内容 |-- .github/ Issue 表单、PR 模板、CI、README 图片 ```
## 环境要求 | 需要 | 用途 | 说明 | |---|---|---| | **[Claude Code](https://code.claude.com/docs/en/overview)**，或 [Antigravity](https://antigravity.google)、[OpenCode](https://opencode.ai/docs/skills/)、[Codex](https://developers.openai.com/codex/skills)、[MiniMax Code](https://github.com/MiniMax-AI/minimax-code) | 全部功能 | 技能为 Claude Code 编写，遵循开放的 Agent Skills 格式，所以 Antigravity、OpenCode、Codex 和 MiniMax Code 也能加载。Codex 的浏览器校验会启动 Chrome，如果沙箱拦住，按上面的办法放行。 | | **Node.js 20.10 以上** | 构建、kit、校验 | 只用内置模块，不需要 `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/`。 | ## 限制 - **它不是图表库。** 没有坐标轴、数据系列或数据图。数字以实时读数的形式出现，由模型驱动，同时作为零件的真实尺寸和数量出现。 - **它画机器、仪器、工具和家具。** 不画人，也不画精确地图。没有机械结构可以映射的想法，做出来会比较弱。 - **它故意很慢。** 一张图需要一次长会话：零件清单、几何体、审计、两套主题下每个接头的特写。猛禽发动机的构建需要几分钟，30 个零件的完整 3D 轨道审计需要 15 到 20 分钟。 - **着色器需要 WebGL。** 没有 WebGL 时 SVG 仍然能读；在减少运动模式下，所有图会静止。 > [!NOTE] > **3D 模式是测试版。** 目前只在它的示例和一张测试图上验证过，还没有用在生产图上。小型 3D 图能跑到 60 帧；380 个零件的压力测试手在 1440 像素宽、机器负载较重时约 20 帧，在限速手机配置下约 13 到 15 帧。 ## 分享作品 做出了好东西，可以让你的 agent “把这张图发布到 Anatomy 社区画廊”。它会询问标题和你的 GitHub 名字，展示将要发送的内容，得到同意后替你在 [anatomy-community](https://github.com/wheresryan22/anatomy-community) 开一个 PR，不需要自己操作 git 或手动 fork。也可以自己运行 `scripts/publish.mjs --submit`。没有终端时，用画廊的 **Submit a figure** 表单配合 GitHub Gist。 ## 参与贡献 欢迎提 Issue 和 Pull Request。先读 [CONTRIBUTING.md](CONTRIBUTING.md)：里面讲了怎么构建示例、怎么跑检查，以及改动必须遵守的规则，其中包括代码里不写注释，kit 的改动必须让现有示例保持逐字节一致。请遵守 [Code of Conduct](CODE_OF_CONDUCT.md)，安全问题按 [SECURITY.md](SECURITY.md) 里的方式报告。 - [报告 Bug](https://github.com/wheresryan22/anatomy/issues/new?template=bug_report.yml) - [请求一张图](https://github.com/wheresryan22/anatomy/issues/new?template=figure_request.yml) - [更新日志](CHANGELOG.md) ## 许可证 [MIT](LICENSE)，版权 2026 Ryan，[@wheresryan22](https://x.com/wheresryan22) 本 Gitee 镜像保留同一许可证和上游署名。

如果 Anatomy 帮你画出了有用的东西，点一个 Star 能让更多人找到它。