Chrome 扩展 · 给用 AI 写代码的你

点击你的应用，
告诉 AI 改哪里。

在跑着的应用上钉下笔记——每条标注背后是哪个组件、哪个源文件、什么样式，你的 AI 编程助手一清二楚。

添加到 Chrome — 免费试用 7 天先看看怎么用

Chrome 116+ · 支持 Edge · $6.43 一次买断，无订阅

localhost:3000

Good morning, Alex

Here’s what happened across your workspace this week.

REVENUE $12,480 ▲ +8.2%

<div> in StatCard — StatCard.jsx:15 1 ACTIVE USERS 1,284 ▲ +3.1%

CHURN 2.4% ▼ −0.4%

Revenuelast 12 weeks

支持 Claude CodeCursorGitHub Copilot WindsurfCodex ——能粘贴的地方都能用。

工作原理

看不顺眼的地方，三次点击变成 diff。

唤出面板

在运行中的应用上按 Alt+Shift+A（Mac：⌥⇧A），或点击工具栏图标。localhost 上自动加载。

哪里不顺眼，就标哪里

把 Note 钉到任意元素，用 Frame 框住一块区域，或用 Pen 随手画。用大白话写下要改什么。

“这个按钮做大一点、改成绿色，跟顶部那个一样”

Copy for AI → 粘贴

一次点击，把所有标注连同背后的元素一起打包。粘贴进助手的对话框，看着修改一个个落地。

标注方式

四种标注方式，一份精确简报。

1NOTE 点击任意元素 · 说出要改什么

指着它，说出你想要的。

选 Note 再点一下——带编号的图钉落在元素上，写下要改什么。再用 Frame 框住一块区域，或拿 Pen 随手圈。

为每条标注附上干净的截图，还能用 @references 引用其他元素—— “把这个改得跟 @Heading 一致”。

Notepix 面板列出两条用大白话写的标注：把升级按钮做低调一点、让统计卡片间距一致

2SOURCE src/demo/components/UpgradeButton.jsx:6:25

每条标注都知道背后的代码。

不是 div.css-1q2w3e——而是 <button> in UpgradeButton — src/components/UpgradeButton.jsx:6。React 18/19、Vite、Next.js、CRA 都支持。你的助手直接打开对的文件，省得满项目 grep。

每条标注还会顺手记下元素的计算样式和 class 列表。不是 React 页面？自动回退为精确的 CSS 选择器。

在浮动编辑器里写笔记，图表上有一个红色手绘圆圈；配文写着：每条标注都知道背后的 React 组件和文件

3MEASURE font 14px · pad 18 20 · gap ←18 →18

拿真实像素说话，不靠感觉。

悬停就有 DevTools 级读数：padding、margin，还有到每个相邻元素的 实测间距——全是真实渲染出来的像素。

所以笔记里可以直接写“这俩之间 24px——改成 8”，DevTools 都不用开。

悬停统计卡片时显示组件标签、内边距框，以及到相邻卡片的 18 像素实测间距；小标签写着 font 14px、pad 18 20、gap 18

4BRIEF markdown · plain text · JSON · Claude in Chrome · MCP

一次点击，一份任何助手都能照做的简报。

Copy for AI 把所有待办标注——元素、源码、样式、指令——一次打包进剪贴板。五种格式任选，包括通过 Claude in Chrome 交接给 Claude Code 的提示词。

导出的截图都盖着所属标注的 #id 徽章——图片和指令永远不会走散。

剪贴板 · markdown 简报

# UI annotations
Page: http://localhost:3000/demo.html

## #1 — note
- jsx: `<button> in UpgradeButton`
       @ src/components/UpgradeButton.jsx:6
- style: 14px 800 · #fff on #f7a11b→#ef6820 · pad 11 22
- instruction: Tone it down — ghost style

## #2 — frame
- jsx: `<div> in StatCard`
       @ src/components/StatCard.jsx:15
- area: x=64 y=170 w=1152 h=124
- instruction: Equal gaps between these cards

闭环

你钉，助手修，卡片自己打勾。

✓LIVE npx -y notepix-mcp setup · 插头图标 → 变绿

跳过剪贴板：助手自己来读标注。

一条命令，把本地 Notepix 服务注册给机器上所有编程助手。助手直接从浏览器拉取每条标注，修好一个，就当着你的面把卡片翻成 DONE。

丢下一句“我钉一个，你修一个”，接着在应用里继续点来点去，看 diff 一个个落地。全程只走 127.0.0.1。

Notepix 面板的插头图标变绿，1 号标注翻成 DONE、文字被划掉——由 MCP 连接的 AI 助手实时勾掉

细节

还有这些小心思。

键盘优先

Alt+Shift+N 不开面板直接钉笔记。面板内 N F D S 切换模式。

截图干净利落

📷 只截那一个组件——Notepix 自家的图钉会先隐掉，绝不入镜。

懂 SPA，按页面存

每个路由都有自己的一套标注；你在前端路由间跳转，面板一路跟着。

导出 / 导入

JSON 出，JSON 进——把队友的标注合进来，换机器也能整套带走。

