Stagewise

Stagewise 是一款面向现代前端开发者的创新型 AI 协作编程工具。它被设计为一个前端编码代理，专注于解决传统 AI 编程助手在理解复杂用户界面（UI）上下文时的痛点。该工具由 YCombinator 支持，旨在将网页应用的用户界面与开发者的 AI 编码流程无缝连接，实现更高效率的开发体验。

Stagewise 网站截图

是什么

Stagewise 是一款本地运行、驻留于浏览器内部的 AI 工具，允许开发者通过直接在网页上选择元素和输入自然语言提示，来编辑和修改现有项目的前端代码。

其核心理念是点选即指令（Prompt changes right where you see them）。开发者只需点击页面上的 UI 元素，然后通过工具栏输入指令，AI 即可基于该元素的 DOM 结构、样式和上下文信息，生成精准的代码建议或直接修改代码。

核心功能与特色

Stagewise 拥有多项强大功能和独特之处，使其成为现代前端开发工作流中的得力助手：

关键功能

1. 实时 DOM 上下文传递： Stagewise 能够将当前选中的 DOM 元素、截图和元数据等详细信息发送给 AI 助手，显著提升 AI 对 UI 修改请求的理解准确率。

2. 浏览器内编辑与注释： 支持在浏览器中直接对页面元素添加注释，方便团队成员间的协作沟通。注释内容还可以同步到代码端，作为开发文档的一部分。

3. 通用框架兼容性： 具备通用兼容性，可与任何组合的框架、构建工具和 UI 库无缝协作，全面支持 React、Vue、Angular、Svelte、Next.js、Nuxt、TailwindCSS、Bootstrap 等主流前端技术栈。

4. 智能代码生成与改进： 能够生成遵循项目规范的、干净且可维护的生产就绪代码；并提供智能改进建议，理解设计系统并帮助维护品牌一致性。

5. 多 AI 平台集成： 目前已与 Cursor、GitHub Copilot 等多个主流 AI 编码平台集成，适用于各种 AI 开发工作流。

产品特色

• 零上下文切换： 开发者可以直接在浏览器中看到 UI 的地方提示修改，无需在代码编辑器和浏览器之间频繁切换。

• 安全与开源： 采用完全本地的代理架构，保证设计安全。同时，项目是开源的，以公开透明的方式构建。

• 零影响生产构建： Stagewise 仅在开发环境中运行，不会增加最终生产环境的打包体积或影响网站加载速度。

• 速度极快： 专注于最大限度地提高迭代速度，在处理 UX 和 UI 迭代时提供快速响应。

技术原理与架构

Stagewise 的核心在于其完全本地的代理架构。它通过在本地运行，确保了代码和数据的安全性。其技术实现主要依赖于两个方面：

1. 上下文捕获： 它通过内置机制，实时捕获开发者在浏览器中选中的 UI 元素的 DOM 结构、样式、截图等上下文信息。

2. AI 协同协议： Stagewise 支持连接开发者自己的 MCP（Model Coordination Protocol，模型协调协议）服务器，将捕获的上下文信息高效地传递给集成的 AI 编码助手，使 AI 能够准确理解“在哪里”以及“如何”进行修改。

使用教程

Stagewise 的安装和启动流程被设计得极其简洁：

1. 启动应用： 在本地开发项目的根目录下，首先启动您的开发服务器。

2. 调用 Stagewise： 打开第二个终端窗口，运行以下命令：

   npx stagewise@latest

3. 开始使用： 工具栏将出现在您的网页右下角。您现在可以点击页面上的任何元素，并向 Stagewise 输入自然语言指令，实现实时代码修改。

如果使用特定的代码编辑器（如 Cursor），还可以通过安装 Stagewise 插件，并在命令面板中执行特定命令（如 setupToolbar）进行自动化设置。

应用场景

Stagewise 支持前端开发周期的所有阶段：

收费模式

Stagewise 提供了灵活的收费模式：

• 订阅服务： Stagewise 提供订阅服务（Subscription），以获得最大的使用便利性。

• 自带模型： 用户可以选择使用自己的 AI 模型提供商（Use your own model providers），将其接入 Stagewise 的本地代理架构中。

适用人群

Stagewise 适用于所有级别的现代前端开发者和团队：

• 独立开发者： 希望通过 AI 大幅提升前端代码编写和 UI 迭代速度的个人。

• 初创团队： 需要快速原型设计和实现，并保持 UI 一致性的敏捷团队。

• 大型企业： 适用于各种规模的项目，特别是在处理具有复杂配置和设计规范的遗留或大型项目时。

优缺点分析

用户评价

Stagewise 受到全球开发者的好评，主要集中在其高效性和实用性上：

• 用户表示对 Stagewise 的工作效果感到惊喜，认为它将成为主要的开发工具之一。

• 有用户评价该工具能将设计时间削减 50%，只需告诉 Stagewise 想要什么，即可实时观察 UI 更新。

• 被认为是“任何现代开发工作流的必备工具”，简化了复杂的任务，让编码再次变得令人愉快。

总结与标签

Stagewise 正在通过其创新的点选即指令交互范式，重新定义 AI 辅助前端开发。它成功地解决了 AI 编码助手在处理视觉 UI 任务时的失明问题，极大地增强了开发效率和团队协作体验，是一款值得所有前端团队尝试的现代开发辅助工具。