Claude Code / Codex プラグイン：エージェントがコードベースを読み解き、ズーム可能なインタラクティブマップを描画します。各モジュール、ファイル、インターフェースには平易な説明を添え、相互呼び出し関係も明示します。フロントエンドとバックエンドが別リポジトリに分かれている場合でも、フロントエンドからのリクエストとそれに応答するバックエンドのインターフェースを対応付けることができます。
スター数 809（+44 / 24時間）
理由
- 「AIで動くアプリを作ったものの、その仕組みを説明できない」という方向け：あるページから出発し、背後にあるコンポーネント、リクエスト、サーバーサイドコード、データ、外部サービスを追跡できます。また、マップ上で「返金処理はどのように顧客のカードに反映されるのか」といった質問を行い、回答と関連部分のみの小規模マップを得られます。
- ヘルスチェック機能は、AIが作成したアプリにありがちなエラーを専門的に検出します。コード内にハードコードされたキーやブラウザに送信されたキー、誰でも読み取れるSupabaseテーブル、公開されたFirebaseルール、偽造可能なStripeコールバック、認証なしでアクセス可能なインターフェースなどを検出し、それぞれに貼り付け可能な修正コードを添えます。「最近の変更」では、エージェントが直近で修正したカードを緑色でハイライトし、変更理由を明記します。
- スキャン、解析、リクエストのマッチング、レイアウト生成は依存関係のないNode.jsスクリプトで実行され、モジュールの命名と説明はClaude / Codexに任されます。更新時は変更部分のみを再読み込みします。まだコードが書かれていない段階では、PRD（プロダクト要求仕様書）から破線で示された「設計図」を描くことも可能です。
使い方
- Node.js 18以上が必要です。Claude Codeの場合：
claude plugin marketplace add haydenschmitty/floorplanを実行し、続いてclaude plugin install floorplan@floorplanを実行します。Codexの場合：codex plugin marketplace add haydenschmitty/floorplanを実行し、続いてcodex plugin add floorplan@floorplanを実行します。 - プロジェクト内で「Make me a floorplan of this app」と指示すると（Codexでは
$floorplanを入力でも可）、マップがfloorplan/index.htmlに生成され、自動的に開かれます。コード修正後に「Update the floorplan」と指示すれば、単一のHTMLファイルとしてエクスポートし、他者に共有できます。 - 作者はBrewlineサンプルアプリのオンラインデモを提供しており、インストールせずに操作感を試すことができます。
リスク
- 作者は、ヘルスチェックは「検査」であり「監査」ではないと明記しています。対応言語およびフレームワークにはリストがあります（TS/JS、Python、Go、Rust、Javaなど、Express、FastAPI、Next.js、Springなど）。リスト外の技術に対するサポートは浅くなります。
- マップはユーザー自身のClaude / Codexのクォータを使用して生成されるため、追加のAPIキー設定は不要です。バージョンは0.6.0、ライセンスはMIT、リポジトリは10月27日に作成されました。