造型 AI 輔助功能

Matthias Rohmer
Matthias Rohmer

使用「AI 輔助」面板設定樣式,瞭解網站的整體版面配置、特定元素樣式,並取得 AI 產生的 CSS 錯誤修正項目。

開啟「AI 協助」面板

AI 協助面板會在抽屜中開啟。

AI 輔助面板以預設狀態開啟。

透過「元素」面板

如要透過「元素」面板開啟 AI 輔助功能,請在檢查 DOM 節點時,在節點上按一下滑鼠右鍵,然後選取「Ask AI」選項。

元素內容選單,其中「Ask AI」已醒目顯示。

當您開啟這類 AI 協助時,檢查的 DOM 元素已預先選取為對話的內容元素。

或者,您也可以點選懸停在 DOM 節點上的浮動按鈕。

附加至 DOM 節點的浮動式按鈕。

使用指令選單

如要從指令選單中開啟「AI 協助」,請輸入 AI,然後執行「Show 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 協助功能可能會因為各種原因無法提供答案。

顯示拒絕對話的 AI 輔助面板。

如果您認為提示是 AI 助理應該可以討論的內容,請回報錯誤

對話記錄

開始對話後,下一個答案都是根據您之前與 AI 之間的互動情況計算而得。

使用面板左上角的控制項,即可控制對話記錄。

AI 輔助面板,特別框出記錄控制項。

開始進行新的測量

如要使用目前選取的對話內容開始新對話,請按一下「新增」按鈕。

繼續

如要延續過往的對話,請按一下「記錄」按鈕,然後從內容選單中選取所需記錄。

刪除

如要從歷史記錄中刪除對話,請按一下「刪除」按鈕。

評分答案並提供意見回饋

AI 協助是實驗功能,因此,我們積極徵求您的意見,以瞭解如何改善答案品質和整體使用體驗。

AI 輔助面板,其中醒目顯示評分控制選項。

投票答案

使用答案下方的 「喜歡」圖示和 「不喜歡」圖示,為答案評分。

檢舉答案

如要檢舉不當內容,請按一下投票按鈕旁的「檢舉」按鈕。