> ## Documentation Index
> Fetch the complete documentation index at: https://manus.im/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 編輯與預覽

> Manus 允許您透過即時回饋和自然語言編輯來建構和完善您的 Web 應用程式

### 編輯：輕鬆、對話式的更改

在 Manus 中編輯您的 Web 應用程式就像進行對話一樣簡單。無需編寫程式碼或導覽複雜的選單。您可以透過自然語言描述您想要的内容來更改您的網站，無論是單一微調還是大規模更新。

#### 視覺化編輯

Manus 1.5 引入了 3 種靈活的方式來編輯您的網站：

### **快速樣式控制**

點擊任何元素即可開啟即時樣式面板。無需等待，無需提示詞——只需直接控制：

* 顏色：更改背景、文字、邊框
* 排版：調整字體、大小、粗細
* 間距：修改內邊距、外邊距、間隔
* 邊框：更新樣式、寬度、圓角

非常適合快速設計迭代和微調。

### **基於提示詞的批次編輯**

為了讓您的工作流程更加高效，Manus 允許您執行**基於提示詞的群組編輯**。您可以在單一提示詞中描述多個更改，Manus 將智慧地打包並將它們作為單一更新一起應用。這非常適合進行一系列相關的調整，而無需逐一發出命令。

例如，您可以給出如下一個單一、全面的指令：

> "好的，讓我們做一些更改。首先，將主標題加粗，並將其顏色更改為我們品牌的深藍色。接下來，調整定價表中的間距，使其更寬敞。最後，將整個頁腳部分的背景顏色更改為淺灰色。"

Manus 將理解您的提示詞中的不同請求，並一次性執行所有這些請求，從而節省您的時間和精力。

| 編輯類型   | 示例提示詞                    |
| :----- | :----------------------- |
| **樣式** | `"將所有標題的字體更改為 Georgia。"` |
| **佈局** | `"增加此列表中項目之間的間距。"`       |
| **內容** | `"將主按鈕的文字更改為 '立即開始'。"`   |
| **結構** | `"複製此部分並將其放在聯絡表單下方。"`    |

### AI 編輯：您的創意夥伴

對於更複雜或更有創意的更改，您可以使用 AI 編輯功能。只需選擇一個元素，然後要求 Manus 改善它。這就像您擁有一位觸手可及的設計顧問和文案撰稿人。

| 目標       | 示例提示詞                        |
| :------- | :--------------------------- |
| **改善文案** | `"重寫此標題，使其更具吸引力並以利益為導向。"`    |
| **增強設計** | `"為本節建議一個更好、更現代的調色板。"`       |
| **優化佈局** | `"重組此功能列表，使其更具視覺吸引力且更易於瀏覽。"` |

Manus 將為您提供建議並應用更改，讓您可以輕鬆地將您的設計和內容提升到更高的品質水平。

Manus 提供了即時編輯和預覽您的 Web 應用程式的無縫體驗。這使得快速迭代成為可能，並確保您可以在進行更改時視覺化這些更改。

## 預覽：即時查看您的應用程式

Manus 在整個開發過程中提供您的 Web 應用程式的即時、互動式預覽。這使您能夠隨時查看所做的更改，並在真實環境中測試應用程式的功能。

### 桌面/行動裝置

預覽視窗允許您在桌面和行動裝置檢視之間切換，確保您的應用程式具有響應性並在所有裝置上看起來都很棒。您可以測試不同螢幕尺寸下的使用者體驗，並根據需要進行調整，以針對桌面和行動裝置使用者進行優化。

### 路徑

預覽視窗包含一個 URL 欄，顯示您正在查看的頁面的目前路徑。這對於導覽到應用程式中的特定頁面以及瞭解您網站的 URL 結構非常有用。

### 全螢幕

為了獲得更沉浸式的體驗，您可以將預覽擴展到全螢幕模式。這對於向利益相關者展示您的應用程式，或在沒有周圍介面干擾的情況下更好地瞭解您網站的整體外觀和感覺特別有用。

#### 即時預覽

從開發過程的一開始就可以獲得應用程式的即時、互動式預覽。這使您可以立即看到請求的結果，並提供回饋以進行調整。即時預覽是迭代開發過程的重要組成部分，使您能夠使用自然語言命令完善您的應用程式並立即看到更改的反映。