Chrome 扩展 · 免费

指着屏幕跟 AI 说「就这里」

你看到的问题肉眼一秒就懂,敲成文字却要写半天。
MarkIt 让你在网页上圈一下、写句人话,自动生成 AI 看得懂的结构化指令。

粘贴给 Cursor · Claude Code · Copilot 即用
demo.markit.app

更快构建
现代化产品

面向开发者的一体化平台,让你的产品提速 10 倍。

极速部署

秒级上线,全球 CDN 加速。

🔒

默认安全

企业级加密与合规保障。

🤖

AI 驱动

智能补全、缺陷检测、自动测试。

实时生成 · 结构化指令

        
👆 点击或拖拽框选左侧网页里的元素,开始标注
M 切换标注模式
那个……登录框上面的按钮,不对,再上面一点的,往右挪挪,颜色也太深了

AI 听不懂,你解释到崩溃。问题不在 AI,而在于——

👁

眼睛看到的

按钮偏了、文字重叠、间距不对——天生难以用文字精确描述。

🤖

AI 需要的

哪个元素、CSS 选择器、源码位置、目标效果——从来没人给它喂全。

三步,把「感觉不对」变成「改这个元素」

01

圈一下

在页面上点选或拖拽框住任意元素 / 区域,红蓝双色实时高亮。

02

写句人话

「把这个变成红色警告按钮」——像跟同事说话一样描述你的意图。

03

喂给 AI

自动补齐元素定位、CSS 路径、截图,打包成 Markdown,一键复制。

一个工具,两种标注方式

开发模式

告诉 AI「改这里」

精确定位到具体元素,输出 CSS 选择器、代码上下文、坐标尺寸。最适合让 AI 编程助手直接动手改代码。

  • 元素定位 + CSS 路径
  • 代码片段 + 上下文
  • 三档输出详细度
原型模式

告诉 AI「做成这样」

可视化绘制区域 + 一键截图,把设计意图、布局调整、交互想法直观地标注出来交给 AI。

  • 区域框选 + 标注标签
  • 整页截图捕获
  • 视觉化连线说明

细节,都替你想到了

🎯

精准元素定位

自动生成稳定的 CSS 选择器与 DOM 路径。

📐

坐标与尺寸

记录视口位置、包围盒、相对偏移。

📸

一键截图

原型模式捕获整页画面,附在标注里。

🌐

中英双语

界面与输出均支持中英文切换。

💾

跨页持久

标注本地存储,刷新、跨会话不丢失。

🎨

自定义配色

开发 / 原型模式各 8 种主题色可选。

现在,让 AI 看懂你的网页

免费、即装即用。打开任意网页,右下角就是 MarkIt。

添加到 Chrome — 免费
Chrome MV3 · 无需注册 · 数据仅存本地