開源技能 Anatomy：一句話讓 AI 生成可互動 3D 機械圖解

Anatomy 是一個給程式設計智慧體使用的開源技能，能把你輸入的一行抽象技術概念，直接變成一臺可互動、在運轉的等軸測立體機械。

平時解釋系統架構或底層演算法，大家習慣畫方框、箭頭和流程圖。Anatomy 換了個思路：它放棄抽象圖表，把原理具象化為幾十個精密的機械零件。比如解釋跳過重複計算的快取機制，它會畫成一把彈子鎖，只有每個鎖銷完全對齊鑰匙才會轉動；解釋多個畫布共享單個 GPU 上下文，它會畫成一臺帶有移動列印頭的繪圖儀。

它能生成什麼

通過 Anatomy 生成的圖解支援三種形態，而且全部遵循統一的等軸測視角和光影規範。

第一種是純 SVG 向量圖。這是核心模式，零件具有四色階陰影，按由遠到近層層繪製，配有即時讀數卡片和緩動動畫。輸出物可以直接作為獨立 HTML 網頁、內嵌樣式的單個 SVG 檔案，或者 Next.js 與 React 元件，非常適合塞進技術文件或官網部落格。

第二種是 SVG 混合 WebGL 著色器。當畫面涉及火焰、廢氣、水流、焦散光斑、蒸汽這類線條無法表現的流體時，它會在前後兩層 SVG 之間夾一個 WebGL 畫布，比如模擬猛禽火箭發動機噴氣或水波槽實驗。

第三種是測試中的 3D 模式。針對旋轉刻度盤、機械手指彎曲或零件脫落等場景，智慧體會對移動部件逐幀重新投影並計算明暗，兼顧立體運動與靜態質感。

怎麼裝進你的智慧體

Anatomy 本質上是一個標準的 Agent Skill 規範目錄，核心是一份指令檔案，完全使用 Node.js 原生模組，不需要額外的 API Key，也不用安裝多餘的 npm 依賴。

你可以通過命令列一鍵全域性安裝：執行 npx skills add wheresryan22/anatomy -g 即可。它支援五大程式設計智慧體環境，包括 Claude Code、Antigravity、OpenCode、Codex 以及 MiniMax Code。如果使用 Git，直接把專案程式碼克隆到對應工具的 skills 目錄下也能直接載入。整個倉庫連同樣例大約 10 MB，執行需要 Node.js 22.20 或更高版本。

安裝完成後，在智慧體對話中輸入 /anatomy 加上你想解釋的機制即可。例如輸入 explain how a token bucket rate limiter works, interactive，模型就會自動推導物理隱喻、編寫程式碼、甚至在後臺啟動無頭瀏覽器檢查零件之間是否有穿模。

為什麼重要

我們認為 Anatomy 是技術寫作和互動演示領域極其聰明的微創新。過去開發者寫技術部落格或架構文件，想要高質量動圖要麼靠三維建模軟體硬做，要麼只能貼簡陋的流程圖。Anatomy 抓住大模型擅長打比方和寫前端程式碼的特長，把枯燥的引數對映成齒輪轉動與指標擺動，讓複雜的工程原理一目瞭然。

如果你經常需要寫開源文件、技術部落格或產品主頁，現在就很值得把它整合到本地開發工作流中。不過需要提醒的是，自動化檢查依賴無頭 Chrome 環境，如果在 Codex 等具備沙箱限制的環境下執行，需要手動放寬部分本地網路或臨時目錄寫入許可權。