前言
小伙伴们大家好，我是小溪，见字如面。不知道大家在使用AI编程时有没有遇到这样的问题，当页面部分功能展示效果和我们预期不一样时，不管我们怎么要求AI修改，AI就像瞎子一样完全不知道改哪里，有时甚至把整个功能都改了也改不对，我们最终也只能骂骂咧咧的自己指定代码位置或者手动修改。如果你也有同样的困惑，那么你可以试试今天这个插件，这是我最近看到的一个非常实用的编辑器插件Stagewise，这个插件允许我们直接在网页上选择任意UI元素，然后一键发送给 Cursor 进行调整，实现点对点精准打击。
对以往实战案例感兴趣的小伙伴也可以看往期：
- 【Cursor实战】Cursor+MiniMax MCP赋能文章阅读【Cursor实战】Cursor+Manim生成演示动画【Cursor实战】Cursor+EdgeOne Pages MCP实现一句话建站？【Cursor实战】使用多维表格作为数据库开发一款文章收录插件(一)【Cursor实战】使用多维表格作为数据库开发一款文章收录插件(二)【Cursor实战】提高前端开发效率的两个MCP，无需打开控制台也可轻松改bug
Stagewise简介
Stagewise 是一款面向前端开发者的浏览器工具，能够捕捉网页 UI 元素并生成元素截图、DOM 路径和元数据等信息。它支持将这些信息快速发送给 AI 编码助手如 Cursor 和 Windsurf，以便直接修改样式或组件逻辑。Stagewise 无缝集成了主流框架和 AI 工具，提供插件系统，旨在提升前端开发的效率和体验。
官网地址：stagewise.io/
可以看到目前是支持 VS Code 和 Cursor 的
Github地址：github.com/stagewise-i…
在Github上也是有1.9k Star的高热度
Stagewise功能特性
- ⚡ 即用即走使用您自己的配置文件进行自定义🔌 连接到您自己的 MCP 服务器📦 不会影响包的大小🧠 向您的 AI 代理发送 DOM 元素、屏幕截图和元数据👇 在浏览器中直接对活体元素进行评论🧪 配备了用于 React、Vue 和 Svelte 的Playgrounds
安装配置
安装Stagewise插件
官网和Github上都有安装步骤，跟着安装步骤执行即可
在Cursor插件市场搜索“stagewise”，点击安装
自动注入工具栏
Stagewise插件安装完成后，直接使用快捷键 Ctrl/Cmd+Shift+P 调起命令面板，输入 setupToolbar
点击【Auto-setup】后会直接在Cursor对话框中填入如下提示词执行
````For the code present, we get this error:`````` Ah, sorry, it wasn't an error. The user has submitted a change request. Here is the request, please implement it: ```<task> Implement the stagewise dev-tool into an existing web project to provide AI-powered editing capabilities through a browser toolbar.</task><context> stagewise is a browser toolbar that connects frontend UI to code AI agents in your code editor. It allows developers to select elements in a web app, leave comments, and let AI agents make changes based on that context.</context><requirements> 1. Install the required stagewise package(s) for the project's framework 2. Integrate the stagewise toolbar into the project structure (ensure it only runs in development mode)</requirements><implementation_steps> <step_0> Identify the project's package manager (npm, yarn, pnpm, etc.). You must use the same package manager to install the stagewise package. </step_0> <step_1> Identify the project's frontend framework (React, Next.js, Vue, Svelte, etc.) and install the appropriate stagewise package. - For framework-agnostic (as fallback): @stagewise/toolbar - For React: @stagewise/toolbar-react - For Next.js: @stagewise/toolbar-next - For Vue/Nuxt: @stagewise/toolbar-vue </step_1> <step_2> Locate the appropriate entry point file for toolbar integration based on the framework: - React: src/main.tsx or similar entry file - Next.js: src/app/layout.tsx or similar root layout - Vue: src/App.vue or main entry file - Nuxt: app.vue or a layout file - SvelteKit: src/routes/+layout.svelte </step_2> <step_3> Create a basic toolbar configuration object with empty plugins array: ```typescript const stagewiseConfig = { plugins: [] }; ``` </step_3> <step_4> Implement the toolbar using the framework-specific approach: - For React/React-based frameworks: ```tsx import { StagewiseToolbar } from '@stagewise/toolbar-react'; // Add <StagewiseToolbar config={stagewiseConfig} /> to your component ``` - For Next.js: ```tsx import { StagewiseToolbar } from '@stagewise/toolbar-next'; // Add in layout.tsx: <StagewiseToolbar config={stagewiseConfig} /> ``` - For Vue/Nuxt: ```vue import { StagewiseToolbar } from '@stagewise/toolbar-vue'; // Add in template: <StagewiseToolbar :config="config" /> ``` - For framework-agnostic: ```ts import { initToolbar } from '@stagewise/toolbar'; // Call initToolbar(stagewiseConfig) in development mode ``` </step_4> <step_5> Ensure the toolbar only runs in development mode: ```typescript if (process.env.NODE_ENV === 'development') { // Initialize toolbar here } ``` </step_5></implementation_steps><important_notes> - The toolbar should NOT be included in production builds - For React apps, initialize the toolbar in a separate React root to avoid interfering with the main app</important_notes><framework_specific_integrations> <react> Create a separate React root for the toolbar to avoid interfering with the main app tree. Use createRoot to render the StagewiseToolbar component in a dedicated DOM element. </react> <next> Include the StagewiseToolbar component in the root layout file (layout.tsx). </next> <vue> Add the StagewiseToolbar component to your main App component. </vue> <nuxt> Wrap the StagewiseToolbar component in a ClientOnly component to ensure it only renders on the client side. </nuxt> <svelte> Use onMount and browser check to ensure the toolbar only initializes on the client side. Create a wrapper component if needed for cleaner integration. </svelte></framework_specific_integrations><expected_outcome> A properly integrated stagewise toolbar that: 1. Appears only in development mode 2. Is not included in production builds 3. Does not lead to any linting errors</expected_outcome>```How can I resolve this? If you propose a fix, please make it concise.````这段提示词的大致意思根据项目语言安装对应的 @stagewise/toolbar-开发语言 依赖包并在项目中完成初始化，比如我这里使用的是Vite+Vue项目，初始后的效果如下：
import { defineAsyncComponent } from 'vue'import { StagewiseToolbar } from '@stagewise/toolbar-vue'// 异步导入组件const HelloWorld = defineAsyncComponent(() => import('./components/HelloWorld.vue'))// 创建stagewise配置const stagewiseConfig = { plugins: \[]} </script> <template> <div> \<a href="[https://vite.dev" target="\_blank">](https://vite.dev" target="_blank">) \<img src="/vite.svg" class="logo" alt="Vite logo" /> </a> \<a href="[https://vuejs.org/" target="\_blank">](https://vuejs.org/" target="_blank">) \<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /> </a> </div> \<HelloWorld msg="Vite + Vue" /> <!-- 工具栏只会在开发模式下渲染 --> \<StagewiseToolbar :config="stagewiseConfig" /> </template>在浏览器中预览效可以看到，StagewiseToolbar工具栏在页面底部配置了一个对话框
手动注册工具栏
当然你也可以手动完成集成和初始化（推荐，自动配置依赖模型理解能力有时会出错）。
第一步手动安装依赖，注意这里使用的是 @stagewise/toolbar 依赖库，如果你安装了 @stagewise/toolbar-开发语言 依赖包，@stagewise/toolbar 依赖库会被间接依赖无需手动依赖
第二步初始化工具栏，手动注册工具栏提供了两种注册方式，一种是 组件化配置，一种是 函数初始化配置
组件化方式：
// src/App.vue\<script setup lang="ts">import { StagewiseToolbar, type ToolbarConfig } from '@stagewise/toolbar-vue';const config: ToolbarConfig = { plugins: \[], // Add your custom plugins here}; </script> <template> \<StagewiseToolbar :config="config" /> <div> <!-- Your app content --> </div> </template>函数初始化配置：
\$ npm i -D @stagewise/toolbar在项目中添加如下初始化配置
// 1. Import the toolbarimport { initToolbar, type ToolbarConfig, type ToolbarPlugin } from '@stagewise/toolbar';// 2. Define your toolbar configurationconst stagewiseConfig: ToolbarConfig = { plugins: \[],};// 3. Initialize the toolbar when your app starts// Framework-agnostic approach - call this when your app initializesfunction setupStagewise() { // Only initialize once and only in development mode if (import.meta.env.DEV) { initToolbar(stagewiseConfig); }}// Call the setup function when appropriate for your frameworksetupStagewise();基本使用
注意这里可能有个坑，在使用Cursor时只开启一个窗口，打开多个窗口可能导致消息发送异常。
StagewiseToolbar工具栏操作
点击工具栏，将鼠标移动到对应UI元素上，这时候会出现如下所示的选择框，点击【+】或者选择框会选中该UI元素，如果想退出元素选择，直接点击工具栏上的【Close menu esc】或者直接使用【ESC】键取消
选中后再次点击会删除之前的选中状态
定点UI调整
选择好要调整的UI元素后，就可以在工具栏中输入要调整内容的提示词了
将这个背景色改为左右渐变色点击发送，stagewise就会给Cursor发送请求
对应的提示词如下
For the code present, we get this error:`````` Ah, sorry, it wasn't an error. The user has submitted a change request. Here is the request, please implement it: \`\`\` <request> \<user\_goal>将这个背景色改为左右渐变色\</user\_goal> <url><http://localhost:5173/></url> \<selected\_elements> \<element index="1"> <tag>h1</tag> <attributes> <data-v-e17ea971></data-v-e17ea971> </attributes> <text>Vite + Vue</text> \<structural\_context> <parent> <tag>div</tag> <id>app</id> </parent> \</structural\_context> <styles> <color>rgb(33, 53, 71)</color> <backgroundColor>rgba(0, 0, 0, 0)</backgroundColor> <fontSize>51.2px</fontSize> <fontWeight>700</fontWeight> <display>block</display> </styles> </element> \</selected\_elements> </request> How can I resolve this? If you propose a fix, please make it concise.提示词的大概意思就是提交了我们填写的调整需求以及选中的UI元素的具体属性，调整完成后实现的效果如下
Stagewise插件
目前官方文档较为粗略，感兴趣的小伙伴可以再等等
stagewise 插件允许我们通过自定义 UI、操作和上下文扩展浏览器工具栏，以支持我们的 AI 代码工作流程。插件可以提供新的按钮、面板，甚至自定义工具。
stagewise 插件提供了插件构建脚手架（目前脚手架报错暂不可用，版本：create-stagewise-plugin@0.1.0-alpha.2）
$ npx create-stagewise-plugin脚手架不可用，我们也可以通过配置自定义stagewise 插件，这里以函数初始化方式配置为例，添加一个简单的stagewise 插件事件
// 1. Import the toolbarimport { initToolbar, type ToolbarConfig, type ToolbarPlugin } from '@stagewise/toolbar';const ExamplePlugin: ToolbarPlugin = { name: 'example-plugin', description: 'Adds additional context for your components', shortInfoForPrompt: () => { return "Context information about the selected element"; }, mcp: null, actions: [ { name: 'Example Action', description: 'Demonstrates a custom action', execute: () => { window.alert('This is a custom action!'); }, }, ],};// 2. Define your toolbar configurationconst stagewiseConfig: ToolbarConfig = { plugins: [ ExamplePlugin, ],};// 3. Initialize the toolbar when your app starts// Framework-agnostic approach - call this when your app initializesfunction setupStagewise() { // Only initialize once and only in development mode if (import.meta.env.DEV) { initToolbar(stagewiseConfig); }}// Call the setup function when appropriate for your frameworksetupStagewise();配置完成后在StagewiseToolbar工具栏上点击【...】就会弹出我们定义的插件事件
点击事件会弹起alert提示
目前Stagewise插件文档还不够完善，关于Stagewise插件的内容我们可以等文档完善后继续探索。
总结
Stagewise插件的使用需要对项目有一定的侵入性，需要在Cursor中安装Stagewise插件并且在项目中初始化Stagewise依赖库，但是带来的效果也是不错的，可以直接可视化选择UI元素，无需再像BrowserTools那样打开元素检查器来选择，可以大大降低AI修改局部UI的难题。
友情提示
见原文：【Cursor实战】Cursor+Stagewise=前端可视化编程？
本文同步自微信公众号 "程序员小溪" ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。
