iso-figureの機能
iso-figureは、自然言語による説明からインタラクティブなアイソメトリック図形を生成するClaude用スキルです。オブジェクトの名前を指定すると、番号付きプレート上に細線のアイソメトリック図を描いたHTMLファイルを1つ生成します。
描かれたオブジェクトの各パーツは、押したときに反応できます。オブジェクトによって、操作の結果として文字列、数値、または音符が生成されます。押す意味のあるパーツがない場合、スキルは別の題材を選びます。
例として、デスクシンセやポケット電卓を試してください。リポジトリのexamplesディレクトリにあるファイルを開くこともできます。
生成される図形の仕組み
出力にはプレーンなSVGを使用し、外部ライブラリは必要ありません。約15行の投影コードで、ボックスの各面をSVGのmatrix()に変換します。これにより、平面に描いた通常の長方形、テキスト、パスを正しいアイソメトリック平面に表示できます。
この投影はテキストと角丸にも対応しています。描画順によって奥行きを制御するため、各要素は期待どおり前後に表示されます。
インタラクションは、1つの状態オブジェクトとrender()関数によって制御されます。動きはCSSが処理するため、生成ファイルは自己完結していながら、パーツをアニメーションさせたり入力に反応させたりできます。
スキルをインストールする
Claude Codeでインストールする
Claude Codeで最も簡単に設定するには、リポジトリをマーケットプレイスとして追加し、プラグインをインストールします。
/plugin marketplace add MrBongoC/ai-iso-skill
/plugin install iso-figure@ai-iso-skill
手動でインストールする
スキルのディレクトリをローカルのClaudeスキルフォルダにコピーする場合は、リポジトリをクローンしてiso-figureフォルダをコピーします。
git clone https://github.com/MrBongoC/ai-iso-skill.git
cp -r ai-iso-skill/skills/iso-figure ~/.claude/skills/Claude.aiで使用する
Claude.aiでは、最新リリースからiso-figure.skillをダウンロードし、スキル設定でアップロードします。
最初の図形を作成する
インストール後、押せるパーツを持つオブジェクトをClaudeに依頼します。題材と、どのようなインタラクションを表示したいかを含めてください。
分ボタンとカウントダウン表示があるキッチンタイマーのiso figureこのプロンプトは物理的なオブジェクトを指定し、操作可能なボタンを持たせ、表示の動作を定義しています。Claudeは、図形の状態と描画ロジックを決める際にこれらの詳細を利用できます。
スイッチのような操作を指定することもできます。
fig 6, ランプをオン・オフできる壁付け照明スイッチfig 6というフレーズは番号付きプレートでの表示を指定するのに役立ち、スイッチの説明は、押せるパーツとその結果を明確に示します。
プロンプトのヒント
- 具体的なオブジェクトを指定する。タイマー、電卓、シンセ、照明スイッチなどは、描画して操作できる認識しやすいパーツを備えています。
- 操作部を説明する。入力に反応させたいボタン、キー、スイッチ、その他のパーツを記述します。
- 結果を説明する。パーツを押したときに、テキスト、数値、音符、またはコンセプトで対応している別の動作を生成させるかどうかを指定します。
- 必要に応じて表示や出力を含める。カウントダウン、計算、変化する波形などがあると、操作の結果が目に見える形になります。
- 押せるものがない場合は別のオブジェクトを使う。このスキルはインタラクティブな図形を中心に設計されているため、完全に静的な題材にはあまり適していません。
高度な使い方
スキルの指示を確認する
リポジトリにはSKILL.mdに完全な手順が収録されています。描画カーネル、生成手順、ビジュアルスタイルを定めるルールを理解したいときに読んでください。
平面と描画順で考える
図形はSVGの平面から構成されるため、表示する各面を適切なアイソメトリック面に配置する必要があります。投影コードが必要なSVGのmatrix()を適用し、描画順によってどの面が他の面を覆うかを決めます。これは、重なり合う操作部やベースの上に配置されるパーツで特に重要です。
インタラクションの状態を明示する
生成されるデザインでは、1つの状態オブジェクトと1つのrender()関数を使用します。結果を調整するときは、ボタンを押した後に値が変わる、スイッチがオンとオフの間で移動するなど、求める状態変化を明確に説明してください。
結果をスタンドアロンファイルとして開く
出力はHTMLファイル1つなので、ブラウザでローカルに開いたり、自己完結した例として共有したりできます。描画にはライブラリではなくプレーンなSVGとCSSを使用するため、プロジェクトで追加の依存関係をインストールする必要はありません。
まとめ
iso-figureは、短いClaudeプロンプトをコンパクトでインタラクティブなアイソメトリックイラストに変換します。Claude Codeからインストールするか、スキルを手動でコピーするか、リリースファイルをClaude.aiにアップロードしてください。最良の結果を得るには、押せる部分が明確なオブジェクトを選び、それぞれの操作で何が起きるべきかを説明してください。
このプロジェクトはMITライセンスの下で公開されています。