🍹 Insight Daily 🪺
Aitrainee | 公众号：AI进修生
Hi，这里是Aitrainee，欢迎阅读本期新文章。
开发用的工具，有些是Cursor，有些是Bolt、V0这些。
如果是Cursor，在涉及前端AI交互的时候，有不少人和我说了这样一个问题：
你让他改一些组件，说了好几次，每次他说他改好了，结果界面没有任何变化。
当时我是说Bolt、V0这些氛围编码工具可以直接点击界面元素对话修改，Cursor你只能截图+提示词和它说了。
比Playwright更高效！BrowserTools MCP 让Cursor直接控制当前浏览器，AI调试+SEO审计效率狂飙！
我当时和他们说可以使用BrowserTools 修改某个组件，因为当时有些人可能看了文章，但没仔细了解BrowserTools，忽略了他的这个功能。
后来我们也继续聊了 Playwright 和 BrowserTools 特点，他们适用于不同的任务。当然，这是后话了。
BrowserTools 让Cursor也具备Bolt、V0这些氛围编码工具修改组件的功能，详细看视频：
视频来源于：AI 编码 + Vercel 部署 + 域名解析：一文搞定Web 应用开发上线全流程，氛围编码+MCP 审计优化。
去 Cursor 扩展商店搜 StageWise，直接安装就行。
装好后，在任何 Web 项目里打开 Cursor。
按 Command+Shift+P，搜 StageWise，选那个“auto setup stage wise toolbar”选项。
点一下，右边聊天框里就会有反应，它会自动在你的项目里配置好 StageWise。
它会自动看你的 package.json，判断你用的是 Next.js 还是 React，然后用对应的包和设置。
搞定后，接受一下。
现在，你运行这个 Web 项目，会看到屏幕底部多了个悬浮条。
点一下，就能在页面上随便选 UI 元素了。
比如，选中一个按钮，或者按住 Shift 选好几个按钮。
然后给个提示，发送后，右边 Cursor 聊天框里会自动触发一条消息。这条消息里，除了你刚输入的提示，还包含了你选中的 UI 元素的详细信息 (比如 div 元素、相关类名)。
我们用这篇文章的教程网站做示例。从0到1用AI做了个AI服务网站, 全程没写一行代码。
这是他原来的样子。
我想修改的是这个定价卡片。
我也挺离谱的，我在消息框输入的提示词是：
这个本来也挺好的，但是我现在要做演示，纯玩，我就是让他想让他花里胡哨。怎么花哨怎么来？
我鼠标点击了几个卡片（视频中）。然后在底部悬浮框发完提示之后，他自己就跳转到cursor去发送一个提示词了。
包含了你选中的 UI 元素的详细信息 (比如 div 元素、相关类名)。
并且不出意外的话，肯定是出了意外了。因为这个提示词也是这种主动思考的提示词。他可能会修改许多的代码，并且我这里使用的是3.7 think模型，那么第1轮改好之后他就报错了。
不过问题不大。我们直接使用BrowserTools MCP。
而如果以前没用这个mcp的话，你单靠截图一个个截，我估计我们的开发任务是进行不下去的。调半天都解决不了，一直迭代报错。
BrowserTools MCP 这样的浏览器控制台mcp。我觉得现在的开发是不可或缺的。
可以给到你单靠截图给不到的完整上下文。他非常有效率。不用来回复制粘贴。
还有这个暗色和亮色模式，小太阳图标也是新增的，好看。
这难道就是StageWis + 主动性提示词 + Sota 模型（Claude 3.7 think、Claude 4）的实力吗。
我感觉玩ai有一个有意思的事，就是你给它一个不加规范的主动性提示词，
你也不知道他会输出一个什么效果，抽彩票一样。配合版本控制。
主动性提示词我叫得顺口了，其实指的是你只需简单描述你想要的最终效果或目标感受，不需要具体说明操作步骤或细节风格。
然后，把执行的自主权完全交给 AI，让它自己理解需求、发挥创意、系统性地完成整件事。
只不过需要注意的是。使用StageWis的时候，每次打开一个新的项目。你需要重复执行一次：
按 Command+Shift+P，搜 StageWise，选那个“auto setup stage wise toolbar”选项。
还有就是如果你同时打开多个项目。StageWis可能会报错。这个时候你需要关掉其他项目。
此外，选中一个按钮，或者按住 Shift 可以选好几个界面元素。
用 StageWise 的好处是，因为它把要改的元素信息传得很明确，所以改动的时候，它会把所有类似的元素都改掉，而不是只改你选的那一个。想改多个也行，选中就行。
还能搞些更复杂的操作，那种光用嘴说很难跟 AI 讲清楚的。
我可以直接在浏览器里选中那张图片，再选中旁边的产品标题和价格。
然后给 StageWise 一个提示：“让图片在左边，标题和价格在右边，标题在价格上面，并且都垂直居中对齐图片。”
它可能会先把它们都挪到正确的位置，但对齐可能还差那么点意思。
这时候，我可以再选中右边的文字区域，再给个提示：“让标题和价格这两行文字，整体在图片高度的中间位置。”
这就是用 StageWise 微调 UI 的例子，能处理一些比较细致的布局调整。
他们官网上https://stagewise.io/还有更多酷炫的用法，比如选中一些元素把它们变成手风琴效果，或者把表格标签换个颜色，都很简单精准。
他们实现的这种直接往 Cursor 里发消息的交互方式，挺有意思的，想到了些以前没想过的用户体验。
此前的browsertools mcp 也有类似的实现，是你让他进入自动调试模式的时候。不过只能在mac中。
比Playwright更高效！BrowserTools MCP 让Cursor直接控制当前浏览器，AI调试+SEO审计效率狂飙！
手把手教你配置BrowserTools MCP，Windows 和 Mac全流程，关键命令别忽略。
总之，像 StageWise 这样的工具，能帮你进一步精细调整 UI。让Cursor也获得V0、Bolt这些分为编码工具直接修改组件的功能。
AI 绘画元方法：不肝提示词，文章直出封面。(端到端篇)
AI 绘画“元方法”分享，免费绘图流，掌握思维比提示词更重要。（融图篇）
本号知识星球（汇集ALL订阅频道合集和其他）：
星球里可获取更多AI实践和资讯：
MCP文章，从概念到实践再到自己构建：
MCP是什么：Windsurf Wave3：MCP协议让AI直接读取控制台错误，自动化网页调试不用复制粘贴了！Tab智能跳转、Turbo模式。
MCP怎么配置、报错解决：Windows下MCP报错的救星来了，1分钟教你完美解决Cursor配置问题。
MCP实践：Cursor + MCP：效率狂飙！一键克隆网站、自动调试错误，社区：每个人都在谈论MCP！
最新MCP托管平台：让Cursor秒变数据库专家，一键对接Github，开发效率暴增！
Blender + MCP 从入门到实践：安装、配置、插件、渲染与快捷键一文搞定！
比Playwright更高效！BrowserTools MCP 让Cursor直接控制当前浏览器，AI调试+SEO审计效率狂飙！
手把手教你配置BrowserTools MCP，Windows 和 Mac全流程，关键命令别忽略。
2分钟构建自己的MCP服务器，从算数到 Firecrawl MCP（手动挡 + AI档）
太简单了！Cline官方定义MCP开发流程，聊天式开发，让MCP搭建不再复杂。
🌟 知音难求，自我修炼亦艰，抓住前沿技术的机遇，与我们一起成为创新的超级个体（把握AIGC时代的个人力量）。
点这里👇关注我，记得标星哦～
（文：AI进修生）
