Claude Codeビジュアルエディタ: 要素を選択してCSSを修正する

Lizard Studioを表示したChrome: ページ、インスペクタ、チャットが1つのウィンドウ内にまとまっています。このスクリーンショットはChatGPT接続を示しています。

Claude Code用のビジュアルエディタは、変更したいページ部分を特定し、ソース内で結果を確認するのに役立つべきです。Lizard Studioでは、Chromeで要素を選択してチャットに添付し、Claude Codeにローカルプロジェクトの編集を依頼します。ブラウザは会話の横に表示されたままなので、結果を確認できます。

このガイドでは、測定できる結果がある小さな間隔調整の演習を使います: 2つのボタン間のgapを4pxから24pxに変更します。ソースのdiffを確認し、ページをリフレッシュして、gapをもう一度確認します。これは再現可能な演習であり、パフォーマンスベンチマークでも、エージェントがどれだけ早くプロジェクトを完了できるかという主張でもありません。

私たちはLizard Studioを開発しています。その拡張機能とホストは無料でMITライセンスです。ただし、AIプロバイダのアカウント要件と利用料金は引き続き適用されます。以下のエージェント手順を試す前に、セットアップガイドを完了してください。

ここでのビジュアル編集の意味

Lizard Studioは、要素セレクタとデザインツールを使ってエージェントにコンテキストを渡します。ソース変更の内容を記述すると、Claude Codeがファイルを編集します。このワークフローは、要素を手動でドラッグして、エディタが対応するCSSをすぐ書くことを期待するものとは異なります。

セレクタはページ上の対象を特定できます。注釈は、より広い範囲を覆う問題を示すのに使えます。ルーラー、距離測定、レスポンシブプレビューはレイアウトの確認に役立ちます。ローカルエージェントは、そのページコンテキストをプロジェクトファイルに結び付けます。READMEには、ツールと接続要件が記載されています。

直接のドラッグアンドドロップ編集が主な要件なら、ツールを選ぶ前に操作方法を比較してください。この演習では、要素の選択、変更の依頼、ソースコードのレビューを試します。

サンプルをダウンロードする

ここで使う小さな静的サーバーにはPython 3、Chrome、Lizard Studio、そしてサインイン済みのClaude Codeインストールが必要です。既存アプリでは、代わりに通常の開発サーバーを使ってください。

演習用に空のフォルダを作成します。spacing.htmlをブラウザの名前を付けてページを保存コマンドでその中にダウンロードするか、フォルダ内で次を実行してください:

curl -fsS https://lizard.build/studio-examples/spacing.html -o spacing.html
python3 -m http.server 4175 --bind 127.0.0.1

Chromeでhttp://127.0.0.1:4175/spacing.htmlを開きます。作業中はサーバーを起動したままにしてください。ポート4175が使用中の場合は、別のポートを選び、URL内の数字もそれに合わせてください。

ページには動作のないサンプルボタンが2つあります。その行には意図的に次のCSSが使われています:

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 24px;
}

Lizard Studioでこのフォルダを選択し、エージェントがspacing.htmlを編集できるようにします。lizard.buildでサンプルを開いても公開された演習が表示されるだけで、ダウンロードしたコピーを変更するにはローカルURLが必要です。

変更したい行を選択する

サイドパネルでClaude Codeチャットを開始します。Selectorを使って、両方のボタンを含む.actions行を添付します。誤って片方のボタンを選んだ場合は、その親の行を選択するか、対象がその行のgapであることを説明してください。

編集前に読み取り専用の確認を依頼できます:

Inspect the selected action row. Report its computed gap and the
local file that defines it. Do not change any files yet.

初期のgapは4pxのはずです。ソースはダウンロードしたspacing.html内のスタイルシートです。エージェントが別のファイルやページを報告した場合は、編集を依頼する前にプロジェクトフォルダまたはブラウザタブを修正してください。

Lizard Studioインターフェースから切り出した画像は、スタイルインスペクタとページツールバーを示しています。これらの値はChatGPT概要ページで選択された要素のものです。間隔調整の演習では別のローカルファイルを使います。

小さなソース編集を依頼する

結果と範囲を明記した依頼とともに、選択した行を送信します:

Set the selected action row's gap to 24px in spacing.html.
Keep the button labels, colors and card margin unchanged.
Show the source diff. Refresh the page and check that the
computed gap is 24px.

エージェントが提案した編集を確認してください。該当する変更は次と同等であるべきです:

- .actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 24px; }
+ .actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; }

エージェントはスタイルシートを再フォーマットする場合があります。この例と同じ行レイアウトを求めるのではなく、実際の宣言を確認してください。このタスクでは、どちらのボタンラベルも.cardルールも変更する理由はないはずです。

