Language: CN | EN
AI 辅助编程已经让前端代码的生成、重构和修改变得更容易。但前端 UI 工作常常是视觉化、局部化且细微的。真正困难的地方并不总是写代码，而是把准确的视觉意图传达给 AI coding agent。
开发者和产品构建者通常能看出 UI 哪里“不对劲”。一条线可能需要更弯一点，一个卡片可能需要稍微移动，一个区块可能需要更好的间距，一个形状可能需要沿着不同的走势变化。这些修改人眼很容易识别，但很难用自然语言精确描述。
纯文字指令经常不够明确。像“往左挪一点”或“让它更柔和一些”这样的描述，非常依赖观察者自己的理解。AI coding agent 可能理解大方向，但往往缺少足够的空间上下文，无法确定准确目标、预期视觉结果以及相关的 DOM 和 CSS。
截图能改善这个问题，但单独的截图仍然不完整。截图可以展示大概的问题区域，却不能提供结构化坐标、视口尺寸、滚动位置、device pixel ratio、标注意图或附近 DOM/CSS 上下文。AI 能看到像素，但仍然没有足够信息理解用户真正想表达的修改意图。
前端打磨经常发生在非常细小的细节上：
- 线条弧度
- 间距和节奏
- 位置和对齐
- 边缘和轮廓
- 形状走势
- 视觉层级
- 局部布局平衡
这些细节往往太具体，难以完全用文字表达；同时又太依赖上下文，无法只靠截图准确传达。
DesignPointer 提出在人类视觉意图和 AI 代码生成之间增加一个缺失层：结构化视觉意图。它不要求用户把每个细节都描述成文字，而是让用户在真实页面上直接指出目标区域、画出期望参考，并导出一个结合标注、截图、坐标、视口元数据以及附近 DOM/CSS 上下文的 payload。
DesignPointer 的目标不是取代设计师、开发者或 AI coding agents，而是让它们之间的沟通更精确。当 AI 知道用户讨论的是 UI 的哪一部分、希望产生什么视觉变化，以及这部分周围有哪些页面上下文时，前端代码建议就会更准确，也更容易被审查。