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

開発者の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冊の本に見立て、最近使った本ほど左に置く。キャッシュにない項目を要求すると、右端の本を下の棚へ戻す。最も長く使われていない項目を追い出す仕組みを、本の位置と動きで表現している。

描画には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]。エージェントは図のソース、プロンプト、使用モデル、記録された制作時間・トークン数などの送信内容を提示し、利用者の同意後にプルリクエストを作成する。

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