EditUI

产品简介

EditUI 是一款 Chrome 浏览器扩展，专门解决"AI 编程 Agent 不知道你在说哪个 UI 元素"这个老难题。它的使用方式是：你在自己运行中的网页里点击任何元素、留下修改说明，EditUI 自动收集它所在的 DOM、文本、父节点、相邻节点、URL、视口以及计算样式，把这些上下文一次性打包发给你的编程 Agent（Claude Code、Cursor、Codex、Windsurf 都能用）。它的官方一句话定位是"指一下、说一句、改一页"，把过去需要截图标注、写一堆选择器、翻源码的 UI 评审流程压缩成几分钟内完成的批量改写。

核心功能

• 所见即所指：在 Chrome 中直接点选运行中的页面元素，扩展会自动捕获元素标签、文本、DOM 路径、class、parent、相邻节点、所在 URL、视口尺寸以及当前计算样式，编码 Agent 拿到的就是"用户刚刚指着的东西"，不用再靠截图猜。
• 批量收集编辑意见：不需要一个问题一次提交，EditUI 把整轮评审的所有修改条目存下来——"把主标题字号调小一点""让这几张卡片对齐""把 CTA 改成石头色""把这段间距收紧""手机上要竖排"——一次复制粘贴，整个批次的改动交给 Agent 一起处理。
• 复制到任何 Agent：把整页修改意见复制为结构化清单后，可直接粘贴进 Claude Code、Cursor、Codex、Windsurf，或任何能读文本的聊天框；不需要插件、不挑编辑器，能"粘贴到任意位置"是 EditUI 的设计前提。
• 与 Cursor 设计模式兼容：明确支持 Cursor Design Mode / Cursor Visual Editor 工作流，能作为出其代码修复链路上的"前端评审入口"。
• 零配置零门槛：作为 Chrome 扩展安装即可，不需要服务器账号、不上传页面数据，捕获的上下文全部在本地浏览器内完成，收集完再主动给 Agent。

特色优势

第一，定位非常专一。市面上大多数 AI 工具试图把"生成、调试、修改、部署"全部包圆，而 EditUI 只做一件事——把 UI 评审做得更精准——结果就是这一件事做得很透：上下文字段覆盖了元素选择、定位、样式三个维度，Agent 拿到就能改。第二，批处理而非串行。开发者在改一个页面前通常会同时看到 5~10 处问题，EditUI 把这些意见一次收集、一次性交给 Agent，避免来回切窗口。第三，跨 Agent 通用。不绑定任何具体的 IDE 或云服务，今天你用 Cursor、明天换 Codex，EditUI 的输出格式都不变。第四，零依赖零成本。不需要 Node 服务、不需要后端账户、不需要上传设计稿，作为 Chrome 扩展本地运行。

应用场景

• 前端开发者日常迭代：在自己 dev 环境跑起来后，一边点击一边写下"这块 padding 再大一点""这个按钮改用次级色""这几个间距收一收"，一批次交给 Claude Code / Cursor 处理。
• 设计师向 AI 落地设计稿：把 Figma 评审中提到的修改意见，在本地实现页面上一处一处点击收集，再交给 Agent 一次性还原。
• 产品经理自助微调：不具备改 CSS 能力的 PM 用 EditUI 描述"我想要的样子"，把结构化清单丢给 Cursor，绕开工程师排期。
• 响应式批量调整：一次挑出"桌面端折叠边"和"移动端竖排"等适配点，统一处理整页多断点问题。
• Code Review 的最后冲刺：合并前快速过一遍交互细节，把发现的体验问题一次性列出再交给 AI 修复。

适用人群

前端工程师、独立产品开发者、设计师 + AI 协作流使用者、需要频繁对接 Claude Code / Cursor / Codex 的"AI 程序员"群体，以及希望降低和 AI 沟通成本的非技术产品/运营人员。

出品方

EditUI 由独立开发者团队打造，主页为 https://www.editui.app/，产品在 HN Show HN 首发并持续迭代。

更新动态

官方主页明确把工作流拆成"指 → 写 → 收 → 发"四步（Point / Prompt / Collect / Send），并在浏览器扩展能力允许的范围内收集完整的元素上下文（包括类、父节点、相邻元素、视口、计算样式），是 Cursor Design Mode 在浏览器场景下的轻量替代入口。

官网链接

https://www.editui.app/