Claude Codeの新スキル「Anatomy(アナトミー)」を実演文章で頼むと、触って動かせる仕組みの図が出てくる
2026年10月8日にGitHubで公開されたClaude Codeのスキル「Anatomy」は、説明してほしい仕組みを文章で頼むと、その仕組みどおりに動く機械の立体図をブラウザで触れるページとして作る。筆者はOpus 5.5で掃除機・Attention・学習(誤差逆伝播)・量子化・GPSの5つを頼み、手直しなしで出てきた図を触った。図に出た数字は手で計算し直して合っていた。

目次
2026年10月12日・日本時間時点の記録だ。2026年10月8日にGitHubで公開された Claude Code(クロード コード)のスキル「Anatomy(アナトミー)」 は、説明してほしい仕組みを文章で頼むと、その仕組みどおりに動く機械の立体図を作る。出てくるのはブラウザで開くページで、ボタンやカーソルで触ると図の中の部品が動き、数字が変わる。筆者(AI時短ラボ)は Claude Code(Opus 5.5・effort high)に5つの文を頼み、出てきた図を触って確かめた。動画では図を触る所をそのまま見せている。
3行まとめ
- 作者 Ryan(@wheresryan22)が10月8日に公開したMITライセンスのスキル。READMEによるとAPIキー不要・npm installも不要で、
/anatomyに続けて説明してほしいことを書くだけ- 掃除機を頼むとボタンで9つの部品に分解できる図、Attentionを頼むと「はし」が橋か箸かを周りの言葉の割合で決める機械が出てきた
- 頼んだあと手直しは一切していない。図に出た数字(学習0.47・量子化3.9GB・GPS 1ミリ秒で300km)は手で計算し直して合っていた
| 項目 | 内容 |
|---|---|
| 公開 | GitHub wheresryan22/anatomy(2026年10月8日作成・MIT・2026年10月12日時点でスター3,719) |
| 動く環境 | Claude Code(ほかにOpenCode・Codex)・Node.js 20.10以上・図の確認にChrome |
| 入れ方 | npx skills add wheresryan22/anatomy -g -a claude-code |
| 使い方 | /anatomy に続けて説明してほしいことを書く |
| 出てくるもの | ブラウザで開くHTMLページ(ほかにSVG単体・React部品も選べる)。SVG/SVG+WebGL/3D(ベータ)の3種 |
| 筆者の実演環境 | Claude Code 2.1.296・Opus 5.5(effort high)・macOS。5つの図を、それぞれ別のフォルダで頼んだ |
何をしてくれるスキルなのか
READMEの説明はこうだ。
Ask Claude for a figure that explains a technical idea, and Anatomy has it invent a physical thing whose working is the concept.
(技術的な考え方を説明する図を頼むと、Anatomy は Claude に、その動きそのものが概念になっている物体を考えさせる。)
続けて、その物体を「数十個の小さな、立体で陰の付いた部品」で組み、題名・操作のヒント・その場で変わる数字の表示が付いたカードに入れ、カーソルとキーボードで動くようにし、関節をひとつずつ拡大して自分で検品する、と書かれている。READMEは「図に出る数字はすべて、部品を動かしているのと同じ小さなモデルから出る」とも書いている。見た目だけの絵ではなく、中で計算して動いている図、ということだ。
掃除機を頼むと、ボタンで分解できる図が出てきた
最初に頼んだのはこの文だ(/anatomy のあとに書いた全文)。
コードレスのスティック掃除機が、ゴミを吸い込んでためる仕組みを説明して。ボタンを押すと分解して、どの部品からできているか、それぞれ何をしているかが分かるように。図の文字は日本語で。interactive
出てきたページには「運転」と「分解」のボタンが付いていた。運転を押すとモーターが回り始め、床のゴミを吸ってクリアビン(透明なゴミ入れ)にためていく。右下の表示は運転中に「12.0万 rpm · 15.0 L/s · −5.0 kPa」と変わっていった(回転数や風の量のもとの値は、図の中で決めてある代表的な値)。
分解を押すと、掃除機が9つの部品に分かれた。部品にカーソルを当てると、名前と役目が出る。空気の通り道の順に当てると、こう出た。
| 部品 | 図に出た役目 |
|---|---|
| ヘッド | 床のゴミを空気ごと吸い込む口 |
| 回転ブラシ | 毎分3,600回転でかき出す |
| 延長パイプ | 内径32 mm・秒速19 m |
| クリアビン | 渦で分けて底にためる・0.5 L |
| サイクロン | 10本の円すいで細かいちりも |
| モーター | 毎分12万回転で負圧をつくる |
| フィルター | 0.3 µmを99.97 %捕集 |
外から見ると1本の掃除機だが、分解すると、文章だと一度に説明される仕組みを部品ごとに分けて確かめられる。これがこのスキルの見せ方の芯だと感じた。
文章だと頭に入らない4つを頼んだ
本題はここからだ。読んでもイメージしにくい仕組みを4つ、同じように頼んだ。頼んだ文は次のとおり(どれも最後に「図の文字は日本語で。interactive」を付けた)。
- Attention: 生成AI(Transformer)の「Attention」が、文の中の言葉どうしで、どの言葉がどの言葉を見て意味を決めているのかを説明して。言葉を選ぶと、どこを見ているか分かるように。
- 学習: AIの「学習」で、答えの間違いから逆向きにたどって、重みを少しずつ直していく仕組み(勾配降下と誤差逆伝播)を説明して。1歩ずつ進めて確かめられるように。
- 量子化: AIモデルの「量子化」で、16bitの重みを8bitや4bitに縮めると、何が削れて何が残るのかを説明して。ビット数を変えて比べられるように。
- GPS: GPS が、衛星からの電波だけで自分の位置を割り出す仕組みを説明して。衛星の数や時計のずれを変えて確かめられるように。
太字の「動かし方」の一言が、そのまま図の操作になって出てきた。言葉を選ぶ、1歩進める、ビットを変える、衛星を外す、である。
Attention:「はし」は橋か箸か
出てきたのは、文の言葉を6つの箱に入れて並べた機械だ。言葉を選ぶと、その言葉から他の言葉へ糸が張られ、糸が太いほど強く見ている。箱の中の液の高さも見ている割合で、6つを足すと100%になる。
「川にかかるはしを渡った」で「はし」を選ぶと、川を47%、かかるを29%見て、右のメーターは「橋」の側に振れた。左のつまみで文を「熱いご飯をはしで食べた」に変えると、「はし」はご飯を54%見て、メーターが「箸」の側に振れた。生成AIは前から順に文を作るので、まだ書いていない後ろの箱は閉じたまま、という所まで図になっている。なお、計算に入れる元の値は図の中で説明用に決めてあるもので、割合を出す計算の式が本物と同じ、という作りだ。
学習:間違いから逆にたどる
出てきたのは、レバーのかけ算器を2段つないだ台だった。重みはレバーの倍率で、目標1.5に対して最初の出力は0.2。このずれを、出力と目標の間のばねが力に変える。「1歩進む」を押すたびに、順伝播→誤差→逆伝播→更新と1段ずつ進み、画面の下にその段の実際の計算が出る。2つ目の重みなら「∂L/∂w₂ = e × h = −1.30 × 0.50 = −0.65」だ。更新で台車が押された向きに動き、出力は0.2から0.47に上がった。自動再生にすると、4回目の更新で出力は1.51になり、目標の1.5にほぼ届いた。
量子化:4bitで何が消えるのか
32本のピンが重み32個(説明用に作った値)で、後ろの板の点が元の値、ピンの頭が縮めた後の値だ。ボタンでビット数を変えると、表示はこう変わった。
| ビット数 | 段の数 | 誤差 | ゼロに潰れた重み | 70億パラメータのモデルのメモリ |
|---|---|---|---|---|
| 16bit | 65,536通り | — | — | 14.0GB |
| 8bit | 255段 | 0.7% | 0/32 | 7.4GB |
| 4bit | 15段 | 12.1% | 5/32 | 3.9GB |
| 2bit | 3段 | 77.0% | 29/32 | 2.2GB |
2bitまで落とすと、32本のうち29本がゼロの線にそろった。残るのはプラスかマイナスかと一番大きい重みで、削れるのは近い値どうしの細かい差だ、と図の説明文も書いている。この図は0を中心に上下対称にする方式なので4bitが15段になっている。llama.cpp の Q4_0 は16段(−8〜+7)なので、同じではない。
GPS:衛星は何機いるのか
地図の台のまわりに衛星が4機あり、電波が届くまでの時間から衛星までの距離=円が描かれる。衛星を外していくと、1機では「円の上のどこか」、2機では円が2か所で交わり、3機で1点に決まる。
受信機の時計がずれるとどうなるか。電波は1ミリ秒で約300km進む(光の速さ秒速29万9,792km×0.001秒=299.8km)。図で、ずれを直す計算を切ってつまみで時計を+6.0ミリ秒ずらすと、円がばらばらになり、位置の誤差は1,793kmまで飛んだ。計算を戻すと、円が全部同じだけ縮んで1点に戻り、誤差は0kmになった。この台は高さが分かっている平面版なので3機で足りるが、本物の空間では高さも分からないので、時計のずれと合わせて4機要る。
筆者が確かめたこと:頼んだあとは触っていない、数字は合っていた
5つとも、頼んだあとにコードや図に手を入れていない。出てきたページをそのまま開いて触っている。そのうえで、図に出た数字を手で計算し直した。
| 図 | 図に出た数字 | 手で計算 | 結果 |
|---|---|---|---|
| 学習 | 1回の更新後の出力 0.47 | 0.708 × 0.66 = 0.467 | 一致 |
| 量子化 | 70億パラメータの4bitで 3.9GB | 70億 ×(4+0.5)bit ÷ 8 = 3.94GB | 一致 |
| GPS | 1ミリ秒のずれで 300km | 29万9,792km × 0.001 = 299.8km | 一致 |
量子化の「+0.5bit」は、重み32個ごとに1つ持つ目盛り(スケール)の分で、図の説明文にそう書かれている。READMEの「数字は部品を動かしているのと同じモデルから出る」は、少なくともこの3つについては計算で裏が取れた。
入れ方と使い方
READMEのQuick startはこの2行だ。
npx skills add wheresryan22/anatomy -g -a claude-code
/anatomy explain how a token bucket rate limiter works, interactive
-g は自分のユーザー全体に入れる指定で、入る先は ~/.claude/skills/anatomy。プロジェクトだけに入れるなら -g を外す。OpenCodeなら -a opencode、Codexなら -a codex で、Codexでは $anatomy と打つ。gitで ~/.claude/skills/anatomy にcloneする方法、ZIPを展開して置く方法もREADMEに載っている。Claude Codeは動いている途中のセッションでも新しいスキルを読み込むが、READMEによると、セッション開始時に skills のフォルダ自体が無かった場合は /reload-skills を実行する。
スキル名を書かなくても、等角図や、ドキュメント・ブログ・ランディングページ向けの説明図、触れる説明ページを頼むと Claude が読み込む、ともREADMEは書いている。
頼み方のコツとして、READMEは3つ挙げている。
- 描き方ではなく、説明したい考えと本当の数字(大きさ・個数・速さ・しきい値)を書く
- 作ってほしい機械が決まっていれば、その機械と、動かしたい所を書く
- 置き場所(HTMLページ・SVG単体・React/Next.jsの部品、明るい/暗い)を書く
筆者が使った型は「何が、どうなる仕組みを説明して」に「何を変えて確かめられるように」を足すだけだった。動かし方を一言足すと、その操作が図に付く。
向かないもの・時間がかかる点(READMEのLimitsより)
READMEは限界をはっきり書いている。
It is not a chart library. There are no axes, series or data plots.
(グラフを描く道具ではない。軸・系列・データの点は無い。)
It draws machines, instruments, tools and furniture. Not people or exact maps. An idea that has no mechanism to build will come out weaker.
(描くのは機械・器具・道具・家具。人物や正確な地図ではない。組み立てる仕組みのない考えは、弱い図になる。)
It is slow on purpose.
(わざと時間をかけて作る。)
部品表を作り、形を組み、部品どうしが突き抜けていないかを検査し、関節をひとつずつ両方のテーマで拡大して確かめるので、1枚に長い時間がかかる、という説明だ。筆者の5つも、すぐには出てこなかった。図の確認のためにスキルがヘッドレスのChromeを何度も起動する点も、READMEに書かれている。
向いているのは、筆者の感触では「動きや順番があって、文章だけだと頭の中で組み立てにくい仕組み」だった。Attentionや誤差逆伝播のように、名前は知っているのに何が起きているか描けないものほど、触って変化を追える効果が大きい。
出典と、この記事の範囲
- スキルの仕様・入れ方・限界は、2026年10月12日に取得した GitHub の README の原文による。スター数は同日時点の値で、日々変わる
- 図の動きと数字は、筆者が10月12日に Claude Code(Opus 5.5・effort high)で作らせたページを触って記録したもの。同じ文で頼んでも、出てくる図は毎回同じとは限らない
- 掃除機の回転数・風の量は図の中の代表的な値、Attentionの元の値と量子化の重み32個は説明用の値、GPSの台は平面版である
- 実演の様子は動画で見られる。図にしてほしい仕組みがあれば、動画のコメントで教えてほしい。次の実演の題材にする
この記事でよく聞かれること
- Anatomy(アナトミー)とは何ですか?
- GitHubのwheresryan22/anatomyで公開されているAgent Skill(エージェント用のスキル)です。READMEによると、技術的な考え方を説明する図を頼むと、その仕組みが動きそのものになる物体を考え、小さな部品を組んだ等角図(アイソメトリック図)として、ブラウザで触れるページなどに仕上げます。Claude Code向けに書かれていて、OpenCodeとCodexでも動きます。
- Claude Codeへの入れ方は?
- READMEのQuick startでは、ターミナルで npx skills add wheresryan22/anatomy -g -a claude-code を実行し、Claude Codeで /anatomy に続けて説明してほしいことを書きます。gitで ~/.claude/skills/anatomy に入れる方法と、ZIPを展開して置く方法も書かれています。
- APIキーや追加の料金は要りますか?
- READMEによると、APIキーは不要で、npm installも要りません(Nodeの標準機能だけで動く)。図を作る作業そのものはClaude Codeが行うので、Claude Codeの利用分(契約しているプランやAPIの使用量)は普段どおりかかります。
- どんなものが向いていて、何が向かないですか?
- READMEのLimitsには、グラフを描く道具ではないこと、描くのは機械・器具・道具・家具で人物や正確な地図ではないこと、仕組みのない考えは弱い図になること、わざと時間をかけて作ること、が書かれています。筆者の実演では、動きや順番がある仕組み(Attention・誤差逆伝播・量子化・GPS)は、触ると変化が目で追える図になりました。
- 頼む時のコツは?
- READMEは、描き方ではなく説明したい考えと本当の数字を書くこと、作ってほしい機械が決まっていればそれと動かしたい所を書くこと、置き場所(HTMLページ・SVG・React)を書くこと、の3つを勧めています。筆者は「何を変えて確かめられるように」を一言足し、その操作がそのまま図に付きました。
出典・参照資料
この記事の解説動画
YouTubeで見る ↗大きいニュースはYouTubeでも解説しています。Xでは新着記事をお知らせしています。
コメント
まだコメントはありません。最初のコメントを書いてみませんか?
AIについて聞きたいことはありますか?
質問箱で無料で受け付けています。回答は公開され、他の方の参考にもなります。
質問箱を見る →