nicobailon/pi-annotate

解决的问题

Pi Annotate 提供了一种向 AI 代理可视化传达 UI 问题和设计变更的方法。无需手动描述布局问题或复制 CSS，用户只需点击网页上的元素，即可捕获 AI 代理修复代码所需的精确技术上下文（选择器、盒模型、可访问性角色）和截图。

工作原理

它作为 Chrome/Chromium 的浏览器扩展运行，与原生主机和 Pi 扩展配合使用。当用户执行 /annotate 命令时，该工具会向浏览器注入一个注释 UI。用户可以选取元素、添加评论，甚至使用「Etch」模式记录 DevTools 中的实时编辑。这些数据——包括 HTML 属性、CSS 样式和视觉裁剪——随后被打包成结构化的 Markdown 报告并发送给 AI 代理。

适用人群

使用 AI 代理辅助 UI/UX 实现和 bug 修复的前端开发人员和设计师。

主要亮点

• 深度上下文捕获：自动收集所选元素的盒模型数据、可访问性信息和关键 CSS 样式。
• 编辑捕获（Etch）：通过 MutationObserver 跟踪浏览器 DevTools 中的实时更改，并提供前后截图和属性差异。
• 视觉注释卡片：提供类似 Figma 的体验，支持可拖拽的浮动注释卡片和连接评论与元素的 SVG 连接线。
• 远程与 WSL 支持：通过原生消息桥接，支持在远程 SSH 主机或 WSL 环境中对页面进行注释。