🔧 阿川の電商水電行
Cursor 又偷偷更新，這個功能太實用：Visual Editor for Cursor Browser
凌晨 1 點，我正要關電腦睡覺，螢幕左下角突然彈出一個彈窗：
Cursor 又上新功能了？帶著好奇我仔細看了下檔案：cursor.com/cn/docs/age…
我去，這個功能很重磅啊！
這次更新的 Visual Editor for Cursor Browser 是一個打破「設計」與「編碼」邊界的重磅功能，它讓 Cursor 不僅僅是編輯器，更是一個「能直接寫代碼的瀏覽器」。
核心價值
它解決了前端開發中最大的痛點——「在瀏覽器裡調好了樣式，還得手動回代碼裡改」。
現在，我們可以像在 Figma 或 Webflow 裡一樣直接拖曳、點擊、調整 UI，然後點擊 "Apply"，Cursor 的 Agent 就會自動把這些視覺變更翻譯成完美的代碼並寫入你的專案，實現了真正的「所見即所得（Design to Code）」。
如何體驗
首先確認版本是最新的：
打開 Cursor -> 右上角設定 -> Tools&MCP -> Browser Automation -> 選擇 Browser Tab:
然後啟動專案，會看到一個彈窗：
點擊 open 以後，就可以在 Cursor 裡啟動預覽前端專案：
右上角的功能主要是：選擇元素、截圖、打開開發者模式。
最有用的就是選擇元素後和 AI 對話，這無疑讓上下文更加具體，以後修改 UI 更方便了！
簡單的修改甚至我們都不需要和 AI 聊，直接上手在界面上改！
開啟選擇元素模式後，我們可以直接在預覽界面上拖曳修改 UI、調整文案、佈局結構等等，就和做設計一樣所見即所得。
Cursor 內置瀏覽器包含一個設計側邊欄，可直接在 Cursor 中修改選中元素的 Position Layout Padding color 等等，實現即時可視化調整下的同步設計與編碼。
朋友們，這個功能太實用了，實用到我都不敢告訴產品經理和設計師！
根據官方檔案，這個功能可以在這些場景：
- 測試應用
- 可視化地編輯佈局和樣式
- 執行無障礙審計
- 將設計轉換為代碼等等
歲數大了不能熬夜，我就先拋磚引玉，感興趣的朋友趕緊試試吧，晚安！
我的專欄《轉型 AI 工程師》正在預熱中，第一篇文章已發布，感興趣的朋友可以看看：xiaobot.net/post/8e8e06…
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
