前端AI编程神器!速速上车

stagewise是什么

这是一个运行在浏览器中的前端编程AI Agent,通过点击页面元素告诉AI要修改什么,然后Agent就会自动修改本地代码库。无需手动复制粘贴元素信息和文件路径,支持所有主流前端框架,兼容Cursor、GitHub Copilot、Windsurf等多种AI编程工具,让前端开发效率翻倍

开源成就

• • Star数快速增长 目前已获得6.4K Star,前端AI工具领域的热门项目
• • NPM下载活跃 被604个项目使用,实际落地应用广泛
• • AGPL-3.0许可 开源友好,商业使用需联系获取许可
• • 活跃的社区 15位贡献者,Discord社区活跃,持续快速迭代

核心功能

• • 浏览器内直接操作,无需安装任何东西,在项目根目录运行npx stagewise@latest即可启动,打开浏览器点击要修改的元素,告诉AI你的需求,就这么简单

# 启动前端开发服务器npm run dev# 新开终端,在项目根目录启动stagewisenpx stagewise@latest# 或使用pnpmpnpm dlx stagewise@latest

• • 智能元素识别,点击页面上的按钮、输入框、卡片等任何元素,stagewise自动获取元素的代码位置、组件结构、样式信息,不用再手动找文件
• • 本地代码库修改,AI生成的代码直接写入本地文件,支持Git版本控制,可以随时回滚,比复制粘贴AI建议的代码安全可控
• • 多Agent兼容,官方提供专用的stagewise agent,同时支持Cursor、GitHub Copilot、Windsurf、Cline、Roo Code等主流AI编程工具,选择你最熟悉的工具配合使用

// stagewise的元素上下文自动捕获// 点击页面元素后,AI能获取到:{  component: "Button",  filePath: "src/components/ui/button.tsx",  styles: "bg-blue-500 hover:bg-blue-600 px-4 py-2",  parentComponent: "LoginForm",  relatedFiles: ["src/hooks/useAuth.ts", "src/styles/theme.ts"]}

• • 插件系统,可以通过插件扩展功能,定制工作流,社区已经有一些实用插件,比如自动生成测试、代码审查等
• • 框架无关,支持React、Vue、Angular、Svelte等所有前端框架,甚至原生HTML/CSS/JS项目都能用,真正的零门槛
• • 实时预览,修改代码后浏览器立即热重载,看到效果不满意可以继续调整,迭代周期极短

技术亮点

浏览器上下文捕获是stagewise的核心创新,传统AI编程工具需要你描述"修改登录按钮的颜色",但AI不知道哪个是登录按钮、在哪个文件。stagewise让你直接点击登录按钮,自动把元素信息注入到AI上下文

AST级别的代码理解,不是简单的文本匹配,而是解析代码的抽象语法树,准确定位要修改的代码位置,避免改错地方

// stagewise的代码定位机制async function locateElementCode(clickedElement) {  // 1. 通过开发工具协议获取元素源映射  const sourceMap = await getSourceMap(clickedElement);  // 2. 解析组件AST  const ast = parseComponent(sourceMap.filePath);  // 3. 精确定位到代码行  const codeLocation = findElementInAST(ast, clickedElement);  return {    file: sourceMap.filePath,    line: codeLocation.line,    column: codeLocation.column,    context: getCodeContext(ast, codeLocation)  };}

Git友好的工作流,所有修改都是标准的文件编辑,可以用Git追踪、对比、回滚,不会破坏现有的开发流程

Monorepo支持,能正确处理复杂的项目结构,自动识别workspace配置和依赖关系

安装部署

• • 零安装快速启动,最简单的方式

# 1. 启动你的开发服务器npm run dev# 2. 新开终端,在项目根目录运行npx stagewise@latest# 3. 按照CLI引导完成账号设置# 4. 打开浏览器开始使用

• • 本地开发测试,如果要贡献代码或深度定制

# 克隆仓库git clone https://github.com/stagewise-io/stagewise.gitcd stagewise# 安装依赖pnpm install# 启动开发模式pnpm dev

• • 插件扩展,查看官方文档了解如何开发自定义插件

实际体验

试用stagewise最大的感受是真的省时间,以前用AI改前端代码,要先找到对应的组件文件、复制代码、描述清楚要改哪个元素,光这些准备工作就要几分钟。现在直接点击元素,AI自动知道要改什么

元素识别准确度很高,即使是动态渲染的组件、嵌套很深的元素,也能准确定位到源代码位置,比手动查找快太多

配合Cursor使用体验很好,我习惯用Cursor,stagewise提供的上下文信息让Cursor的代码生成质量明显提升,改UI这种需求基本一次成功

Git集成很自然,所有改动都是正常的代码修改,可以正常commit、review,不会产生奇怪的文件或者破坏项目结构

适合快速原型开发,产品经理看着页面提需求,我点点元素告诉AI要改什么,几分钟就能出效果,比传统开发流程快几倍

不过也有些限制:需要开发服务器运行,意味着只能在本地开发环境使用,部署后的生产环境不能用。还有对复杂的业务逻辑支持有限,适合改UI、调样式、加组件,如果是重构架构层面的代码还是需要手动

免费版有使用限制,具体的定价模式需要查看官网,不过基础功能已经够用了

开源意味着社区驱动,遇到bug可以直接提issue,想要新功能可以贡献代码,这种透明度是商业工具做不到的

如果你经常做前端开发、需要频繁调整UI、或者想提升AI辅助编程的效率,stagewise绝对值得尝试。它不是又一个代码生成工具,而是真正理解前端开发流程的AI Agent,通过浏览器直接交互的方式革新了前端编程体验

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