最近用 Cursor 和 Claude 改前端时，我反复遇到一个很尴尬的问题。
AI 不是不会改。
真正麻烦的是，我经常说不清楚自己到底想让它改哪个元素。
比如我想说：“把这个按钮往右挪一点。”
但页面上可能有三个按钮。AI 不知道“这个”是哪一个。
我想说：“让这几张卡片之间的间距更舒服。”
但“更舒服”到底是 16px、24px，还是跟父容器有关？我自己也不一定说得清。
截图能缓解一部分问题，但截图没有 DOM 层级，没有 class，没有真实尺寸，也没有 margin / padding / gap。最后 AI 还是在猜。
于是我做了 DOMPrompter。
它解决的不是“让 AI 更聪明”，而是一个更小、更具体的问题：
让开发者能准确告诉 AI：我说的就是页面上的这个元素。
DOMPrompter 是一个 macOS 工具。你可以把它连到本地开发服务器，比如 localhost:3000、5173，也可以直接打开一个静态 HTML 文件。
打开页面后，你直接点击界面上的任意元素。DOMPrompter 会把这个元素的尺寸、位置、间距、层级和选择信息整理出来，再结合你的修改意图，生成一段结构化提示词。
这段提示词可以直接粘贴给 Cursor、Claude Code、GitHub Copilot 或任何你正在用的 AI coding 工具。
我想让这个流程变成：
-
不再翻 DevTools 猜 class
-
不再用截图让 AI 猜区域
-
不再反复解释“不是那个按钮，是旁边那个”
-
直接点击元素，把上下文交给 AI
它目前支持两种模式：
-
Server Mode：连接正在运行的本地开发服务，适合 Vite、Next.js、React 等日常项目
-
HTML Mode：直接打开本地 HTML 文件，不需要启动服务
我自己最喜欢的是它把“视觉微调”变成了一个可复制的工作流。
以前前端细节调整很像靠感觉对话：这里大一点、那里靠右一点、间距再松一点。AI 能理解一部分，但经常会改错地方。
DOMPrompter 的思路是：先把“我指的是哪里”这件事说清楚，再让 AI 去写代码。
它不是要替代 DevTools，也不是要替代设计工具。它更像是 vibe coding 中间的一层翻译器，把你眼睛看到的元素，转换成 AI 更容易理解的上下文。
这个工具也是我用 vibe coding 做出来的，所以它某种程度上是在解决我自己每天遇到的小摩擦。
如果你也经常用 Cursor、Claude Code 或 Copilot 改前端界面，尤其是做 UI spacing、alignment、sizing 这类细节调整，DOMPrompter 可能会让这个过程少很多来回。
App Store：https://apps.apple.com/us/app/domprompter-ai-coding-prompt/id6761685716?mt=12
