聊天是與代理協作的一種介面，但 UI 工作往往更具空間性。設計師、PM 和前端開發者常會透過標註來溝通，指出元素、區域或頁面的狀態。

我們今天更新的 Design Mode，是我們縮短你所見內容與代理所理解內容之間距離的一部分。它讓你能在上下文裡編輯產品，同時維持工作流不中斷。

從 Cursor 瀏覽器 中，你可以按一下任何元素、在頁面上繪製，或用語音描述變更；當你繼續處理下一個編輯時，Cursor 會取得編輯程式碼所需的上下文。

這讓你能以更快、更輕鬆的方式與代理反覆調整設計變更，因為指示不再只是一句話——而是可以包含所選元素、其背後的程式碼、周圍的版面配置，以及頁面上的視覺關係。

這讓從發現問題到動手編輯的迴圈更緊密。你可以直接指向介面中要表達的部分，而不必離開正在執行的產品，接著繼續以產品本身作為參考資料，同時由代理在底層完成編輯。

#指出、描繪或口述變更

Design Mode 提供多種方式，讓你向代理傳達意圖。你可以選取元素、加入多個參考資料、在介面上直接標註，或用語音描述變更。

當變更取決於元素之間的關係時，多重選取就特別實用。你可以參考兩個元件，並要求代理讓其中一個比照另一個、移除重複內容，或一起調整一組元件。

當代理需要知道指示適用於頁面的哪個區域時，繪製就很有幫助。你可以圈出密集的區段、框選某個區域，或標記動畫頁面的一部分。這些標註會疊加在視窗的凍結畫面上，因此代理能看到你當下回應的確切頁面狀態。

在這個版本中，你也可以用語音口述指示，而我們也讓目標定位更精準、整體體驗更流暢。整體而言，這讓 Design Mode 中的視覺互動更像是日常編輯流程的一部分。

在底層，選取元素會在上下文中加入兩個互補的訊號：元素的識別資訊 (xpath、元件、屬性、計算樣式，以及來自 fiber tree 的 props) ，以及提供空間上下文的螢幕截圖 (版面配置、周圍元素和確切的頁面狀態) 。這讓代理確實掌握找出來源並有效編輯程式碼所需的資訊。

#讓模型跟上工作節奏

當你在微調使用者介面時，通常一連串的編輯會接續發生。你調整了一個元件，注意到它周圍的間距，接著又發現另一個元件也應該一致。

Design Mode 讓你在注意到這些修改時，就能立刻送出。你可以指向一個元素、描述變更，接著移到頁面的另一個部分，在第一個編輯完成前再送出另一個編輯。Design Mode 讓你更容易一心多用，也讓管理多個子代理成為可能。

這種工作流程最適合搭配能快速做出精準 UI 變更的模型。Composer 2.5 在這方面表現特別出色，因為它不僅速度快，也很擅長介面工作。隨著代理完成任務，應用程式會即時熱重載。你會看到變更直接出現在執行中的產品裡，並能持續推進，直到介面感覺恰到好處。

我們相信，打造軟體的未來，應該讓使用者能在較高層級的抽象概念與較底層的細節之間無縫切換，並在想要時維持心流狀態。Design Mode 為使用者提供實現這一點所需的控制權、自主性，以及精準的編輯工具。

在 Agent 視窗 中試用 Design Mode。閱讀 瀏覽器 文件 了解更多，或下載 Cursor開始使用。