Chrome 拡張 · AI でつくる開発者へ

アプリをクリック、
直したい箇所を AI へ。

動いているアプリにメモをピン留めするだけ。各マークのコンポーネント・ソースファイル・スタイルまで、AI コーディングエージェントに正確に届きます。

Chrome に追加 — 7 日間無料トライアル 仕組みを見る

Chrome 116+ · Edge でも動作 · $6.43 の買い切り、サブスクなし

対応： Claude CodeCursorGitHub Copilot WindsurfCodex ——ほかにも、貼り付けられる場所ならどこでも。

仕組み

気になる箇所、3 クリックで diff に。

1

パネルを呼び出す

起動中のアプリの上で Alt+Shift+A（Mac: ⌥⇧A）、またはツールバーのアイコンをクリック。localhost では自動ロードされます。

2

気になる箇所をマーク

要素に Note をピン留めし、Frame で範囲を囲み、 Pen で描き込み。直してほしいことは、普通の言葉で書くだけです。

「このボタンを大きく、ヘッダーのと同じ緑に」
3

Copy for AI → 貼り付け

ワンクリックで、全マークが対応する要素の情報ごと 1 つにまとまります。エージェントのチャットに貼ったら、あとは修正が届くのを眺めるだけ。

マークの種類

マークは 4 種類。指示書は 1 通。

1NOTE 要素をクリック · 変更をひと言

指さして、望みをひと言。

Note を選んでクリックすると、要素に番号付きのピンが付きます。あとは変更内容を書くだけ。範囲は Frame で囲み、Pen でラフに描き込むこともできます。

マークごとにきれいなスクリーンショットを添付でき、 @references でほかの要素も指せます——「これを @Heading に合わせて」のように。

Notepix パネルに、普通の言葉で書かれた 2 件のマークが並ぶ：「アップグレードボタンを控えめに」「統計カードの間隔を均等に」
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、そして隣の要素までの 実測ギャップ——どれも実際に描画されたピクセルです。

だから DevTools を一度も開かずに、 「ここの間隔は 24px——8 にして」と書けます。

統計カードにホバーすると、コンポーネントのラベル、パディングの枠、隣のカードまでの実測 18 ピクセルが表示される。チップの表示は font 14px、pad 18 20、gap 18
4BRIEF markdown · plain text · JSON · Claude in Chrome · MCP

ワンクリックで、どのエージェントも動ける指示書に。

Copy for AI が、未完了の全マーク——要素・ソース・スタイル・指示——を 1 回の貼り付けで渡せる形にまとめます。フォーマットは 5 種類。 Claude in Chrome 経由で Claude Code に引き継ぐハンドオフ用プロンプトも入っています。

書き出されるスクリーンショットには、マークの #id バッジが刻印済み。画像と指示がはぐれることはありません。

ループ

ピンを打つ。エージェントが直す。チェックは勝手に付く。

✓LIVE npx -y notepix-mcp setup · プラグアイコン → 緑

クリップボードすら不要。マークはエージェントが自分で読む。

コマンド 1 つで、ローカルの 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 ローカルストレージだけに保存されます。

トラッキングなし

アナリティクスも、テレメトリも、クラッシュレポートもなし。何をマークしているかは、誰にも見えません。

ネットワーク通信は 1 種類だけ

ライセンスキーを入力するまで、リクエストはゼロ。入力後も Gumroad へのキー確認、ただ 1 種類だけです。ページやメモを送ることはありません。

価格

7 日間無料。あとは $6.43。一度きり。

$6.43 買い切り · ずっとあなたのもの

Chrome Web Store で審査中——公開と同時にインストールボタンが有効になります。

Gumroad で決済 · ライセンスキーはメールで届く · パネルに入力してアンロック

  • トライアルは 7 日間、全機能——アカウントもカードも、登録すら不要です。
  • 一度の支払いで、ずっと使える——サブスクなし、シート課金なし。
  • メモがロックされることはない——購入の有無にかかわらず、作成済みマークの表示・コピー・エクスポートはトライアル後もずっと使えます。
  • マシンの引っ越しもそのまま——同じライセンスキーで、新しいマシンの Notepix もアンロックできます。

FAQ

よくある質問

React は必須ですか？

いいえ。Notepix はどんなページにもマークできます。React の開発ビルド（Vite、Next.js、CRA。React 18 と 19）なら、各マークにコンポーネント名とソースの file:line まで記録されます。プロダクションビルドや React 以外のページでは、要素を一意に特定できる CSS セレクターにフォールバック。Vue と Svelte のソース解決は今後対応予定です。

どの AI エージェントで使えますか？

貼り付けられる場所なら、どこでも。Claude Code、Cursor、GitHub Copilot、Windsurf、Codex、 Aider、ふつうのチャット画面でも使えます。指示書はクリップボード上のプレーンテキストなので、アカウントも設定も不要です。貼り付け自体を省く方法も 2 つあります。1 つは、Claude in Chrome でつないだ Claude Code——ハンドオフ形式を選ぶだけで、ページ上のマークを直接読み取ります。もう 1 つは、オプションの Notepix MCP サーバー。コマンド 1 つ、 npx -y notepix-mcp setup でマシン上の全コーディングエージェントに登録され、エージェント自身がマークとスクリーンショットを取得し、直したそばからチェックを付けていきます。

直したい要素は、どうやって AI エージェントに伝えますか？

クリックするだけです。Notepix が要素に番号付きのメモをピン留めし、React コンポーネント、ソースファイルと行番号、算出スタイル、きれいなスクリーンショットまで記録します。Copy for AI がすべてを 1 通の指示書にまとめるので、Claude Code、Cursor、Copilot に貼り付けるだけ。MCP 経由でエージェントに直接マークを読ませることもできます。

Notepix は UI 注釈・ビジュアルフィードバックのツールですか？

両方です。そのうえで、AI コーディングのループに合わせて作られています。デザインレビューやバグ報告のツールと同じ感覚で、 localhost を含むどの Web ページにも付箋・フレーム・手描きを残せます。違いはただ 1 つ——どの注釈（アノテーション）にも、AI コーディングエージェントが実際に修正を仕上げるのに必要なコードの文脈（コンポーネント、ファイル、セレクター、スタイル）が付いてくることです。

Lovable、Replit、v0、Bolt のプレビューでも動きますか？

はい。http(s) のページならどこでも、ツールバーの Notepix アイコンをクリックすればマークできます。クラウドのプレビューも対象です。localhost の開発サーバーなら、リロードのたびに Notepix が自動ロードされます。プレビュードメインのワンクリック自動ロードは、次のアップデートで追加予定です。

メモはどこに保存されますか？

Chrome の拡張機能ローカルストレージに、ページごと・SPA のルートごとに保存されます。 localhost の開発サーバーでは自動ロードされるので、リロードしてもメモはそのまま残ります。どのページのマークも JSON ファイルとしてエクスポートでき、別の環境にインポートできます。

Notepix はネットワークに何を送信しますか？

ライセンスキーを入力するまで、データは一切マシンの外に出ません。入力後もインターネット通信はただ 1 種類——アクティベーション時と、多くても週 1 回、 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 への掲載や、ほかのブラウザへの対応も今後予定しています。