十月十四日，EditUI 在 Product Hunt 上排到当天第二十二名，介绍语只有一句：「指着你的界面，告诉 coding agent 改什么。」到十月下旬，它的 GitHub 仓库有十六个 star，最后一次代码提交停在十月十一日。这些数字都不像一个值得单开一篇的东西。
但它补的那个缺口，我们每天都在用最笨的方式填：浏览器里明明看得见哪张卡片歪了，转成文字发给 agent 却要说上三遍，它还是改错了地方。EditUI 不做别的，就把「指」这个动作记录下来，攒成一批，变成一段可以直接粘过去的文字。它免费、MIT 许可、不注册账号、没有后端，安装时只向浏览器要了 storage 一个权限。
它省掉的不是一次截图，是那句「我说的是哪个」
写 UI 反馈这件事，难的从来不是「改」，是「指」。你说「右边那张卡片太高」，agent 去改了另一张；你截图发过去，它看不见图里的框；你把 DevTools 里复制的选择器贴过去，div.card:nth-of-type(2) 这种字符串在源码里可能一处都不存在——那是浏览器算出来的，不是人写出来的。
所以这类工具的路线只有两种。一种拼命把浏览器里的元素映射回源码的某一行，另一种放弃映射，只把「你指的是谁」记清楚，剩下的交给 agent 自己去找。EditUI 走的是后一条，而且没有假装能做前一条。这个取舍让它变得极轻：一个扩展、一个快捷键、一个托盘，装完就能用，不用改项目里的任何文件，也不用在编辑器里配一个 MCP 服务。
装上之后是四步，第四步最容易被忽略
Chrome 应用商店搜 EditUI，开发者工具分类，版本 1.0.0。Firefox 也有，但要自己构建、在调试页里临时加载，关掉浏览器就失效，基本只对开发自用有意义。
装完点工具栏图标，或按 Ctrl+Shift+E（Mac 上是 ⌘+Shift+E）进入编辑态，Esc 退出。鼠标划过的元素出现描边，点下去弹出一个小框，写一句「这个标题略小一点」，Add。右侧出现托盘，可以拖着换位置，每条按顺序编号，页面上对应位置也标着 1、2、3。要一次说三张卡片，就多选再写一句，托盘标题会变成「3 elements selected」，输入框的占位提示换成「Make all three equal height…」。改主意了可以 Revise，选错元素可以 Reselect，不要了就 Delete，条数没有上限。
然后 Copy all，它的事就结束了。
第四步是大多数人第一次用会卡住的地方：粘贴。它不连你的 agent、不注册 MCP、不往项目里装包，剪贴板里那段东西要你自己粘进「正在渲染这个页面的那个仓库」的会话。粘错项目，agent 拿着坐标和类名却找不到文件，就会开始猜，你之前省下的时间又赔了回去。官网把这句话写得很直白：EditUI 只负责说清页面上是哪个元素，仓库仍然要 agent 自己找。
它塞进那段 prompt 的东西，我按源码数了一遍
复制出来的不是一句话，是一份带结构的清单。开头两行是它自己补的：页面地址、视口尺寸。接着一句总述，请实现以下三项改动并保持现有设计系统与响应式行为。再往下每条一个二级标题，标题优先取 aria-label，其次可见文字，再次 id，然后依次是你写的那句话、元素开标签、可见文本、屏幕坐标、DOM 上下文。结尾一句要求 agent 改完对着每一条复查。
真正干活的是「DOM 上下文」那一段，也是拆开源码才看清的地方。lib/context.ts 里两张白名单：属性只读十二个（id、class、role、href、type、name、placeholder、aria-label、aria-labelledby、data-testid、alt、title），样式只读二十一项（display、position、字号字重行高、颜色、四向 padding、四向 margin、gap，以及 flex 与 grid 的几个对齐项）。单个属性值截到 120 字符，javascript: 开头的 href 直接丢，值是 auto、normal、none 的样式不写进去。往外扩有四个硬上限：HTML 一千五百字符、向下三层、每层最多四个子节点、类名最多取四十个（落进 prompt 时只印前八个）。那一行 styles 在拼接时还会再截到 400 字符。
这些数字决定了 agent 拿到的究竟是一个元素的全貌还是剪影。一千五百字符的 HTML 够它看清一张卡片的内部结构，不够它看清一整块栅格；二十一项样式够它判断「这两张为什么不等高」，因为 gap、align-items、padding 都在里面，但不够它判断颜色体系是怎么定义的。想让 agent 解决留白，就把话说在尺寸上；想让它重构，它手上的材料是不够的。
三个边界，都是我在源码里撞上的
第一，它不进 iframe。内容脚本的配置里写着 allFrames: false，只跑顶层文档。这条对做 WordPress 的人影响最大：区块编辑器的画布是 iframe，定制器的预览也是 iframe，你在后台里点不到任何东西。前台页面没有这个问题。同理，直接双击打开的本地 HTML 默认不在射程内，得去扩展详情里手动勾上「允许访问文件网址」；用 localhost 起服务就正常。
第二，它没有截图，也没有组件名和源文件位置。官网自己在一篇对比文章里承认了这点：prompt 是纯文本，页面地址、视口、你的批注、你点过元素的 DOM 上下文，就这些，没有截图、没有 React fiber。所以当 DOM 和源码漂开——同一个 class 铺在十几个组件上——它帮不了你，只能靠你把话说得更具体。
第三，剥哈希类名的正则会把一部分正常类名一起剥掉。lib/classes.ts 里五条规则：css- 开头、sc- 开头、jsx- 开头、以 __ 加五位以上字符结尾，以及「八个字符以上、纯字母数字、同时含字母和数字」。前四条精准，第五条不是：grid2cols、card2024、hero2col 这类带数字的工具类会被当成构建产物丢掉。丢掉之后，那个元素在 prompt 里只剩标签名和文字，选择器退化成 nth-of-type 一路往上找五层。
刷新一次，它还认得自己那笔账
改完一轮总要刷新看结果。刷新之后托盘里的条目不会消失，它靠一个指纹重新找元素：标签名、选择器、前八十个字符的文本、非哈希类名拼起来。先按选择器找，打分到 0.5 以上就认；找不到就退一步，在同一个标签下最多翻五百个候选，0.75 以上才算数。认不出来时页面上那条标记会变成「已变」状态，提醒你这条批注对应的元素已经不在了，别再照着它改。
历史只留最近二十批，全部存在本地的扩展存储里，卸载就清空。这一点比不少同类工具克制：没有账号体系，就没有云端留档，也没有「你的页面截图躺在别人服务器上」的问题；代价是换一台电脑，你的批注带不走。
免费是真的，只是没人在替你维护
没有试用期、没有积分、没有额度，也没有付费档——它连定价页都没有。成本在别处：你得有一个跑在仓库里的 agent，Claude Code、Cursor、Codex 都行，然后你得记得粘。
更要紧的是维护。仓库九月二十九日建，最后一次提交十月十一日，十六个 star、两个 fork、三个未关的 issue，署名 Made by Usercall——一家做用户访谈工具的公司，把内部的小工具开源出来。MIT 许可意味着你随时可以自己 fork、自己改，二十来个源文件，熟悉前端的人一个下午能读完。别指望它跟着浏览器的扩展政策一起升级，也别指望它哪天补上截图和组件树。
要源码定位，另一条路是把选区塞进 MCP
npm 上的 PixelPick 走的是反方向：按住 ⌘ 或 Ctrl+Shift 点选元素，最多十个，起一个本地 MCP 服务，再装一个提问前自动注入的钩子。它给的正好是 EditUI 缺的那一块——React 组件名、props、src/components/Button.tsx:24:5 这样的文件行列。限制也很硬：只认 localhost，只对 React 有效，React 19 因为源码位置元数据被移除只能给到行号，Vue 和 Svelte 还标着「即将支持」。
判据其实很简单。改的是 React 项目、跑在 localhost、希望 agent 一步改对文件，用 PixelPick；改的是一个线上页面或 WordPress 前台、agent 今天 Claude Code 明天 Cursor，用 EditUI 这种复制粘贴的更省事。两个都不顺手，DevTools 里复制 selector、截图上画个圈，也还是能用，只是慢。
你可以做什么
先拿自己站的前台页面跑一轮，别在后台编辑器里试。 区块编辑器和定制器预览都在 iframe 里，它进不去，你会以为是坏了。
写结果，别写手段。 「这三张卡等高」比「把第二张的 margin-top 改成 0」更容易改对，因为你并不知道它用的是什么布局。
攒完一整个页面再复制，别一条一粘。 这工具的价值全在批次上，一条一粘等于把它抵消掉。
换用 PixelPick，如果你要 agent 说出文件名。 它压根不抓组件树和源码位置。
fork 一份再用，如果打算长期用。 MIT 许可，二十来个源文件，十六个 star 的项目随时可能停更。
附：本文信息来源
一、一手信息
工具本体
- GitHub：junetic/editui 仓库 EditUI 扩展源码与 README（十二项属性与二十一项样式白名单在 lib/context.ts，五条哈希判定在 lib/classes.ts，
allFrames: false在 entrypoints/content/index.tsx） - Chrome 应用商店：EditUI（开发者工具分类、v1.0.0、仅申请 storage 权限）
- 官网：EditUI Chrome 扩展说明页（复制内容清单、隐私口径、「会不会上传页面」的问答）
- 官网：用 Claude Code 做可视化改 UI 的八步流程（localhost 说明与 prompt 示例原文）
- 官网博客：MCP 元素拾取器与复制粘贴批次的取舍（自认不提供截图、组件名与源文件位置）
- 官网：隐私政策
替代方案
- npm：pixelpick 2.0.3（React 组件名与文件行列、localhost 限定、最多十个选区、React 19 只能给到行号）
二、媒体报道
发布与收录
- Hunted.Space：EditUI 的 Product Hunt 发布档案（10 月 14 日上线，当天第 22 名）
- UStack：Product Hunt 每日精选 2026-10-14（第 22 名与 74 票的记录）
- Zekai：EditUI 工具档案（免费档、可接 Claude Code / Cursor / Codex / Windsurf）
- 昆仑 AI 工具大全：EditUI 条目（中文简介与「免费扩展 + MIT 开源」口径）
本文为公开信息整理与解读，数据以各厂商官方口径为准。
相关阅读
原创声明：本文由 618A 情报站整理撰写，基于公开信息与实测记录，转载请注明出处并保留原文链接。