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

# 視覺化編輯

> 直接在介面上進行精確的設計編輯。

Lumi 的 Visual Edits 功能讓您可以選取頁面上的任何元素直接進行修改。即時更新文字和顏色等屬性，或使用提示來調整功能和版面配置。這是在不需編寫任何程式碼或使用 AI 的情況下，進行快速、針對性變更的理想工具。

<Note>
  **請注意：** 使用 Visual Edits 不會消耗積分。
</Note>

<img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/VE.gif?s=c13d93006af083d7b1bad8f01ce4cebd" alt="VE Gi" width="1280" height="720" data-path="images/VE.gif" />

## 何時使用 Visual Edits

在您想要進行以下操作時，Visual Edits 是理想的選擇：

* 變更您網站上的靜態文字或媒體內容。
* 更新排版，包括字體、大小和樣式。
* 修改文字、按鈕或其他元素的顏色。
* 選取特定元素並使用提示來改變其視覺外觀或功能。請注意，這些提示會像標準訊息一樣消耗積分。
* 透過提示詞對網站上的現有影像應用 AI 驅動的編輯。請注意，「AI 編輯」功能與標準訊息一樣消耗聊天積分。

  <img src="https://mintcdn.com/blockdance/Si-KBGUqnPsHTPfG/images/%E5%8F%AF%E8%A7%86%E5%8C%96%E7%BC%96%E8%BE%91.PNG?fit=max&auto=format&n=Si-KBGUqnPsHTPfG&q=85&s=9629b8803fd29e92b4e5002857ab40ca" alt="可视化编辑" width="1280" height="962" data-path="images/可视化编辑.PNG" />

## 如何使用 Visual Edits

<Steps>
  <Step title="找到 Visual Edits">
    您可以在輸入框或預覽模式的頂部工具列中找到此工具。

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-184540.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=7d2c75ec60807782e3844a5afd94751d" alt="20250911 184540 Jpe" width="3840" height="1916" data-path="images/20250911-184540.jpeg" />
  </Step>

  <Step title="啟動工具">
    點擊按鈕進入 Visual Edits 模式。
  </Step>

  <Step title="選取元素">
    將滑鼠懸停在您希望修改的項目上——例如標題、按鈕、圖片或背景區塊——然後點擊以選取它。

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-184025.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=9637a2ab63470ab62b99069f401b6b07" alt="20250911 184025 Jpe" width="1905" height="1186" data-path="images/20250911-184025.jpeg" />
  </Step>

  <Step title="透過提示或直接控制項進行編輯">
    選取元素後，您可以輸入像「將此標題設為粗體」這樣的指令，或使用情境編輯器直接變更文字、字體和顏色。

    <img src="https://mintcdn.com/blockdance/yVzLgDWOMQWyvNCE/images/20250911-183835.jpeg?fit=max&auto=format&n=yVzLgDWOMQWyvNCE&q=85&s=71158959d69d6ca9639c73ceb4bc5e0b" alt="20250911 183835 Jpe" width="1076" height="1344" data-path="images/20250911-183835.jpeg" />
  </Step>

  <Step title="套用並檢視">
    點擊「儲存」以確認您的變更。Lumi 將立即更新即時預覽和相應的程式碼。
  </Step>
</Steps>
