Anatomy の作例を探していると、公式サイト以外にも、作者の GitHub や X、個人サイトに面白いものが散らばっていました。
あとで見返せるように整理したのが awesome-anatomy です。2026年10月18日時点で、原作へのリンク付きで217件、作者が公開したプロンプトを59件まとめています。
この記事では、作例を二つ紹介しながら、元のデモやコード、プロンプトをどう探せるかを書いておきます。Anatomy 自体は Ryan 氏のプロジェクトで、私が作ったのは非公式のリンク集です。
Anatomy は何を作るものか
Anatomy は、機械や技術的な仕組みをアイソメトリックな図として表現する Agent Skill です。Claude Code などの対応エージェントから使います。
図の中心は SVG で、題材によって WebGL の表現や3Dを組み合わせます。完成例には、操作に合わせて部品や表示が変わるものもあります。静止画だけでなく、動かしながら仕組みを追えるところが面白いです。
まず雰囲気を知りたい場合は、インストールより先に公式 Collection のデモを開くと分かりやすいと思います。
例1：メカニカルキーボードのスイッチ
作者：taqh（公式 Community 掲載、MIT）
スイッチを切り開いて、軸、ばね、接点の位置関係を見せる作例です。入力に使ったプロンプトも公開されています。
/anatomy explain how mechanical keyboard switches work
原作ページには制作時間が約46分と記載されています。プロンプトが一行でも、制作全体が一回の生成で終わったとは限りません。参考にするなら、公開された入力文と完成図に加えて、コードも確認できるのが助かります。
例2：メッセージキューを玉の流れで表す
作者：Ryan / wheresryan22（公式 Collection 掲載）
こちらはソフトウェアの概念を物理的な装置に置き換えた例です。二つの供給口から玉が入り、列に並び、三つのドラムが順番に処理していきます。Producer、Queue、Consumer の関係を図として追えます。
この作品は、公式ページに React への組み込み例もあります。既存の React プロジェクトで使う場合のパッケージ名は anatomy-figures です。
npm install anatomy-figures
import { MessageQueue } from "anatomy-figures";
export default function QueueExample() {
return <MessageQueue theme="light" />;
}
上は公式ドキュメントの API に沿った最小例です。この記事では組み込み実行までは行っていません。React を使わない場合の Web Component の例も、同じ原作ページで確認できます。
リンク集では何を整理したか
公式作品、コミュニティ作品、独立した作者の作品集を、機械、コンピューティング、物理などのテーマからたどれるようにしました。217件には、別枠で掲載した19件の初期レンダリング実験も含まれます。
個々の作品では、次の情報を分けています。
| 項目 | 確認できること |
|---|---|
| 原作リンク | 誰が、どこで公開した作品か |
| デモ | ブラウザで開ける実物があるか |
| コード | 実装を読めるか |
| 公開プロンプト | 作者が入力文を公開しているか |
動画や画像だけが公開されている作品もあるので、すべてにデモやコードがあるわけではありません。プロンプトも、作者が公開しているものだけを載せています。
整理のルールとして、明暗テーマの違いや同じ作品の転載はまとめ、一般的な AI 動画は Anatomy の使用が確認できなければ収録していません。同じ題材でも、作者や実装が違う作品は別の参考例として扱っています。
作例から自分の題材へ移るとき
私なら、まず説明したい対象に近い作例を探し、原作を開いて、どの操作で何が変わるのかを確認します。そのうえで公開プロンプトがあれば読み、コードでは操作と表示のつながりを見ます。
見るポイントは、たとえば次の三つです。
- 動かしたい状態は何か。キューなら、待ち行列の長さや処理速度など。
- 画面上の数値と、実際の動きが対応しているか。
- 操作を変えたとき、説明したい仕組みが読み取れるか。
見た目の参考として集め始めましたが、教材や技術ドキュメント用の図を考えるときにも使える一覧にしていきたいです。作品やコードを再利用する際は、それぞれの原作のライセンスを確認してください。
一覧はGitHub の画廊、プロンプトだけ探すなら公開プロンプトの索引から見られます。抜けている Anatomy 作品があれば、元のリンクを Issue やコメントで教えてもらえると助かります。
作例のプレビューは Anatomy 公式の Collection と Community の公開画像を参照しています。作品は各作者に帰属し、リンク集の CC0 が作品本体の利用条件を変更するものではありません。