功能總覽
手動編輯(Manul Edit) 讓你在 AI 已經生成頁面之後,對單一頁面做更細緻的手動調整. 你可以:- 在可視化介面中調整佈局與樣式(顏色,字級,對齊,邊框,圖片編輯等)
- 直接修改文案內容,所見即所得
- 決定這次修改是要真正套用到專案,還是只在本次會話中試試看
手動編輯是免費功能,不會消耗任何代幣.
目前只針對當前頁面生效,不會自動同步到其他頁面.
如何進入手動編輯(Manul Edit)
1. 從預覽頁進入
在專案頁面切換到 「預覽(Preview)」 分頁,等待頁面載入完成. 右上角工具列中可以看到一個入口按鈕:- 「選擇元素並編輯」 按鈕(圖示在工具列右上)
2. 選擇要編輯的元素
點擊 「選擇元素並編輯」 後,游標移到畫面中:- 可編輯的元素會出現綠色虛線框
- 點擊其中一個元素時,旁邊會彈出一個小對話框
只有在你具備編輯權限(擁有者 / 編輯者),且預覽已載入完成時,這個入口才會啟用.
什麼情況下可以使用手動編輯?
手動編輯(Manul Edit)入口 會在以下條件都滿足時才會被點亮:-
權限條件
- 目前登入帳號在專案中的角色為 擁有者(Owner) 或 編輯者(Editor)
- 如果你只是 檢視者(Viewer),可以看頁面但無法開啟手動編輯
-
頁面狀態條件
- 頁面預覽已載入完成,可以正常滾動與操作
- 這個專案在本次會話中已經成功生成過畫面(不是還在「空白專案,尚未生成」狀態)
- 不在「風格待選擇」引導畫面,而是已經進入正常使用的頁面
-
編輯流程條件
- 目前沒有處於另一個編輯流程中(畫面右上角沒有顯示「退出編輯」)
- 系統不是「正在進入編輯」的載入中狀態
- 剛才沒有一個仍在進行中的「應用修改 / 更新產品」動作
什麼情況下不能使用手動編輯?
以下情境中,「選擇元素並編輯」與「Manul Edit」會被禁用,或點擊後不會打開編輯器.此時畫面右上角的「選擇元素並編輯」入口會顯示為禁用狀態,待對話或系統流程結束,頁面準備完成後才會恢復可點:-
沒有編輯權限
- 目前使用者不是擁有者(Owner)或編輯者(Editor),例如以只讀成員身分被分享進專案
-
頁面尚未準備好
- 頁面仍在載入中,或剛發布完,預覽服務還在啟動
- 這個專案還沒有生成任何畫面,例如剛建立專案但尚未完成第一次生成
- 仍停留在「選擇風格 / 主題」畫面,系統要求先完成風格選擇
-
對話流仍在進行中
- 當前有一個尚未結束的 AI 對話 / 生成流程正在執行
-
編輯流程衝突
- 上一次點擊「手動編輯」仍在開啟中(尚未完全進入編輯介面)
- 系統正在套用上一輪修改,更新產品
- 你已經在編輯介面裡,再次點按鈕只會被視為「退出編輯」,而不是開啟新的編輯
手動編輯介面說明
進入手動編輯介面後,畫面大致分為三個區塊:- 左側面板:當前選中元素的樣式控制項,例如:
- 文字顏色,背景顏色
- 字級,字重,對齊方式
- 邊框寬度,邊框樣式,邊框顏色
- 其他佈局與外觀設定
- 右側:當前頁面的即時預覽
- 右上角:「應用修改」 按鈕
調整左側的設定值時,右側預覽會即時反映變化.當有樣式或內容變更時,畫面下方會出現 「恢復原樣」 與 「暫存修改」 兩個按鈕,方便你先暫存本次編輯再決定是否套用.
注意:左側面板中可用的樣式控制項會根據選中的元素類型動態顯示.
- 此處內容由產品功能動態控制,請退出後透過對話修改會有這種情況是正常的
範例:強調某個按鈕
例如在估價頁面中,選中「手機 / 數碼」這個按鈕,並將:- 背景顏色改為醒目的紅色
- 邊框顏色改為同色系加強提示
編輯器中的操作:恢復原樣,暫存修改,應用修改,退出
在畫面下方與右上角,會看到幾個關鍵操作按鈕,它們決定這次修改何時,以什麼方式真正寫入專案.1)恢復原樣
- 作用:撤銷本次編輯會話中尚未「應用」的所有改動
- 效果:頁面回到剛進入手動編輯介面時的狀態
- 範圍:只影響本次手動編輯產生的變更,不會回滾之前已經套用到專案裡的歷史修改
2)暫存修改
- 作用:將左側面板中對樣式,顏色,文案等的更改,暫時保存到本次編輯會話中
- 效果:右側預覽立即反映這些修改,但尚未寫回專案
- 可以多次點擊,分多次調整;每成功暫存一次,右上角 「應用修改」 按鈕上的計數會加一
3)應用修改 / 應用 N 處修改
- 初始狀態:當沒有任何暫存修改時,按鈕為灰色「應用修改」,不可點
- 至少有一次 「暫存修改」 後:
- 會變成「應用 1 處修改」「應用 2 處修改」等,並高亮可點
- 點擊後:
- 系統會將這 N 處修改真正寫入專案,更新對應頁面的原型 / 代碼
- 右上角會出現類似 「變更已儲存」 的提示
- 計數歸零,按鈕回到灰色的「應用修改」
4)退出
- 作用:退出設計編輯器,回到一般預覽畫面
- 若沒有未應用修改:
- 直接退出,不再額外提示
- 若存在尚未「應用」的暫存修改:
- 會跳出確認對話框,可選擇:
- 「直接退出」:放棄本次編輯會話中所有未應用的修改
- 「應用修改並退出」:先執行一次「應用 N 處修改」,再自動退出編輯器
- 會跳出確認對話框,可選擇:
套用 / 放棄修改後會發生什麼?
選擇「應用修改」
- 手動編輯會把你調整後的 UI 結構傳回 superun
- 當前專案此頁面的原型 / 產品會被更新:
- 之後的預覽都以這個版本為準
- Build 代碼視圖也會基於這個版本生成
- 日後再讓 AI 繼續修改時,也會以這次手動編輯後的結果為起點
選擇「放棄更改」
- 本次編輯會話的所有修改都不會寫回專案
- 頁面恢復為進入編輯器之前的狀態
- 不影響後續的 AI 生成或既有代碼
中途異常或強制關閉
-
若在「啟動編輯器」或「更新產品」過程中關閉視窗或網路中斷:
- 這一輪編輯可能不會被保存
- 系統會重置「正在進入編輯」等中間狀態
- 之後再次點擊「選擇元素並編輯 / 手動編輯」即可重新開始
-
若你已經 暫存修改但尚未「應用修改」,此時直接重新整理頁面或中途離開,再次回到該頁面時,可能會出現以下狀況:
- 預覽畫面 顯示的是「暫存之前」的版本
- 重新啟動手動編輯後,編輯器內看到的是「暫存之後」的版本
- 也就是說,同一頁面在「預覽」與「手動編輯介面」中,會短暫出現內容不一致的情況
- 使用版本歷史回滾功能:透過 版本歷史回滾 到你確認無誤的版本.這是推薦的解決方式,可以安全地還原到之前穩定的狀態.
- 在對話輸入框中提交指令:「直接部署,略過檢測」,讓系統跳過除錯檢測流程(這個流程通常會花一點時間),以目前版本直接部署
superun 官方網站
前往 superun 官方網站,了解更多功能與實際範例.

