# 策展 · X (Twitter) 🔥🔥🔥
> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)
> 作者：Lovable (@Lovable) · 平台：X (Twitter) · 日期：2026-06-16
> 原始來源：https://x.com/Lovable/status/2066536196788957198
## 中文摘要
Lovable 推出全新工具列強化 AI 網頁開發體驗。
**核心功能更新**
Lovable 近期導入了全新的工具列設計，旨在提升使用者在網頁開發與設計過程中的操作效率。該工具列支援四種核心模式，讓使用者能靈活切換以進行標註、選取元素、編輯文字及新增留言。透過這些模式，使用者能更精確地與 AI 溝通，例如直接在網頁預覽畫面上圈選特定區域進行標註，AI 即可精準識別修改需求。
> 展示在 Lovable 中編輯 Aura 示範專案的網頁設計介面及其互動選單效果。
**互動與協作機制**
平台強化了團隊協作與 AI 指令的整合能力：
- 留言與標註：使用者可直接在網頁元素上進行標註，並透過標記（Tag）隊友進行協作，或直接將修改指令發送給 Lovable。
> 這是在 Lovable 中編輯「Creative Hub」示範專案的協作介面，使用者可針對網頁上的圖片元素進行留言與標註。
- 元素選取：支援透過拖曳或按住 `⌘` / `ctrl` 鍵進行多重選取，讓使用者能針對特定的文字方塊或視覺元素進行精細調整。
> 影片展示在 Lovable 中編輯名為 Aura 的示範專案，透過選取文字進行即時編輯的介面操作。
- 即時編輯：在預覽介面中直接修改文字時，系統會自動同步更新後端資料庫或雲端內容，確保設計與資料的一致性。
> 使用者透過 AI 輔助工具對網頁介面進行視覺調整與排版優化。
**視覺化開發體驗**
根據實際操作展示，Lovable 展現了高度的視覺化開發能力。在名為「Creative Hub」的專案中，使用者不僅能透過 AI 對話視窗下達指令（如「Added abstract painting」或「Moved Pricing, deleted Archive」），還能利用工具列進行排版優化，例如執行「Align header sections」或「Tighten header spacing」等快速調整。此外，系統具備強大的視覺理解力，當使用者在畫面上圈選空白處並要求加入特定內容時，AI 能自動生成並更新預覽畫面，實現「所見即所得」的開發流程。此平台特別針對需要處理大量視覺 asset 的工作室設計，透過智慧標籤功能，能根據紋理、色彩配置與情感共鳴等維度，高效整理創意內容。
> 使用者透過標註功能（Annotation）對網頁設計進行視覺修改，並由 AI 自動生成並更新畫面內容。
## 媒體內容
**使用者透過 AI 輔助工具對網頁介面進行視覺調整與排版優化。**
**影片中的 Prompt 與操作**
Prompt（00:00）：
```
套用設計變更。在圈選區域的空白處加入一幅畫。
```
原文：Apply changes to the design. Add in a painting in the blank space designated by the circled area.
Prompt（00:08）：
```
對齊頁首區塊。縮減頁首間距。
```
原文：Align header sections. Tighten header spacing.
操作步驟：
1. （00:00）使用者在網頁上圈選空白處並輸入指令。
2. （00:02）使用者在導覽列上進行刪除與移動操作的標註。
3. （00:07）使用者點擊「Align header sections」與「Tighten header spacing」按鈕。
4. （00:10）AI 處理請求並更新網頁佈局。
**這是一個展示「Creative Hub」平台協作功能的介面，使用者可以針對網頁上的圖片元素進行留言與標註。**
**影片中的 Prompt 與操作**
操作步驟：
1. （00:00）點擊中間的圖片
2. （00:01）彈出留言視窗並顯示既有留言
**影片展示了名為 Aura 的平台，透過選取文字並進行即時編輯的介面操作。**
**影片中的 Prompt 與操作**
操作步驟：
1. （00:00）點擊並選取文字「thought」
2. （00:03）刪除「thought」並輸入「organization」
**使用者透過標註功能（Annotation）對網頁設計進行視覺修改，並由 AI 自動生成並更新畫面內容。**
**影片中的 Prompt 與操作**
Prompt（00:05）：
```
將標註應用於設計。在圈選區域的空白處加入一幅畫。
```
原文：Apply annotations to the design. Add in a painting in the blank space designated by the circled area.
操作步驟：
1. （00:00）點擊並圈選網頁上的空白區域
2. （00:04）在「Annotation」輸入框中輸入修改指令
3. （00:07）點擊輸入框右側的發送按鈕
4. （00:10）觀察網頁預覽自動更新，畫作成功加入
**展示 Aura 平台的網頁設計編輯介面及其互動選單效果。**
**影片中的 Prompt 與操作**
操作步驟：
1. （00:00）游標移動至頂部選單選項
2. （00:01）游標在選單選項上觸發懸停效果
3. （00:03）畫面縮小顯示完整編輯器介面
4. （00:04）點擊並顯示選取項目的浮動工具列
## 標籤
功能更新, 新產品, Web, AIGC, Lovable