前端神器推荐——Cursor+Stagewise太方便啦！最近，AI工具风生水起，开发提效工具层出不穷。在真实开发场景中

最近，AI工具风生水起，开发提效工具层出不穷。在真实开发场景中，我用的比较多的是Stagewise工具，大大提升了前端页面元素样式修改的效率。现将我的使用体验与大家分享！

一、什么是Stagewise

Stagewise 是一款面向前端开发者的浏览器工具，能够捕捉网页UI 元素并生成元素截图、DOM 路径和元数据等信息。 stagewise插件

二、怎么使用Stagewise

在使用之前需要准备

cursor app
前端项目

注意：stagewise目前只支持React、Next.js、Vue、Nuxt和Svelte这几个主流框架，所以这里的前端项目得是这几个主流框架的。

插件安装

在这里插入图片描述我们在cursor的应用市场中搜索stagewise，点击安装，此时插件就安装完毕

项目中注入

针对不同的前端项目，我们要在项目中安装注入。

首先，按下快捷键，输入setup，选中stagewise

Mac快捷键【command + Shift + P】 Wins【ctrl + Shift + P】在这里插入图片描述

点击后，在cursor对话框中会出现提示词，点击运行提示词

提示词如下：

or 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>
 - Install the required stagewise package(s) for the project's framework
 - 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:
 - Appears only in development mode
 - Is not included in production builds
 - Does not lead to any linting errors
</expected_outcome>

How can I resolve this? If you propose a fix, please make it concise.

在cursor的提示下安装

例如，我的项目是react项目，cursor会帮我安装好react框架对应的stagewise，截图如下：在这里插入图片描述全部accept后，就可以了。 可以看出Stagewise关键特性： ✅ 仅开发模式：确保只在开发环境加载 ✅ 不包含在生产构建：确保 stagewise 包被排除在生产包之外 ✅ 无 linting 错误：使用 any 类型避免 TypeScript 错误 ✅ 浏览器初始加载 ✅ 纯浏览器环境：typeof window !== 'undefined' 检查确保不在 SSR 环境执行 ✅ 错误处理：静默处理加载失败，不影响应用正常运行