Stagewise初探，前端代码效率飞升

Stagewise 是一款面向前端开发者的浏览器工具，通过连接浏览器 UI 元素与 AI 代码助手（如 Cursor），实现‌可视化调试和智能代码修改‌，显著提升开发效率。以下是其使用方法的详细步骤

环境准备与安装

1. ‌确保开发环境‌：安装 Node.js（版本 ≥ 18.0）。‌‌3

2. ‌安装编辑器插件‌：在 Cursor、VS Code 等编辑器的扩展市场中搜索并安装 Stagewise 插件。‌‌1‌‌4

3. ‌安装项目依赖‌：根据项目框架选择对应的 Stagewise 包安装，例如：

   • Vue 项目：pnpm add -D @stagewise/toolbar-vue @stagewise-plugins/vue‌‌5‌‌6
   • React 项目：npm install @stagewise/toolbar-react‌‌1‌‌6

集成工具栏到项目

集成方式分为自动和手动两种，推荐优先使用自动方式：

1. ‌自动集成（推荐） ‌：

   • 在编辑器中按下快捷键（Mac：Command + Shift + P，Win：Ctrl + Shift + P），输入 setupToolbar 并执行。‌‌1‌‌4
   • 插件会自动在项目入口文件（如 Vue 的 App.vue、React 的 main.tsx）注入初始化代码。‌‌4‌‌7

2. ‌手动集成‌：

   • 在项目入口文件中添加框架特定的初始化代码，例如：

     1. ‌Vue 项目‌：在 App.vue 的模板中添加 <StagewiseToolbar :config="config" />，并在脚本中定义配置对象。‌‌7‌‌8
     2. ‌React 项目‌：在组件中引入 <StagewiseToolbar config={config} />。‌‌1‌‌8

   • 确保工具栏仅在开发模式生效，通过环境变量判断（如 if (process.env.NODE_ENV === 'development')）。‌‌1‌‌2

启动与使用

1. ‌启动开发服务器‌：运行项目命令（如 npm run dev），启动本地服务。‌‌3‌‌4
2. ‌激活工具栏‌：浏览器右下角会出现 Stagewise 图标，鼠标悬停或点击页面元素即可选中。‌‌2‌‌4
3. ‌发送指令给 AI‌：选中元素后，在工具栏输入修改需求（如“调整按钮样式”），AI 会分析上下文并生成代码建议。‌‌2‌‌8