Won. Studio

🧩 実践 13Anatomy|Claude Code のスキルで、仕組みが「動く立体の図」になる。社内勉強会の図を日本語で作ってみた

仕組みを頼むと、それを動かす「機械」を考えて、動く立体の図にしてくれる Claude Code のスキル、Anatomy(アナトミー)。日本語で「API のレート制限(トークンバケット)の仕組みを、社内勉強会で使う図にして」と頼みました。結論から言うと、図は16分22秒でできて、クリックで動かせて、数字も頼んだとおりでした。印刷用の PDF も3種類作れます。ただ、時間はかかります。

Anatomy ってなに?

  • できること — 仕組みを頼むと、それを動かす機械を考えて描く。例:トークンバケット → 硬貨を貯める筒と、0.5秒ごとに1枚足すタイマー
  • 値段 — 無料。MIT ライセンスで、API キーもいりません。GitHub のスターは約2万(2026年10月)
  • できるもの — HTML 1枚・SVG・React、印刷用の A4 PDF
  • 苦手なもの — 説明に「グラフのライブラリではない」「人や正確な地図は描かない」とあります

GitHub のページ(wheresryan22/anatomy)

GitHub のページ(wheresryan22/anatomy)

今回の流れ

  • PART 1 入れる — コマンド1行
  • PART 2 社内勉強会の図を頼む — API のレート制限(トークンバケット)を、日本語で
  • PART 3 動かしてみる — クリック・長押しで動かす
  • PART 4 印刷用の PDF にする — A4 で配れる形に

試した環境

  • パソコン — UTM の仮想 Mac(macOS)
  • AI — Claude Code(Opus 5.5・auto mode)
  • 開いたブラウザ — Safari

試したのは2026年10月25日です。


PART 1 Anatomy を入れる

ターミナルでコマンドを1行打つだけです

npx skills add wheresryan22/anatomy -g -a claude-code

npx skills add wheresryan22/anatomy -g -a claude-code

入れたあとは、Claude Code で「/anatomy + 頼みたいこと」と打ちます。

入れるときに、セキュリティの判定も出る

入れるときに、セキュリティの判定も出る

Snyk は低リスク、Gen は中リスクでした。スキルは Claude Code と同じ権限で動くので、入れる前に中身を確かめるのが安全です。


PART 2 社内勉強会の図を頼む

作る前の使用量は、セッションの枠が0%、1週間の枠が24%でした

頼んだ文

頼んだ文

「/anatomy API rate limit (token bucket) の仕組みを、社内勉強会で使う図にして。ラベルは日本語で。容量は10、一秒に2個補充。」

できた図を、自分でブラウザで開いて撮って確かめる

できた図を、自分でブラウザで開いて撮って確かめる

どんな機械にするかを長く考えたあと、仕組みの計算を書いて図を組み立て、崩れていないかを自分で何度も確かめていました。

16分22秒でできた

16分22秒でできた

返事は英語でしたが、図の文字は日本語です。頼んでいないのに、claude.ai の Artifact(自分だけが見られるページ)にも出してくれました。

使用量:セッションの枠が 0% → 2%

使用量:セッションの枠が 0% → 2%

API の料金に直すと 4.40ドル分。書いたコードは515行。使用量の8割が Anatomy のスキルでした。


PART 3 動かしてみる

できたのは HTML のファイル1枚です

硬貨=トークン。筒に最大10枚たまる

硬貨=トークン。筒に最大10枚たまる

何もさわらないと、使い方の見本を自動で流します。図をクリックするとリクエストを1回送り、硬貨が1枚、許可のトレーへ押し出されます。

長押しで連打。筒が空になると「429」の旗が上がる

長押しで連打。筒が空になると「429」の旗が上がる

毎秒2枚ずつ補充されるので、少し待つとまた通ります。右下の数字(残り・許可・拒否)も、動きに合わせて変わります。


PART 4 印刷用の PDF にする

「A4 の PDF にして。印刷して配ります」と頼みました

形式を4つから選べる

形式を4つから選べる

詳しい版(2ページ)・ポスター・図面・3つとも。勉強会の配布資料なら「詳しい版」がおすすめだそうです。今回は3つとも作ってもらいました。

23分13秒で3つできた

23分13秒で3つできた

途中で PDF の書き出しが止まりましたが、Claude Code が自分で書き出す小さな道具を作って切り抜けました。

詳しい版の1ページ目:全体の図に番号、右に部品の説明、下に3つの拡大図

詳しい版の1ページ目:全体の図に番号、右に部品の説明、下に3つの拡大図

数字は頼んだとおり、容量10枚・毎秒2枚・0.5秒・429 でした。

2ページ目は、仕組みを5つの場面で説明

2ページ目は、仕組みを5つの場面で説明

本文は日本語。ただ、「How it works」など小さな見出しは英語のままでした。

ポスターと図面も

ポスターと図面もポスターと図面も

まとめ 結果と、向く人・向かない人

図は動いて、数字も合っていました。気になったのは、時間と、英語のまま残るところです

実際に試した結果(2026年10月25日・仮想 Mac)

  • かかった時間 — 図は16分22秒、印刷用の PDF 3種類は23分13秒
  • 使用量 — セッションの枠 0% → 2%(API の料金なら4.40ドル分)
  • 動くか — クリック・長押しで動く。数字も頼んだとおり
  • 日本語 — 図と PDF の本文は日本語。返事と小さな見出しは英語

向く人・向かない人

  1. 勉強会や社内資料で、仕組みを説明したい — 向く。数字まで合った、動く図になった
  2. 急いで1枚ほしい — 向かない。図1枚に16分かかった
  3. グラフ・人・地図を描きたい — 苦手。説明に「グラフのライブラリではない」「人や正確な地図は描かない」とある

頼み方のコツ

  1. 描き方ではなく「説明したいこと」を頼む — 機械の形は Anatomy が考える(説明に書いてあるコツ)
  2. 本物の数字を書く — 容量10・毎秒2枚 → 図の数字がそのとおりになった
  3. 頼んだら、ほかの作業をして待つ — 図で16分、PDF で23分かかった

Claude Code のほかの使い方は、AI勉強会の記事と YouTube で、実際の画面で試しています。