図の問題点：動作を伴わない構成要素
Better Stackのバイラル動画『This Claude Code Skill Is Actually Insane』は、従来の図が抱える核心的な問題、つまり「箱と矢印はコンポーネントの存在を証明するが、その動的な動作を明らかにするものはほとんどない」という点を浮き彫りにしています。私たちはパーツを見ることはできますが、状態の変化や因果関係は抽象的なまま残され、メカニズムを推測するしかありません。
そこで登場するのが、Claude Code向けのオープンソースエージェントスキルである「anatomy」です。このスキルの指針は、ルートプロンプトに明記されている通り、「箱や矢印、ラベルを描くのではなく、その概念を体現する本物の、よく作り込まれた物理的なものを作り出すこと」です。この指令により、AIはシステムの論理を体現するインタラクティブな物理マシンを生成するようになります。
このアプローチは理解のあり方を変えます。キャッシュキーはピンタンブラー錠となり、正しい鍵がピンを揃えて扉を開けます。LRUキャッシュは回転式の機械的な本棚として現れ、TCPハンドシェイクは手紙をやり取りするロープと滑車としてアニメーション化されます。
ユーザーは静的な接続を暗記する代わりに、メカニズムを追うことで、LRUキャッシュがどのように回転するか、あるいはダイヤルインジケーターのキャリッジがどのようにスライドして各ブロックを読み取るかを観察できるようになります。このインタラクティブで物理的な具体化は、複雑なシステムを直感的なものにし、教育やデバッグの両面で役立ちます。出力されるのは静止画ではなく、検証可能なHTML、SVG、またはWebGLコードです。
キャッシュは錠前へ、プロトコルはロープへ
抽象的な箱の代わりに、anatomyスキルはキャッシュキーをピンタンブラー錠に変えます。物理的なメカニズムとして、正しい鍵がピンを揃えて錠が回る様子を示します。これにより検証が具体的なものとなり、概念の内部構造が明らかになります。
LRUキャッシュは、回転する機械的な本棚やビー玉転がしへと姿を変えます。メカニズムが動作する中でアイテムがアクセスされ、移動し、追い出される様子を観察することで、その動作が解明されます。同様に、TCPはメインのロープや滑車システムとなり、手紙を往復させることでハンドシェイクプロトコルの状態変化を説明します。
このアプローチは物理的なアセンブリや測定にも拡張されます。例えば、Raptorロケットエンジンはホバー時に11の個別のパーツに分解され、WebGLによる排気プルームまで再現されます。ダイヤルインジケーターでは、キャリッジがスライドしてブロックを測定し、操作に合わせて針が各ブロックを読み取る様子が表示されます。
SVGやWebGLでレンダリングされたこれらのインタラクティブなモデルは、単に存在するだけでなく「動作」します。これらは静的な図から動的な説明への深い転換をもたらし、コンポーネントの存在と動的な機能の間のギャップを埋めます。
内部の仕組み：検証可能なイラストレーション
動画『This Claude Code Skill Is Actually Insane』で紹介されたスキル「Anatomy」は、静止画ではなく実行可能なコードを生成します。Claudeは自己完結型のSVG、HTML/JavaScript、またはReactコンポーネントを作成します。この出力により、直接的な操作、検証、修正が可能になり、システム動作の可視化方法が根本から変わります。
このインタラクティビティを支えているのは、階層的な視覚アプローチです。アイソメトリックレンダリング、厳密なペインターアルゴリズムによる深度順序、そして（Raptorロケットエンジンで見られるような）エンジンプルームといったオプションのWebGLエフェクトが、物理的な実在感を生み出しています。平坦なラスター画像とは異なり、これらは実際に触れて操作できるマシンなのです。
従来の画像生成との実用的な違いは非常に大きいです。ブラウザベースの監査により、衝突、無効なパイプエンドポイント、不適切なオクルージョンを検出し、幾何学的な整合性を確保できます。これは、コンセプトを体現することを目的としたシステムにとって極めて重要な詳細です。コード自体を検査、デバッグ、バージョン管理することが可能です。
これは抽象的な図解からの大きな飛躍です。基礎となるメカニズムの詳細については、GitHub - wheresryan22/anatomy: An agent skill for creating detailed, interactive isometric illustrationsでコードを確認できます。生成された「マシン」を監査、操作、バージョン管理できる能力は、それらを単なるイラストから、計算可能な機能的で検査可能なモデルへと昇華させます。
この記事が気に入ったら、毎朝同じようなものをメールで受け取れます。
1日1通 · 2クリックで解除 · サードパーティのトラッキングなし
魔法が終わる場所 — そして試してみる方法
このClaude Code Skillは本当に驚異的ですが、日常的な作図ツールに取って代わるものとは期待しないでください。これらの複雑でインタラクティブなモデルを生成するには、膨大な計算リソースとトークン予算が必要です。詳細なイラストを作成するたびに、多くの場合、多数のジオメトリライン、複数のエージェント実行、そして正確性を保証するためのブラウザベースの検証が必要となります。
Anatomyは、LRUキャッシュの内部構造やTCPのプロトコルハンドシェイクのような、特定のメカニズムやシステム動作を説明することに長けています。Mermaidチャート、標準的なグラフライブラリ、財務ダッシュボード、地図の代わりにはなりません。何かが「存在する」ことではなく、それが「どのように機能する」かを明確にするために使用してください。
Anatomyを試すには、MITライセンスのGitHubプロジェクト wheresryan22/anatomy にアクセスしてください。そこにAgent Skills CLIコマンドがあります。まずは小さく始めて、単一のコンセプトを選び、そのインタラクティブなモデルを生成し、結果として得られるSVG、HTML、またはReactコンポーネントのコードを検査してください。これにより、共有する前に生成されたインタラクションとロジックが意図と一致していることを確認できます。
このスキルは静的な画像ではなくコードを生成します。この根本的な違いにより、『This Claude Code Skill Is Actually Insane』で示されているような正確でインタラクティブな視覚化が可能になります。単純なピンタンブラー錠から、WebGLの排気プルームを備えたマルチアセンブリのRaptorエンジンまで、Anatomyは抽象概念を具体化します。
よくある質問
Anatomy Claude Codeスキルとは何ですか？
コーディングエージェントを導き、コンセプトを機能する物理的メカニズムとしてインタラクティブなコードベースのイラストに構築させるオープンソースのエージェントスキルです。
Anatomyはどのようにソフトウェアのコンセプトを説明しますか？
コンセプトを機械的なアナロジーにマッピングし、ユーザーがその動作を観察または操作できるインタラクティブなイラストを作成します。
AnatomyはMermaidやグラフライブラリの代わりになりますか？
いいえ。メカニズムを説明するためのフローチャートツールを補完するものであり、ダッシュボード、財務チャート、地図を目的としたものではありません。
Claude Code用のAnatomyをインストールするにはどうすればよいですか？
プロジェクトでは、Agent Skills CLIを使用したインストール方法を文書化しています：npx skills add wheresryan22/anatomy -g -a claude-code