# 策展 · X (Twitter) 🔥🔥🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Cursor (@cursor_ai) · 平台：X (Twitter) · 日期：2026-06-06

> 原始來源：https://x.com/cursor_ai/status/2062950344687272144

## 中文摘要

Cursor 推出 Design Mode 實現介面直覺更新。

**核心功能**
Cursor 團隊發布的 Design Mode 旨在縮短「視覺所見」與「Agent 理解」之間的差距，讓開發者在處理 UI 專案時，無需離開開發流程即可進行精準編輯。該功能的核心在於將指令從單純的文字描述，升級為包含選定元素、程式碼背景、周邊佈局及視覺關係的綜合上下文，使 Agent 能更精確地執行修改。

**操作方式**
使用者可透過以下多種方式向 Agent 傳達意圖：
- 點選元素：在執行中的應用程式中直接點選目標元素，並針對該元素下達修改指令。
- 多重選取：同時選取多個元件，要求 Agent 調整它們之間的關聯性，例如讓兩者樣式一致或統一調整群組。
- 繪圖標記：在頁面截圖上圈選或框選特定區域，讓 Agent 明確識別指令適用的範圍。
- 語音輸入：透過語音描述變更需求，並結合繪圖功能，使互動過程更接近自然的編輯節奏。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1780745143984-nidcazry.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1780745145592-gYstvW3BfDenDs0Aojpg.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 使用 Cursor 的 Composer 功能，透過自然語言指令快速調整網頁介面的排版與樣式。

**技術架構與應用**
在技術層面上，當使用者選取元素時，系統會同時提供兩組互補訊號：一是元素的識別資訊（如 `xpath`、元件屬性、計算後的樣式與 `fiber tree` 的 `props`），二是包含佈局與頁面狀態的截圖。這種機制讓 Agent 能精確定位原始程式碼並進行高效編輯。

**實際影響**
Design Mode 支援非同步的編輯流程，使用者可以在第一個編輯任務完成前，持續點選其他元素並發送新指令，實現多工處理。搭配 `Composer 2.5` 的快速介面處理能力，開發者能更流暢地在抽象層級與細節間切換。如需進一步了解操作細節，可參考 [Cursor 官方部落格](https://cursor.com/blog/design-mode) 或查看相關的 [Browser 文件](https://cursor.com/docs)。

## 標籤

IDE, 功能更新, Agent, AIGC, Cursor