スクリーンショットや長い説明なしでAIエージェントに視覚的なフィードバックを提供

Claude CodeやCopilotにアーキテクチャダイアグラムやプロダクトプランの作成を依頼します。エージェントはダイアグラムを含むインタラクティブなHTMLドキュメントを生成します。しかし、ブロックのラベルを修正したり要素を移動したい場合は面倒になります。矢印付きのスクリーンショットを撮るか、「下から3番目のセクションでブロックBをCに置き換えてください」のようにテキストで説明する必要があります。

lavish-axiリポジトリのアイデアは、このプロセスに通常のインタラクティビティを取り戻すことです。テキストの説明の代わりに、ツールは生成されたファイルをブラウザで開き、便利な編集機能を提供します。

Lavish Editorできること

これはCLIユーティリティであり、AXIプロトコル（Agent eXtension Interface）の実装です。ツールはローカルWebサーバーを起動し、生成されたHTMLファイルをブラウザで開きます。

テキストを選択したり、要素をクリックしたり、コメントを残したり、ダイアグラムを編集したりできます。すべてのメモはキューに収集され、ロングポーリングまたはCLIフック経由でエージェントに送信されます。ニューラルネットワークは正確なCSSセレクターとテキストフラグメントを受け取るため、何を修正する必要があるかをすぐに理解できます。

すべてが完全にローカルで動作します。デフォルトでは、サードパーティのクラウドや外部サーバーへのコード送信は行いません。

MermaidからExcalidrawボードへの変換

エージェントがMermaidダイアグラムを生成した場合、Lavishは自動的にページ上でインタラクティブなExcalidrawボードに変換します。

ダイアグラムをクリックして図形を移動し、接続を描画したり、テキストを変更したりできます。フィードバックの送信をクリックすると、ツールは変更の概要と視覚的なプレビューを生成し、エージェントはファイル内の元のMermaidコードを更新します。

同時に、最終的なHTML自体は外部ライブラリで汚染されません。Lavishなしで通常のブラウザで開くと、クリーンな標準的なMermaidが表示されます。

自動レイアウト検証

興味深い詳細として、Lavishは成果物をユーザーに表示する前に、内部レイアウトチェックを実行します。

組み込みスクリプトは、テキストがコンテナ境界を超えて溢れていないか、コントロールが重なり合っていないかを確認します。重大なインターフェースの問題が検出された場合、ツールは開いたページがユーザーの注意を引く前に、エージェントに修正用のメッセージを送信します。

技術的な仕組み

やり取りは明確な原則に基づいて構築されています：

• セッションは標準的なHTMLファイルパスに関連付けられ、エージェントはIDを保存する必要がありません。
• 成果物は隔離されたiframeで実行され、注入スクリプトはスタイルを壊しません。
• フィードバックはコンテキストトークンを節約するためにコンパクトなTOON形式でエージェントに送信されます。
• ファイル保存時にページが自動リロードされ、スクロール位置が維持されます。

結果を同僚と共有するには、exportコマンドで画像とスタイルを単一のスタンドアロンファイルにパッケージ化できます。素早くオンラインで公開する必要がある場合は、shareコマンドで任意選択により一般またはパスワード保護されたホスティングにアップロードできます。

エージェントへの接続

ツールを追加する最も簡単な方法はスキルマネージャーを経由することです：

npx skills add kunchenguid/lavish-axi --skill lavish

Claude Codeまたは類似環境では、準備されたコマンドが表示されます：

/lavish давайте обсудим план проекта

すべての開発セッションでエンドツーエンドの統合を実現するには、ユーティリティをグローバルにインストールしてフックを有効にします：

npm install -g lavish-axi
lavish-axi setup hooks

コマンドはClaude Code、Codex、OpenCode、GitHub Copilot CLI用のフックを書き込みます。新しいセッションが開始されるたびに、エージェントはアクティブなレビュープロセスをすぐに確認できるようになります。

このプロジェクトが役立つ人

このユーティリティは、AIエージェントに技術文書やインターフェースプロトタイプを作成させる開発者にとって便利です。このツールは「右側のブロックを修正してください」というテーマに関する終わりのない行き来を完全に排除し、コンテキストトークンを節約します。