ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">前端开发 + AI 助手更丝滑了！试试这个「所见即所得」的开源工具：ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: inherit;color: rgb(66, 166, 100);">Stagewise。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">在用 Cursor、Windsurf、Trae 等 AI 编程工具开发前端页面时，我们可能只是想改个按钮样式，却还得手动描述清楚它在页面哪儿、class 名是什么、代码在第几行.....ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">这种对话方式不仅效率低，AI 也常常理解不到位。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">而ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: inherit;color: rgb(66, 166, 100);">Stagewise正是为了解决这个问题而生：它让你能像在 Figma 或 Chrome DevTools 一样，点选页面元素并直接把它发送给 AI 助手进行修改！ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(66, 166, 100);">Stagewise 是什么？ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">Stagewise 是一款专为前端开发者设计的浏览器 UI 元素捕捉与 AI 协作工具，能让你在网页上点选任意元素，快速生成包括：
元素截图、DOM 路径结构、元数据（如 className、style、id、组件名等）。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">并可一键将这些信息发送给像 Cursor、Windsurf 这样的 AI 编码助手，让它直接定位并修改样式或组件逻辑。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 15px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">无缝集成 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”即可。 ② 安装并注入工具栏 在Cursor中，按CMD + Shift + P，输入 setupToolbar，执行命令，工具栏将自动初始化 或者可以通过代码库进行安装 pnpmi-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
functionsetupStagewise() {
// Only initialize once and onlyindevelopment mode
if(process.env.NODE_ENV ==='development') {
initToolbar(stagewiseConfig);
}
}
// Call the setupfunctionwhen appropriateforyour framework
setupStagewise();
最后打开网页，按需点击 UI 元素，Stagewise 会自动生成截图和 DOM 信息，发送给 VS Code 中的 Cursor 或 Windsurf。 AI 助手会根据上下文生成代码，直接应用或稍作调整即可。 开发场景- •调试 UI 样式时：快速定位错位元素、奇怪边距等问题
- •微调组件时：无需告诉 AI class 名、组件名，一键传上下文
- •多人协作/设计师对接时：选中问题元素并加注释，AI 直接改
- •低代码平台开发者：UI 和逻辑混合场景下精准修改组件行为
写在最后前端开发的复杂度一直在飙升：从React到Next.js，从Vue到SvelteKit，框架繁多，UI调整需求层出不穷。 传统的AI开发工具虽然能生成代码，但往往需要开发者手动提供上下文，比如DOM结构、元素位置或截图。这种“手动喂料”的过程不仅耗时，还容易出错。 多智能体协作和浏览器集成的出现，就像给AI助手装上了“眼睛”，让它们能直接“看”到你的网页，精准理解需求。 而 Stagewise 就这样一个工具，连接你的浏览器和AI助手，它会自动抓取DOM结构、截图和元数据，发送给AI助手，生成对应的代码改动。 如果你正在使用 Cursor、Windsurf 等 AI 助手进行开发，Stagewise 会成为你提升效率的最佳搭档。 |
