增強你的工作流程 從發現問題
從發現問題
到解決問題——只需幾秒
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 助理中，見證奇蹟。