メインコンテンツへ移動
AIチュートリアル

Claude CodeとMachine Skillでリアルなインタラクティブ機械シミュレーションを構築する

Claude Code向けのMachine Skillのインストール方法、自然言語のプロンプトからインタラクティブなthree.js製機械シミュレーションを生成する方法、再現性のある動画や静止画を記録する方法を学びます。本ガイドでは、セットアップ、使い方、物理演算に基づく機能、記録オプション、プロジェクト構成、実践的なプロンプト作成のヒントを解説します。

約14分で読了
Claude CodeとMachine Skillでリアルなインタラクティブ機械シミュレーションを構築

Machine Skillの機能

Machine Skillは、Claude Code向けのオープンソースのAgent Skillです。機械を1行で説明すると、Claudeが実在する装置を調査し、フォトリアルでインタラクティブな3Dシミュレーションを単一のHTMLファイルとして生成します。

生成されたページでは、機構、エンジン、計器、産業設備などを表現できます。手続き的なthree.jsジオメトリ、実際の比率、名前付きコンポーネント、マテリアル、インタラクティブモード、対象の機械に適した小規模な物理ソルバーを使用します。生成されたHTMLファイルはブラウザで開き、各部品を調べたり、動作条件を変更したり、内部を切り開いたり、計算された故障条件で破損させたりできます。

このプロジェクトには、生成されたページから再現性のある動画、スクリーンショット、ソーシャルメディア向けフォーマットを作成するレコーダーも含まれています。

主な機能

  • リアルな機械構成: 実際の寸法、名前付き部品、固体コンポーネント、ブレード、ギア、ボルト、パイプなどの手続き的ジオメトリを含むモデルを作成します。
  • 物理演算に基づく挙動: Braytonサイクル、ロケットノズル、ポンプ曲線、ねじり振動子、Darcy、Kienzleモデルなどのソルバーが、動きや表示値を制御します。
  • インタラクティブな表示: ドラッグ、 pausing、ライブラベル、スローモーション、分解表示、X線表示、固体の断面を備えたカットアウェイに対応します。
  • スタジオ品質のレンダリング: ランタイムは、マテリアル、ライティング、シャドウ、アンビエントオクルージョン、ブルーム、熱の発光、プレゼンテーション環境を提供します。
  • 決定論的な動画: フィルムモードでは、レコーダーがシミュレーションをフレーム単位で進めるため、繰り返し撮影しても一貫したレンダリング結果になります。
  • ビルド不要: 生成ページは、インライン化されたランタイムと固定されたthree.js 0.170 CDN依存関係を使用するスタンドアロンHTMLファイルです。

必要条件

機械を構築するには、Claude Codeをインストールするか、Agent Skillsに対応した別のホストを使用してください。生成されたページを実行するには、現行のデスクトップ版Chrome、Safari、Firefox、Edgeなど、WebGL 2に対応したブラウザを使用します。

スクリーンショットや動画を作成するには、Node 18以降、Playwright、Chromium、ffmpegも必要です。

npm i -D playwright
npx playwright install chromium

ffmpegは、使用しているオペレーティングシステムのパッケージマネージャーからインストールしてください。スマートフォンでも軽量なページは実行できますが、複雑なシミュレーションは実GPUを搭載した新しいコンピューターで最適に動作します。

Machine Skillをインストールする

推奨されるインストール方法では、skills CLIを使用してリポジトリをClaude Codeのスキルとしてインストールします。

npx skills add AirsupHQ/machine-skill -g -a claude-code

グローバルインストールでは、スキルが~/.claude/skills/machineに配置されます。現在のプロジェクトだけにインストールするには、グローバルオプションとエージェントオプションを省略します。

npx skills add AirsupHQ/machine-skill

このプロジェクトへのインストールでは、スキルが.claude/skills/machineに配置されます。リポジトリを直接クローンすることもできます。

git clone https://github.com/AirsupHQ/machine-skill.git ~/.claude/skills/machine

# または1つのプロジェクトにインストール
git clone https://github.com/AirsupHQ/machine-skill.git .claude/skills/machine

通常、Claude Codeは実行中のセッションで新しいスキルを検出します。セッション開始時にskillsディレクトリが存在しなかった場合は、/reload-skillsを実行してください。

最初の機械を生成する

インストール後、Claude Codeを開き、具体的な説明を続けて/machineコマンドを使用します。

/machine 脱進機が動作する機械式時計のムーブメント

Claudeはwatch.htmlのようなHTMLページを作成します。そのファイルをWebGL 2対応ブラウザで開き、シミュレーションを操作してください。生成された機械によっては、ビューをドラッグしたり、ラベルを確認したり、アセンブリを分解したり、内部を切り開いたり、モデル化された故障挙動を発生させたりできます。

その他の有効なプロンプト：

  • /machine 水力発電用フランシス水車
  • /machine インパルスが見えるように動作を遅くしたスイスレバー脱進機
  • /machine 5 MW風力タービンのギアボックス、内部を切り開いた状態
  • /machine 蒸気機関車の弁装置と、X向けの30秒動画

より良い機械プロンプトを書く

Machine Skillは、Claudeが対象を調査し、有用な動作点を選べるだけの工学的な背景をプロンプトに含めると、最も効果を発揮します。

  1. 実在する機械の名前を指定する。「ジェットエンジン」よりも、「787に搭載されているようなターボファン」のようなプロンプトのほうが、方向性を示せます。
  2. 動作と故障挙動を指定する。何が動き、何が壊れるべきかを説明します。例えば、エンジンをバルブサージが起きるまで回転数を上げるようClaudeに指示します。
  3. 用途を説明する。出力を埋め込みページ、ソーシャル動画、静止画のどれに使うのかをClaudeに伝えます。動画の場合は、目的のアスペクト比や長さも含めてください。

