DOMPrompter：我做了个专门给前端界面微调的提示词工具

[hashtome]

最近在用 Cursor 、Claude Code 这类工具改前端界面的时候，我越来越觉得，真正麻烦的不是从 0 生成一个页面，而是最后那一段很细的界面微调。

比如这种场景：

• 某个按钮再往右一点
• 两张卡片之间的 gap 再大一点
• 标题和下面说明文的距离不太对
• 某个 tag 看起来太挤，想单独调一下

这时候最难的点其实是：你很难把“到底是哪个元素、差异在哪里、这次想怎么改”说清楚。

截图当然能看，但截图没有 DOM 结构，也没有标签、间距、位置这些上下文；口头描述又很容易越来越模糊，最后就会变成一轮一轮地猜。

所以我做了一个小工具，叫 DOMPrompter 。

它更像是一个专门给界面微调用的工作流工具，不只是给网页用。只要界面本身是基于 DOM 的，不管是浏览器里的页面，还是用 Web 技术封装出来的桌面应用界面，其实都可以拿来调。

它主要做的事大概是这几步：

• 先直接点中你想改的那个元素
• 再看这个元素相关的标签、间距、位置、层级这些信息
• 快速写清楚这次想做的微调意图
• 最后生成一个更定制的 prompt ，直接丢给 Cursor 、Claude Code 、Copilot 之类的工具

我自己现在主要把它拿来处理这种“不是重做页面，而是把现有界面往前推一点点”的工作。

这周也看到 Codex 、Claude Code 都在往这块补能力了，不过我自己的感受是，界面微调这件事还挺值得做得更完整一点： 不是只知道你点了哪个元素，而是把 tag 、gap 、position 这些上下文也一起带进去，最后生成更贴近这次修改目标的提示词。

GitHub： https://github.com/hooosberg/DOMPrompter

Mac App Store： https://apps.apple.com/us/app/domprompter-ai-coding-prompt/id6761685716?mt=12

如果你平时也会用 AI 改 UI ，我也挺想知道，你们现在最后这一步微调，一般都是怎么做的。