造型 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 assistance」指令,旁邊會顯示「Drawer」徽章。

開啟的命令選單,其中醒目顯示「顯示 AI 輔助功能」。

透過「更多工具」選單

或者,您也可以依序選取右上角的「設定」「更多選項」>「更多工具」 >「AI 協助功能」

已開啟的「更多工具」選單。

對話情境

AI 協助功能的對話總是與目前檢查的元素相關,也就是在「元素」面板 DOM 樹狀結構中選取的最後一個元素。面板左下角會顯示此元素的參照。

AI 輔助面板,其中醒目顯示背景元素。

使用目前元素旁的元素挑選器按鈕,或從「元素」面板 DOM 樹狀結構中選取,即可變更情境。

雖然目前檢查的元素是對話基礎,但AI 輔助功能可存取所有網路 API,從檢查的網頁收集更多資訊。包括使用 document.querySelector 查詢其他元素,或評估已計算的樣式。

提示

開始新的對話時,造型相關的AI 協助功能會提供範例提示,協助你快速上手。

AI 協助面板,其中醒目顯示的項目是範例提示。

點選任一提示,面板底部的提示輸入欄位就會預先填入內容。

或者,您也可以在輸入欄位中輸入提示或問題。

如要傳送提示,請按下 Enter 或點選輸入欄位右側的箭頭。

對話流程

傳送提示後,系統就會開始與造型服務專員對話。為了取得最能回答提示內容所需的資訊,代理程式會產生並執行呼叫網路 API 的 JavaScript。服務專員的進度會以步驟顯示。初始步驟狀態為 Investigating…

對話開始後的 AI 輔助面板。

隨著服務機器人執行更多具體動作來解決問題,步驟標籤就會更新。

當服務專員得出最終答案後,系統會在調查步驟下方顯示答案,並提供後續提示的建議。

AI 協助工具面板,其中顯示 AI 提供的答案。

按一下任何建議的提示,繼續對話。按一下

的調查步驟,進一步瞭解 AI 助理在幕後執行的操作。

AI 輔助面板,顯示展開的對話步驟。

展開進度方塊後,您會看到服務機器人執行的程式碼,以及傳回值。複製已執行的程式碼以供日後使用,例如透過主控台面板執行程式碼。

已暫停的對話

AI 輔助可能會產生副作用的程式碼。在這種情況下,系統會在程式碼執行前暫停對話。

顯示暫停對話的 AI 輔助面板。

對話暫停時,請查看服務專員提供的程式碼。按一下「play_arrow」繼續繼續操作,或按一下「取消」停止執行。

未提供答案

AI 協助功能可能會因各種原因無法提供答案。

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

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

對話記錄

開始對話後,系統會根據你和 AI 先前的互動,提供後續的回覆。

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

AI 助理面板,其中歷史記錄控制項已醒目顯示。

開始進行新的測量

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

繼續

如要繼續進行先前的對話,請按一下「歷史記錄」按鈕,然後在內容選單中選取該對話。

刪除

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

評分答案並提供意見回饋

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

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

投票選出答案

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

檢舉答案

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