【Cursor实战】Cursor+Stagewise=前端可视化编程？

前言

小伙伴们大家好，我是小溪，见字如面。不知道大家在使用AI编程时有没有遇到这样的问题，当页面部分功能展示效果和我们预期不一样时，不管我们怎么要求AI修改，AI就像瞎子一样完全不知道改哪里，有时甚至把整个功能都改了也改不对，我们最终也只能骂骂咧咧的自己指定代码位置或者手动修改。如果你也有同样的困惑，那么你可以试试今天这个插件，这是我最近看到的一个非常实用的编辑器插件Stagewise，这个插件允许我们直接在网页上选择任意UI元素，然后一键发送给 Cursor 进行调整，实现点对点精准打击。

对以往实战案例感兴趣的小伙伴也可以看往期：

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插件

官网文档：stagewise.io/#quickstart

官网和Github上都有安装步骤，跟着安装步骤执行即可

在Cursor插件市场搜索"stagewise"，点击安装

自动注入工具栏

Stagewise插件安装完成后，直接使用快捷键 Ctrl/Cmd+Shift+P 调起命令面板，输入 setupToolbar

点击【Auto-setup】后会直接在Cursor对话框中填入如下提示词执行

vbnet 复制代码

````
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项目，初始后的效果如下：

javascript 复制代码

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 依赖库会被间接依赖无需手动依赖

第二步初始化工具栏，手动注册工具栏提供了两种注册方式，一种是组件化配置，一种是函数初始化配置

组件化方式：

xml 复制代码

// 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>

函数初始化配置：

css 复制代码

\$ npm i -D @stagewise/toolbar

在项目中添加如下初始化配置

typescript 复制代码

// 1. Import the toolbar
import { initToolbar, type ToolbarConfig, type ToolbarPlugin } from '@stagewise/toolbar';
// 2. Define your toolbar configuration
const stagewiseConfig: ToolbarConfig = {
  plugins: \[],
};
// 3. Initialize the toolbar when your app starts
// Framework-agnostic approach - call this when your app initializes
function setupStagewise() {
  // Only initialize once and only in development mode
  if (import.meta.env.DEV) {
    initToolbar(stagewiseConfig);
  }
}
// Call the setup function when appropriate for your framework
setupStagewise();

基本使用

注意这里可能有个坑，在使用Cursor时只开启一个窗口，打开多个窗口可能导致消息发送异常。

StagewiseToolbar工具栏操作

点击工具栏，将鼠标移动到对应UI元素上，这时候会出现如下所示的选择框，点击【+】或者选择框会选中该UI元素，如果想退出元素选择，直接点击工具栏上的【Close menu esc】或者直接使用【ESC】键取消

选中后再次点击会删除之前的选中状态

定点UI调整

选择好要调整的UI元素后，就可以在工具栏中输入要调整内容的提示词了

复制代码

将这个背景色改为左右渐变色

点击发送，stagewise就会给Cursor发送请求

对应的提示词如下

xml 复制代码

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 插件提供了插件构建脚手架（目前脚手架报错暂不可用，版本：[email protected]）

lua 复制代码

$ npx create-stagewise-plugin

脚手架不可用，我们也可以通过配置自定义stagewise 插件，这里以函数初始化方式配置为例，添加一个简单的stagewise 插件事件

typescript 复制代码

// 1. Import the toolbar
import { 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 configuration
const stagewiseConfig: ToolbarConfig = {
  plugins: [
    ExamplePlugin,
  ],
};
// 3. Initialize the toolbar when your app starts
// Framework-agnostic approach - call this when your app initializes
function setupStagewise() {
  // Only initialize once and only in development mode
  if (import.meta.env.DEV) {
    initToolbar(stagewiseConfig);
  }
}
// Call the setup function when appropriate for your framework
setupStagewise();

配置完成后在StagewiseToolbar工具栏上点击【...】就会弹出我们定义的插件事件

点击事件会弹起alert提示

目前Stagewise插件文档还不够完善，关于Stagewise插件的内容我们可以等文档完善后继续探索。

总结

Stagewise插件的使用需要对项目有一定的侵入性，需要在Cursor中安装Stagewise插件并且在项目中初始化Stagewise依赖库，但是带来的效果也是不错的，可以直接可视化选择UI元素，无需再像BrowserTools那样打开元素检查器来选择，可以大大降低AI修改局部UI的难题。

友情提示

见原文：【Cursor实战】Cursor+Stagewise=前端可视化编程？

本文同步自微信公众号 "程序员小溪" ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。