Cursor 推出瀏覽器視覺編輯器:設計與程式碼的無縫融合 Cursor 正式推出「瀏覽器視覺編輯器」(Browser Visual Editor),整合於Cursor 瀏覽器中。它將網頁應用程式、程式碼庫和視覺化編輯功能統一到一個視窗中,開發者透過直覺的拖曳、點擊和提示方式,直接操作和修改介面元素,從而橋接設計創意與程式碼實現的鴻溝。 核心功能與工作原理· 拖曳重排佈局:使用者可以直接在渲染的DOM 樹上拖曳元素,實現按鈕順序互換、區域旋轉或網格佈局測試。 AI 智能體會自動定位相關元件並更新底層程式碼,無需手動編寫CSS 或JSX。 · 測試元件狀態:針對React 等框架所建構的應用,側邊欄會即時顯示元件的屬性,讓使用者透過互動控制快速切換和驗證不同變體狀態。 · 視覺屬性調整:側邊欄整合滑桿、色彩選擇器、設計系統代幣等工具,支援即時微調樣式,例如使用即時取色器修改色彩、調整網格/彈性盒子佈局,或最佳化排版。所有變更均由AI 智能體同步到原始碼。 · 點擊提示修改:使用者點擊介面元素後,透過自然語言描述變更(如「讓這個變大」「將其變紅」或「交換它們的順序」),AI 智能體並行處理多個提示,並在數秒內即時應用更新。這種「點選式」互動讓修改過程更像設計師對話。 這些功能的工作流程統一了設計與編碼:從渲染視圖入手,透過拖曳或提示驅動AI 智能體修改程式碼,最終在瀏覽器中即時預覽。這種方法減少了“執行機制對創意的限制”,讓開發者能更精確地表達意圖。 益處與AI 整合視覺編輯器顯著提升了開發效率,尤其適合前端和全端開發者。它將抽象的程式碼邏輯轉化為可觸及的介面操作,幫助使用者更好地“闡述想法”,從而加速迭代周期。 Cursor AI 是核心驅動力:智慧體不僅處理程式碼更新,還支援多工並行執行,確保變更安全且可逆。 例如:“你可以點擊一個元素說'讓這個變大',同時在另一個上提示'將其變紅',第三個輸入'交換順序'。智能體並行運行,數秒內變更即生效。”這體現了Cursor 對“思想直達代碼”未來的願景。 Cursor 官方博客
正在載入線程內容
正在從 X 取得原始推文,整理成清爽的閱讀畫面。
通常只需幾秒鐘,請稍候。
