Tiện ích Chrome · cho AI builder

Click vào app của bạn,
bảo AI cần sửa gì.

Ghim ghi chú lên app đang chạy — AI coding agent của bạn nhận đúng component, file nguồn và style đằng sau mỗi mark.

Thêm vào Chrome — 7 ngày miễn phí Xem cách hoạt động

Chrome 116+ · chạy trên Edge · $6.43 một lần, không subscription

Hoạt động với Claude CodeCursorGitHub Copilot WindsurfCodex — dán vào đâu cũng được.

Cách hoạt động

Thấy ngứa mắt? Ba cú click là ra diff.

1

Gọi panel lên

Nhấn Alt+Shift+A (Mac: ⌥⇧A) trên app đang chạy, hoặc bấm icon trên thanh công cụ. Trên localhost thì tự bật sẵn.

2

Đánh dấu chỗ chướng mắt

Ghim Note vào bất kỳ element nào, kéo Frame quanh một vùng, hoặc phác bằng Pen. Viết điều cần đổi bằng lời thường.

“Cho nút này to lên, đổi sang xanh lá — giống nút trên header”
3

Copy for AI → dán

Một cú click gói mọi mark kèm đúng element phía sau. Dán vào chat của agent rồi ngồi xem từng chỗ được sửa.

Các mark

Bốn cách đánh dấu. Một brief chính xác.

1NOTE click bất kỳ element · nói điều cần đổi

Chỉ đúng chỗ. Nói điều bạn muốn.

Chọn Note rồi click — một pin đánh số gắn lên element, bạn gõ điều cần đổi. Kéo Frame quanh một vùng, hoặc vẽ nguệch ngoạc bằng Pen.

Đính ảnh chụp sạch cho từng mark, và thả @references tới element khác — “cho cái này giống @Heading”.

Panel Notepix liệt kê hai mark với chỉ dẫn viết bằng lời thường: dịu bớt nút upgrade, cân đều khoảng cách giữa các thẻ số liệu
2SOURCE src/demo/components/UpgradeButton.jsx:6:25

Mỗi mark biết rõ code phía sau.

Không phải div.css-1q2w3e — mà là <button> in UpgradeButton — src/components/UpgradeButton.jsx:6. React 18/19, Vite, Next.js, CRA. Agent của bạn mở đúng file thay vì phải grep.

Mỗi mark còn chụp lại computed style và danh sách class của element. Trang không dùng React? Tự chuyển về một CSS selector chính xác.

Đang viết ghi chú trong editor nổi với vòng tròn đỏ vẽ tay trên biểu đồ; chú thích ghi: mỗi mark biết rõ React component và file phía sau
3MEASURE font 14px · pad 18 20 · gap ←18 →18

Nói bằng pixel thật, không áng chừng.

Rê chuột là hiện bảng đo chuẩn DevTools: padding, margin, và khoảng cách đo được tới từng element bên cạnh — pixel render thật.

Nhờ vậy ghi chú có thể viết “giữa hai cái này đang 24px — đưa về 8” mà không cần mở DevTools.

Rê chuột lên thẻ số liệu hiện nhãn component, viền padding và khoảng cách 18 pixel đo được tới các thẻ bên cạnh, kèm chip ghi font 14px, pad 18 20, gap 18
4BRIEF markdown · plain text · JSON · Claude in Chrome · MCP

Một cú click. Một brief agent nào cũng xử lý được.

Copy for AI gói mọi mark đang mở — element, nguồn, style, chỉ dẫn — thành một lần dán duy nhất. Năm định dạng, gồm cả prompt bàn giao cho Claude Code qua Claude in Chrome.

Ảnh chụp xuất ra đều đóng dấu badge #id của mark — ảnh và chỉ dẫn không thể lạc nhau.

Vòng lặp

Bạn ghim. Agent sửa. Thẻ tự tích xong.

✓LIVE npx -y notepix-mcp setup · icon phích cắm → xanh

