調整你的 app 外觀，然後在發佈前先預覽結果。

Design 會在即時預覽旁開啟，讓你在 不需撰寫程式碼 的情況下變更專案外觀。

本指南涵蓋如何使用 Theme 設定全域樣式、使用 視覺化編輯 編輯單一元素、從 Library 替換圖片、用自然語言描述變更，以及在正式上線前於不同裝置上檢查成果。

Design 的運作方式

當 AI 智能體 完成任務後，App 預覽 會出現在頁面頂端。選取 Design，即可在畫面左側開啟設計面板，旁邊則是即時預覽。它包含三個分頁：

• Theme 為整個 app 設定全域規則——顏色、字型與效果。最適合在開始建置前使用。
• 視覺化編輯 會調整你已選取的元素。可在任何專案、任何時間使用。
• Library 可替換圖片或產生新圖片。

Theme 負責設定規則，而 視覺化編輯 則用來微調細節。選取 Exit 可關閉面板。

Design 面板會在左側開啟。在你選取任何內容之前，視覺化編輯 會提示你先選擇一個元素。

開始之前

在你開啟 Design 之前，請確認：

• 你的專案已有 完成的建置。 Design 是從 App 預覽 開啟，而它只會在智能體完成任務後出現。
• 你知道變更在發佈之前都不會上線。 在你發佈更新版本之前，公開 URL 不會受到影響。
• 你知道 theme 只會影響共用樣式。 使用固定值建立的元素，在 theme 變更後仍會保留原本外觀。請參閱下方的 如果 theme 看起來不對。

使用 Theme 設定全域樣式

theme 是你專案的設計系統。它定義全域變數——色盤、字體排版與間距——這些設定會套用到整個 app，而不是只套用在單一元素上。

Theme 最適合在準備階段、開始建置之前使用。越早套用，智能體從一開始產生的所有內容就越能遵循它。

選擇 theme

Theme 分頁開啟後，會顯示一個 Search Themes 欄位，並將 themes 分成幾個區塊：

• Current Theme —— 你專案目前使用的 theme。在你套用任何內容之前，這裡會顯示 No theme applied yet，而旁邊的 + 按鈕可建立新的 theme。
• Default Theme —— 14 個由設計師精選的預設樣式。每個都會以使用該 theme 建立的頁面預覽顯示，附上名稱與一列顯示色盤的色塊。這些無法刪除。
• My Theme —— 你建立或自訂的 themes。這些可以重新命名與刪除。

每個 theme 都會以使用該 theme 建立的頁面預覽顯示，並附上名稱與一列顯示色盤的色塊，讓你在套用前就能判斷整體方向。

Theme 分頁，上方是已套用的 theme，下方是你儲存的 themes。

若要套用其中一個：

1. 選取你想要的 theme。
2. Atoms 會詢問 "Do you want to apply theme name?"
3. 選取 Apply 以確認，或選取 Cancel 返回。
4. 檢查預覽。

預期結果：預覽會更新為你選擇的 theme，且它現在會顯示在 Current Theme 底下。

注意：如果你在 視覺化編輯 中有尚未儲存的變更，Atoms 會顯示 Unsaved Changes，並要求你先儲存或捨棄這些變更，才能套用新的 theme。

更新已套用的 theme

Theme 分頁上的一個圓點表示你已套用的 theme 有較新的版本可用。

若要使用它，請在目前的 theme 上選取 Update，並確認 Do you want to re-apply theme name? 之後你的專案就會使用較新的版本。

你不一定要更新。如果你不更新，專案會繼續使用你原先套用的版本。

注意：如果你的 app 看起來不像你選擇的 theme，可能是個別元素已在 視覺化編輯 中被覆寫。這些覆寫會針對特定內容生效，因此在 theme 變更後仍會保留。

在 Theme Manager 中建立或編輯 theme

選取 Current Theme 旁的 + 可從零開始建立 theme，或開啟現有 theme 進行修改。兩者都會開啟 Theme Manager，你可以在其中搭配即時預覽微調 theme。

它的設定分成三個分頁：

• Color —— app 使用的色彩角色，依用途分組：Base Colors、Card、Popover、Primary、Secondary 等。每個角色都有自己的值，因此變更 Primary 時，所有使用它的元素都會一起更新。
• Fonts —— 你的 Serif、Sans-serif 與 Mono 字體。
• Effects —— 圓角 Radius，以及可透過顏色、不透明度、模糊、擴散與位移控制的 Shadow。

旁邊的預覽是由真實元件組成——登入表單、按鈕、輸入欄位、內文與等寬文字——因此你可以立即判斷變更效果，而不必憑空猜測。使用下方的明暗切換來檢查兩種模式，因為在淺色表面上有效的色盤，在深色表面上可能會失去對比。

在預覽下方，你也可以使用 Undo 和 Redo 逐步檢視變更，並使用 Reset 將 theme 還原到初始狀態。

