跳到正文
gihyo.jp·· 5 小時前AI 評分69

Anatomy 智能體技能公開,以動態圖解説明運作原理

仕組みを動く図で説明するエージェントスキルAnatomy公開

AI 導讀

開發者 Ryan 於 2026年10月10日在 X 介紹開源智能體技能 Anatomy,可按用戶描述設計機械或概念的部件與動作,生成動態圖解。圖解可輸出為 SVG、獨立 HTML 頁面或 React/Next.js 元件,並支援 Claude Code、Codex 和 OpenCode;互動圖可由指標或鍵盤操作,3D 模式則以 beta 版提供。

正文

開発者のRyan氏(@wheresryan22)は2026年10月10日、さまざまな仕組みを動く図で説明するエージェントスキル「Anatomy」をXで紹介した。作りたい機械や説明したい概念を伝えると、AIエージェントが部品の形状や動作を設計して図を生成する。ポインターやキーボードの操作に応じて部品が動く図も作れる。

図はSVGファイルや単独で開けるHTMLページ、React/Next.js向けコンポーネントとして出力できる。AnatomyはClaude Code、Codex、OpenCodeに対応し、ソースコードはMITライセンスで公開されている。

Introducing Anatomy

Describe a machine in one line. Claude brings it to life.

  • Interactive isometric wireframes you can rotate, inspect and explore
  • WebGL shaders for fire, water, plasma and more
  • Real 3D motion, with individual parts that rotate and move

Install it as an agent skill. Fully open source.

— R (@wheresryan22) October 10, 2026

機械の動きで仕組みを説明

図は、物体を斜め上から見下ろすアイソメトリック表現で描かれる。数十〜数百の部品を組み合わせ、機械の構造や動作を表現する。Anatomyの公式サイトの機械式時計では、リューズでぜんまいを巻き、動きを遅くして歯車を観察できる。

機械式時計の作例

実在する機械だけでなく、ソフトウェアの概念に対応する機構をAIが考え、その動きで仕組みを説明する図も作れる。LRUキャッシュの作例は、キャッシュ内の項目を棚の上の4冊の本に見立て、最近使った本ほど左に置く。キャッシュにない項目を要求すると、右端の本を下の棚へ戻す。最も長く使われていない項目を追い出す仕組みを、本の位置と動きで表現している。

本棚でLRUキャッシュを表現した作例

描画にはSVGを使い、炎や水、プラズマなどの表現にはWebGLのシェーダーを組み合わせる。部品を3次元空間で回転・移動させる3Dモードもベータ版で提供している。

Anatomyには、エージェントが読み込む図の設計・描画・検証の手順がまとめられている。部品の動きと画面に表示する値を、機械の挙動や数値を表す共通の計算モデルから求めるよう、エージェントに指示する。図の生成後には、スクリーンショットや拡大画像で部品の接合部などを確認するよう求める。

開発者が示す制作時間の目安は、40〜80部品で30〜90分、80〜150部品で2〜4時間、車両・建物・プラント全体の図で6時間以上とのこと[1]。

Claude Codeなどで図を生成⁠、52点の作例もReactで再利用

GitHubのREADMEでは、Claude CodeにAnatomyを追加するコマンドを案内している。

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

Codex向けにはコマンド末尾のclaude-codeをcodexに、OpenCode向けにはopencodeに変更する。

導入後は、Claude CodeとOpenCodeでは/anatomy、Codexでは$anatomyに続けて説明したい対象や動かしたい部分を指定する。操作に応じて動く図にするにはinteractiveを加える。この指定を省略すると静止画になる。必要に応じてWebGLや3Dも指定できる。

エージェントが図を生成・検証する際にはNode.jsを使い、表示や動作の確認にはChromeまたはChromiumを使う[2]。

公式サイトのCollectionにある52点の作例は、anatomy-figuresパッケージとしても提供されている。npm install anatomy-figuresで導入すると、ReactコンポーネントとしてWebサイトに組み込める。時計、ジェットエンジン、二分探索、DNSの名前解決、TCPハンドシェイクなどを扱い、Collection上でも操作できる。

作った図をプロンプトや使用モデルとともに共有

Anatomyの公開後には、利用者が作った図を共有するコミュニティギャラリーも設けられた。掲載された図を操作できるほか、生成に使ったプロンプトやモデルも確認できる。所要時間・トークン数は、記録がある場合に表示される。

図を作ったセッションで、エージェントにギャラリーへの公開を依頼できる[3]。エージェントは図のソース、プロンプト、使用モデル、記録された制作時間・トークン数などの送信内容を提示し、利用者の同意後にプルリクエストを作成する。

提出したソースはサンドボックスで再ビルド・検証される。メンテナーのレビューとマージを経て、図がギャラリーに掲載される。

來源:gihyo.jp · gihyo.jp