Bỏ qua clipboard: agent tự đọc mark.

Chỉ một lệnh là Notepix server cục bộ được đăng ký với mọi coding agent trên máy bạn. Agent kéo từng mark thẳng từ trình duyệt; sửa xong mark nào là lật thẻ đó sang DONE ngay trước mắt bạn.

Bảo agent “tôi ghim tới đâu, sửa tới đó” rồi cứ click tiếp quanh app trong lúc các bản sửa lần lượt hiện ra. Tất cả trên 127.0.0.1.

Panel Notepix với icon phích cắm xanh và mark số một lật sang DONE, chữ gạch ngang — được AI agent kết nối qua MCP tích xong trực tiếp

Chi tiết

Ngoài ra còn có.

Ưu tiên bàn phím

Alt+Shift+N ghim ghi chú không cần mở panel. Trong panel, N F D S chuyển chế độ.

Ảnh chụp cắt gọn

Nút 📷 cắt đúng component đó — pin của chính Notepix được gỡ ra trước.

Hiểu SPA, theo từng trang

Mỗi route giữ mark riêng; panel bám theo điều hướng phía client của bạn.

Xuất / nhập

JSON ra, JSON vào — gộp mark của đồng đội hoặc chuyển máy.

Không làm bẩn trang

Pin chỉ vẽ khi bạn đang đánh dấu. Ẩn panel là app lại chỉn chu như thường.

Ảnh tự gắn với mark

Mỗi ảnh chụp được đóng dấu #id của mark — agent khớp ảnh với chỉ dẫn theo badge, không theo thứ tự dán.

Vòng lặp, không phải một lần rồi thôi

Tích ✓ xong một mark — nó ở lại để tham chiếu nhưng sẽ không vào lần copy sau. Mỗi lần xóa đều có Undo.

Không vướng víu

Ghost mode làm mờ panel đến khi bạn rê chuột vào. Kéo đi đâu tùy ý, co giãn từ mọi cạnh.

Cần trợ giúp, bấm ?

Nút ? mở lại hướng dẫn 30 giây. Gán lại phím tắt tại chrome://extensions/shortcuts.

Riêng tư từ gốc

App của bạn không bao giờ rời khỏi máy.

Không server, không tài khoản

Không backend. Ghi chú, ảnh chụp và đường dẫn nguồn nằm trong bộ nhớ cục bộ của Chrome trên máy bạn — không ở đâu khác.

Không theo dõi

Không analytics, không telemetry, không báo cáo crash. Bạn đánh dấu gì là việc của bạn.

Đúng một loại request, không hơn

Không request nào cho đến khi bạn nhập license key — rồi chỉ đúng một loại: xác thực key với Gumroad. Không bao giờ là trang hay ghi chú của bạn.

Giá

Miễn phí 7 ngày. Rồi $6.43. Một lần.

$6.43 một lần · của bạn mãi mãi

Đang chờ duyệt trên Chrome Web Store — nút cài đặt sẽ bật ngay khi được duyệt.

Thanh toán qua Gumroad · license key gửi qua email · mở khóa trong panel

  • Dùng thử 7 ngày, đủ tính năng — không tài khoản, không thẻ, không phải đăng ký gì.
  • Trả một lần, mở khóa mãi mãi — không subscription, không tính theo đầu người.
  • Ghi chú không bao giờ bị khóa — hết dùng thử vẫn xem, sao chép và xuất được mark đã tạo, dù trả phí hay không.
  • Theo bạn sang máy mới — cùng một license key mở khóa Notepix trên máy khác.

FAQ

Hỏi nhanh, đáp gọn.

Có cần React thì mới dùng được không?

Không — Notepix đánh dấu được mọi trang. Trên bản dev React (Vite, Next.js, CRA; React 18 và 19), mỗi mark còn ghi thêm tên component và file:dòng nguồn phía sau element. Trên bản production và trang không dùng React, nó tự chuyển về một CSS selector chính xác. Truy nguồn cho Vue và Svelte đã có trong lộ trình.

