一句話結論
wheresryan22/anatomy 是一個 2026-10-08 才建立、8 天內累積 14,125 顆星的 Claude Skill，MIT 授權、零依賴。它的核心不是「幫你畫圖」，而是先發明一台實體機器，讓那台機器的運作方式本身等於你要解釋的概念——例如「快取金鑰在資料沒變時跳過工作」會被畫成一把彈子鎖，只有每一根針都對齊才轉得動；「一個 GPU context 同時服務多張畫布」會被畫成一台龍門繪圖機，單一印頭巡迴 16 個井。
真正讓它突出的是另一半：它會驗證自己畫的東西——用幾何稽核證明「沒有任何管子穿過另一個零件」、用無頭 Chrome 截圖並要求代理逐張讀回自己的 PNG 再修正。
它到底在做什麼：先發明機器，再畫出來
一般的「AI 畫圖」流程是「你描述畫面 → 它生成像素」。Anatomy 的流程不一樣：
| 步驟 | 做的事 |
|---|---|
| 1 | 你先給概念與真實數字（尺寸、數量、速率、閾值），不必描述版面 |
| 2 | 代理發明一台實體機器，讓它的機械運作方式就等於這個概念 |
| 3 | 寫零件清單、規劃世界座標、用 kit 建幾何、由後往前上色 |
| 4 | 裝進有標題、提示與即時讀數的卡片，加上滑鼠與鍵盤的緩動動畫 |
| 5 | 自檢：幾何稽核 + 截圖放大每個接縫，讀回 PNG 後修 |
官方 README 對這個設計的說法很精準：「問 Claude 要一張解釋技術概念的圖，Anatomy 會讓它發明一個實體，而那個實體的運作就是那個概念。」
三種輸出：SVG、SVG+WebGL、3D（beta）
| 類型 | 內容 | 適合什麼 | 範例 |
|---|---|---|---|
| SVG（核心） | 實心等角零件、四階色調、由後往前繪製，裝在卡片裡附即時讀數與緩動動畫；可輸出獨立 HTML 頁、單一 .svg（樣式內嵌）或 React／Next.js 元件 | 機構、儀器、家具、工具 | dial-indicator、desk-computer、arcade-cabinet、test-rig |
| SVG + WebGL | 線條畫不出來的東西交給 shader：火焰、排氣、水波、焦散、燈光、發光、蒸氣。shader 跑在畫布裡，夾在「後景 SVG」與「前景 SVG」之間，使用同一個等角攝影機，所以它真的坐在圖裡面；關掉 WebGL 時 SVG 本身仍可讀 | 有流體、光、熱的題材 | raptor-engine、ripple-tank |
| 3D（beta） | 真正在三維空間轉動的零件：會旋轉的轉盤、會彎曲的手指、會斷裂掉落的部件。只有「動的部分」每格重新投影與上色，其餘維持靜態畫面 | 需要立體旋轉的單一構件 | turning-dial |
每張圖都有明暗兩色主題，而且亮色是先設計的主場（含 shader 的配色）。
八個官方範例（附規模與 build 指令）
| 範例 | 內容 | 規模／備註 | 建置 |
|---|---|---|---|
dial-indicator | 立式千分錶與滑台上的三塊塊規，滑過去指針就讀數 | 最小的範例，約 300 行 | node examples/dial-indicator/build.mjs |
desk-computer | 1984 風格的桌上電腦，鍵盤真的可以打字，打出的字顯示在機殼前面的 CRT 上，關機時畫面收成一條線與一個點 | 約 85 個實體 | node …/desk-computer/build.mjs |
arcade-cabinet | 側板打開的大型電玩機台，投幣後硬幣沿滑道滾進錢箱、脈衝沿排線跑到主機板、CRT 亮起進入 attract mode | 約 240 個實體、15 條線纜 | node …/arcade-cabinet/build.mjs |
raptor-engine | Raptor 2 火箭引擎在試車台上，可拆成 11 個組件；火焰、震波、水花、蒸氣由 WebGL 畫在前後景 SVG 之間 | 密集管線與平滑上色的參考範例，build 需要幾分鐘 | node …/raptor-engine/build.mjs |
ripple-tank | 學校用的水波槽，44° 俯角，兩層 WebGL（燈光、紙幕焦散）由純數理模型驅動 | 色散與光學模型 | node …/ripple-tank/build.mjs |
test-rig | 彈簧座上的玻璃按鈕、軌道上的探針、讀出傾角的千分錶 | 53 個實體，React／Next.js 產出，無 build script | 直接複製進 React 專案 |
spot-plate | 點滴盤上六對玻璃液滴，隨著扇形葉片張開而融合成一塊玻璃 | 每對液滴由同一個距離場繪製 | 直接複製進 React 專案 |
turning-dial | 3D 模式：真的三維旋轉的轉盤、三節手指、會斷開的艙體 | 附 stress.mjs：380 個零件的手，用來量效能 | node …/turning-dial/build.mjs |
八個範例的建置後頁面都已 commit 進 repo，任何一個 .html 都能直接用瀏覽器打開體驗。
它怎麼運作：SKILL.md 流程 + kit 繪圖庫
repo 本身就是一個標準的 Agent Skill（根目錄一份 SKILL.md），結構分成四塊：
| 目錄 | 作用 |
|---|---|
SKILL.md | 代理讀的工作流：先蒐集真實數字 → 發明物件 → 寫零件清單 → 規劃世界 → 用 kit 建一次幾何 → 由後往前上色 → 裝框 → 讓它動 → 像評論家一樣驗證；並附上工藝規則 |
kit/ | 繪圖庫：等角攝影機與零件庫（iso-kit）、任意軸向的迴轉件（lathe.mjs）、管線與線纜（tube.mjs）、WebGL 層（gl.mjs）、3D 執行環境（turn*.mjs）、React 元件 |
references/ | 代理需要時才打開的長篇指南：工藝、kit API、動態、React、驗證、WebGL、設計走查、3D |
scripts/ | 無頭 Chrome 的檢查工具：截圖、腳本化操作、線端檢查、3D 檢查 |
除了 React 元件那條路徑之外，整個 kit 沒有任何外部依賴——只用 Node 內建模組，npm install 都不需要。
最值得一看的部分：它會驗證自己的圖
「AI 生成的圖」最大的問題是你不信任它。Anatomy 把驗證做成流程的一部分：
| 機制 | 證明什麼 |
|---|---|
kit/audit.mjs（幾何稽核） | 沒有任何零件穿過另一個零件、每個端點都真的坐在固定座上、每個重疊都照深度順序繪製（node build.mjs --audit） |
scripts/capture.mjs | 在無頭 Chrome 裡截圖、拍特寫、做慢動作連拍拼圖（contact sheet） |
scripts/lines.mjs | 任何一條線只要收在空中就直接判失敗 |
scripts/turn-check.mjs | 3D 圖形的檢查（另有 turn-bench.mjs 量 Node 端效能） |
| 強制回讀 | skill 明確要求代理讀回自己產生的每一張 PNG 再決定要不要修 |
這套設計的意義超出這個專案本身：它示範了「代理產出視覺物 → 用程式化規則自我檢查 → 讀回成品 → 再修」的閉環，而不是讓模型自己說「看起來不錯」。
安裝：五種代理、三種路徑
Anatomy 遵循開放的 Agent Skills 格式，Claude Code、Antigravity、OpenCode、Codex、MiniMax Code 都能載入。
# skills CLI（最省事；-a 可指定代理，省略則互動詢問）
npx skills add wheresryan22/anatomy -g
# 只裝給 Claude Code
npx skills add wheresryan22/anatomy -g -a claude-code
# 用 git（以 Claude Code 為例）
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy
# 不想用 git 的一行版（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 輸入 /anatomy explain how a token bucket rate limiter works, interactive（Codex 用 $anatomy，其他代理用 /anatomy）。
| 需求 | 用途 | 備註 |
|---|---|---|
| Claude Code 或 Antigravity／OpenCode／Codex／MiniMax Code | 全部功能 | 技能是為 Claude Code 寫的，但遵循開放格式，其他代理可載入 |
| Node.js 20.10+ | build、kit、檢查 | 只用內建模組、零依賴；範例在 Node 20.19 與 22.11 上「逐位元」重建一致 |
| Chrome 或 Chromium | 視覺檢查 | 找不到時用 CHROME_PATH 指定；以無頭模式、開啟 WebGL 執行 |
| React 18+ | 只有 React 輸出需要 | kit/react/、test-rig、spot-plate |
Codex 使用者注意：Codex 的沙箱可能會擋掉無頭 Chrome，導致「圖有建出來、但檢查失敗」。官方給了三個解法（最推薦：只在該指令上允許離開沙箱；或改 ~/.codex/config.toml 的 sandbox_mode 與 network_access；或自己在一般終端跑 node scripts/capture.mjs）。
怎麼下 prompt 才畫得好（官方三個習慣）
- 講想法，不要講畫面：說它要解釋什麼，並給真實數字（尺寸、數量、速率、閾值）。物件由它發明——那是它最強的部分，比「畫一堆方塊和箭頭」有效得多。
- 或直接指定物件：如果你心裡已經有機器（義式咖啡機、本生燈、鎖），就說出來，並說清楚「什麼要動」。
- 說它要住哪裡：獨立 HTML 頁、單一 SVG 檔，或 React／Next.js 元件；亮色或暗色。不同落點的產出結構不同。
官方 evals/evals.json 裡的範例提示詞可以照抄改寫，例如：
- 「畫一張 Next.js 文件用的資料庫連線池圖：10 條連線，請求借一條再還回去，10 條都忙時新請求排隊；要 React 元件＋靜態 HTML 預覽，暗色主題。」
- 「用等角 SVG 解釋 CDN 邊緣快取：命中與未命中、TTL 60 秒，用在暗色落地頁，只要 SVG 檔與 PNG 預覽。」
- 「本生燈：打開風門圈，黃色懶火變成藍色錐形火；火焰用 WebGL，單一 HTML 檔，暗色。」
四項它自己承認的限制
- 它不是圖表庫：沒有座標軸、沒有資料序列、沒有折線圖。數字只以「模型驅動的即時讀數」與「零件的真實尺寸／數量」出現。
- 它畫機器、儀器、工具、家具——不畫人，也不是精確地圖。如果一個概念「沒有機構可以實作」，產出會比較弱。
- 它故意很慢：一次成品是「長 session」——零件清單、幾何、稽核、兩種主題下每個接縫的特寫。Raptor 引擎 build 要幾分鐘；完整 3D 軌道稽核 30 個零件要 15–20 分鐘。
- 3D 還是 beta：只在它的範例與一個測試圖上驗證過，尚未用在正式成品；小型 3D 圖可跑到 60 fps，但 380 個零件的壓力測試手在 1440 px 寬約 20 fps、在降頻手機設定下只有 13–15 fps。
另外，shader 需要 WebGL；沒有 WebGL 時 SVG 仍可讀，而開啟「減少動態」偏好時所有圖都會靜止。
誰適合用、誰不需要
適合
- 要寫技術文件、教學文章、產品頁，需要「一眼看懂機構原理」的圖，而且不想開 Illustrator
- 想示範「代理如何自我驗證」的團隊（它的稽核與回讀機制是可借鏡的工程範本）
- 需要把抽象概念（快取、限流、連線池、佇列）具體化的講者與講師
不需要
- 要的是資料圖表（折線、柱狀、散佈）——它明確不做
- 要的是精確的人像、地圖或品牌插畫
- 需要秒級產出、大量批次生成圖片的場景（它的哲學是「慢而準」）
站內延伸閱讀
- Claude Skills 最佳實務 2026 大改版：官方 7 條新規則——Anatomy 就是照這套 Agent Skills 標準寫的
- Claude Opus 5.5 影片生成生態全地圖：20 個 GitHub 倉庫逐一實查——同樣是「用程式碼生視覺」的路線，可對照 SVG 與影片的差異
- Claude SEO：讓 Claude Code 化身完整 SEO 機構的開源技能——另一個把專業流程封裝成 skill 的案例
- RoundTable 完整解析 2026：為什麼多 Agent 協作不容易——代理要「自我檢查」時，驗證機制怎麼設計
- 2026 精選 350+ AI 開源專案完整地圖——同類開源工具可在此清單繼續挖
資料來源與查證方法
- GitHub REST API（
wheresryan22/anatomy，2026-10-16 查詢）：14,125 stars、1,067 forks、MIT、JavaScript、建立於 2026-10-08、最後推送 2026-10-15、約 1.7 MB；topics：agent-skill、open-source、svg、vizualization；官網skills.wheresryan.sh/anatomy。 - 官方 README（330 行全文）：三種輸出類型與範例表、8 個範例的規模與 build 指令、
SKILL.md工作流、kit/模組清單、驗證機制（audit.mjs／capture.mjs／lines.mjs／turn-check.mjs）、安裝方式（skills CLI／git／ZIP，五種代理的安裝路徑）、需求（Node 20.10+、零依賴、Chrome、React 18+）、Codex 沙箱的處理方式、三個 prompt 習慣、evals/evals.json範例、限制（非圖表庫／不畫人／故意很慢／3D beta 的實測 fps）、社群畫廊與貢獻規則（例如「程式碼不准寫註解」「kit 改動必須讓所有範例逐位元不變」）。 - MIT 授權（
LICENSE，© 2026 Ryan／@wheresryan22）。
未做的事（誠實揭露）：本文沒有實際安裝這個 skill、也沒有跑過任何一次產圖（它需要代理環境、Node 與 Chrome，且一張圖是「長 session」等級的運算）。所有功能敘述、範例規模、驗證機制與效能數字皆取自官方 README 與 repo 結構；實際產出品質與耗時，建議在自己的環境用最小範例（dial-indicator，約 300 行）先試一次。
本文為開源工具介紹，不構成採購建議。安裝任何第三方 skill 前，請自行閱讀其
SKILL.md與scripts/（這個 skill 會啟動無頭 Chrome 並在本地建立暫存設定檔，屬正常行為但值得知道）。