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使用指南
安装插件：在 Cursor 插件市场或 VS Code 扩展商店搜索“stagewise”并安装，系统会自动部署本地 MCP 服务器。或者通过快捷键（Mac：Cmd+Shift+P / Windows：Ctrl+Shift+P）调出命令面板，执行 setupToolbar 注入浏览器工具栏。
元素选择与 AI 交互：在浏览器中选中目标元素，Stagewise 会生成截图 + DOM 结构 + 元数据，通过工具栏发送至 Cursor。AI 助手基于上下文生成代码修改建议，用户可以直接应用或进行调整。
高级配置：支持自定义插件扩展功能，例如添加特定框架的元数据解析规则。
Stagewise适用场景
UI 微调：无需手动告知 AI class 名称，直接选中元素即可调整样式。
低代码开发：在混合 UI 和逻辑的场景中，快速修改组件行为。
多端同步：适配不同设备的响应式布局时，批量调整元素属性。
Stagewise技术架构
实时通信：基于 WebSocket 或类似协议，确保低延迟数据传输。
插件化设计：允许开发者扩展功能，例如集成自定义 AI 模型或第三方工具。
框架无关性：通过动态解析 DOM 结构，适配不同技术栈的组件层级。
开源地址
https://github.com/stagewise-io/stagewise
发表评论 取消回复