Inspectorとは何か？

Inspectorは、デザインとコードのギャップを埋めるビジュアルエディタで、AIコーディングエージェントに直接接続します。変更内容をテキストで記述したり、デザインハンドオフプロセスを経る代わりに、ライブUI上の任意の要素をクリックして視覚的に調整すると、Inspectorが対応する変更をコードベースに直接書き込みます。Claude Code、Codex、Cursorなどの一般的なAIエージェントと連携し、ビジュアル編集を実際のコードコミットに変換します。

対象ユーザー

• フロントエンド開発者: デザインツールとコードエディタを切り替えることなく、UI変更をより迅速に反復したい方。
• デザインエンジニア: 視覚的な微調整を手動で再実装することなく、プロダクション対応コードに直接変換する方法を必要とする方。
• ソロファウンダーや小規模チーム: AIコーディングエージェントに依存し、視覚的な調整からリポジトリへのプッシュまでシームレスなワークフローを求める方。

主な機能

ブラウザ上でのビジュアル編集

実行中のUI上の任意の要素をクリックして選択し、移動、サイズ変更、テキストの直接編集が可能です。Inspectorは各視覚的操作を対応するコード変更に変換するため、該当する行を探してファイルを探し回る必要はありません。

AIエージェントとの統合

Inspectorは既存のAIエージェント（Claude Code、Codex、Cursor）に接続します。ビジュアル編集を行うと、エージェントがコンテキストを受け取り、ローカルコードベースに変更を書き込みます。これにより、エージェントはループ内に留まり、視覚的な微調整に関するより複雑なロジックを処理できます。

完全ローカル動作

すべてがお使いのマシン上で実行されます。InspectorはコードやUIデータを外部サーバーに送信することなく、任意のローカルコードベースに接続します。作業はプライベートに保たれ、編集ワークフローにクラウドインフラストラクチャへの依存はありません。

macOSネイティブアプリ

InspectorはネイティブmacOSアプリケーションとして利用可能で、Appleハードウェアで作業する開発者にスムーズで低レイテンシのエクスペリエンスを提供します。

特筆すべき点

Inspectorはブラウザをコードエディタに変えます。UIから離れることなく、クリック、調整、プッシュが可能です。

ほとんどのビジュアルエディタは抽象的なデザインファイルを生成したり、静的アセットをエクスポートします。Inspectorはさらに一歩進んで、AIエージェントを通じて実際のコード変更を書き込みます。これにより、従来のデザインから開発へのハンドオフが完全に不要になります。作業のテストとプレビューを行う同じ環境に留まりながら、コードの更新は即座にリポジトリに反映されます。これは、視覚的なアイデアからコミットされたコードまでを数秒で実現したいすべての人にとって実用的な近道です。

こんな方におすすめ

Claude Code、Codex、CursorなどのAIコーディングエージェントを使用しており、フロントエンドの変更をより迅速に行いたい方。特に、レイアウト、テキスト、スペーシングを調整するためにブラウザのインスペクタとコードエディタを頻繁に切り替えていると感じる場合に役立ちます。また、視覚的なフィードバックループを好むが、最終的な出力がデザインモックアップではなく、クリーンでローカルなコードである必要がある場合にも適しています。