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

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

本文目錄

anatomy 是什麼？
SKILL.md 怎麼要求 AI 做事？
我的實測：重建範例、跑測試
怎麼安裝 anatomy？
使用範例
限制與注意事項
MK 觀點：適合誰、不適合誰
常見問題
延伸閱讀

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

anatomy 是什麼？

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

anatomy 的 GitHub 首頁，顯示 README 開頭與 Raptor 火箭引擎範例圖 圖：anatomy 的 GitHub 首頁。來源：wheresryan22/anatomy，截圖於 2026-11-02

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

anatomy 官方範例拼貼：Raptor 引擎拆解、水波槽、轉盤、千分表 圖：repo 內附的四個範例。圖片來源：wheresryan22/anatomy 官方 README（授權 MIT）

Raptor 2 火箭引擎在試車台上點火，排氣火焰由 WebGL 繪製 圖：Raptor 引擎點火，機身是 SVG，火焰是 WebGL。圖片來源：wheresryan22/anatomy 官方 README（授權 MIT）

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

README 的 What it makes 表格，列出 SVG、SVG＋WebGL、3D 三種產出 圖：三種產出類型。來源：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、repo）：

星數 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 項幾何測試通過 圖：我自己跑的重建與測試結果。來源：MK 實測，2026-11-02

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

怎麼安裝 anatomy？

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

README 的 Quick start 區塊，顯示 npx skills add 安裝指令與 /anatomy 用法 圖：官方的快速開始。來源：anatomy README「Quick start」段落

只裝給 Claude Code 的話（用 skills CLI）：

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

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

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 輸入：

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

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

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

限制與注意事項

README 的 Limits 段落：不是圖表庫、只畫機器、刻意很慢、3D 模式為 beta 圖：官方自己列的限制。來源：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，有海報、工程圖、詳解三種格式。