Hoạt động với những AI agent nào?

Bất cứ nơi nào bạn dán được: Claude Code, Cursor, GitHub Copilot, Windsurf, Codex, Aider, hay một cửa sổ chat thường. Brief là văn bản thuần trên clipboard — không cần tài khoản hay cài đặt gì. Bạn cũng có thể bỏ hẳn bước dán, theo hai cách: dùng Claude Code kết nối qua Claude in Chrome (chọn định dạng bàn giao là nó tự đọc mark trên trang), hoặc thêm Notepix MCP server tùy chọn — một lệnh, npx -y notepix-mcp setup, đăng ký nó với mọi coding agent trên máy bạn — để agent tự kéo mark và ảnh chụp về, sửa đến đâu tích xong đến đó.

Làm sao chỉ cho AI agent đúng element cần sửa?

Click vào nó. Notepix ghim một ghi chú đánh số lên element và ghi lại React component, file nguồn kèm số dòng, computed style cùng ảnh chụp sạch đằng sau. Copy for AI gom tất cả thành một brief — dán vào Claude Code, Cursor hay Copilot — hoặc để agent tự đọc mark qua MCP.

Notepix có phải công cụ chú thích UI / góp ý giao diện không?

Cả hai, và sinh ra cho vòng lặp code bằng AI. Dùng như công cụ review thiết kế hay báo bug — ghi chú, khung và nét vẽ trên bất kỳ trang web nào, kể cả localhost — khác ở chỗ: mỗi chú thích mang sẵn ngữ cảnh code (component, file, selector, style) mà AI coding agent cần để sửa được thật.

Có chạy trên preview của Lovable, Replit, v0 hay Bolt không?

Có — bấm icon Notepix trên thanh công cụ ở bất kỳ trang http(s) nào, kể cả preview trên cloud, rồi đánh dấu thoải mái. Trên dev server localhost, Notepix tự load sau mỗi lần reload; auto-load một cú click cho các domain preview sẽ có trong bản cập nhật kế tiếp.

Ghi chú của tôi nằm ở đâu?

Trong bộ nhớ cục bộ của tiện ích trên Chrome, tách theo từng trang và từng route SPA. Trên dev server localhost, Notepix tự load nên ghi chú vẫn còn nguyên sau mỗi lần reload. Bạn có thể xuất mark của bất kỳ trang nào ra file JSON và nhập lại ở bất cứ đâu.

Notepix gửi gì qua mạng?

Không gì rời khỏi máy bạn — cho đến khi bạn nhập license key. Từ đó trở đi chỉ có đúng một loại request: xác thực key với API license của Gumroad lúc kích hoạt và tối đa mỗi tuần một lần. Request chỉ mang key và id sản phẩm, không bao giờ kèm nội dung trang, ghi chú hay ảnh chụp. Nếu bật kết nối MCP tùy chọn, kết nối đó chỉ chạy tới 127.0.0.1 — chính máy của bạn — và không đi đâu khác. Chính sách đầy đủ nằm ở trang quyền riêng tư.

Hết hạn dùng thử thì sao?

Khi tạo mark mới, Notepix sẽ hỏi mở khóa một lần $6.43. Mọi thứ bạn đã tạo vẫn xem, sao chép, xuất và xóa được mãi mãi — ghi chú là dữ liệu của bạn.

Bấm phím tắt mà không thấy gì?

Alt+Shift dễ đụng với tổ hợp chuyển bộ gõ, nhất là trên Windows. Mở chrome://extensions/shortcuts và gán lại “Toggle the Notepix panel” thành tổ hợp bạn thích — icon trên thanh công cụ và menu chuột phải thì lúc nào cũng hoạt động.

Chỉ chạy trên Chrome?

Chrome 116+ và Edge nhân Chromium (đã kiểm thử). Bản đăng trên Edge Add-ons và các trình duyệt khác đã có trong lộ trình.