我們很高興推出 Cursor Browser 的視覺編輯器。它在同一個視窗裡結合你的 Web 應用程式、程式碼庫，以及強大的視覺編輯工具。你可以拖曳元素、直接檢查 components 和 props，並在滑鼠點選同時描述要修改的內容。現在，你產品中的介面變得更直接、更直覺，進一步縮短設計與程式碼之間的距離。

#使用拖放重新排列

視覺編輯器可讓你直接在 DOM 樹中拖放已渲染的元素，以操作網站的版面配置與結構。

這讓視覺設計與程式碼實作得以統一。你可以調換按鈕順序、旋轉區塊，並測試不同的網格配置，而不需要在不同情境間來回切換。當視覺設計已符合你心中的構想時，只要告訴代理將它套用即可。代理會為你找到相關元件並更新底層程式碼。

#直接測試元件狀態

許多現代應用程式是使用 React 建置的，元件通常透過 props 來控制不同的狀態。視覺化編輯器會在側邊欄中清楚呈現這些 props，讓你可以在元件的不同變體之間輕鬆調整。

#使用視覺化控制項調整屬性

視覺編輯器側邊欄讓你可以透過滑桿、調色盤，以及你自己的色彩 token 與設計系統來微調樣式。每一個調整都是完全互動的：即時色彩選擇器會預覽你的選擇，並提供控制項，讓你能精準地調整網格、flexbox 版面與文字排版。

#點一點，下指令

視覺編輯器也支援你直接點擊介面上的任何元素，然後描述你想要修改的內容。你可以點一個元素，說「把這個變大一點」，對另一個元素下指令「把這個變成紅色」，再對第三個元素輸入「交換它們的順序」。這些代理會同時運作，在數秒之內你的變更就會生效。

#提升抽象層級

Cursor 全新的視覺編輯器將你在設計與程式碼之間的工作統一起來，幫助你更清楚表達自己的需求，讓實作不再受限於具體操作細節。

我們看見一個未來：代理將與網頁應用程式的開發更加緊密結合，而人們可以透過介面，更直接地把想法轉化為程式碼。這些功能正是朝這個方向邁出的一步。

閱讀 Browser 文件。在 Cursor 2.2 中了解所有新功能。