最近在用 Cursor、Claude Code、Codex 这类工具改前端界面的时候，我越来越觉得，真正麻烦的不是从 0 生成一个页面，而是最后那一段很细的界面微调。
比如这种场景：
- 某个按钮再往右一点
- 两张卡片之间的 gap 再大一点
- 某个 tag 看起来太挤，想单独调一下
- 标题和下面说明文的距离不太对
这时候最难的点其实是：你很难把"到底是哪个元素、差异在哪里、这次想怎么改"说清楚。
截图当然能看，但截图没有 DOM 结构，也没有标签、间距、位置这些上下文；口头描述又很容易越来越模糊，最后就会变成一轮一轮地猜。
所以我做了一个小工具，叫 DOMPrompter。
它更像是一个专门给界面微调用的工作流工具，不只是给网页用。只要界面本身是基于 DOM 的，不管是浏览器里的页面，还是用 Web 技术封装出来的桌面应用界面，其实都可以拿来调。
它主要做的事大概是这几步：
- 先直接点中你想改的那个元素
- 再看这个元素相关的标签、间距、位置、层级这些信息
- 快速写清楚这次想做的微调意图
- 最后生成一个更定制的 prompt，直接丢给 Cursor、Claude Code、Copilot 之类的工具
这周也看到 Codex、Claude Code 都在往这块补能力了，不过我自己的感受是，界面微调这件事还挺值得做得更完整一点：不是只知道你点了哪个元素，而是把 tag、gap、position 这些上下文也一起带进去，最后生成更贴近这次修改目标的提示词。
这个工具已经上架到 Mac App Store 了，不过在这里先继续按开发者社区的习惯放 GitHub：
如果你平时也在折腾 AI + 前端界面微调，欢迎试试看，也欢迎提意见。