Anatomy：把想法「造出来」讲清楚的等距技术图解 Skill

📺 出处：本文属「GitHub 一周热点」专栏第 135 期，出处 UP 主：IT咖啡馆（BV1EVJY6GEA6）。

专栏索引页：GitHub 一周热点 · 逐期盘点

① 一句话是什么

Anatomy 是一个 Agent Skill：它不给你文字说明，而是把要讲的东西当场造出来——生成精细的等距（isometric）交互式插图，输出可以是 SVG、WebGL 或者 3D，每个零件都是实打实画出来的实体，不是贴图拼贴。

② 为什么火

• 星标数：截至 2026-10-20 实查 GitHub API，wheresryan22/anatomy 为 17,349 星。
• 门槛极低：MIT 协议，Node ≥ 20.10，零依赖（只用 Node 内置模块），不需要 API Key。
• 跨工具：Claude Code、Antigravity、OpenCode、Codex、MiniMax Code 都能用同一套 skill。

③ 视频里怎么讲的（第 135 期）

第 135 期把它列为「交互式技术图解 Skill」。视频点出的是输出形态的差别：常规做法是让 AI 画一张静态示意图，而 Anatomy 生成的是能转、能点、能拆开看的图——文档里的数据库连接池、流水线、状态机，从此有了可交互的图示而不是一张糊图。原视频：https://www.bilibili.com/video/BV1EVJY6GEA6

④ 实测：跑通

安装

# 全局安装到 Claude Code
npx skills add wheresryan22/anatomy -g -a claude-code

# 只装到当前项目
npx skills add wheresryan22/anatomy

也可以直接克隆仓库自己看（本站实测用的就是这个方式）：

git clone https://github.com/wheresryan22/anatomy.git
cd anatomy
node --version   # 需要 20.10 以上

跑示例构建

每个示例都是独立的 Node 构建脚本，跑一次就写出可独立打开的 HTML 页面：

# 最小的示例：约 300 行代码的仪表盘
node examples/dial-indicator/build.mjs

# 其他可跑示例
node examples/desk-computer/build.mjs
node examples/arcade-cabinet/build.mjs
node examples/ripple-tank/build.mjs
node examples/turning-dial/build.mjs

本站实测结果

$ node examples/dial-indicator/build.mjs
wrote dial-indicator.html

$ ls -la examples/dial-indicator/*.html
-rw-r--r--  136488  examples/dial-indicator/dial-indicator.html
-rw-r--r--  136489  examples/dial-indicator/dial-indicator-light.html

实测结论：跑通。 构建脚本一次成功、无报错，产出 136,488 字节的独立 HTML 页面（另有一份浅色主题版）。产物是纯静态页，双击即开，不需要起服务。

踩坑实录

1. 不要先跑 raptor-engine：仓库里最重的示例是火箭发动机，README 明确说「构建要花几分钟」。想快速验证通路，先跑 dial-indicator。
2. 部分示例没有构建脚本：test-rig、spot-plate 是从 React/Next.js 站点里抽出来的产物，README 标注为 none，它们是给你复制进 React 项目用的参考，不是可跑脚本。
3. CLI 版本要求会拦人：skills CLI 1.7.1 版本起要求 Node 22.20 以上，比 skill 本体要求的 20.10 更严。Node 版本不够时 CLI 会直接拒绝安装。
4. 仓库体积约 10 MB：CLI 会把整个仓库连示例一起复制过去，这是刻意设计——示例本身就是 skill 的一部分。

⑤ 适合谁 / 不适合谁

适合：写技术文档、架构说明、算法讲解的人；需要给博客/文档配可交互示意图的开发者；想给自己的产品做「会动」的 onboarding 插画的人。

不适合：只想要一张静态配图的人（这套流程偏重）；没有 Node 环境的读者；期待「一句话出图」的工具党——它是 Skill，得靠 Agent 来驱动。

⑥ 项目地址 + 原视频链接

• 项目地址：https://github.com/wheresryan22/anatomy
• 官网：https://skills.wheresryan.sh/anatomy
• 原视频（第 135 期）：https://www.bilibili.com/video/BV1EVJY6GEA6

本篇为第 135 期专栏的实操实测篇。专栏索引：GitHub 一周热点 · 逐个实测