Stagewise是什么？

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

Stagewise核心功能

• 智能元素捕捉與上下文傳遞：支持一鍵選擇網頁中的 UI 元素，并自動生成元素截圖、DOM 路徑、元數據，為 AI 代理提供精準的上下文信息。比如選中按鈕后，AI 助手可以直接定位對應的 React/Vue 組件，并基于截圖和 DOM 結構生成修改建議。

• 多框架支持與無縫集成：兼容主流前端框架，像 React、Next.js、Vue、Nuxt.js、SvelteKit 等。它還能自動連接 VS Code 和 Cursor，無需手動配置開發環境。

• 動態調試與協作優化：在調試場景下，可以快速定位樣式錯位問題，比如邊距異常或布局偏移。在協作場景中，設計師或團隊成員可以直接在網頁上標注問題元素，AI 根據注釋生成修改代碼，減少溝通成本。

• 零生產環境影響：僅在開發模式下生效，不會影響生產環境的打包體積和性能。

Stagewise使用指南

1. 安裝插件：在 Cursor 插件市場或 VS Code 擴展商店搜索“stagewise”并安裝，系統會自動部署本地 MCP 服務器。或者通過快捷鍵（Mac：Cmd+Shift+P / Windows：Ctrl+Shift+P）調出命令面板，執行 setupToolbar 注入瀏覽器工具欄。

2. 元素選擇與 AI 交互：在瀏覽器中選中目標元素，Stagewise 會生成截圖 + DOM 結構 + 元數據，通過工具欄發送至 Cursor。AI 助手基于上下文生成代碼修改建議，用戶可以直接應用或進行調整。

3. 高級配置：支持自定義插件擴展功能，例如添加特定框架的元數據解析規則。

Stagewise適用場景

• UI 微調：無需手動告訴 AI class 名稱，直接選中元素即可調整樣式。

• 低代碼開發：在混合 UI 和邏輯的場景中，快速修改組件行為。

• 多端同步：適配不同設備的響應式布局時，批量調整元素屬性。

Stagewise技術架構

• 實時通信：基于 WebSocket 或類似協議，確保低延遲數據傳輸。

• 插件化設計：允許開發者擴展功能，例如集成自定義 AI 模型或第三方工具。

• 框架無關性：通過動態解析 DOM 結構，適配不同技術棧的組件層級。

開源地址

https://github.com/stagewise-io/stagewise