Stagewise 是一款专为前端开发者设计的开源工具，通过在浏览器中嵌入工具栏，将 web 应用的 UI 直接与代码编辑器中的 AI 编码代理（如 Cursor、GitHub Copilot、Windsurf）连接。开发者只需点击页面上的 UI 元素并输入自然语言提示，Stagewise 即可捕获 DOM 元素的屏幕截图和元数据，生成精准的上下文信息，传递给 AI 代理，从而实现快速、准确的代码修改或组件调整。这种“点选并提示”的方式消除了手动描述 UI 问题或复制文件路径的麻烦，大幅提升开发效率，尤其适合复杂 web 应用的开发与维护。

功能与特点

• 视觉提示：开发者可直接在浏览器中点击 UI 元素（如按钮、div），添加注释或修改请求，Stagewise 自动生成包含 DOM 上下文和截图的提示，传递给 AI 代理。

• 实时上下文：通过捕获选定元素的元数据（如 CSS 样式、HTML 结构），确保 AI 生成的代码与项目风格一致，减少手动调整。

• 框架支持：提供针对 React、Next.js、Vue、Nuxt.js、Angular 和 Svelte 的专用工具栏组件（如 @stagewise/toolbar-react），无缝集成到主流前端框架。

• 开源与可扩展：基于 AGPL-3.0 许可，开发者可通过 GitHub 访问完整代码，自由扩展插件或定制功能，支持个性化工作流。

• 快速设置：通过 VS Code 扩展和 NPM 包，30 秒内即可完成安装，工具栏在开发模式下自动连接，操作简便。

• 多代理兼容：支持 Cursor、GitHub Copilot 和 Windsurf，未来计划扩展更多 AI 代理支持（如 Cline）。

• 社区驱动：活跃的 GitHub 仓库（超过 3000 星）和 Discord 社区提供支持，开发者可贡献代码或报告问题。

使用场景

Stagewise 适用于多种前端开发场景。独立开发者可通过其快速调整 UI 组件样式或功能，如将按钮颜色改为品牌色或添加交互效果；开发团队可利用其视觉提示功能简化 UI 调试，减少沟通成本，尤其在处理复杂布局或遗留代码时。例如，开发者只需点击页面上的错误按钮，输入“将此按钮居中并添加 hover 效果”，Stagewise 便会生成相关代码建议，供 AI 代理执行。非技术人员（如产品经理）也能通过直观的点选方式描述 UI 需求，促进协作。此外，Stagewise 的开源特性使其成为 AI 工具开发者的理想选择，可用于构建定制化的前端开发工作流。

独特优势

Stagewise 的“视觉编码”理念革新了 AI 辅助前端开发，类似于 WYSIWYG 编辑器的直观性，但通过 AI 实现更智能的代码生成。其直接捕获 DOM 上下文的能力优于传统提示输入方式，减少了描述不准确导致的错误。相比 Vercel 的 v0，Stagewise 更专注于现有项目的实时 UI 修改，而非全新 UI 构建。开源模式和对消费级硬件的优化（无需高性能 GPU）使其对小型团队和个人开发者极具吸引力。用户反馈（如 Reddit）显示，Stagewise 在简单项目中表现优异，尽管在复杂 DOM 结构（如游戏开发）中可能需进一步优化。

用户体验

Stagewise 的设置过程简单，通过 VS Code 扩展市场安装扩展并添加框架特定包即可。工具栏在开发模式下自动显示于浏览器右下角，操作直观。文档详尽，示例项目覆盖主流框架，社区支持通过 Discord 和 GitHub 提供快速反馈。尽管部分用户报告在 Angular 或非标准 DOM 项目中存在兼容性问题，开发团队正积极改进，计划推出更广泛的框架支持。