@cursor_ai：Cursor 推出 Design Mode 實現介面直覺更新。 核心功能 Cursor 團隊發布的 Design Mode 旨在縮短「視覺所見」與「Ag…

Cursor 推出 Design Mode 實現介面直覺更新。 核心功能 Cursor 團隊發布的 Design Mode 旨在縮短「視覺所見」與「Agent 理解」之間的差距，讓開發者在處理 UI 專案時，無需離開開發流程即可進行精準編輯。該功能的核心在於將指令從單純的文字描述，升級為包含選定元素、程式碼背景、周邊佈局及視覺關係的綜合上下文，使 Agent 能更精確地執行修改。 操作方式 使用者可透過以下多種方式向 Agent 傳達意圖： 點選元素：在執行中的應用程式中直接點選目標元素，並針對該元素下達修改指令。 多重選取：同時選取多個元件，要求 Agent 調整它們之間的關聯性，例如讓兩者樣式一致或統一調整群組。 繪圖標記：在頁面截圖上圈選或框選特定區域，讓 Agent 明確識別指令適用的範圍。 語音輸入：透過語音描述變更需求，並結合繪圖功能，使互動過程更接近自然的編輯節奏。 使用 Cursor 的 Composer 功能，透過自然語言指令快速調整網頁介面的排版與樣式。 技術架構與應用 在技術層面上，當使用者選取元素時，系統會同時提供兩組互補訊號：一是元素的識別資訊（如 xpath、元件屬性、計算後的樣式與 fiber tree 的 props），二是包含佈局與頁面狀態的截圖。這種機制讓 Agent 能精確定位原始程式碼並進行高效編輯。 實際影響 Design Mode 支援非同步的編輯流程，使用者可以在第一個編輯任務完成前，持續點選其他元素並發送新指令，實現多工處理。搭配 Composer 2.5 的快速介面處理能力，開發者能更流暢地在抽象層級與細節間切換。如需進一步了解操作細節，可參考 Cursor 官方部落格 或查看相關的 Browser 文件。使用 Cursor 的 Composer 功能，透過自然語言指令快速調整網頁介面的排版與樣式。 影片中的 Prompt 與操作：Prompt： 把這些全部統一原文：Make them allPrompt： 移除原文：Remove thePrompt： 移除原文：Remove the操作步驟： 1. 點擊瀏覽器右上角的「Design Mode」圖示進入設計模式。 2. 在網頁上選取「Product」標籤。 3. 在 Composer 對話框中輸入指令以修改樣式。 4. 觀察編輯器自動應用變更並更新網頁排版。原文：https://easyvibecoding.app/curated/1791