セッションの権限コントロールを使って、意図した編集を承認してください。範囲を絞った依頼にするとdiffは判断しやすくなりますが、それでも結果のレビューが不要になるわけではありません。

実際のリクエスト欄では、添付した要素は「1 selection」と表示されます。このスクリーンショットではChatGPTと明るさの依頼を使っています。この演習ではClaude Codeを選び、上記の間隔調整リクエストを使用してください。

リフレッシュ後にページを確認する

Pythonサーバーはホットリロードを提供しません。ファイルが変更されたらChromeをリフレッシュし、その後エージェントに.actionsをもう一度確認するよう依頼してください。

Chrome DevToolsで計算済みの値を確認することもできます:

getComputedStyle(document.querySelector('.actions')).gap
// Expected: "24px"

デスクトップと狭いビューポートの両方を確認してください。サンプル行はflex-wrap: wrapを使っているため、スペースが限られるとボタンが次の行に移ることがあります。どの幅でも、ページに横方向のオーバーフローがなく、両方のラベルが見えたままであることを確認してください。

この受け入れチェックリストを使ってください:

• ローカルソースに、.actionsに対するgap: 24pxが含まれている。
• ページをリフレッシュしても新しいgapが維持される。
• ボタンのテキストと色は変わらない。
• .cardのmarginは32pxのままである。
• 狭い幅でもページを利用できる。

プロジェクトでGitを使っている場合は、git diffを読んでください。この単独ファイルでは、エディタの比較ビューで同じ変更を確認できます。ファイルとブラウザの内容が一致したら、この演習は完了です。

変更が消える理由

ブラウザツールは、プロジェクトファイルを変更せずにライブDOMを変更したり、インラインスタイルを追加したりできます。これはアイデアのプレビューには役立ちますが、リフレッシュするとブラウザは元のソースを再び読み込みます。

結果が消える場合は、どのファイルを編集したのかエージェントに確認してください。ブラウザがローカルサーバーを使っていること、そして選択したフォルダに配信中のファイルが含まれていることを確認してください。アプリ側に、編集した宣言を上書きする、より詳細度の高いCSSルールやインラインスタイルがある場合もあります。

Reactなどのフレームワークでは、ソースは単独のスタイルシートではなく、コンポーネント、CSS module、またはutility classかもしれません。どのルールがその間隔を管理しているかをエージェントに探させてください。1つのアクション行だけを変えたいのに、グローバルなbuttonルールは避けてください。

実際のUIの問題でも同じ方法を使う

結果を説明できる問題を選んでください: 指定幅でオーバーフローするカード、コンテナに収まるよう折り返すべき見出し、整列が間違っているボタン行などです。関連する要素または注釈付きスクリーンショットを添付し、変更してはいけないものも明記してください。

挙動のバグについては、アクションを再現し、consoleとnetworkの出力を確認するようエージェントに依頼してください。スクリーンショットでは、イベントハンドラが実行されたか、リクエストが失敗したかまでは分かりません。Lizard Studioにはそれらのブラウザツールも含まれています。ChromeのClaudeとの比較では、セットアップの違いを説明しています。

サイドパネルのChatGPTでもこの演習を実行できます。2つのエージェントを比較したい場合は、同じ開始ファイルと受け入れ条件を維持してください。失敗した試行や追加の説明も記録し、1回の実行だけで速度に関する主張を導かないでください。

よくある質問

Claude CodeがCSSを編集するのにスクリーンショットは必要ですか?

視覚的な問題の説明にはスクリーンショットが役立つことがあります。このワークフローでは、選択した要素とライブページの確認によってDOMとスタイルのコンテキストが追加され、ローカルフォルダがソースを提供します。特定の問題を特定するのに役立つ入力を使ってください。

どんなWebサイトでも永続的に編集できますか?

ソース変更を維持するにはソースプロジェクトへのアクセスが必要で、公開サイトを更新するにはデプロイも必要です。サードパーティのページを調査しても、そのどちらの権限もリポジトリアクセスも得られません。

これはエディタの代わりになりますか?

コードとdiffについては、引き続き自分のエディタを使えます。Lizard Studioはブラウザのサイドパネルとページツールを提供します。ほかのインターフェースの選択肢は、Claude Code GUIガイドで比較してください。

パネルが接続しない場合はどこから始めればよいですか?

インストールとトラブルシューティングガイドに従ってください。ソース編集を試す前に、ローカルホスト、エージェントのログイン状態、選択したプロジェクトフォルダを確認してください。