使用Cursor有个痛点相信很多前端开发者都遇到过：当你想要修改页面上某个具体元素时，往往需要手动复制粘贴大量的文件路径和代码片段到提示词中，AI才能理解你要改哪里。这个过程既繁琐又容易出错。
最近有个开源项目： Stagewise是一款能与 Cursor 无缝协作的浏览器工具栏，它真的像是Cursor最强微调辅助。
你可以在浏览器里直接选中一个元素，写个注释，AI 就能在编辑器里帮你写好逻辑。
像这样：
今天苏米就手把手教大家如何使用一个叫Stagewise的开源神器来解决这个问题，让Cursor能够直接"看到"你的前端界面，实现真正的可视化AI编程。这个工具里面也有涉及到浏览器插件和代码编辑器扩展的配合使用，可以带大家快速了解和认识这个工具的实际应用能力。
什么是Stagewise？
Stagewise是一个完全开源的AI前端开发工具，以浏览器工具栏的形式呈现，能够将前端UI与代码编辑器中的AI智能体相连。
简单来说，Stagewise 是一个浏览器工具栏，把你在网页上选中的 UI 元素、注释信息等上下文，实时传给代码编辑器里的 AI Agent。。
这个工具最大的亮点是什么呢？你可以直接在浏览器中选择任何页面元素，添加注释说明你想要做什么修改，然后Stagewise会自动将元素的截图、DOM结构、样式信息等关键数据发送给Cursor中的AI，让AI能够精准理解你的需求并生成相应的代码。
核心功能
开箱即用的便捷性
-
安装后立即可用，无需复杂配置
-
支持自定义插件扩展功能
-
自动提取DOM元素和元数据信息
-
内置React、Vue、Svelte等多种框架示例
强大的上下文理解能力 通过浏览器选择UI元素，提取包括截图在内的上下文信息，并将这些数据直接传递给AI编程助手。这意味着AI不再需要你手动描述页面结构，而是能够直接"看到"你要修改的内容。
快速上手指南（基于 Cursor）
下面我们就来动手搭建一套能跑起来的 Stagewise 开发环境。
步骤一：安装插件（支持 Cursor、Windsurf、VS Code）
直接在Cursor插件市场搜索“stagewise”，认准这个插件，点击安装。
安装完后，出现一个弹窗，直接让它自动设置就完事了
步骤二：注入 Toolbar 到你的本地项目中
有两种方式，我建议用自动安装方式，方便快捷：
推荐方式：AI 自动注入（Cursor 内完成）
在 Cursor 中按下 Cmd + Shift + P输入 setupToolbar，然后按回车执行命令
运行后就能自动完成注入，会出现提示词，直接发送就可以了！
手动注入方式（适用于任意框架）
安装依赖：
pnpm i -D @stagewise/toolbar
在项目入口文件中初始化：
import { initToolbar } from '@stagewise/toolbar';
const stagewiseConfig = {
plugins: [], // 你可以在这里扩展插件功能
};
function setupStagewise() {
if (process.env.NODE_ENV === 'development') {
initToolbar(stagewiseConfig);
}
}
setupStagewise();
注意：这个 Toolbar 只在开发模式下启用，别忘了环境判断。
框架适配支持情况
Stagewise 已经针对多个主流框架做了集成封装，可以直接使用专用组件版本：
| 框架 | 安装包名称 |
|---|---|
| React | @stagewise/toolbar-react |
| Next.js | @stagewise/toolbar-next |
| Vue/Nuxt | @stagewise/toolbar-vue |
| Svelte | 使用通用包 + 生命周期钩子 |
只需要引入对应的 toolbar 组件，在项目中初始化，即可无缝启用。
实际使用体验
安装完成后，你会在浏览器页面上看到一个浮动的工具栏，查看设置可能看到关联的项目信息。
使用流程非常直观：
选择元素：在网页上点击你想要修改的任何元素
添加注释：描述你想要做的修改，比如"把这个按钮改成红色"
AI自动执行：Stagewise会将元素信息发送给Cursor，AI会自动定位到相关代码并进行修改
整个过程就像是在跟AI进行可视化对话，不再需要你手动寻找文件、复制代码路径这些繁琐操作。
注意事项
目前Stagewise在多窗口场景下还有一个小问题：如果你同时打开了多个Cursor窗口，工具栏可能会将提示发送到错误的窗口。建议在使用时保持只有一个Cursor窗口打开，官方表示修复方案正在开发中。
另外，Stagewise目前对Cursor的支持是最完善的，GitHub Copilot和其他平台的支持还在开发当中。
如果自动注入不成功，可以尝试手动注入！
总结
Stagewise为Cursor带来了真正的可视化AI编程体验，让AI能够直接理解你的前端界面，大大提升了开发效率。30秒的安装过程，开箱即用的体验，再加上完全开源的特性，让它成为了Cursor用户的必备神器。
如果你也在使用Cursor进行前端开发，强烈建议试试这个工具。相信它会给你带来全新的AI编程体验。
项目地址：