把页面上的设计问题，
变成 AI 能直接执行的提示词
像 DevTools 一样选中元素，写下批注，一键复制包含页面 URL、CSS 选择器、XPath、坐标、计算样式和 React/Vue 组件栈的 Markdown。粘给 ChatGPT / Claude / Cursor / Copilot / DeepSeek 就能定位代码修改 UI。
它解决什么问题
以前
截图 → 发给 AI → 手打「这是首页 hero 区的按钮，大概在 components/ 下面」→ AI 猜文件 → 来回追问。
现在
点元素 → 写一句 → 复制 → 粘贴。提示词里已经有 URL、唯一选择器、XPath、坐标、样式和组件源码位置。
核心功能
精确定位
唯一 CSS 选择器 + XPath + 父级路径 + 文档/视口坐标 + 尺寸。
样式与组件栈
计算样式、React/Vue/Angular 组件名与源码位置（best effort）。
Shadow DOM / iframe
open shadow root 内部元素可拾取；iframe 容器可批注。
多批注合并
一页多个问题合成一段 Markdown，AI 逐条改。
纯本地
没有 fetch / 上报 / 账号；数据只在浏览器 storage.local。
跨浏览器
同一份 MV3 代码，Chrome/Edge + Firefox。
30 秒上手
# 1. 下载 Release，或在 Chrome/Edge 加载本目录
# 2. 打开任意前端页面（本地 demo 也可以）
cd demo && python -m http.server 8000
# 3. 按 Alt+Shift+C，点元素，写批注，Enter 保存
# 4. 按 C 复制提示词，粘贴给 AI隐私承诺
- 扩展源码中没有网络请求、远程脚本、eval。
- 页面文本/HTML/样式只在本机处理，保存在 storage.local。
- 只有你主动复制并粘贴到第三方 AI 时，内容才离开浏览器。
- AMO 数据声明：
required: ["none"]。
关键词 / Keywords
browser extension, Chrome extension, Edge extension, Firefox add-on, Manifest V3, element picker, inspect element, DevTools alternative, CSS selector, XPath, computed styles, UI annotation, design review, frontend debugging, AI prompt, prompt engineering, AI coding assistant, Cursor, Claude Code, GitHub Copilot, ChatGPT, DeepSeek, React component stack, Vue component stack, Shadow DOM, Web Components, iframe annotation, bug reporting, developer tools, local-first, privacy-first.
浏览器插件、Chrome 扩展、Edge 扩展、Firefox 附加组件、元素选择器、页面批注、设计走查、前端调试、AI 提示词、提示词工程、CSS 选择器、XPath、计算样式、组件栈、纯本地。