設計與預覽

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

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

• Current Theme —— 你的專案目前使用的 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 時無法影響這些元素。

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

在預覽中選取一個元素即可編輯。若要同時處理多個元素，請在 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…，讓智能體將你的指示套用到該元素，而不是整個專案。

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

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

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

- "讓這個按鈕的樣式和定價頁面一致。"

像 "make it look better" 這樣模糊的指示，會產生難以預測的結果。

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

預覽你的變更

使用預覽上方的工具列：

• 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，正式網站會固定在你選擇的版本上，而你的設計變更在你發佈新版本之前不會公開顯示。

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