App 預覽
即時預覽並修改您的 app。
什麼是 App 預覽？
當 AI 智能體完成任務後，App 預覽 會出現在頁面頂部。它可讓您預覽即時運行的 app，並直接進行視覺化編輯——無需撰寫程式碼。
開始之前
- 智能體處理可能需要一點時間——請耐心等候。
- 請查看右側的終端面板以了解詳細進度。終端面板會顯示 AI 智能體正在執行內容的即時日誌，包括檔案建立、程式碼產生，以及建置過程中遇到的任何錯誤。
- 您可隨時點擊 Refresh 圖示以重新載入預覽。
如何使用 App 預覽
步驟 1：等待預覽載入
當智能體完成後，App 預覽 會在主要預覽視窗中載入您的預覽內容。
⏱️ 通常需要幾秒到一分鐘。
如果超過 2 分鐘：請點擊 App 預覽 工具列中的 Refresh 圖示。若仍卡住，請查看終端面板中的錯誤訊息（請參見下方步驟 3）。
步驟 2：預覽您的 app
載入完成後，您就可以在預覽視窗中看到即時運行的 app。
- 桌面 / 平板 / 手機 — 使用預覽視窗頂部的裝置工具列在不同檢視之間切換並測試回應式效果。工具列會顯示三個圖示，分別代表桌面、平板與手機裝置。點擊各圖示，即可在不離開頁面的情況下查看您的 app 在不同螢幕尺寸下的顯示效果。
- 在新分頁中開啟— 點擊預覽視窗右上角的箭頭圖示，即可在獨立的瀏覽器分頁中開啟預覽。如果嵌入式預覽卡住或沒有回應，這會特別有幫助。
步驟 3：檢查錯誤（如果畫面看起來不對）
如果您的 app 無法載入或顯示異常，請查看 Console 面板中的錯誤訊息。
Console 面板位於畫面右側，在終端分頁下方。它會顯示建置過程中產生的系統日誌與錯誤訊息。
如果您看到紅色錯誤訊息，通常會包含：
- 問題的說明
- 發生錯誤的檔案與行號
- 協助找出根本原因的堆疊追蹤
若要修復錯誤：（更多詳情請參閱：問題報告）
- 點擊 "Resolve" — AI 會自動分析並修復所有已識別的 bug。
- 修復完成後，預覽會重新載入。您可以透過終端面板即時監看進度。
沒有 "Resolve" 按鈕？
請點擊智能體最新訊息旁的 "..."（更多選項），然後選擇 "Feedback"，將問題回報給我們的支援團隊。請附上您的 Chat Link 與錯誤畫面的截圖。
步驟 4：修改您的 app
方法 1：點擊即可編輯（建議用於視覺變更）
直接點擊預覽視窗中的任何元素。畫面左側會出現視覺化編輯器，讓您調整：
- 顏色 — 使用取色器變更文字顏色、背景顏色或邊框顏色
- 間距 — 調整內距、外距，以及元素之間的間隔
- 字體排版 — 修改字體大小、粗細與字型
- 版面配置 — 變更對齊方式、flexbox 設定或 grid 屬性
- 文字內容 — 直接在編輯器中編輯文字
當您做出變更後，預覽會立即更新，讓您即時看到結果。
視覺化編輯器也包含一個 Library 分頁，您可在其中瀏覽並加入預先建好的素材，例如圖示、圖片與 UI 元件到您的專案中。
方法 2：在聊天中描述
使用自然語言告訴 AI 智能體您想變更什麼。例如：
- "把背景顏色調深一點"
- "縮小頁首周圍的內距"
- "把按鈕顏色改成藍色"
AI 會理解您的需求，並將變更套用到您的 app。
快速參考
- 重新整理預覽 – 點擊 App 預覽 工具列中的 Refresh 圖示，以重新載入預覽視窗。
- 切換裝置檢視 – 使用預覽工具列中的桌面、平板或手機圖示，測試您的 app 在不同螢幕尺寸下的顯示效果。
- 在新分頁中開啟 – 點擊預覽視窗右上角的箭頭圖示，即可在獨立的瀏覽器分頁中開啟預覽。
- 查看錯誤日誌 – 查看畫面右側的 Console 面板，以檢視錯誤訊息與系統日誌。
- 自動修復錯誤 – 點擊問題報告通知中的 "Resolve" 按鈕，讓 AI 修復所有已識別的 bug。
- 編輯視覺元素 – 點擊預覽視窗中的任何元素，即可在左側開啟視覺化編輯器。
- 回報問題 – 在任何智能體訊息上點擊 "..." → "Feedback"，將問題回報給支援團隊。
常見問題
為什麼我的 App 預覽 會顯示載入畫面？
載入畫面表示網站正在載入中。App 預覽 功能運作正常。請稍候片刻，等待預覽正確載入。如果超過 2 分鐘，請嘗試點擊 Refresh 圖示或查看 Console 面板中的錯誤。
為什麼我的 App 預覽 會顯示紅色錯誤訊息？
智能體在建置過程中可能會遇到問題，這有時會導致網頁出錯。點擊 "Resolve"，智能體就會為您修復錯誤。修復完成後，App 預覽 就會正常顯示預覽，因此不必擔心出現紅色錯誤訊息。
為什麼我無法從已發佈的頁面移除 Atoms 標章？
移除標章需要 Pro 套餐 或更高方案。您可以隨時前往 Settings → Plans & Billing 進行升級。升級後，標章將自動從您已發佈的頁面中移除。
若要升級，請點擊右上角的頭像，選擇 Settings，然後前往 Plans & Billing。選擇 Pro 套餐 或 Max 套餐，並完成升級流程。升級完成後，您的已發佈頁面將不再顯示 Atoms 標章。
