Claude Desktop Preview: 画面クリックでDOM要素を直接指定してUI修正できる新機能
Claude Desktop の Preview 機能に、画面上の要素をクリックするだけで DOM 要素を直接指定できる機能が追加されました。「ヘッダー右のボタンの…」のような言葉での説明が不要になり、フロントエンド開発のワークフローが大きく変わります。 概要 Claude Code の開発者である Lydia Hallie 氏が X で紹介したこの機能では、Claude Desktop の Preview パネルで実行中のアプリをプレビューしながら、修正したい UI 要素をクリックで指定できます。 クリックすると Claude は以下の情報を自動的に取得します: HTML タグ名 CSS クラス 主要なスタイル 周辺の HTML 構造 クロップされたスクリーンショット React アプリの場合は以下の情報も取得されます: ソースファイルのパス コンポーネント名 Props の情報 使い方 Claude Desktop で Preview パネルを開く 修正したい部分をクリックする 「ここを青にして」のように指示する これだけで Claude が該当要素を特定し、コードを修正してくれます。 活用シーン デザイン修正の高速化: 色、サイズ、レイアウトの微調整をクリック+自然言語で即座に反映 非エンジニアによる UI 変更: コードを読めなくても、画面を見ながら変更指示が可能 バグ箇所の特定: 表示がおかしい要素をクリックするだけで、該当コンポーネントとソースファイルを特定 技術的な仕組み Preview 機能の裏側では、.claude/launch.json で定義された開発サーバーが起動し、ヘッドレスブラウザと接続されます。Claude はスクリーンショット撮影、DOM 検査、クリックシミュレーション、ネットワーク監視などを直接実行できます。 ユーザーが要素をクリックすると、その要素のメタデータ(セレクタ、タグ、テキスト、ソース位置)が Claude Code のセッションコンテキストに自動的に注入される仕組みです。 ...