設計模式讓你能通過視覺提示詞引導agents。在代理窗口的瀏覽器中，你可以點擊元素、在頁面上圈選，或通過語音描述改動。Cursor 會捕捉所需的上下文並編輯代碼，你則可以繼續處理下一項改動。
UI 工作往往具有空間性。無需用一句話描述改動，你的指令可以包含所選元素、其背後的代碼、周圍的佈局以及頁面中的視覺關係。這縮短了從發現問題到修復問題的閉環。
點擊正在運行的 app 中的元素，針對所選元素輸入提示詞，讓智能體編輯代碼。
打開設計模式¶
設計模式位於代理窗口的瀏覽器中。打開瀏覽器後，按 Cmd + Shift + D 啓用設計模式。再次按下相同的快捷鍵即可關閉，恢復正常瀏覽。
引導智能體的方式¶
設計模式提供多種方式來表達你的意圖。
選擇元素¶
點擊正在運行的產品中的任意元素即可將其設爲目標。智能體會獲取該元素及其代碼，因此你無需離開應用，即可針對眼前所見的具體內容編寫提示詞。
選擇多個元素¶
當修改涉及元素之間的關係時，多選功能很有幫助。引用兩個組件，讓智能體將其中一個調整得與另一個一致、移除重複內容，或同時調整一組元素。
選擇多個元素，並描述它們應如何一同調整。
在頁面上繪製¶
通過繪製，你可以告訴智能體你的指令適用於頁面的哪個區域。你可以圈出內容密集的部分、框選某個區域，或標記動態頁面的一部分。標註會疊加在視口的凍結畫面上，因此智能體能看到你所針對的確切頁面狀態。
語音描述¶
你可以通過語音說明需求，無需打字。agents運行期間，麥克風始終可用，因此無需等待即可將下一項修改加入隊列。
結合語音輸入和繪圖描述修改內容。
鍵盤快捷鍵¶
| 操作 | 快捷鍵 |
|---|---|
| 切換設計模式 | Cmd + Shift + D |
| 選擇區域 | Shift + 拖動 |
| 將元素添加至聊天 | Cmd + L |
| 將元素添加至輸入框 | Option + 點擊 |
智能體看到的內容¶
選取元素會向上下文添加兩類互補信息：
- 元素標識：包括 fiber 樹中的 xpath、組件、屬性、計算樣式和 props。這有助於智能體定位源代碼並修改正確的代碼。
- 截圖：包含佈局、周邊元素以及頁面的確切狀態。這爲智能體提供與此次修改相關的空間上下文。
保持工作節奏¶
優化界面時，一處修改往往會引出下一處。你調整一個組件，注意到它周圍的間距，又發現另一個組件也需要與之協調。
設計模式讓你在發現這些修改時就能立即提交。指向一個元素，描述要做的更改，再移到頁面的另一部分；在第一項修改完成前，就可以提交下一項。這樣你可以輕鬆地同時處理多項工作，並管理多個子智能體。agents完成任務後，應用會熱重載，你的更改會出現在運行中的產品裏。
這一工作方式最適合使用擅長界面工作的快速模型。我們推薦 Composer 2.5。