页面默认干干净净

图钉只在你标注时显示。收起面板，应用照样体面。

图片自带归属

每张截图都盖着所属标注的 #id——助手靠徽章给图片和指令对号入座，不看粘贴顺序。

是闭环，不是一锤子买卖

把标注勾成 ✓——留着备查，下次复制自动跳过。删错了？随时撤销。

绝不碍事

Ghost 模式让面板淡出，悬停才现身。想拖哪儿拖哪儿，任意边缘都能拉伸。

遇事不决，按 ?

按 ? 重看 30 秒上手指南。快捷键在 chrome://extensions/shortcuts 里随便改。

隐私优先

你的应用，从不离开你的电脑。

没有服务端，没有账号

没有后端。笔记、截图和源码路径都存在你电脑上 Chrome 的本地存储里——别无他处。

零跟踪

没有埋点、没有遥测、没有崩溃上报。你标注什么，是你自己的事。

网络请求，只有一种

输入许可密钥之前，零请求——之后也只有一种：向 Gumroad 校验密钥。你的页面和笔记，绝不上传。

价格

免费试用 7 天。然后 $6.43。就这一次。

$6.43 一次买断 · 永远是你的

Chrome Web Store 审核中——上架后安装按钮自动生效。

在 Gumroad 结账 · 许可密钥发到邮箱 · 回到面板解锁

7 天试用，功能一个不少——不用注册账号，不用绑卡，什么都不用填。
付一次，永久解锁——没有订阅，也不数人头。
你的笔记永不上锁——试用结束后，已有标注照样能看、能复制、能导出，买不买都一样。
跟着你走——换了新机器，同一个许可密钥照样解锁 Notepix。

常见问题

有问必答。

必须是 React 项目吗？

不是——Notepix 什么页面都能标注。在 React 的 dev 构建上（Vite、Next.js、CRA； React 18 和 19），每条标注还会额外记下元素背后的组件名和源文件:行号；生产构建和非 React 页面则回退为精确的 CSS 选择器。 Vue 和 Svelte 的源码定位已经在路线图上。

支持哪些 AI 助手？

只要能粘贴，就能用：Claude Code、Cursor、GitHub Copilot、Windsurf、Codex、 Aider，甚至随便一个聊天窗口。简报就是剪贴板里的纯文本——不用注册账号，也不用任何配置。你还可以干脆跳过粘贴这一步，两条路：让 Claude Code 通过 Claude in Chrome 接上（选好交接格式，它直接从页面上读标注），或者装上可选的 Notepix MCP 服务——一条命令 npx -y notepix-mcp setup，注册到机器上所有编程助手——之后助手自己拉取标注和截图，修一个勾一个。

怎么让 AI 助手知道我要改哪个元素？

点它一下就行。Notepix 会在元素上钉一条带编号的笔记，并记下背后的 React 组件、源文件和行号、计算样式，外加一张干净的截图。Copy for AI 把这一切合成一份简报——粘贴进 Claude Code、Cursor 或 Copilot——也可以让助手通过 MCP 自己来读标注。

Notepix 算 UI 标注工具还是可视化反馈工具？

都算，而且是为 AI 编程闭环而生。你可以把它当设计走查或 bug 反馈工具用——在任意网页上贴便签、画框、手绘，localhost 也不例外——区别只有一个：每条标注都自带代码上下文（组件、文件、选择器、样式），AI 编程助手拿到就能把修改真正落地。

在 Lovable、Replit、v0 或 Bolt 的预览上能用吗？

能——在任何 http(s) 页面点一下工具栏上的 Notepix 图标就能开始标注，云端预览也不例外。localhost 开发服务器上，Notepix 每次刷新后都会自动加载；预览域名的一键自动加载已经排进下一次更新。

我的笔记存在哪里？

存在 Chrome 的本地扩展存储里，按页面、按 SPA 路由分开。localhost 开发服务器上 Notepix 自动加载，刷新多少次笔记都还在。任何页面的标注都能导出成 JSON 文件，想在哪儿导入都行。

Notepix 会往外发什么数据？

在你输入许可密钥之前，没有任何数据离开你的电脑。之后也只有一种网络请求：激活时、以及最多每周一次，向 Gumroad 的许可 API 校验密钥。请求里只有密钥和产品 id，绝不包含页面内容、笔记或截图。如果开启可选的 MCP 连接，它也只连 127.0.0.1——你自己这台机器——哪儿都不去。完整政策见隐私页面。

试用期结束会怎样？

到期后创建新标注，会提示你用 $6.43 一次买断。之前创建的一切，永远可以查看、复制、导出、删除——你的笔记归你所有。

键盘快捷键没反应？

Alt+Shift 容易和输入法或键盘布局切换打架，Windows 上尤其常见。打开 chrome://extensions/shortcuts，把 “Toggle the Notepix panel” 改绑成你顺手的组合——无论如何，工具栏图标和右键菜单永远可用。

只支持 Chrome 吗？

Chrome 116+ 和 Chromium 内核的 Edge（已测试）。Edge Add-ons 商店上架和更多浏览器支持都在路线图上。