Theme Manager。當你變更數值時，預覽會同步更新，而下方控制項則包含復原、重做、匯出、匯入與重設。

儲存 theme

1. 選取 Save。
2. 為它輸入 Theme Name，或保留建議名稱。
3. 選取 Save 以確認。

預期結果：你的 theme 會出現在 Theme 分頁的 My Theme 底下，並以色塊顯示其色盤。你可以像其他 theme 一樣套用它。

注意：在你儲存之前，編輯內容都不會被保留。如果你在仍有未儲存變更時嘗試套用其他 theme，Atoms 會攔下你，並提供儲存或捨棄的選項。

在不同專案間重複使用 theme

Theme Manager 在預覽下方提供 Export 和 Import。你可以將 theme 匯出成檔案，再匯入另一個專案，以重複使用相同的設計方向，或交給隊友，讓他們的專案與你的保持一致。

如果 theme 看起來不對

套用 theme 並不是相容性檢查，因此通常不會失敗。theme 會替換 app 所依據的共用樣式值，這表示選擇器中的任何 theme 通常都可以套用到任何專案。

你更可能看到的情況是：theme 雖然成功套用，但沒有影響到所有內容。這種情況不會出現錯誤訊息——它只是看起來不對。

app 的一部分仍保留舊外觀。 這是最常見的問題。若某個元素被指定了固定值，也就是直接在該元素上設定特定顏色或字型，而不是使用 app 的共用樣式——那麼 theme 變更就無法影響它，因此它會保留原本外觀，並可能與周圍內容不協調。請在 視覺化編輯 中修正，或在聊天中請智能體將固定值改成 theme 的樣式。

文字變得難以閱讀。 將深色 theme 套用到原本為淺色表面設計的版面時，可能會讓文字對比不足。請在 視覺化編輯 中調整受影響的元素，或選擇更接近現有設計的 theme。

Atoms 告訴你無法套用 theme。 這種情況較少見，表示你的專案介面並非建立在 Atoms 的 theme 系統上。請改用 視覺化編輯——你仍然可以逐一元素完成所有調整。

重要：如果可以，請盡早選擇 theme。當智能體在已套用 theme 的情況下進行建置時，它們會從一開始就使用該 theme 的共用樣式，因此之後不會有太多元素因固定值而無法被後續的 theme 變更影響。

使用 視覺化編輯 編輯單一元素

在預覽中選取元素即可編輯。若要一次處理多個元素，在 Windows 上按住 Ctrl 再點擊，或在 Mac 上按住 Cmd 再點擊。

重要：下方說明的屬性控制一次只會作用於 一個元素。當你選取多個元素時，請改用聊天描述你想要的變更——請參閱 用描述變更取代點擊操作。

在你的選取項目上方會顯示一個標籤，標示元素名稱與尺寸——文字會顯示字級，容器則顯示尺寸——讓你確認自己選到的是目標元素，而不是它的容器。

接著，視覺化編輯 分頁會顯示該元素可用的屬性，並分成幾個區塊：

• Layout —— 外距與內距。
• Appearance —— 背景色、不透明度與圓角半徑。Radius 從 None 到 Small、Medium、Large、XL、2XL、3XL，直到 Full。
• Content —— 元素的文字內容。
• Style —— 字型家族、字重、字級、文字對齊與裝飾。
• Class —— 套用在元素上的樣式 class，預設為收合。

實際顯示哪些區塊，取決於你選取的內容：文字元素會提供 Content 和 Style，而容器可能只顯示 Layout、Appearance 和 Class。

在你的選取項目上方也會出現一個浮動工具列，提供最常用的控制項——例如文字的字型、字重、對齊與顏色——以及刪除控制項和下方提到的提示欄位。

你所做的變更會即時顯示在預覽中。若要放棄變更，請使用預覽底部的 Discard。

儲存你的變更

在你儲存之前，編輯內容都不會被保留。只要你做出變更，預覽底部就會出現 Discard 和 Save。

• Save 會保留你的變更。
• Discard 會捨棄變更，並將元素還原成原本的樣子。

預期結果：儲存後按鈕會消失，而你的變更現在已成為專案的一部分。

注意：如果你在仍有未儲存內容時嘗試離開 Design、套用其他 theme，或使用 選取以對話，Atoms 會顯示 Unsaved Changes，並要求你先儲存或捨棄後再繼續。

儲存只會將變更保留在你的專案中，不會直接發佈到正式網站——請參閱 發佈你的變更。

選取元素後，視覺化編輯 會顯示其屬性。選取項目上方的浮動工具列可在描述變更與直接編輯之間切換。

提示：

1. 將 視覺化編輯 用於外觀調整，將聊天用於結構性變更，例如新增頁面、新功能或後端邏輯。
2. 若要對一整排卡片或按鈕做相同變更，請用 Ctrl-click 或 Cmd-click 全部選取，然後在聊天中描述一次變更即可。若透過屬性控制逐一編輯，就得重複操作。

