Chrome 上の ChatGPT でローカルウェブサイトを編集する
Lizardチームによる。確認日: .
Lizard Studio は Chrome のサイドパネルに ChatGPT を配置し、表示中のページとローカルのプロジェクトフォルダにアクセスできます。要素を選択し、変更内容を依頼し、ページを表示したままソースの差分を確認できます。接続にはローカルの Codex CLI を使用し、Lizard Studio では ChatGPT として表示されます。
ChatGPT 接続を使った実際の Lizard Studio セッションです。Lizard Studio は独立した拡張機能です。OpenAI も独自の ChatGPT ブラウザ拡張機能 を提供しています。ワークフローを選ぶには、developer comparison を読んでください。
拡張機能とホストは無料でオープンソースです。選択した AI アカウントがエージェントとモデルへのアクセスを提供し、その制限と料金は引き続き適用されます。Lizard Studio をインストール するか、full setup guide に従ってください。
ChatGPT はページに対して何ができますか？
エージェントに DOM の調査、コンソールとネットワーク出力の読み取り、スクリーンショットの撮影、ページ操作を依頼できます。デザインツールバーには、要素セレクタ、注釈、ルーラー、ギャップ測定、カラーピッカー、レスポンシブプレビューが追加されます。選択したフォルダ内のファイルを編集するとき、チャットはそのコンテキストを利用できます。
たとえば、ボタンを添付して、そのソースを見つけ、間隔を変更し、描画結果を確認するようエージェントに依頼できます。問題が複数の要素にまたがる場合は、マークを付けたスクリーンショットを添付することもできます。Lizard Studio README には、ブラウザツールとローカル接続の説明があります。
これは、ページのコンテキストとコードへのアクセスを組み合わせるタスクで役立ちます。たとえば「Why does this button wrap?」のような質問には、描画されたレイアウトと、それを生み出しているルールの両方が必要です。選択した行と意図した結果をエージェントに渡し、何が変更されたかを確認してください。
セットアップで Codex に触れているのはなぜですか？
パネル内での名前は ChatGPT であり、コーディングセッションを実行するローカル CLI は Codex です。 CLI をインストールし、サインインして、ローカルホストを接続します。パッケージ名、ターミナルコマンド、~/.codex/config.toml のようなパスは Codex の名前のままです。
Lizard Studio は chatgpt.com を iframe に埋め込んだり、独自のモデル利用を提供したりはしません。この違いは ChatGPT サイドバーを選ぶときに重要です。ローカルのソースファイルを編集するには、そのファイルへの接続が必要であり、表示中のページについて話せるだけでは不十分です。
ChatGPT をローカルプロジェクトに接続する
- Chrome ウェブストアから Lizard Studio を追加します。
npm install -g @openai/codexで Codex CLI をインストールし、ログインを完了します。npx @lizard-build/lizard-studio-host installを実行してローカルホストを登録します。- Web サイトの開発サーバーを起動し、その URL を Chrome で開きます。
- Lizard Studio を開いてチャットを開始し、ChatGPT を選択して、この Web サイトのコードを含むフォルダを選びます。
このホストは macOS、Windows、Linux をサポートしています。Node.js が必要です。前提条件と接続トラブルシューティングについては setup guide を確認してください。
変更を加える前に、現在のページタイトルとそのプロジェクトフォルダを報告するようエージェントに依頼してください。どちらかが間違っている場合は、先にタブまたはフォルダを修正してください。デプロイ済みドメイン上のページはローカル版と同じ見た目でも、異なるファイルを配信している場合があります。
確認できる結果がある CSS 編集を試す
自分のページを使うか、ビジュアル編集ガイド の例をダウンロードしてください。その例には 4px の gap を持つアクション行があります。演習は、ソースを編集してそれを 24px にすることです。モバイルレイアウトの問題については、ChatGPT ウェブサイト編集ガイド に従ってください。390px であふれるファイルカードを修正し、その後 2 つの幅でソースとページを確認します。
Selector でアクション行を選択し、次を送信してください。
Change the gap between the selected row's buttons to 24px.
Edit the local source file, show the diff and check the computed
gap after the page refreshes. Keep the labels, colors and the
space between other cards unchanged.受け入れる前に差分を確認してください。望ましい結果は、サイト内のすべてのボタンの間隔を広げるのではなく、そのアクション行を管理しているルールを変更することです。狭い幅でもページを確認してください。ボタンは引き続き収まるか、意図どおりに折り返される必要があります。
もう一度更新してください。gap が 4px に戻る場合は、どのファイルが変更され、ブラウザがどの URL を配信しているかを確認してください。計算済みスタイルをもう一度読むようエージェントに依頼してください。望ましい結果は、小さなファイル編集と、目に見えて持続する結果です。
一時的なページ編集とソース編集
| アクション | 反映される場所 | 更新後に起こること |
|---|---|---|
| DOM 内で要素のインラインスタイルを変更する | 現在のタブ | ページは通常、元のスタイルに戻ります。 |
| 選択したプロジェクト内の CSS またはコンポーネントを編集する | ローカルファイル | 開発サーバーが編集済みソースを配信するとき、その変更は残ります。 |
| 編集したプロジェクトをデプロイする | 選択したホスティング環境 | リリースが成功すると、デプロイ済みバージョンが変更されます。 |
結果を維持したい場合は、ソース編集を明示的に依頼してください。ページへのアクセスだけでは、自分が所有していないサイトのソースにアクセスする権限は得られません。参照サイトを調査することはできますが、永続的な変更にはそのプロジェクトへのアクセスとリリースプロセスが必要です。
2 つのエージェントの違いは何ですか？
Claude Code と ChatGPT はどちらも、Lizard Studio でブラウザ接続とデザインコンテキストを利用できます。すでに使っているアカウントとプロジェクト設定に合うエージェントを選んでください。
一部のチャット機能は異なります。README には Claude Code 向けの Remote Control と過去メッセージの編集が記載されており、それらの機能は ChatGPT パネルでは利用できないとあります。特定のチャット操作を基準に選ぶ前に、現在の機能メモ を確認してください。インターフェースをより広く比較したい場合は、Claude Code GUI の比較 を読んでください。
よくある質問
既存の ChatGPT アカウントを使えますか？
Codex CLI がサポートするサインインフローを通じて接続してください。アカウントは選択したエージェントへのアクセスを提供している必要があります。Lizard Studio はサブスクリプションを提供せず、プロバイダの制限も変更しません。
Lizard のアカウントは必要ですか？
いいえ。自分のエージェントとローカルフォルダを接続します。Lizard アカウントは拡張機能の利用とは別です。
コードは自分のコンピュータ上に残りますか？
プロジェクトファイルはローカルフォルダ内に残り、拡張機能とホストはローカルで実行されます。クラウドモデルへのリクエストには、コードとページコンテキストが含まれる場合があります。Lizard Studio はチャットサーバーを実行しません。選択したプロバイダがリクエストを処理します。データフローについては privacy policy を読んでください。
これはドラッグ＆ドロップのページビルダーとして動作しますか？
文書化されているワークフローは、ページを選択または注釈付けし、コードを編集するようエージェントに依頼するものです。ツールバーはデザインの調査と計測に役立ちます。プロジェクトに採用する前に、ビジュアル編集ガイド を使ってそのワークフローを試してください。