Stagewise

Stagewise 简介

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