使用 Library 替換圖片

Library 會將圖片套用到你目前選取的元素，因此請先選擇圖片要放置的位置。

1. 選取元素，也就是你想在預覽中變更的目標。在你這麼做之前，Library 會顯示 Select an element to start visual editing。
2. 開啟 Library 分頁，並選擇來源——Image、Generate 或 Upload。
3. 套用你的圖片。 操作方式取決於圖片來源。若是內建圖片，將滑鼠移上去並選取 Use asset。若是你產生或上傳的圖片，請選取其完成的縮圖。
4. 檢查預覽。 圖片會立即套用到你選取的元素上。
5. 在預覽底部選取 Save，或選取 Discard 以復原。

預期結果：你選擇的元素會套用新圖片，而在你儲存後，Save 和 Discard 按鈕會消失。

Library 分頁，包含圖片分類與 Popular Images。

圖片來源

Image 是內建圖片集合。你可以使用 Search assets 尋找特定內容，或瀏覽分類——Backgrounds、Nature、Education、Health、Fashion、Science、Feelings 和 People，其餘則可在 More tags 中找到。選取分類即可開啟；使用返回箭頭可回到上一層。下方的 Popular Images 會顯示一般精選內容。將滑鼠移到任一圖片上並選取 Use asset 即可套用。

Generate 可根據描述建立新圖片，且需要 Pro 或 Max 方案。在 Describe the image you want to generate 下方輸入你想要的內容，然後選取 Generate。結果會顯示在欄位下方。選取完成的縮圖即可將其套用到你的元素。

Upload 可透過拖放、貼上或點擊加入你自己的檔案。圖片格式可為 JPEG、PNG、GIF、BMP、TIFF 或 WEBP，大小上限為 4MB。上傳的圖片會顯示在拖放區下方——選取其中一張即可套用。

注意：Use asset 只會出現在內建圖片上。你產生或上傳的圖片則是透過選取縮圖來套用。

用描述變更取代點擊操作

當某項變更用描述比逐步點擊更容易表達時，你可以直接請智能體處理。有兩個地方可以這麼做，而且兩者都會作用於你目前選取的內容。

• 選取項目上的浮動工具列。 你選取元素後，元素上方會出現一個小型工具列。它的兩個圖示可在描述變更與直接編輯屬性之間切換。在 Ask the Atoms to change… 中輸入內容並送出。
• Design 面板下方的聊天輸入框。 當元素被選取時，輸入框會顯示 Design 標籤，以及 Ask the Atoms team to modify the selected element… 提示，讓智能體將你的指示套用到該元素，而不是整個專案。

浮動工具列會顯示在你的選取項目上方。左側的標籤會顯示指令將套用到哪個元素。

請描述結果，而不是操作方式：

- 「讓這裡更平靜一些——留白更多、標題更小。」

- 「讓這個按鈕的樣式和 pricing page 一致。」

像 「讓它看起來更好」 這類模糊指示，會產生難以預測的結果。

注意：在 視覺化編輯 中點擊某個屬性會立即套用變更。送出提示則是請智能體代為處理，因此會花比較久的時間。若只是簡單調整顏色或間距，請直接編輯屬性。

預覽你的變更

請使用預覽上方的工具列：

• Device view —— 在不同螢幕尺寸間切換，以測試回應式效果。Theme 和字體排版在桌面版看起來正確，常常在手機版會出問題，因此發佈前務必檢查手機版。
• Page selector —— 在 app 的不同頁面間切換。
• Refresh —— 如果預覽看起來不是最新狀態，請重新載入。
• Open in a new tab —— 在獨立的瀏覽器分頁中以完整寬度檢視 app。
• Console —— 當畫面看起來不對時，開啟記錄面板。

預期結果：你的變更會在所有頁面，以及你打算支援的所有裝置寬度下都清楚可見。

從預覽問題中恢復

如果預覽看起來不是最新狀態、持續載入，或顯示紅色錯誤，問題出在預覽本身，而不是 Design。請參閱 Build and preview troubleshooting 了解排除步驟——包括 Refresh、Console 面板、Resolve，以及如何回報持續存在的錯誤。

有一點是 Design 特有的：如果你的編輯看起來消失了，請檢查你是否已儲存。離開 Design 時，未儲存的變更會被捨棄——請參閱 儲存你的變更。

發佈你的變更

Design 變更會保留在你的工作專案中，直到你發佈為止。請選取右上角的 Publish；如果專案已經上線，則選取 Update。

注意：如果你的專案使用的是 Specify Version 而不是 Always Latest，正式網站會鎖定在你選擇的版本，而你的設計變更在你發佈新版本之前都不會公開顯示。

如需查看智能體在建置期間回報的錯誤，請參閱 問題報告。