# anatomy 實測：讓 Claude 把技術概念畫成一台機器

> anatomy 是一個 Claude Code Skill，會把技術概念發明成一台實體機器，畫成可互動的等角立體 SVG。我實際 clone、重建範例、跑幾何測試，整理安裝方式、用法、限制，以及它適合誰。

- 作者：Michael Kuo（https://mk-ai-notes.pages.dev/about/）
- 發布日期：2026-11-02（2026-11-02T20:01:00+08:00）
- 原文網址：https://mk-ai-notes.pages.dev/posts/skill-anatomy/
- 分類：GitHub 飆星與 Skill 實測（https://mk-ai-notes.pages.dev/category/github/）
- 系列：MK 熱門 Skill 實測 第 1 篇／共 11 篇（https://mk-ai-notes.pages.dev/series/mk-skill-lab/）
- 標籤：Claude Code、Skill、SVG、視覺化、Codex
- 閱讀時間：約 8 分鐘（約 1515 字）
- 參考來源：https://github.com/wheresryan22/anatomy

![anatomy 實測：讓 Claude 把技術概念畫成一台機器](https://mk-ai-notes.pages.dev/og/skill-anatomy.png)

---

寫技術文章最卡的，常常不是文字，而是那張「一看就懂」的示意圖。anatomy 這個 Claude Code Skill 的解法很妙：不畫方框加箭頭，而是**把概念發明成一台會動的機器**。我把它抓下來玩了一輪，重建範例、跑了它的測試，下面跟大家分享心得。

## anatomy 是什麼？

簡單講，它是一套讓 AI 用「實體物件」解釋抽象概念的繪圖技能。

![anatomy 的 GitHub 首頁，顯示 README 開頭與 Raptor 火箭引擎範例圖](https://mk-ai-notes.pages.dev/img/skill-anatomy/repo-home.jpg)
*圖：anatomy 的 GitHub 首頁。來源：[wheresryan22/anatomy](https://github.com/wheresryan22/anatomy)，截圖於 2026-11-02*

README 舉的例子我很喜歡：「內容沒變就跳過重算的快取鍵」，被畫成一把**彈子鎖**，每根鎖針都對上，鎖芯才轉得動；「一個 GPU 繪圖上下文服務多個畫布」，則變成一台繪圖機，一個噴頭輪流跑 16 個格子。

![anatomy 官方範例拼貼：Raptor 引擎拆解、水波槽、轉盤、千分表](https://mk-ai-notes.pages.dev/img/skill-anatomy/gallery.jpg)
*圖：repo 內附的四個範例。圖片來源：wheresryan22/anatomy 官方 README（授權 MIT）*

![Raptor 2 火箭引擎在試車台上點火，排氣火焰由 WebGL 繪製](https://mk-ai-notes.pages.dev/img/skill-anatomy/raptor-firing.jpg)
*圖：Raptor 引擎點火，機身是 SVG，火焰是 WebGL。圖片來源：wheresryan22/anatomy 官方 README（授權 MIT）*

它能做三種圖：純 SVG（核心）、SVG 加 WebGL（畫火焰、水波、燈光），還有測試中的 3D 模式。

![README 的 What it makes 表格，列出 SVG、SVG＋WebGL、3D 三種產出](https://mk-ai-notes.pages.dev/img/skill-anatomy/readme-what-it-makes.jpg)
*圖：三種產出類型。來源：anatomy README「What it makes」段落*

## SKILL.md 怎麼要求 AI 做事？

我把 SKILL.md 整份讀完，最有感的是它要 AI **先估規模再動手**：

- **Figure**：一個機構、40–80 個零件，直接做。
- **Hero**：80–150 個零件或含 3D，約 2–4 小時，要先跟你說。
- **Epic**：整台車、整棟建築，6 小時以上，**不准直接開工**，要先提縮小版。

它也明講兩種失敗：太抽象（一堆標籤方塊）和太平淡（一塊板子加幾條線），還要求每條線都要接在零件上、不能懸空。難怪成品看起來像工程插畫，而不是一般 AI 示意圖。

## 我的實測：重建範例、跑測試

先看基本資料（查證日期 2026-11-02，來源：[GitHub API](https://api.github.com/repos/wheresryan22/anatomy)、[repo](https://github.com/wheresryan22/anatomy)）：

- 星數 23,810、Fork 1,987，授權 MIT
- 2026-10-08 建立，最後更新 2026-10-18（commit `1482e84`）
- 173 個檔案，SKILL.md 185 行，附 8 個完整範例

我用 Node v22 試了兩件事。第一，跑最小的範例 `node examples/dial-indicator/build.mjs`，0.03 秒就寫出 HTML，而且**重建出來的檔案跟 repo 裡的一模一樣**（SHA256 相同），真的完全不靠外部套件。第二，跑三組幾何稽核測試，16 項全過。

![終端機畫面：重建 dial-indicator 範例雜湊相同，16 項幾何測試通過](https://mk-ai-notes.pages.dev/img/skill-anatomy/test-run.png)
*圖：我自己跑的重建與測試結果。來源：MK 實測，2026-11-02*

另外有一組曲線測試要搭配 Chrome 才能跑，我這次先跳過，想試的人照 README 裝好 Chrome 就行。順帶一提：**畫圖本身只要 Node，但它最後「自己放大檢查」那一步要用到 Chrome**。

## 怎麼安裝 anatomy？

前置：Node.js 20.10 以上；要跑截圖檢查，再加 Chrome 或 Chromium。

![README 的 Quick start 區塊，顯示 npx skills add 安裝指令與 /anatomy 用法](https://mk-ai-notes.pages.dev/img/skill-anatomy/readme-quickstart.jpg)
*圖：官方的快速開始。來源：anatomy README「Quick start」段落*

只裝給 Claude Code 的話（用 [skills CLI](https://github.com/vercel-labs/skills)）：

```sh
npx skills add wheresryan22/anatomy -g -a claude-code
```

不想用 npx，直接 clone 進技能資料夾也可以：

```sh
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy
```

小提醒：skills CLI 會把整個 repo（含範例約 10 MB）複製過去，CLI 1.7.1 版要 Node 22.20 以上。Antigravity、OpenCode、Codex、MiniMax Code 也能裝，`-a` 換成對應名稱就好。

## 使用範例

在 Claude Code 輸入：

```text
/anatomy explain how a token bucket rate limiter works, interactive
```

Codex 要改打 `$anatomy`。不點名也行，直接說「幫我畫一張解釋 CDN 快取的等角 SVG」，Claude 會自己載入。

README 的三個訣竅我覺得很受用：講清楚**要解釋的概念和真實數字**；已經想好用什麼物件就直接說；最後**講明成品要放哪**（HTML、SVG 或 React，亮色或暗色）。

## 限制與注意事項

![README 的 Limits 段落：不是圖表庫、只畫機器、刻意很慢、3D 模式為 beta](https://mk-ai-notes.pages.dev/img/skill-anatomy/readme-limits.jpg)
*圖：官方自己列的限制。來源：anatomy README「Limits」段落*

- **不是圖表庫**：沒有座標軸和資料圖。
- **只畫機器、儀器、工具、家具**：不畫人，也不畫精確地圖。
- **刻意很慢**：3D 完整稽核 30 個零件要 15–20 分鐘，Token 也會用得多。
- **3D 模式是 beta**，380 個零件的壓力測試約 20 fps。
- 用 Codex 的話，它預設的安全限制可能擋掉 Chrome，圖照樣會產生，只是檢查那步會失敗。

## MK 觀點：適合誰、不適合誰

**適合**：寫技術部落格、產品文件、到達頁的人，需要一張「有質感又真的對」的主視覺；老師做教材也很適合，機器比喻比流程圖好記多了。

**不適合**：只想要快速流程圖或數據圖表的人，用 Mermaid 或一般圖表工具更快；Token 預算很緊、希望一分鐘出圖的也不要找它。

我自己的感想是：就算不裝，**光讀它的 SKILL.md 就能學到怎麼設計解說圖**，「先想比喻，再畫圖」這招我之後做影片也會用。

## 常見問題

**Q：anatomy 要付費或 API 金鑰嗎？**
不用。MIT 授權，README 寫明不需要 API 金鑰、也不用 `npm install`。Claude Code 本身的訂閱或用量照常計算。

**Q：沒有 Claude Code 能用嗎？**
可以。它遵循開放的 Agent Skills 格式，Antigravity、OpenCode、Codex、MiniMax Code 都能載入。

**Q：畫出來的圖可以商用嗎？**
工具是 MIT 授權，產出的程式碼歸你。圖裡如果出現真實品牌或產品外觀，商標權利還是要自己確認。

**Q：可以印出來嗎？**
可以。README 說能從完成的圖輸出 A4 的 PDF，有海報、工程圖、詳解三種格式。

## 延伸閱讀

- 同系列：[hallmark 實測：讓 AI 做的網頁不再有 AI 味](https://mk-ai-notes.pages.dev/posts/skill-hallmark/)
- 同系列：[replica-skill 實測：11 個技能拆解重建 App](https://mk-ai-notes.pages.dev/posts/skill-replica-skill/)
- [AI 怎麼同時看圖、聽聲音？](https://mk-ai-notes.pages.dev/posts/ep08-multimodal/)
- [AI 代理會不會闖禍？](https://mk-ai-notes.pages.dev/posts/ep10-agent-safety/)

引用本文請附原文網址：https://mk-ai-notes.pages.dev/posts/skill-anatomy/（作者：Michael Kuo）