スタイル設定における AI アシスタント

[AI アシスタンス] パネルを使用して、ウェブサイトの全体的なレイアウトや特定の要素のスタイルを把握したり、CSS バグに対する AI 生成の修正を取得したりできます。

[AI アシスタンス] パネルを開く

[AI アシスタンス] パネルがドロワーに開きます。

AI アシスタンス パネルがデフォルトの状態で開きました。

[要素] パネルから

[要素] パネルから AI アシスタンスを開くには、DOM ノードを検査しているときに、ノードを右クリックして [AI に質問] オプションを選択します。

[AI に質問] がハイライト表示された要素のコンテキスト メニュー。

このように AI アシスタンスを開くと、検査した DOM 要素がすでに会話のコンテキスト要素として選択されています。

または、ホバーした DOM ノードに付いているフローティング ボタンをクリックします。

DOM ノードにアタッチされたフローティング ボタン。

コマンド メニューから

コマンド メニューから AI アシスタンスを開くには、AI と入力し、[AI アシスタンスを表示] コマンドを実行します。このコマンドの横には [Drawer] バッジが表示されます。

コマンド メニューが開き、[AI アシスタントを表示] がハイライト表示されている。

[その他のツール] メニューから

または、右上にあるアイコン その他のオプション > [その他のツール] > [AI アシスタンス] を選択します。

開いたその他のツール メニュー。

会話のコンテキスト

AI アシスタントとのチャットは、常に現在検査中の要素に関連付けられます。これは、[要素] パネルの DOM ツリーで最後に選択された要素です。この要素への参照は、パネルの左下に表示されます。

コンテキスト要素がハイライト表示された AI アシスタンス パネル。

現在の要素の横にある要素ピッカーを使用するか、[要素] パネルの DOM ツリーから選択して、コンテキストを変更します。

コンテキストを選択した状態で、ビューポートのスクリーンショットを撮ってチャットに送信できます。チャット入力フィールドの横にある [スクリーンショットを撮る] ボタンをクリックします。

[スクリーンショットを撮る] ボタンと、入力フィールドに添付されたスクリーンショット。

スクリーンショットを使用すると、プロンプトに視覚的なコンテキストを追加できます。たとえば、表示されているすべてのボタンの間隔が同じかどうかを確認できます。

現在検査中の要素が会話の基盤となりますが、AI アシスタントはすべてのウェブ API にアクセスして、検査中のページからより多くの情報を収集できます。これには、document.querySelector を使用した他の要素のクエリや、計算されたスタイルの評価が含まれます。

プロンプト

新しい会話を開始すると、スタイリングの AI アシスタンスに、すぐに作業を開始できるサンプル プロンプトが表示されます。

AI アシスタント パネル。プロンプトの例がハイライト表示されています。

いずれかのプロンプトをクリックすると、パネルの下部にあるプロンプト入力フィールドにプロンプトが事前入力されます。

または、入力フィールドに独自のプロンプトまたは質問を入力します。

プロンプトを送信するには、Enter キーを押すか、入力欄の右側にある矢印をクリックします。

会話フロー

プロンプトを送信すると、スタイリング エージェントとの会話が開始されます。プロンプトに最適な回答を得るために、エージェントはウェブ API を呼び出す JavaScript を生成して実行します。エージェントの進捗状況がステップごとに表示されます。最初のステップのステータスは Investigating… です。

会話が開始された後の AI アシスタンス パネル。

エージェントが質問を解決するために具体的なアクションを実行すると、ステップのラベルが更新されます。

エージェントが最終的な回答にたどり着くと、回答が調査手順の下に表示されます。フォローアップ プロンプトの候補も表示されます。

AI が回答した AI アシスタンス パネル。

会話を続けるには、候補のプロンプトのいずれかをクリックします。 をクリックします。

調査ステップのログを調べて、AI アシスタンスがバックグラウンドで何を行ったかを把握します。

会話ステップが展開された AI アシスタンス パネル。

進行状況チップを展開すると、エージェントが実行したコードとその戻り値が表示されます。実行されたコードをコピーして、コンソール パネルで実行するなど、後で使用します。

一時停止中の会話

AI アシスタンスは、副作用のあるコードを生成する可能性があります。この場合、コードが実行される前に会話が一時停止します。

会話が一時停止している AI アシスタンス パネル。

会話が一時停止したら、エージェントが提案したコードを確認します。[ 続行] をクリックして続行するか、[キャンセル] をクリックして実行を停止します。

ワークスペースの変更を保存する

接続されたワークスペース フォルダを使用すると、AI アシスタンスによって提案されたスタイルの変更を、パソコン上の CSS ソースファイルに保存できます。

手順は次のとおりです。

  1. まず、メタデータ ファイルを生成し、ワークスペース フォルダを接続します。

    または、フォルダを手動で追加することもできます。

  2. [要素] パネルからチャットを開始します。

  3. AI アシスタンスに CSS の変更を指示します。

  4. AI アシスタンスは、コードを生成して実行を一時停止する場合があります。コードを確認し、[続行] をクリックして変更をライブでテストします。

  5. [保存されていない変更] セクションを開き、[ワークスペースに適用] をクリックします。

  6. diff で変更内容を確認し、[すべて保存] をクリックします。

このワークフローについては、以下をご覧ください。

回答なし

AI アシスタントは、さまざまな理由で回答を提供しない場合があります。

会話が拒否された AI アシスタンス パネル。

プロンプトが AI アシスタンスで議論できる内容であると思われる場合は、バグを報告してください。

会話の履歴

会話を開始すると、以降の回答はすべて、ユーザーと AI の間の過去のやり取りに基づいて生成されます。

AI アシスタンスはセッション間で会話履歴を保存するため、DevTools や Chrome を再読み込みした後でも以前のチャットにアクセスできます。

パネルの左上にあるコントロールを使用して、会話履歴を管理します。

履歴コントロールがハイライト表示された AI アシスタンス パネル。

新しく作成

現在選択されている会話コンテキストで新しい会話を開始するには、ボタンをクリックします。

続行

過去の会話を続けるには、[] ボタンをクリックし、コンテキスト メニューから選択します。

削除

履歴から会話を削除するには、ボタンをクリックします。

回答を評価してフィードバックを提供する

AI アシスタントは試験運用中の機能です。そのため、回答の品質と全体的なエクスペリエンスを改善する方法を把握するために、皆様からのフィードバックを積極的に求めています。

評価コントロールがハイライト表示された AI アシスタンス パネル。

回答に投票する

回答の下にある （高く評価）ボタンと （低く評価）ボタンを使用して、回答を評価します。

回答を報告する

不適切なコンテンツを報告するには、投票ボタンの横にある [] ボタンをクリックします。