ANNOTAI
让 AI 看见你
在说哪个元素
在浏览器里框选元素，复制带 file:line:col 的 Markdown 交给 AI，或按住 Alt+Shift 点击跳转到编辑器中的源码
快速开始
npm install -D annotai
为什么用 annotai
把「那个蓝色的按钮」翻译成 AI 和编辑器都能精确定位的源码坐标
框选标注
拖拽即选，自动解析到组件源码位置，不用手写选择器
明文位置
每个元素带 data-annotai-path，DevTools 里直接可读
复制 Markdown
把标注整理成结构化问题清单，粘贴给任何 AI 工具即可
编辑器跳转
Alt+Shift 点击直达编辑器中的源码行列
快速开始
三步接入，dev 服务即开即用
1
安装
npm install -D annotai
2
接入 Vite
import { annotate } from 'annotai/vite'
export default defineConfig({
plugins: [annotate()],
})3
框选、复制、跳转
pnpm dev
# 页面右下角打开面板 → 框选元素 → 备注问题
# 复制 Markdown 交给 AI，或 Alt+Shift 点击跳转到编辑器常见问题
支持哪些前端框架？
React、Vue 3、Solid
生产构建会注入标注属性吗？
不会。属性注入与源码服务仅在 dev / preview 启用，build 产物零残留
HMR 之后旧标注还能用吗？
文件变动后，旧标注会提示重新框选，不会指向错误的源码