App 預覽
預覽您的即時 app、測試其互動，並執行發佈前檢查——完整帶您了解工具列，以及進行視覺編輯的所有方式。
什麼是 App 預覽？
當您的 AI 智能體完成任務後，App 預覽會在頁面頂部開啟。您不只是看到作品的外觀，還可以像操作一個完整可用的 app 一樣與它互動——點擊各個頁面、測試功能，並在不撰寫程式碼的情況下進行視覺變更。它同時也是發佈前的最後檢查點：如果有任何地方看起來不對或行為異常，您可以在使用者看到之前先發現並修正。
開始之前： 智能體處理可能需要一點時間。任務執行期間，右側的終端面板會顯示即時活動，包括檔案建立、程式碼生成，以及過程中遇到的任何錯誤。您也可以隨時使用 Refresh 圖示重新載入預覽的最新版本。
App 預覽工具列
預覽視窗上方有一條精簡的工具列。由左至右，各控制項的功能如下：
- Design： 切換視覺編輯模式。啟用後，在預覽中點擊任何內容都會選取該元素以進行編輯——請參閱下方的「修改您的 app」。
- 裝置切換： 顯示圖示可將預覽切換為行動裝置檢視，再切換回來，讓您無需離開頁面即可檢查回應式效果。
- Refresh： 重新載入預覽視窗。當預覽看起來過時或卡住時，這應該是您的第一步。
- Home： 無論您目前瀏覽到哪裡，都可將預覽直接跳回 app 首頁。
- 頁面選擇器： 中間的下拉選單會列出您 app 的各個頁面，您可以直接選取其中一頁預覽，而不必一路點擊過去。
- 在新分頁中開啟： 箭頭圖示會在獨立的瀏覽器分頁中開啟預覽。當嵌入式預覽卡住或沒有回應時特別實用。
- Console： 位於右側邊緣，會開啟包含系統日誌與錯誤訊息的面板；當某些內容看起來損壞時，這是您第一個該查看的地方。
預覽上方的工具列：左側是 Design，接著是裝置切換（「顯示行動版預覽」）、refresh、home、頁面選擇器、在新分頁中開啟，以及右側的 Console。
箭頭圖示會在獨立的瀏覽器分頁中開啟執行中的 app——如果嵌入式預覽異常，這是可靠的脫困方式。
如何使用 App 預覽
步驟 1：等待預覽載入
智能體完成後，App 預覽會在主視窗中載入您的預覽。這通常需要幾秒到一分鐘。
超過 2 分鐘？ 請點擊工具列中的 Refresh。如果仍然卡住，請檢查 Console 中是否有錯誤（請參閱步驟 3）。
步驟 2：預覽並測試互動
載入完成後，您看到的就是實際的 app：
- 檢查回應式效果： 使用裝置切換在桌面與行動檢視之間切換，確認版面在較小螢幕上仍然正常。
- 逐一點擊互動： 開啟每個導覽連結、按下按鈕、提交表單，並觸發 hover 狀態。頁面能顯示，不代表頁面能正常運作。
- 走一次關鍵流程： 從登陸頁開始，依序探索並完成主要行動呼籲，完整走過最重要的使用路徑。
- 在真實分頁中測試： 在新的瀏覽器分頁中開啟預覽，於使用者實際會使用的環境中做最後檢查。
步驟 3：檢查錯誤（如果有任何地方看起來不對）
如果 app 無法載入或看起來損壞，請在 App 預覽工具列中選取 Console。Console 面板會在預覽下方開啟，而終端則是獨立的任務活動區域。它會收集建置期間產生的系統日誌與錯誤訊息。紅色錯誤訊息可能包含錯誤原因說明以及額外的診斷細節。
若要修正錯誤：
- 點擊問題報告通知中的 Resolve，AI 會自動分析並修正所有已識別的 bug，修正完成後預覽會重新載入。您可以在終端面板中即時查看進度。
- 沒有 Resolve 按鈕？ 點擊智能體最新訊息旁的「…」（更多選項），然後選取 Feedback 以聯絡支援團隊——請附上您的 Chat Link 與錯誤截圖。
如需完整的錯誤處理流程，請參閱 問題報告。
步驟 4：修改您的 app
方法 1 — 點擊即可編輯（最適合視覺變更）
請先在 App 預覽工具列中選取 Design 以啟用視覺編輯模式。Design 僅在符合資格的桌面專案狀態下，且使用者具有編輯權限時可用；如果您看不到它，請在聊天中使用方法 2。接著直接點擊預覽中的任一元素。該元素會以外框與標籤顯示您所選取的內容及其大小，例如 h1、按鈕、卡片。元素旁會直接出現一個內嵌的「Ask the Atoms to change…」列，讓您可描述僅限於該位置的變更；左側也會開啟視覺化編輯，供您手動調整：
- 顏色： 透過取色器調整文字、背景與邊框顏色。
- 間距： padding、margin，以及元素之間的間隔。
- 字體排版： 字體大小、粗細與字型。
- 版面配置： 對齊、flexbox 與 grid 屬性。
- 文字內容： 直接原地編輯文字。
每次變更都會立即更新預覽，因此您可以即時看到結果。視覺化編輯也包含一個 Library 分頁，可瀏覽並加入預先建好的素材：圖示、圖片與 UI 元件，直接加入您的專案。
點擊編輯的實際操作：標題已被選取（顯示其標籤與大小），內嵌列可讓您要求只變更這個元素。
方法 2 — 在聊天中描述
用自然語言告訴智能體您要變更什麼，它們就會套用到 app：
把背景顏色調深一點。
減少頁首周圍的 padding。
把按鈕顏色改成藍色。
發佈前檢查
App 預覽是 Publish 前的最後一站。這份檢查清單可協助您在使用者看到之前，先找出常見問題：
- 預覽可正常載入，且 Console 中沒有紅色錯誤訊息。
- 版面在行動檢視中也能正常顯示，而不只是桌面版。
- 每個互動都能正常運作：導覽、按鈕、表單，以及主要行動呼籲。
- 佔位內容已被替換，像是 [Company name] 這類方括號佔位字樣很容易被忽略，但上線後會非常明顯。
- 頁面選擇器中的每個頁面至少都快速檢查過一次，而不只是首頁。
都沒問題了嗎？點擊右上角的 Publish 並分享連結。
快速參考
- 重新整理預覽 — App 預覽工具列中的 Refresh 圖示。
- 切換裝置檢視 — 工具列中的裝置切換，可測試不同螢幕尺寸。
- 在頁面間跳轉 — 工具列中的頁面選擇器下拉選單。
- 在新分頁中開啟 — 工具列中的箭頭圖示。
- 查看錯誤日誌 — 在 App 預覽工具列中選取 Console；日誌面板會在預覽下方開啟。
- 自動修正錯誤 — 問題報告通知中的 Resolve 按鈕。
- 編輯視覺元素 — 點擊預覽中的任一元素以選取它並開啟視覺化編輯。
- 回報問題 — 任一智能體訊息上的「…」→ Feedback。
常見問題
為什麼我的 App 預覽會顯示載入畫面？
網站正在載入中，而 App 預覽運作正常，請稍候片刻。如果超過 2 分鐘，請點擊 Refresh 圖示，或檢查 Console 面板是否有錯誤。
為什麼我的 App 預覽會顯示紅色錯誤訊息？
智能體在建置期間可能遇到問題，偶爾會導致網頁錯誤。點擊 Resolve，智能體會為您修復；修正完成後，預覽會恢復正常。紅色訊息是提醒，不是危機。
為什麼我無法從已發佈頁面移除 Atoms 標章？
移除標章需要 Pro 或更高方案。點擊右上角的頭像，選取 Settings，然後前往 Plans & Billing 並選擇 Pro 或 Max 套餐。升級後，Atoms 標章會自動從您已發佈的頁面中移除。
如何使用 Design Mode 修正頁面版面或樣式問題？
- 開啟 Design Mode，並選取對齊錯誤或樣式不正確的確切元素。
- 說明頁面與斷點、目前問題、期望結果，以及哪些內容不能改變。
- 使用可衡量的指示，例如 padding、對齊、寬度、顏色或換行行為。若需要視覺比對，請附上參考圖片。
- 一次只套用一項變更，然後驗證桌面與行動版版面，以及載入、空狀態、hover 與錯誤等重要狀態。
- 如果結果影響到其他區域，請回到上一個正常版本，並以更精準的目標重新嘗試。
為什麼 App 預覽會顯示空白白畫面？
- 確認問題是否只影響 App 預覽、Preview URL，還是連已發佈網站也受影響。
- 重新整理一次、在新分頁中開啟 Preview，並測試無痕視窗。
- 檢查目前任務或建置是否仍在執行中。請等待完成後再重試。
- 如果有明確訊息指出 Cloud & AI 餘額不足或 app 已被暫停，請開啟 Settings → Cloud & AI 並檢查該餘額。不要僅因空白畫面就進行儲值。
- 記錄任何 Console 或 Network 錯誤，但不要分享 cookies、tokens 或機密值。
如果畫面仍然空白，請聯絡 Support，並提供 Chat Link、完整 Viewer URL、時間與時區、受影響環境、截圖，以及已去除敏感資訊的錯誤細節。
為什麼我的 Preview 或 App 預覽會顯示空白畫面或一直載入？
- 檢查是否只有 App 預覽、Preview URL，或已發佈網站受到影響。
- 重新整理一次、在新分頁中開啟 Preview，並測試無痕視窗。
- 檢查目前任務或建置是否仍在執行中，並等待其完成。
- 測試最後一個已知正常運作的版本。如果該版本正常，請比較最近導致空白畫面的變更。
- 只有在產品明確回報餘額不足或 app 已暫停時，才開啟 Settings → Cloud & AI。
如果問題持續，請聯絡 Support，並提供 Chat Link、完整 Viewer URL、版本、時間與時區、受影響環境、截圖，以及已去除敏感資訊的 Console 或 Network 錯誤。
為什麼我的 Design Mode 變更在 Preview 中看起來正確，但在已發佈網站上卻不是？
Preview 與已發佈網站是彼此獨立的管道。儲存或預覽不會將變更推送到正式環境。
- 在 Publish 面板中點擊 Update — 開啟 Publish 面板並點擊 Update。等待狀態顯示為 Up to date。
- 對正式網站進行強制重新整理 — 按下 Cmd+Shift+R（Mac）或 Ctrl+F5（Windows），或在無痕視窗中開啟 URL，以排除瀏覽器快取影響。
- 檢查已發佈版本號 — 在 Publish 面板中，確認版本與您在 Preview 中看到的一致。如果不同，請重新發佈。
- 測試平台的 Prod 子網域 — 如果您使用自訂網域，請另外開啟預設的 Prod URL。如果 Prod 子網域已更新但自訂網域未更新，問題可能出在 DNS 或 CDN 快取。
如果問題仍然存在，請提供 Preview URL、Prod URL、並排比較截圖，以及您點擊 Publish 或 Update 的時間。
為什麼智能體變更後，我的頁面在行動裝置上看起來壞掉了？
當智能體修改版面或樣式時，可能會不小心破壞較小螢幕上的回應式行為。
- 先以行動裝置寬度預覽 — 使用 App 預覽工具列中的裝置切換切換到行動檢視，並在發佈前檢查結果。
- 在行動檢視中使用 Design Mode — 當裝置切換設為行動版時切換到 Design Mode。點擊損壞的元素，讓智能體只針對該螢幕尺寸下的該元件進行處理。
- 提供明確的回應式限制條件 — 清楚告訴智能體行動版版面應該長什麼樣。範例：「在寬度小於 768px 的螢幕上，將卡片堆疊成單欄，並將 padding 設為 16px。」
- 要求智能體保留現有 media queries — 當您要求桌面版變更時，請補充：「不要修改任何現有的回應式或行動版樣式。」
如果問題持續，請提供 Chat Link、損壞的行動版版面截圖，以及預期版面的參考圖片。
為什麼圖片在 Preview 或已發佈網站中遺失或無法載入？
如果圖片顯示損壞、出現佔位圖示，或無法載入：
- 檢查圖片檔案路徑 — 開啟 Files 區段，確認圖片檔案存在於程式碼所引用的路徑中。智能體可能在編輯期間移動或重新命名了檔案。
- 驗證檔案大小與格式 — 過大的圖片或不支援的格式可能無法載入。請壓縮圖片，或轉換為 PNG、JPG 或 WebP。
- 檢查 Cloud 儲存空間 — 前往 Settings > Cloud & AI，確認您有可用的儲存空間。
- 強制重新整理 — 按下 Cmd+Shift+R（Mac）或 Ctrl+F5（Windows）以清除已快取的圖片參照。
如果問題持續，請提供 Chat Link、遺失圖片的 URL，以及損壞狀態的截圖。
智能體改錯元素，或破壞了頁面的其他部分。我該怎麼辦？
當智能體修改了不相關的元素，或在頁面其他部分引入回歸問題時：
- 回復 — 前往 History，並從最後一個穩定版本進行克隆。這會重設聊天脈絡，同時保留您的程式碼。
- 使用 Design Mode 進行隔離 — 切換到 Design Mode，並直接點擊特定元素。這會將智能體的編輯範圍錨定在該元件上。
- 加入明確限制 — 清楚說明哪些內容 不能 改變。範例：「只將頁首背景顏色改為 #1A365D。不要修改導覽列、頁尾或任何其他元件。」
- 每個提示詞只做一項變更 — 做一項變更、驗證結果，然後再進行下一項。
如果智能體反覆讓其他元素回歸出錯，請從穩定版本進行克隆，並以範圍更明確的指示重新操作。
為什麼 Preview 會顯示建置錯誤或缺少相依套件？
如果 Preview 面板顯示建置錯誤、紅色錯誤橫幅，或缺少套件的訊息：
- 使用 Resolve 按鈕 — 如果 App 預覽中出現問題報告通知，請點擊 Resolve，AI 會自動分析並修正所有已識別的錯誤。如果沒有 Resolve 按鈕，請從 Console 面板複製完整錯誤訊息，並貼給智能體，同時附上：「Fix this build error: [error message].」
- 檢查最近的變更 — 如果錯誤是在某次特定編輯後出現，請前往 History，並與最後一個正常版本比較，以找出是哪項變更導致問題。
- 從最後一個正常版本進行克隆 — 如果錯誤難以解決，請從您最後一個成功檢查點進行克隆，並逐步重新套用變更。
- 檢查套件相容性 — 如果錯誤提到特定套件，請要求智能體：「Check whether [package name] is compatible with the current project setup and fix any version conflicts.」
注意：如果錯誤訊息提到平台元件（App 預覽、startup script、Publish、deploy record）或第三方套件內部檔案（例如 @vue/compiler-core、vite），這可能是平台問題，而非智能體問題。請將完整錯誤訊息提供給 Support。
如果問題持續，請提供完整錯誤訊息、Chat Link，以及錯誤截圖。
為什麼我對字體、顏色或間距的變更沒有生效？
如果智能體確認變更已完成，但視覺結果沒有改變：
- 強制重新整理 — 按下 Cmd+Shift+R（Mac）或 Ctrl+F5（Windows）。CSS 變更經常會被瀏覽器快取。
- 檢查 CSS specificity 衝突 — 智能體可能新增了被現有規則覆蓋的樣式。請要求智能體：「Check whether the style I requested is being overridden by another CSS rule, and fix the specificity if needed.」
- 使用 Design Mode 檢查 — 切換到 Design Mode 並點擊該元素。左側的視覺化編輯會顯示目前套用的顏色、間距、字體排版與版面屬性，因此您可以確認要求的變更是否已套用。
- 確認正確的檔案 — 對於同時具有全域樣式表與元件層級樣式的專案，智能體可能編輯了錯誤的檔案。請詢問：「Where did you apply the change? Show me the file path and line.」
如果問題持續，請提供 Chat Link、未變更元素的截圖，以及您要求的確切樣式值。
為什麼我點擊時，Design Mode 會選到錯誤的元件？
Design Mode 會根據視覺版面判斷您要操作的元件。巢狀或重疊元素可能導致選取錯誤。
- 放大 — 點擊前先放大該區域。這有助於區分彼此緊密巢狀的元件。
- 以文字描述作為備案 — 如果反覆點擊都選到錯誤元素，請改在聊天中描述它。範例：「選取右側欄位中 pricing card 內的第二個按鈕。」
- 以檔案路徑參照 — 如果您知道哪個檔案包含該元件，請直接告訴智能體：「Edit the element in src/components/PricingCard.tsx, line 42.」
如果選取問題持續，請提供標示出目標元素的截圖與 Chat Link。