指向頁面元素
在一般 Chrome 的執行中頁面中選取元素，包括 localhost，並直接撰寫期望的結果，不必手動描述元素所在位置。
為程式設計代理提供視覺回饋
EditUI 是 Chrome 擴充功能，用於針對執行中的網頁應用程式，向程式設計代理提供精確的視覺回饋。你不必標註螢幕截圖或手動找出選取器，只要在一般 Chrome 中開啟頁面，點選需要處理的元素，並以白話描述修改內容。
此擴充功能會將審查內容彙整成一則提示詞，供之後的實作階段使用。提示詞包含頁面 URL、視窗尺寸、每則筆記，以及所選元素的情境資訊。將它貼到擁有相關儲存庫存取權的程式設計代理中，接著重新載入頁面進行審查，並針對未達預期的修改繼續提出要求。
功能
批次修改 UI
在一次審查過程中持續點選並記錄問題。EditUI 會保留這些筆記，讓多項修改可以一次送出，而不是分成多則提示詞。
豐富情境的提示詞
複製一則純文字提示詞，其中包含受審查的 URL、視窗尺寸、要求，以及所選元素的情境資訊，例如 DOM 詳細資料、可見文字、附近的標記、計算後的樣式與邊界。
不綁定特定代理的輸出
將相同的複製內容搭配 Claude Code、Cursor、Codex、Windsurf 或其他接受貼上提示詞的程式設計代理使用。
不需要整合儲存庫
無需向儲存庫新增檔案，也不必將擴充功能連接至程式碼庫，即可進行審查。貼上提示詞後，由程式設計代理處理實作。
本機瀏覽器處理
審查期間將頁面情境保留在瀏覽器中。只有在啟用編輯模式後，擴充功能的內容指令碼才會啟用，筆記則儲存在 chrome.storage.local。
使用情境
審查 localhost 建置
在問題出現的視窗尺寸下開啟本機開發 URL，標記受影響的標題、卡片、按鈕或間距，再將完整審查內容傳送給在專案儲存庫中工作的代理。
批次處理頁面潤飾
在一次審查中收集多項視覺問題，例如層級、對齊、間距、回應式堆疊與按鈕強調，再將編號清單交給代理實作。
在 Cursor 瀏覽器之外工作
當實作工作流程以 Claude Code、Codex 或其他代理為基礎，而不是 Cursor 的瀏覽器時，仍可在一般 Chrome 中審查相同的執行中應用程式。
銜接視覺審查與程式碼修改
讓設計師、產品審查者或開發者透過指向受影響元素來描述可見結果，同時由開發者在呈現該頁面的儲存庫中使用產生的提示詞。
Pros and Cons
Pros
- 讓審查者能在一般 Chrome 中直接識別元素，包括 localhost 頁面。
- 將多項 UI 筆記整合成一則提示詞，供批次實作階段使用。
- 提供 URL、視窗尺寸、DOM 情境與所選元素詳細資料，以降低程式設計代理理解上的歧義。
- 可透過貼上提示詞搭配多種程式設計代理使用，且不需要設定儲存庫。
Cons
- 需要 Chrome 擴充功能與執行中的頁面；不提供獨立的視覺編輯環境。
- 不會直接編輯原始程式檔、呼叫程式設計代理，或讓擴充功能存取儲存庫。
- 工作流程產生的是文字情境，而非直接操作控制項、螢幕截圖或 React prop 檢視。
FAQ
如何設定 EditUI？
安裝 Chrome 擴充功能，在 Chrome 中開啟執行中的應用程式（包括 localhost 網址），然後從工具列開啟編輯模式，或在 macOS 上使用 Command-Shift-E（Windows 上使用 Ctrl-Shift-E）。點選元素、描述期望的結果，並在複製整批內容前繼續新增修改項目。
EditUI 會傳送哪些內容給程式設計代理？
EditUI 會建立一則純文字提示詞，其中包含頁面 URL、視窗尺寸、每項要求，以及所選元素的相關情境資訊，例如標籤、可見文字、附近的標記、所選屬性、計算後的樣式與邊界。將該提示詞貼到 Claude Code、Cursor、Codex 或其他接受貼上提示詞的工具中。
EditUI 會直接修改我的程式碼嗎？
不會。EditUI 不會讀取儲存庫、編輯原始程式檔、呼叫模型、開啟提取要求，或維持與程式設計代理的連線。代理需要存取用於呈現受審查頁面的儲存庫，並在你貼上提示詞後套用修改。
EditUI 會上傳頁面資訊嗎？
擴充功能會在本機處理頁面情境。筆記會儲存在 chrome.storage.local 中，只有在你按下「全部複製」並將提示詞貼到所選工具時，內容才會離開瀏覽器。該網站表示不需要帳戶。
哪些程式設計代理可以搭配 EditUI 使用？
任何能接受貼上提示詞的代理都可以使用，包括 Claude Code、Cursor 與 Codex。複製的提示詞是純文字，因此此工作流程不受限於單一程式設計代理，也不限定使用 Cursor 的瀏覽器。
Quick Facts
- 產品類型
- 用於視覺化 UI 回饋的 Chrome 擴充功能
- 主要平台
- Google Chrome，包括 localhost 頁面
- 工作流程
- 指向 → 提示詞 → 彙整 → 傳送
- 支援的輸出
- 複製到剪貼簿的純文字提示詞
- 相容的代理
- Claude Code、Cursor、Codex、Windsurf 及其他以提示詞為基礎的代理
- 帳戶需求
- 不需要帳戶
EditUI 替代品
ByteAsk
ByteAsk 是專為 C 與 C++ 打造的終端機優先 AI coding agent，先編輯儲存庫再用真實編譯器、除錯器、sanitizer 與測試驗證變更，並提供免費方案與付費方案。
Epherem
Epherem 是適用於 Lovable、Bolt、v0、Replit、Cursor 與 Claude Code 等 AI 程式設計工具打造網頁應用程式的靜態安全掃描器，檢查原始碼與相依套件中的常見安全錯誤，分類呈現結果並提供修正建議，無須執行應用程式。
CreateOS Sandbox
CreateOS Sandbox 是以 Firecracker micro-VM 執行程式與 agent 工作負載的隔離運算環境，支援私有網路、SDK、CLI 與 MCP 程式化控制。
GitBot
GitBot 是以瀏覽器為基礎的本機工作區，可使用 Claude Code、Codex 或 OpenCode 建立可重複使用的程式設計機器人，並在儲存庫資料夾中執行，支援持續執行緒與可設定權限。
hob
hob 是一個獨立的 coding agents 工作區，整合 agent sessions、終端機、歷史紀錄與後續工作，並維持你既有的工具與供應商設定。適合想保有本機路由、歷史與工作區結構控制權的開發者。
Ably Chat
Ably Chat 是一個聊天 API 平台，適合打造自訂即時聊天應用程式。支援聊天室訊息、輸入中提示、在線狀態、表情回應與訊息更新，並提供依使用量計費選項。