从UI修改到AI提效！前端开发者的开源神器，一键选择网页元素与AI对话！ - 文章 - 开发者社区

前端开发 + AI 助手更丝滑了！试试这个「所见即所得」的开源工具：Stagewise 。

picture.image

在用 Cursor、Windsurf、Trae 等 AI 编程工具开发前端页面时，我们可能只是想改个按钮样式，却还得手动描述清楚它在页面哪儿、class 名是什么、代码在第几行.....

这种对话方式不仅效率低，AI 也常常理解不到位。

而 Stagewise 正是为了解决这个问题而生：它让你能像在 Figma 或 Chrome DevTools 一样，点选页面元素并直接把它发送给 AI 助手进行修改！

Stagewise 是什么？

picture.image

Stagewise 是一款专为前端开发者设计的浏览器 UI 元素捕捉与 AI 协作工具，能让你在网页上点选任意元素，快速生成包括：
元素截图、DOM 路径结构、元数据（如 className、style、id、组件名等）。

并可一键将这些信息发送给像 Cursor、Windsurf 这样的 AI 编码助手，让它直接定位并修改样式或组件逻辑。

无缝集成 Cursor、GitHub Copilot 和 Windsurf，支持 React、Next.js、Vue、Nuxt.js 等主流框架，还提供灵活的插件系统，专为前端开发者量身定制。

它让 UI 修改变得丝滑无比，效率直接起飞。

核心功能

• 一键选元素 ：直接在浏览器中选择任意 UI 元素并发送给 AI 助手。
• 无缝连接 VSCode ：自动连接 VS Code 扩展，无需额外配置。
• 多前端框架支持 ：支持多种前端框架：React、Vue、Next.js、SvelteKit 等。
• 自定义插件系统 ：支持开发者添加自定义插件，扩展功能，灵活性拉满。
• 上下文精准传递 ：提供 DOM 元素、截图和元数据给 AI 代理。
• 零打包负担 ：仅在开发模式下生效，不影响生产环境的打包体积，保持应用性能。

快速入手

因为是主要面向前端开发者而设计的，所以安装方式对于开发者来说也是比较简单的。

① 安装 vs-code 扩展

在VS Code市场安装Stagewise扩展（marketplace.visualstudio.com）。安装后，扩展会自动部署MCP服务器，点击“Enable”即可。

picture.image

② 安装并注入工具栏

在Cursor中，按CMD + Shift + P，输入 setupToolbar，执行命令，工具栏将自动初始化

或者可以通过代码库进行安装


 
 
 
 
   
pnpm i -D @stagewise/toolbar

将工具栏注入到您的应用程序开发模式中


 
 
 
 
   
// 1. Import the toolbar  
import { initToolbar } from '@stagewise/toolbar';  
  
// 2. Define your toolbar configuration  
const stagewiseConfig = {  
  plugins: [  
    {  
      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!');  
          },  
        },  
      ],  
    },  
  ],  
};  
  
// 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 (process.env.NODE\_ENV === 'development') {  
    initToolbar(stagewiseConfig);  
  }  
}  
  
// Call the setup function when appropriate for your framework  
setupStagewise();