Studio Two 編輯器：新增自訂 CSS
本文適用於 2026 年 11 月發布的新版 Studio Two 編輯器。若不確定目前使用的是 Studio 編輯器還是 Studio Two 編輯器，請在此查看更多資訊。
自訂 CSS 是一種樣式語言，可控制網站元件的外觀。使用 CSS，即可自訂色彩、間距、框線、動畫和游標懸停效果等項目。
在 Studio Two 編輯器中，只要以一般文字描述想要的效果，即可使用 AI 為任何元件產生 CSS。本文將說明如何使用 AI 產生 CSS，以及結果需要調整時的處理方式。
自訂 CSS 會套用至選擇的特定元件。若要將樣式套用至所有相同類型的元件（例如網站上的每個主要按鈕），請改用樣式化元件。
使用 AI 為元件新增 CSS
描述想要的效果，Aria 就會產生 CSS 程式碼。系統會立即將結果套用至元件，方便直接在畫布上查看。
每次只描述 1 種效果。請勿在同一個指令中合併多項變更，否則可能使輸出結果混亂。
如有需要，請加入狀態，例如「游標懸停時」、「頁面載入時」或「選擇時」。
請提供明確描述。不要只輸入「讓按鈕更醒目」，可改為「游標懸停時，在按鈕周圍新增粗紅色框線」。
使用 AI 產生 CSS：
點擊要套用樣式的元件。
在右側的檢驗器面板中，向下捲動至自訂 CSS，然後點擊＋新增。
在自訂 CSS面板中，點擊使用 AI 產生 CSS 程式碼欄位，並輸入想要的效果描述（例如「游標懸停時新增發光的藍色框線」）。
點擊進入。
系統會產生 CSS 並套用至畫布上的元件。欄位下方會顯示樣式摘要，以白話說明程式碼的作用。
CSS 疑難排解
如果 AI 產生的結果不如預期，可嘗試以下 2 種方式加以改善：重新撰寫指令，或直接編輯程式碼。
重新撰寫指令：
清除「使用 AI 產生 CSS 程式碼」欄位中的原有指令，然後輸入新的描述。
按下 Enter 鍵。新的 CSS 會取代畫布上先前的結果。
手動編輯 CSS：
如果 AI 產生的結果大致符合需求，但仍需微調，可直接修改程式碼，無需從頭開始。
在「自訂 CSS」面板中，點擊「手動編輯 CSS」。
在「自訂 CSS」編輯器中更新程式碼。
點擊「儲存」。
常見問題
點擊下方問題，深入了解自訂 CSS。