跳轉到主要內容

功能總覽

手動編輯(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 生成的版本.

選擇「放棄更改」

  • 本次編輯會話的所有修改都不會寫回專案
  • 頁面恢復為進入編輯器之前的狀態
  • 不影響後續的 AI 生成或既有代碼

中途異常或強制關閉

  • 若在「啟動編輯器」或「更新產品」過程中關閉視窗或網路中斷:
    • 這一輪編輯可能不會被保存
    • 系統會重置「正在進入編輯」等中間狀態
    • 之後再次點擊「選擇元素並編輯 / 手動編輯」即可重新開始
  • 若你已經 暫存修改但尚未「應用修改」,此時直接重新整理頁面或中途離開,再次回到該頁面時,可能會出現以下狀況:
    • 預覽畫面 顯示的是「暫存之前」的版本
    • 重新啟動手動編輯後,編輯器內看到的是「暫存之後」的版本
    • 也就是說,同一頁面在「預覽」與「手動編輯介面」中,會短暫出現內容不一致的情況
    若遇到這種情況,你可以用以下方式處理:
    • 使用版本歷史回滾功能:透過 版本歷史回滾 到你確認無誤的版本.這是推薦的解決方式,可以安全地還原到之前穩定的狀態.
    • 在對話輸入框中提交指令:「直接部署,略過檢測」,讓系統跳過除錯檢測流程(這個流程通常會花一點時間),以目前版本直接部署

superun 官方網站

前往 superun 官方網站,了解更多功能與實際範例.