OnUI：Claude Codeへの正確なUIフィードバックのためのブラウザ拡張機能

OnUIは、Claude Codeで作業する際のUI修正に視覚的コンテキストを提供するブラウザ拡張機能です。ウェブページ上で直接注釈を付けられるようにすることで、どのUI要素に注意が必要かを説明するという一般的な問題を解決します。

OnUIの機能

任意のウェブページで要素をクリックしたり領域を描画したりして、問題点に関するメモを追加し、構造化レポートをエクスポートできます。Claude CodeはローカルMCP（Model Context Protocol）経由でこのレポートを読み取り、DOM要素、そのパス、ユーザーの意図、重大度レベルに関する正確な情報を得ます。これにより、「右側のボタン、いや違うもう一方の」といったあいまいな記述が排除されます。

技術的実装

開発者は数週間かけてClaude Codeを使用してOnUIを構築しました。Claude Codeはブラウザ拡張機能とローカルMCPサーバーの両方を含むTypeScriptコードベースの大部分を記述しました。開発中に対処した具体的な技術的課題には以下が含まれます：

• ホストページとのCSS衝突を避けるためのShadow DOM分離の反復
• 注釈ダイアログUIとエクスポートフォーマッタの構築
• 拡張機能とローカルMCP間のネイティブメッセージングブリッジのデバッグ

利用可能性とライセンス

OnUIは無料で利用でき、有料プランはありません。Chrome Web Storeからワンクリックでインストール可能で、EdgeとFirefoxでも動作します。このプロジェクトはGPL-3.0でライセンスされており、クラウド依存性ゼロ、テレメトリゼロ、完全に無料です。

開発ワークフロー

開発者は、Claude Code用のツールをClaude Code自体で構築しているという皮肉を指摘しています。現在のUI反復ワークフローは：注釈→Claudeが修正→検証→繰り返し。