和 AI 编程助手一起做界面时，你是不是也遇到过这样的情况：明明一眼就能看出哪里需要调整，却很难用文字把位置和意图讲清楚？
“这个按钮再宽一点。” “不是上面那个，是菜单展开后的第二个。” “我说的是图片外面的边框，不是图片本身。”
于是，你开始截图、圈选、解释页面结构，再把这些信息来回复制给 AI。一个很小的视觉调整，往往花在沟通上的时间比修改本身还多。
Ainotation 就是为这类场景做的小工具。它让你直接在正在开发的真实页面上留下反馈，把你的意见和对应的界面元素放在一起，再交给编程助手继续处理。
这段视频介绍了 Ainotation 的主要功能，也展示了从发现界面问题、留下批注，到把反馈交给 AI 的使用流程。
① 在真实页面上点选、批注
打开检查器，点击需要调整的元素，就能在它旁边写下意见。你也可以选中一段文字，或通过多选把相关元素放进同一条反馈。
如果点到的是图片，但想修改的是外层容器，还可以向上选择父元素，再沿原路径返回。这样，“改哪里”就有了明确的对象。
② 用图片补充文字说不清的细节
间距、对齐、遮挡、裁剪范围，有时画一下比写一段更直接。
Ainotation 支持截图标注，也能导入已有图片。你可以画箭头、矩形、椭圆和自由线，移动、缩放、旋转标记，裁剪图片，或者撤销刚才的操作。完成后的图片会作为附件，和文字反馈一起保存。
③ 先打开那个菜单，再标注它
真实界面不只有静态页面，还有下拉菜单、弹窗和各种交互状态。
标注过程中，按住 Option / Alt 可以临时操作原页面，比如展开菜单、切换内容；松开后继续选取或绘制。你可以把反馈留在问题真正出现的状态里。
④ 让编程助手拿到足够的上下文
一条“这里再留一点空间”的意见，只有配上具体位置才容易执行。
Ainotation 会为反馈附上页面地址、元素选择符、位置与样式，以及有边界的 DOM 上下文。连接 MCP 后，编程助手可以读取标注，并按需获取图片附件，减少反复确认“你指的是哪里”的过程。
⑤ 按你的工作方式交接反馈
MCP 是其中一种出口。你也可以直接复制 Markdown，或者导出反馈与图片附件，再交给自己习惯使用的工具。
反馈按项目和页面整理，保存在本地。无需注册账号，也不需要先配置云端服务，就能开始使用基础标注功能。
目前 Ainotation 已发布 Beta，支持 Vite 项目接入，SDK 不依赖宿主使用 React、Vue 还是其他渲染框架。
如果你也在和 AI 一起打磨 UI，欢迎试试看。也欢迎告诉我：你最想用它解决哪一种沟通问题？
在线体验：https://nightire.github.io/ainotation/
源码与接入说明：https://github.com/nightire/ainotation
