視覺化編輯與預覽
選取元素、編輯文字、替換圖片、套用主題，並在發佈前預覽您的變更。
視覺化編輯可直接在 App 預覽 中運作。使用預覽下方的工具列來選取元素、編輯文字、替換圖片、套用主題，並在發佈前預覽您的變更。
使用 Select element 進行 AI 輔助變更，使用 Edit Text 直接變更文字，使用 Theme 設定全域樣式，例如色彩、字型與效果。
視覺化編輯如何運作
當 AI 智能體完成任務後，App 預覽 會出現在專案頂部。視覺化編輯工具列位於預覽下方。
- Select element 可讓您選取一個或多個元素，並要求智能體修改它們。
- Edit Text 可讓您直接在預覽中編輯文字。
- Theme 會開啟全域樣式的主題控制項。
當您不需要工具列時，可以將其收合。
開始之前
在您開始編輯之前，請確認：
- 您的專案已有完成的建置。智能體完成任務後，即可從 App 預覽 使用視覺化編輯工具。
- 您知道變更在 發佈之前不會上線。 在您發佈更新版本之前，您的公開 URL 不會受到影響。
- 您知道 主題只會影響共用樣式。 使用固定值建立的元素，在主題變更後會保留原本外觀。請參閱下方的 如果主題看起來不正確。
使用 Theme 設定全域樣式
主題是您專案的設計系統。它定義了全域變數——色盤、字體排印與間距——這些會套用到整個 app，而不是只套用到單一元素的設定。
Theme 最適合在準備階段、開始建置之前使用。提早套用主題，代表智能體從一開始產生的所有內容都會遵循該主題。
選擇主題
從 App 預覽 下方的工具列選取 Theme。Theme 面板包含 Search Themes 欄位，並將主題分成幾個區段：
- Current Theme — 您的專案目前使用的主題。在您套用任何主題之前，這裡會顯示 No theme applied yet，而旁邊的 + 按鈕可建立新主題。
- Featured Theme — 15 個由設計師精選的預設主題。每個主題都會顯示以該主題建立的頁面預覽、名稱，以及一列顯示其色盤的色票。這些主題無法刪除。
- Your Theme — 您建立或自訂的主題。這些主題可以重新命名與刪除。
每個主題都會顯示以該主題建立的頁面預覽、名稱，以及一列顯示其色盤的色票，讓您在套用前就能判斷整體方向。
Theme 分頁，上方是已套用的主題，下方是您已儲存的主題。
若要套用主題：
- 選取您想要的主題。
- Atoms 會詢問 "Do you want to apply theme name?"
- 選取 Apply 以確認，或選取 Cancel 返回。
- 檢查預覽。
預期結果： 預覽會更新為您選擇的主題，且該主題現在會顯示在 Current Theme 底下。
注意： 如果您有尚未儲存的文字或圖片變更，Atoms 會在套用新主題前要求您儲存或捨棄這些變更。
更新已套用的主題
Theme 分頁上的一個圓點表示您已套用的主題有較新的版本可用。
若要更新，請在您目前的主題上選取 Update，並確認 Do you want to re-apply theme name? 接著您的專案就會使用較新的版本。
您不一定要更新。如果您不更新，專案會繼續使用您原先套用的版本。
注意： 注意：如果您的 app 看起來不像您選擇的主題，個別元素可能具有覆寫主題的樣式。這些覆寫是針對特定內容設定的，因此在主題變更後仍會保留。
在 Theme Manager 中建立或編輯主題
選取 Current Theme 旁的 + 可從零開始建立主題，或開啟現有主題進行修改。兩者都會開啟 Theme Manager，您可以在即時預覽中微調主題。
其設定分為三個分頁：
- Color — 您的 app 使用的色彩角色，依用途分組：Base Colors、Card、Popover、Primary、Secondary 等。每個角色都有自己的值，因此變更 Primary 會影響所有使用它的元素。
- Fonts — 您的 Serif、Sans-serif 與 Mono 字體。
- Effects — 圓角 Radius，以及可透過色彩、不透明度、模糊、擴散與位移控制的 Shadow。
旁邊的預覽是由真實元件組成——登入表單、按鈕、輸入欄位、內文文字與等寬文字——因此您可以立即判斷變更效果，而不必猜測。使用其下方的明暗切換來同時檢查兩種模式，因為在淺色表面上可行的色盤，在深色表面上可能會失去對比。
在預覽下方，您也可以使用 Undo 與 Redo 逐步檢視您的變更，並使用 Reset 將主題還原到初始狀態。
Theme Manager。當您變更某個值時，預覽會同步更新，而其下方的控制項包含復原、重做、匯出、匯入與重設。
儲存主題
- 選取 Save。
- 為它輸入 Theme Name，或保留建議名稱。
- 選取 Save 以確認。
預期結果： 您的主題會顯示在 Theme 分頁的 My Theme 底下，並以色票顯示其色盤。您可以像其他主題一樣套用它。
注意： 在您儲存之前，編輯內容不會被保留。如果您在仍有未儲存變更時嘗試套用其他主題，Atoms 會阻止您，並提供儲存或捨棄的選項。
跨專案重複使用主題
Theme Manager 在預覽下方提供 Export 與 Import。您可以將主題匯出成檔案，再匯入到另一個專案中，以重複使用相同的設計方向，或交給隊友，讓他們的專案與您的專案保持一致。
如果主題看起來不正確
套用主題不是相容性檢查，因此通常不會失敗。主題會取代您的 app 所依據的共用樣式值，這表示選擇器中的任何主題通常都可以套用到任何專案。
您可能看到的情況是，主題雖然成功套用，但沒有影響到所有內容。這種情況不會出現錯誤訊息——它只是看起來不對勁。
您的 app 某些部分仍保留舊外觀。 這是最常見的問題。若某個元素被指定了固定值，也就是直接在該元素上設定特定色彩或字型，而不是使用 app 的共用樣式之一——那麼主題變更就無法影響它，因此它會保留原本外觀，並可能與周圍內容產生衝突。請選取受影響的元素，並在專案聊天中描述您想要的變更。
文字變得難以閱讀。 如果將深色主題套用到原本為淺色表面設計的版面，可能會導致文字對比不足。請在視覺化編輯器中調整受影響的元素，或選擇更接近您現有設計的主題。
Atoms 告知您無法套用主題。 這種情況較少見，表示您的專案介面不是建立在 Atoms 主題系統之上。請改用視覺化編輯器——您仍然可以逐一調整元素來完成所有變更。
重要： 若可以，請盡早選擇主題。當智能體在已套用主題的情況下進行建置時，它們會從一開始就使用該主題的共用樣式，因此較少元素會使用固定值，避免之後變更主題時無法影響這些元素。
使用視覺化編輯器編輯元素
- 將游標移到視覺化編輯工具列上，並選取 Select element。
- 工具列會顯示 Click to select, Ctrl/Cmd + Click for multiple。
- 在預覽中選取一個元素。若要選取多個元素，請在選取時於 Windows 按住 Ctrl，或在 Mac 按住 Cmd。
- 您的選取項目會附加到專案聊天中。工具列會顯示已選取的數量，例如 Edit 1 selection in chat window。
- 在專案聊天中描述您想要的變更，然後傳送訊息。
- 再次選取 Select element 以離開選取模式。
對於版面、色彩、間距、樣式，或影響多個已選取元素的變更，請使用專案聊天。
直接編輯文字
- 從 App 預覽 下方的工具列選取 Edit Text。
- 當出現 Click text content to edit 時，選取您想要變更的文字。
- 直接在預覽中編輯文字。
- 您可以在儲存前編輯多個文字元素。工具列會顯示待處理編輯的數量，例如 1 text change 或 2 text changes。
- 選取 Save 以保留所有待處理的文字變更，或選取 Discard 將其移除。
您也可以在使用 Select element 時，雙擊文字以直接開始編輯。
儲存或捨棄您的變更
直接的文字與圖片變更在您儲存之前不會套用。當有待處理變更時，工具列會顯示變更數量，以及 Discard 和 Save。
- Save 會套用所有待處理的直接編輯。
- Discard 會移除待處理的編輯，並將受影響的元素還原到先前狀態。
如果您在仍有待處理變更時嘗試離開編輯模式，Atoms 會顯示：
未儲存的變更
您有未儲存的變更。請先儲存或捨棄變更，再離開編輯模式。
選取 Cancel 以繼續編輯，或選取 Discard 以離開且不保留變更。
儲存會更新工作中的專案。在您發佈之前，它不會更新線上網站。
替換圖片
- 進入 Select element 模式。
- 選取您想要替換的圖片。
- 從圖片庫中選擇一張圖片，或使用所選圖片上的上傳控制項。
- 在預覽中檢查替換結果。
- 選取 Save 以套用圖片變更，或選取 Discard 將其移除。
如果您也在專案聊天中輸入指示，圖片替換與聊天指示可以一起提交。
含有圖片分類與 Popular Images 的 Library 分頁。
圖片來源位置
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 只會出現在內建圖片上。您產生或上傳的圖片則是透過選取其縮圖來套用。
在聊天中描述變更
使用 Select element 選取一個或多個元素後，請在專案聊天中描述您想要的結果。
例如：
- "讓這個區塊更平靜一些，留白更多，標題更小。"
- "讓這些按鈕符合定價頁面的樣式。"
請具體說明您預期的結果。像是「讓它看起來更好」這類指示，可能會產生不可預測的結果
預覽您的變更
使用預覽上方的工具列：
- Device view — 在不同螢幕尺寸間切換，以測試回應式效果。主題與字體排印變更在桌面版看起來正確時，常常會在手機版出問題，因此發佈前務必檢查手機版。
- Page selector — 在 app 的各個頁面之間切換。
- Refresh — 如果預覽看起來不是最新狀態，請重新載入預覽。
- Open in a new tab — 在獨立的瀏覽器分頁中以完整寬度檢視 app。
- Console — 當某些內容看起來不對勁時，開啟日誌面板。
預期結果： 您的變更會在您打算支援的每個頁面與每種裝置寬度上正確顯示。
從預覽問題中復原
如果預覽看起來不是最新狀態、持續載入，或顯示紅色錯誤，問題可能出在 App 預覽，而不是您的視覺化編輯。請參閱 建置與預覽疑難排解 以取得排解步驟——Refresh、Console 面板、Resolve，以及如何回報持續存在的錯誤。
如果您直接編輯的文字或圖片似乎消失了，請檢查您是否已儲存。未儲存的變更可能會在您離開編輯模式時被捨棄——請參閱「儲存或捨棄您的變更」。
發佈您的變更
視覺化編輯會保留在您的工作中專案內，直到您發佈為止。請選取右上角的 Publish，如果專案已上線，則選取 Update。
注意： 如果您的專案使用 Specify Version 而非 Always Latest，線上網站會固定在您選擇的版本，而您的設計變更在您發佈新版本之前不會公開顯示。
如需查看智能體在建置期間回報的錯誤，請參閱 問題報告。