Anatomy スキルで、技術説明をインタラクティブな等角図SVGにする
Claude Code に Anatomy スキルを入れ、「1行で機械・仕組みを説明して」と頼むと、回転・検査できる等角ワイヤー図（任意で WebGL シェーダーや部品アニメ）を単一HTMLなどで出させる。
どんな問題を解決するか / いつ使うか
ドキュメント・記事・LPで「仕組み」を図で伝えたいが、手描きや通常の図解だと時間がかかるとき。エージェントにビジュアル解説用のHTMLを作らせたいとき。LP用シェーダー集のURLを渡し、「一覧とスクショを出して」とエージェントに頼む と併用できる。
やり方
- スキルをインストールする（投稿時点のリポジトリ例:
https://github.com/wheresryan22/anatomy）。Claude Code ではスキル追加後に/anatomyで起動する、という使い方。 - 説明したい仕組みを1本のプロンプトにまとめる。Meng To の例（自分の言葉で再構成）:
/anatomy
Seedream 5.0 が画像をレイヤーに分けられる仕組みと、それで作れる面白いものを説明して。
単一の HTML ファイルにして。
シーン1〜5ではカメラ／ズームを変えて、より分かりやすく説明して。- 出力は SVG ベースのインタラクティブな等角図が中心。必要ならシェーダーや部品の動きも足せる、というのが紹介内容。
- LPや記事に載せる前に、ブラウザで回転・ズーム・ラベルの重なりを確認する。
注意点・対応状況
- スキル名・パスはリポジトリ更新で変わることがある。導入前に README を確認する。
- 技術的に不正確な図が出ることがある。専門家レビューや一次資料との突き合わせを挟む。
- 重い WebGL はモバイルや低スペック端末で落ちることがある。まずは SVG のみで十分か検討する。
出典
- 投稿者: @MengTo（引用元スキル作者 @wheresryan22）
- 投稿: @MengTo · 2026-10-11
- 収集日: 2026-10-12（JST）