質問を、押して動く機械の図にするClaude Code のスキル anatomy を試す

このスキルの考え方：物そのものが説明になる

anatomy の SKILL.md は、箱と矢印とラベルで図を作らないことを最初に求めます。説明したい考えと動きが一対一に対応する、本物らしい機械を一つ考え、その機械を小さな部品の積み重ねで描く。読む人は機械に見覚えがあるから、仕組みがわかる、という考え方です。ねじ、継ぎ目、目盛り、ばね、ケーブルとその端子まで描き込み、等角図（アイソメトリック）で、4段の陰影と正しい重なり順で仕上げます。

もう一つの柱は「模型が先」です。図に出る数字・動き・説明文は、すべて一つの小さな計算の部品（model.mjs）から出す。見た目の調整より先に、実際の寸法や関係式を集めます。下の2枚もこの順で作りました。

作例1　空気入れ：7回おすと「かたい」

元のポストと同じ題材を、日本語・ひらがな中心で作り直したものです。「⬇ おす」「⬆ ひきあげる」で1回ずつ、「▶ みせて」で続けて動きます。右下の数字はタイヤの圧力（大気圧からの差）です。

図1　空気入れ。ボタンかキーボードの ↓ ↑ で動かせます。別の画面で開く

数字はどこから来るか

空気の温度は変わらないとみなし、ボイルの法則（圧力 × 体積 ＝ 一定）だけで計算します。前提の数字は次のとおりです。

押すと筒の中の空気が縮み、筒の圧力がタイヤの圧力を超えたところで弁が開きます。そこから先は筒とタイヤが一つの容器になって、いっしょに縮みます。引き上げると弁は閉じ、筒には外の空気が入り直します。これを繰り返すと、次のようになります。

2回目からは、押しはじめてしばらくは弁が開きません。タイヤの中の圧力が上がるほど、開く位置は奥へずれていきます。7回で「かたい」に届く数は、元の動画で丸が7つ並ぶのと一致しました（動画の丸の数は見た目から数えたものです）。

作例2　空気圧機器：おす・つかむ・まわす

同じ「空気で動く」を、工場で部品を動かす機器に広げた図です。タンクの空気を電磁弁3つで切りかえ、おす（シリンダ）、つかむ（2本指のハンド）、まわす（羽根で回る回転台）を動かします。空気を抜くと、どれもばねで元に戻ります。

図2　空気圧機器。ボタンかキーボードの 1・2・3 で、それぞれの弁を切りかえます。別の画面で開く

力 ＝ 圧力 × 面積

工場の空気は 500 kPa（0.5 MPa）とします。1 kPa の圧力が 1 mm² にかかると 0.001 N です。

「いっぱいに動く圧力」は、ばねの力（はじめの押しつけ＋縮んだ分）とつり合う圧力です。弁を切りかえてから圧力が上がりきるまでの遅れも、模型の中で時間の式として決めてあり、図の動きはそれに従います。

初めて動かすまでの手順

手元で再現できる最小の流れです。Node.js 20.10 以上と、確認用に Chrome（または Chromium）が要ります。

1. 元のポストを見る。何を目指した図か（子どもが触ってわかる、細部は残す）を先に頭に入れておくと、題材選びがぶれません。
2. リポジトリを取ってくる。

   git clone https://github.com/wheresryan22/anatomy.git
   cd anatomy

   スキルとして常に使うなら ~/.claude/skills/ に置きますが、試すだけなら clone した場所で十分です。ライセンスが MIT であることもここで確かめます。
3. SKILL.md を読む。特に次の4つ。
   • 大きさの見積り：部品40〜80の「Figure」、80〜150の「Hero」、それ以上の「Epic」。最初に名前を付けてから始める。
   • 模型が先：本物の寸法・関係式を集め、数字と動きを一つの模型から出す。
   • 部品リスト：形を描く前に、土台・骨組み・仕組み・操作部・主役に分けて40個以上書き出す。
   • 確認：撮影して拡大して見る、線の端の検査を0件にする。
4. 外への通信を確かめる。スクリプトを読むと、外のサービスに送るのは scripts/publish.mjs だけで、作者のギャラリーに図を出したいと頼んだときに GitHub へ push してプルリクエストを作るものでした（SKILL.md と references/publish.md にも、頼まれたときだけと書かれています）。撮影や検査の capture.mjs・drive.mjs・lines.mjs は、手元で起動した Chrome に 127.0.0.1 でつなぐだけです。
5. いちばん小さい作例を読む。examples/dial-indicator/（ダイヤルゲージ、全部で約300行）。build.mjs が kit で形を作り、1枚の HTML を書き出す、という流れがつかめます。

   node examples/dial-indicator/build.mjs           # 暗い色の頁
   node examples/dial-indicator/build.mjs --light   # 明るい色の頁

6. 自分の題材で model.mjs と build.mjs を書く。Claude Code に「このスキルで、○○の仕組みを押して動く図にして」と頼むと、まず大きさと部品リストを出し、模型を書いてから形に進みます。模型は画面のことを何も知らない小さな関数の集まりにし、build.mjs とページ内のスクリプトの両方がそれを読むようにします（模型はどちらも60行ほどです）。
7. 撮って、線を検査する。

   node scripts/capture.mjs page.html --out shots/desk.png                # パソコン幅
   node scripts/capture.mjs page.html --out shots/phone.png --width 390   # スマホ幅
   node scripts/lines.mjs page.html --out shots/lines.png                 # 線の端の検査

   lines.mjs は、目盛りや継ぎ目の線が、輪郭・別の線・点のどれかで終わっているかを調べ、宙に浮いた端を丸で囲んだ画像を出します。下は空気入れで回した結果です。

撮影・検査はどれも手元の Chrome で動くので、図そのものを外に送ることはありません。

つまずいたところ

ファイルを直接開く（file://）と、プレビューでスクリプトが動かない

手元で小さなサーバを立てて http://localhost:… で開くと動きます。撮影用の capture.mjs は、ファイルの指定でも URL の指定でも使えます。

ページ側のスクリプトで pathOf を作り直すと、名前がぶつかる

kit はページにも埋め込まれ、その中に同じ名前の関数があります。自分の補助関数には別の名前を付けます。

coil()（ばねの巻き）は、文字列を返す場合がある

点の並びとして扱う前に、戻り値の形を確かめてから使います。

slabOf に渡す平面の形に r（角の丸み）が無いと、座標が NaN になる

角を丸めない板でも r: 0 を書きます。形が出ないときは、まずここを見ます。

やってみてわかったこと

• 文章で「2回目からは途中で弁が開く」と書くより、押して針が止まる位置を見るほうが早く伝わります。数字が模型から出ているので、図をいじっても説明とずれません。
• 題材を変えるときに直すのは、主に模型と部品リストです。空気入れから空気圧機器へは「空気で押す」という同じ考えを広げただけで、作り方の流れはそのまま使えました。
• 図の品質の基準（拡大して見る、線の端を0件に）がスキルの中に書かれているので、AI に任せた部分の確かめ方もはっきりしています。

この頁の図2枚は、anatomy（Ryan 作、MIT License）の kit を使って作成しました。元のポストとリポジトリの作者に感謝します。