生成される物理演算は、CFDやFEAではなく、正直な小規模モデルです。各ページでは計算内容と単純化した部分を説明しているため、数値は認証済みの工学的結果ではなく、教育や例示を目的としたものとして扱ってください。

動画を記録する

リポジトリのrecord.mjsスクリプトを使用して、生成されたページを動画ファイルにレンダリングします。

node ~/.claude/skills/machine/scripts/record.mjs watch.html out/watch.mp4 --music freepd:Classical/Easy_Lemon

クローンしたリポジトリから実行する場合は、ローカルのスクリプトパスを使用します。

node scripts/record.mjs examples/turbofan.html out/turbofan.mp4 --music freepd:Classical/Easy_Lemon

出力サイズを設定すると、フィード向けの縦型動画を作成できます。

node scripts/record.mjs examples/turbofan.html out/turbofan-feed.mp4 --w 1080 --h 1350

動画ではなく選択した静止フレームを書き出すには、出力ディレクトリとフレーム番号を指定します。

node scripts/record.mjs examples/turbofan.html out/stills --stills 3,9,14,19

レコーダーは追加のレンダリング制御にも対応しています。スーパーサンプリングには--ss 1.5、モーションブラーには--blur 2、高速な動きには--fps 60を使用します。音楽にはローカルファイル、URL、またはFreePDのfreepd:<Category>/<Name>形式のトラックを指定できます。

生成されたページは、?film=1&shot=mainなどのクエリパラメーターを使って決定論的なフィルムモードで実行できます。このモードでは、レコーダーが進めたときだけ時間が進むため、すべてのフレームが完全にレンダリングされ、同じテイクを一貫して再現できます。

レンダリング結果を確認する

Machine Skillには、ヘッドレスレンダリングの失敗に対する安全策が組み込まれています。レコーダーはスクリーンショットを確認して単色のマゼンタフレームを検出し、pinkscan.mjsで完成した動画をスキャンできます。

node scripts/pinkscan.mjs out/*.mp4

ピンク色のフレームが検出されると、コマンドはゼロ以外のステータスで終了するため、自動化されたワークフローで使用できます。

リポジトリを確認する

  • SKILL.mdでは、品質基準、調査とモデリングのワークフロー、批評ラウンド、フィルム制作プロセス、画面上の文章スタイルを定義しています。
  • kit/lab-kit.jsは生成ページにインライン化されるランタイムです。スタジオ、ポストプロセス、マテリアル、ジオメトリヘルパー、ラベル、エフェクト、インタラクションモード、フィルムタイムラインが含まれています。
  • kit/template.htmlは、手動で機械を作成する際の開始ページテンプレートです。
  • references/solvers.mdには、ガスタービン、ロケット、ピストンエンジン、ポンプ、ローター、電気機械などの機械に関する物理計算レシピと実際の定数が含まれています。
  • scripts/には、スクリーンショット、録画、ピンクフレーム検査、ランタイムのインライン化に使用するツールが含まれています。
  • examples/には、ターボファン、ロケットエンジン、プロセスポンプ、コンプレッサーなどのスタンドアロンHTMLデモが含まれています。
  • film/launch.htmlは、ローンチフィルムで使用するディレクターページです。

インタラクティブなカットアウェイを理解する

カットアウェイシステムは、閉じたソリッドとクリッピング平面を使用します。平面がソリッドを切り開くと、ランタイムが断面を検出し、マテリアルの加工面の外観と控えめなハッチングを備えたソリッドの断面をレンダリングします。断面の深さが正しく記述されるため、個別のキャップメッシュを用意しなくても、カットアウェイで他のジオメトリを遮蔽できます。

これにより、説得力のある金属またはマテリアルの断面を保ちながら、カット位置をモデル内で移動させられます。同じランタイムは、ハーフセクションとクォーターセクション、X線表示、分解アセンブリ、ラベル、流れの筋、噴煙、火花、剛体デブリにも対応しています。

他のエージェントホスト向けにワークフローを適応する

Machine Skillは標準のAgent Skillとしてパッケージ化されています。Claude.aiまたはClaudeデスクトップアプリでは、スキルフォルダーをzip圧縮し、Settings、Capabilities、Skillsからアップロードできます。Claude Agent SDKまたはAPIでは、フォルダーをスキルディレクトリとしてマウントします。その他のAgent Skills互換ツールでは、SKILL.mdを直接指定できます。

エージェントを使用しない場合は、kit/template.htmlをコピーして、各セクションを手動で記入してください。生成されたページは、ブラウザーで実行できる通常のHTMLファイルです。

制限事項を把握する

  • このスキルは、機械、機構、エンジン、計器、装置を対象としています。人物、風景、地図は適した用途ではありません。
  • ジオメトリは手続き型のthree.jsコンテンツです。製造公差やCAD書き出しの精度ではなく、正確な比率と部品数を目指しています。
  • 物理モデルは意図的に小規模で透明性の高いものになっています。公開されている数値と照合されていますが、CFD、FEA、認証済みの工学解析の代替にはなりません。
  • 複雑なページには約600,000個の三角形が含まれる場合があり、シャドウ、アンビエントオクルージョン、ブルームを有効にした状態で滑らかなパフォーマンスを維持するには、最近のノートパソコン向けGPUが必要になることがあります。

まとめ

Machine Skillは、簡潔な工学プロンプトを、実際の比率、計算された挙動、公開用のレンダリングを備えた探索可能なブラウザーシミュレーションに変換します。skills CLIでインストールし、明確な動作と故障要件を含む具体的な機械を説明してから、生成されたHTMLページを開いてください。公開する準備ができたら、決定論的なレコーダーを使って、同じシミュレーションから動画や静止画を作成できます。