Stagewise：基于浏览器的前端AI开发助手，实现可视化智能修改

Stagewise 是一个为前端开发者设计的浏览器工具栏插件，它直接将浏览器中的前端UI与你的AI助手连接起来。

在传统开发流程中，调试和修改UI时，往往需要在浏览器和代码编辑器之间频繁切换，过程繁琐。Stagewise 的核心目标就是解决这个痛点，它让AI助手能够“看见”并理解你正在操作的界面，从而直接在本地代码库中生成准确的修改，极大地节省了上下文切换时间，提升了开发效率。

目前该项目在GitHub上已获得超过6.2K星标，显示出其在前端社区中的受欢迎程度。

功能特色

• 一键选中页面元素：类似于使用Figma或Chrome开发者工具，你可以直接在浏览器中点击选择任何UI元素，无需手动描述。选中后，工具会自动捕获元素截图、DOM路径结构以及className、style、id等元数据。

• 无缝集成主流AI工具：能与Cursor、GitHub Copilot、Windsurf等AI编程助手协同工作，将选中元素的完整上下文信息直接发送给AI，确保AI准确理解需要修改的目标。
• 广泛的前端框架支持：对包括React、Next.js、Vue、Nuxt.js、SvelteKit等在内的主流框架提供了良好支持，开发者无需担心框架兼容性问题。
• 灵活的插件系统：提供了可扩展的插件架构，允许开发者编写自定义插件以增强功能，具备很高的定制灵活性。
• 仅开发模式生效：这是一个非常贴心的设计，Stagewise仅在开发环境下运行，不会增加生产环境构建包的体积，确保了应用性能不受影响。
• 开箱即用：无需复杂配置，安装完成后即可快速投入使用，对新手友好。
• 自动连接代码编辑器：能够自动与VS Code等编辑器的扩展程序建立连接，省去了手动配置的步骤。

安装与使用指南

安装过程非常简单，只需在你的代码编辑器的扩展商店中搜索“stagewise”即可。

• 对于Cursor编辑器，可以使用链接 cursor:extension/stagewise.stagewise-vscode-extension 直接安装。
• 对于VS Code，可以使用链接 vscode:extension/stagewise.stagewise-vscode-extension。

安装完成后，需要将Stagewise工具栏注入到你的前端应用中。推荐使用AI辅助的方式进行初始化：

在Cursor编辑器中，按下 CMD + Shift + P（Windows为 Ctrl + Shift + P），输入并执行 setupToolbar 命令，工具栏将自动完成初始化，非常便捷。

如果你倾向于手动安装，步骤也不复杂：

1. 首先，通过包管理器安装依赖：

   pnpm i -D @stagewise/toolbar

2. 然后，在你的应用初始化代码中引入并配置Stagewise。

不同前端框架的初始化代码略有差异。例如，在React项目中，你可以创建一个单独的根节点来渲染工具栏组件；在Next.js项目中，则可以直接在根布局（layout.tsx）中引入。官方网站提供了详细的框架集成示例代码，方便开发者参考。

完成上述步骤后，启动你的开发服务器，Stagewise工具栏通常会出现在网页的右下角，此时你就可以开始体验它带来的高效开发流程了。

总结

Stagewise 为前端开发工作流带来了新颖的思路。它不仅显著提升了开发者与AI工具之间的协作效率，还通过其灵活的架构设计，兼容了多种前端框架和AI平台。无论是独立开发者还是团队协作，都能从中获益。如果你正在寻找能够减少重复劳动、提升界面开发效率的工具，Stagewise 绝对值得一试。这个在GitHub开源的项目，已经吸引了大量开发者关注和讨论，也欢迎你到云栈社区分享你的使用体验。

项目地址：https://github.com/stagewise-io/stagewise