Stagewise

一款為前端開發(fā)者設(shè)計的瀏覽器插件，它能將網(wǎng)頁UI元素和Cursor、Windsurf 等AI編程助手實時連接起來，從而實現(xiàn)精準(zhǔn)的代碼修改和樣式調(diào)整。

#Ai工具箱 #Ai編程建站

Stagewise 簡介

Stagewise是什么？

Stagewise 是一款為前端開發(fā)者設(shè)計的瀏覽器插件，它能將網(wǎng)頁 UI 元素和ai代碼編輯器實時連接起來。開發(fā)者可以在網(wǎng)頁上直接選中任意 UI 元素，插件會自動生成包含元素截圖、DOM 路徑和元數(shù)據(jù)（比如 className、style、組件名等）的上下文信息，并且可以一鍵發(fā)送給 Cursor、Windsurf 等AI編程助手，從而實現(xiàn)精準(zhǔn)的代碼修改和樣式調(diào)整。

Stagewise核心功能

智能元素捕捉與上下文傳遞：支持一鍵選擇網(wǎng)頁中的 UI 元素，并自動生成元素截圖、DOM 路徑、元數(shù)據(jù)，為 AI 代理提供精準(zhǔn)的上下文信息。比如選中按鈕后，AI 助手可以直接定位對應(yīng)的 React/Vue 組件，并基于截圖和 DOM 結(jié)構(gòu)生成修改建議。
多框架支持與無縫集成：兼容主流前端框架，像 React、Next.js、Vue、Nuxt.js、SvelteKit 等。它還能自動連接 VS Code 和 Cursor，無需手動配置開發(fā)環(huán)境。
動態(tài)調(diào)試與協(xié)作優(yōu)化：在調(diào)試場景下，可以快速定位樣式錯位問題，比如邊距異常或布局偏移。在協(xié)作場景中，設(shè)計師或團隊成員可以直接在網(wǎng)頁上標(biāo)注問題元素，AI 根據(jù)注釋生成修改代碼，減少溝通成本。
零生產(chǎn)環(huán)境影響：僅在開發(fā)模式下生效，不會影響生產(chǎn)環(huán)境的打包體積和性能。

Stagewise使用指南

安裝插件：在 Cursor 插件市場或 VS Code 擴展商店搜索“stagewise”并安裝，系統(tǒng)會自動部署本地 MCP 服務(wù)器?；蛘咄ㄟ^快捷鍵（Mac：Cmd+Shift+P / Windows：Ctrl+Shift+P）調(diào)出命令面板，執(zhí)行 setupToolbar 注入瀏覽器工具欄。
元素選擇與 AI 交互：在瀏覽器中選中目標(biāo)元素，Stagewise 會生成截圖 + DOM 結(jié)構(gòu) + 元數(shù)據(jù)，通過工具欄發(fā)送至 Cursor。AI 助手基于上下文生成代碼修改建議，用戶可以直接應(yīng)用或進行調(diào)整。
高級配置：支持自定義插件擴展功能，例如添加特定框架的元數(shù)據(jù)解析規(guī)則。