このページは Cloud Translation API によって翻訳されました。

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

Matthias Rohmer

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

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

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

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

[要素] パネルから

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

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

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

コマンドメニューから

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

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

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

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

会話のコンテキスト

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

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

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

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

プロンプト

新しい会話を開始すると、スタイル設定のAI アシスタントがサンプルプロンプトを提示し、すぐに作業を開始できるようにします。

サンプルプロンプトがハイライト表示された AI アシスタントパネル。

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

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

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

会話フロー

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

会話開始後の AI アシスタントパネル。

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

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

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

提案されたプロンプトのいずれかをクリックして、会話を続けます。[] をクリックします。

の調査ステップで、AI アシスタントが裏で何をしていたかを詳しく把握できます。

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

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

一時停止中の会話

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

会話が一時停止された AI アシスタントパネル。

会話が中断されたら、エージェントが提案したコードを確認します。[ 続行] をクリックして続行します。

回答なし

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

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

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

会話の履歴

会話を開始すると、その後の回答はユーザーと AI との間の以前のやり取りに基づいて行われます。

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

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

新しく作成

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

続行

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

削除

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

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

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

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

回答に投票する

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

回答を報告する

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