wheresryan22/anatomy

An agent skill for creating detailed, interactive isometric illustrations of real-world machines and complex systems. Generates polished SVGs with optional WebGL shaders and 3D effects.

解決する問題

Anatomyは、AIエージェント(特にClaude、OpenCode、Codex)が複雑な技術的概念を、インタラクティブな等角図形を設計・構築して説明できるようにするツールです。一般的な図の代わりに、AIが技術的アイデアを表す物理的オブジェクト(例えば、キャッシュキーをピンタンブラー錠として表現する)を発明できるようにします。

仕組み

このプロジェクトは、専門の描画ライブラリ(「キット」)と、AIエージェントが従う一連のクラフトルールを提供します。ワークフローには、AIが技術要件を収集し、物理的メタファーを発明し、ジオメトリを計画し、キットを使用して図を生成することが含まれます。

3種類の出力をサポートしています:

  • SVG:4色シェーディングとイージングモーションを備えたソリッドな等角パーツ。
  • SVG + WebGL:構造用のSVGと、火、水、グローなどのエフェクト用のWebGLシェーダーを組み合わせます。
  • 3D(ベータ版):実際の3D空間で回転・屈曲できるパーツ。

システムには、ヘッドレスChromeを使用してジオメトリの重なりを監査し、線が空中で終わらないことを確認し、結果の図の視覚的忠実度を検証する検証スイートが含まれています。

対象読者

AIエージェントを使用して、ドキュメント、ブログ記事、ランディングページ用の高品質でインタラクティブな説明図を作成する開発者やテクニカルライター。

ハイライト

  • メタファー駆動の説明:抽象的な技術的アイデアを物理的で機能するモデルに変換します。
  • マルチモーダルレンダリング:スタンドアロンHTML、SVGファイル、またはReact/Next.jsコンポーネントをサポート。
  • 自動検証:精度を確保するためのジオメトリ監査と視覚チェックを含みます。
  • ゼロ依存キット:コアライブラリはNodeの組み込みモジュールのみを使用。
  • エージェントネイティブ:Claude Code、OpenCode、Codexとのシームレスな統合のための標準Agent Skillとして設計。

これを取り上げた記事

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト