Claude Codeのスキル「Anatomy」の90秒紹介動画

Anatomyは、アイデアを1行で書くとClaudeがその仕組みを「する」機械を考え、回して押して読める等角の図として描くClaude Codeのスキルです。図は数十から数百の小さな部品でできていて、表示される数字は部品を動かすのと同じモデルから出ます。出力はSVGとHTML、またはNext.js向けのReactで、暗いテーマと明るいテーマに対応します。

0〜4秒　腕時計の機構の図とAnatomyの名前を出し、1行で機械を描くという主旨を示します。

4〜10秒　開発ツールの解説ページを書く担当者が登場します。図を入れる枠は空いたままです。

10〜28秒　箱と矢印では動きが見えないこと、挿絵には何週間もかかること、画像は押しても動かないことを順に見せます。

28〜32秒　「Readers nod along. Nobody sees how it works.」の一文で、このままでは仕組みが伝わらないことを示します。

32〜36秒　Anatomyが登場し、製品の決まり文句「The object is the explanation.」を出します。

36〜48秒　1行の指示で同じ箱と矢印が崩れ、LRUキャッシュを表す本棚の機械になります。メッセージキューやTCPの図も続きます。

48〜60秒　何週間もの予定が1時間54分の1本にまとまり、図の大きさの目安を示します。

60〜72秒　ターボファンの図でつまみを動かすと推力の数値が上がり、出力の形式も紹介します。

72〜90秒　33の図の見本と導入の1行、「Slow: hours to build, not minutes.」という正直な限界を示し、製品URLで締めます。

製品サイトと同じ読みものの体裁にし、左に章の目次を置いて指さす手の絵が今の章へ動くようにしました。図の中には言葉を入れないという製品の決まりに合わせ、説明は本文の上の1文と右の余白にだけ出しています。困りごとで見せた箱と矢印の図を解決の場面でもう一度出し、それが崩れて機械に変わる形にしました。

製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。