Chrome 扩展 · 免费
网页标注，少猜一点
在网页上圈选元素、写句人话，自动整理成可复制的结构化反馈。
给 AI 编程助手、开发沟通和评审文档都少一点来回解释
使用场景
🔎 反馈页面问题 / Bug
- 切换到文本模式
- 点击元素输入问题或修改要求
- 复制全部，发给 AI 或分享给团队
🎨 画原型 / 验收页面
- 切换到图片模式
- 框选并截图标注设计变更或交互问题
- 复制全部，粘贴到 PRD 或评审文档
Demo Page
定价组件验收
MarkIt 1.6.0 · 页面验收中
标注页面问题
生成 AI 反馈
点选元素、截图并写下需求，自动整理 selector、位置和验收标准。
⌘
文本模式
定位页面元素，整理修改要求和验收标准。
▣
图片模式
截图标注设计变更和交互问题。
AI
结构化输出
复制给 AI、开发或评审文档。
结构化反馈 · 可复制给 AI / 开发 / 评审
👆 点击或拖拽框选左侧网页里的元素，开始标注
⌘⇧M 切换标注模式
（Mac: Command+Shift+M；Windows/Linux: Ctrl+Shift+M）
“
那个……登录框上面的按钮，不对，再上面一点的，往右挪挪，颜色也太深了
对方需要反复追问，你解释到崩溃。问题不在谁笨，而在于——
👁
眼睛看到的
按钮偏了、文字重叠、间距不对——天生难以用文字精确描述。
🤖
对方需要的
哪个元素、CSS 选择器、页面位置、目标效果、验收口径——从来没人整理完整。
三步，把「感觉不对」变成结构化反馈
01
圈一下
在页面上点选或拖拽框住任意元素 / 区域，红蓝双色实时高亮。
→
02
写句人话
「把这个变成红色警告按钮」——像跟同事说话一样描述你的意图。
→
03
复制反馈
自动整理元素定位、CSS 路径、页面证据和验收标准，打包成 Markdown。
一个工具，两种标注方式
文本模式
把页面问题说清楚
精确定位到具体元素，输出 CSS 选择器、页面上下文、坐标尺寸和验收口径。适合 AI 修改、Bug 反馈和页面评审。
- 元素定位 + CSS 路径
- 页面证据 + 上下文
- 三档输出详细度
图片模式
把视觉想法标出来
可视化绘制区域 + 一键截图，把设计意图、布局调整、交互想法直观地标注出来交给团队。
- 区域框选 + 标注标签
- 当前视口截图
- Shift 双选关联两个元素
- 视觉化连线说明
细节，都替你想到了
🎯
精准元素定位
自动生成稳定的 CSS 选择器与 DOM 路径。
📐
坐标与尺寸
记录视口位置、包围盒、相对偏移。
📸
一键截图
图片模式捕获当前视口画面，附在标注里。
🔗
关联标注
Shift 点选两个元素，讲清它们之间的关系。
🌐
中英双语
界面与输出均支持中英文切换。
💾
跨页持久
标注本地存储，刷新、跨会话不丢失。
🎨
自定义配色
文本 / 图片模式各 8 种主题色可选。