Chrome 扩展 · 为 AI 开发者而生

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

在运行中的应用上钉下笔记——你的 AI 编程助手拿到每个标记背后的组件、源文件和样式。

添加到 Chrome — 免费试用 7 天 看看它怎么工作

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

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

工作原理

三次点击，从看不顺眼到 diff。

1

唤出面板

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

2

标记你看不顺眼的地方

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

“这个按钮放大、改成绿色，像顶部那个一样”
3

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 徽章——图片和指令不会走散。

闭环

钉下。助手修好。卡片自动打勾。

✓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——助手按徽章配对图片和指令，不看粘贴顺序。

是闭环，不是一锤子

把标记勾成 ✓ 完成——它留着备查，但不再进入下一次复制。每次删除都可 Undo。

不挡你的手

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

帮助就在 ? 里

? 重新打开 30 秒指南。在 chrome://extensions/shortcuts 重绑快捷键。

隐私即设计

你的应用永远不离开你的电脑。

无服务器，无账号

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

无跟踪

没有分析、没有遥测、没有崩溃上报。你标注什么，只与你有关。

网络请求，只有一种

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

价格

免费 7 天。然后 $6.43。一次。

$6.43 一次买断 · 永久属于你

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

通过 Gumroad 结账 · 许可证密钥发到邮箱 · 在面板中解锁

  • 7 天试用，功能完整——无账号、无银行卡、无需注册。
  • 一次付款，永久解锁——无订阅，不按席位计费。
  • 你的笔记永不上锁——试用结束后，查看、复制、导出已有标记照常可用，买不买都一样。
  • 跟着你走——同一个许可证密钥可在新机器上解锁 Notepix。

FAQ

有问必答。

必须用 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 in Chrome 连接的 Claude Code（选择交接格式，它直接从页面读取标记），或安装可选的 Notepix MCP 服务——一条命令， npx -y notepix-mcp setup，注册到机器上所有编程助手——助手自己拉取标记和截图，修一个勾一个。

在 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 上架和其他浏览器在路线图上。