增强你的工作流 从发现问题
从发现问题
到解决问题——只需几秒
VibeWebHelper 捕获 AI 理解你 UI 修改所需的一切——元素上下文、选择器、HTML 结构和你的指令。
Shift+点击捕获
按住 Shift 点击页面上的任意元素。VibeWebHelper 会立即捕获其 CSS 选择器、XPath、HTML 片段和周围上下文。
页内对话框
一个轻量对话框会出现在你点击的元素旁边。用自然语言输入你的修改指令——无需切换上下文。
AI 就绪提示词
一键生成包含页面 URL、框架信息、选择器、HTML 和你的指令的完整 Markdown 提示词——直接粘贴到 Claude、ChatGPT 或任何 AI 助手中。
侧边面板管理
所有捕获的编辑都在 Chrome 侧边面板中。在导出前可以审查、编辑或删除。每个页面独立管理。
Markdown 和 JSON 导出
将编辑草稿导出为易读的 Markdown 或结构化 JSON。与团队共享或直接导入开发流程。
隐私优先的权限
默认仅在 localhost 上自动运行。对于外部网站，需要逐站授予权限。你的数据永远不会离开浏览器。
工作流程
三步生成更好的 UI 提示词
01
捕获
正常浏览你的本地开发站点。当你发现需要修改的地方，按住 Shift 点击它。元素会高亮显示，对话框随即出现。
⇧ + Click
02
<button.cta>
把颜色改成品牌蓝色，增加内边距
描述
用自然语言输入你想要的改动。可以具体也可以概括。在整个页面上捕获多处编辑。
03
# UI Edit Requests
## Edit 1: button.cta
Selector: .cta-button
→ Change color to brand blue...
已复制！
导出
将生成的提示词复制到剪贴板或下载为 Markdown/JSON。粘贴到你的 AI 助手中，见证奇迹。