Stagewise

Stagewise是什么？

Stagewise是一款为前端开发者设计的浏览器工具栏插件，把你的屏幕和 AI 代码编辑器实时连接在一起，实现真正的《想看什么点什么》式的《所见即所得式开发》，把网页上的 UI 元素与 ai 代码编辑器实时连接起来。我们在页面上随时可以把选中的任意 ui 元素取出来，并得到一个由元素截图+DOM 路径+元素的一些元数据（如 className、style、组件名字等等）组成的上下文信息，同时只需要点击鼠标一个按键就可以一键发出去（支持 Cursor, Windsurf 等），做到精准的修图改码行为。

Stagewise官网网址：https://stagewise.io/

核心功能

1.UI元素精准捕捉

• 一键选中元素：浏览器内随便点击一个UI元素（按钮、表单、卡片等等），Stagewise 就能够一键将这个元素的 DOMPath、样式 CSS、图片与坐标等相关信息打包保存并给出标注截屏。
• 上下文数据封装：把元素的 DOM 框架、class ID ComponentName 等相关的包裹相关信息及其对应截图+坐标位置以包络数据的方式呈现出来，为 AI 提供精准的修改依据。

2.AI 协作与代码生成

• 一键发送给 AI：直接将捕获到的上下文数据发送给 Cursor、Windsurf 等AI编程助手，AI根据这些进行生成或者编辑代码
• 实时反馈与验证：AI 生成代码后，Stagewise 可以在画面上做上下左右翻页界面内容显示与隐藏同时刷新浏览器页面查看效果（不需要回传服务器），形成“界面需求→AI 代码→效果验证”的闭环。 

技术特点：轻量、灵活、跨框架

1.多框架支持：Stage 深度集成 React/Next.js/Vue/Nuxt.js 等现代框架，且采用了零配置即用的对接机制，实现开发流程加速。其定位为智能开发助手，在保留人工编码灵活性的同时，将机械性工作减少80%以上。”

2.轻量高效：只在 dev 编辑时生效，并不会增加产品打包体积，不改变性能。

3.自定义扩展

• 插件系统：插件系统：开放接口让开发者添加自己需要的插件（如设计系统的插件、组件信息插件等）。
• 配置文件：通过配置文件自定义行为，或连接用户的 MCP 服务器，满足个性化需求。

使用场景

• UI 微调：无需手动告诉 AI class 名称，直接选中元素即可调整样式。
• 低代码开发：在混合 UI 和逻辑的场景中，快速修改组件行为。
• 多端同步：适配不同设备的响应式布局时，批量调整元素属性。

安装与使用步骤

1. 安装插件：在 VS Code 市场或 Cursor 插件市场搜索“Stagewise”并安装。
2. 注入工具栏：通过快捷键（如 CMD + Shift + P）调起命令面板，执行 setupToolbar 初始化工具栏。
3. 选择元素：点击浏览器中的“选择元素”按钮，框选目标 UI 组件。
4. 添加评论：在界面上输入修改需求（如“按钮颜色改为品牌蓝”）。
5. 发送给 AI：点击“发送给 AI”，AI 生成代码后，界面自动刷新以验证效果。

Stagewise安装与使用步骤流程图图示

常见问题解答（FAQ）

Q1. Stagewise支持多元素同时修改吗？

A1：

• 当前版本：暂不支持同时选中多个UI元素，需逐个操作。
• 未来计划：团队正在开发批量修改功能，预计后续版本发布。

Q2. Stagewise会收集用户数据吗？

A2：

• 数据收集：仅捕获开发者主动选中的UI元素信息（如DOM路径、样式），不收集用户隐私数据。
• 安全性：数据传输加密，支持本地部署（需连接用户自有MCP服务器）。

Q3. Stagewise与传统开发流程的协作关系？

A3：

• 定位：作为前端开发的辅助工具，加速UI到代码的映射，而非完全替代手动编码。
• 适用场景：适合快速迭代和跨团队协作，复杂逻辑仍需开发者介入。