Chrome-Erweiterung · für KI-Builder

Klick in deine App,
sag der KI, was sie fixen soll.

Pinne Notizen an deine laufende App — dein KI-Coding-Agent bekommt exakt Komponente, Quelldatei und Style hinter jeder Markierung.

Zu Chrome hinzufügen — 7 Tage kostenlos testen So funktioniert’s

Chrome 116+ · läuft auch auf Edge · $6.43 einmal zahlen, kein Abo

Funktioniert mit Claude CodeCursorGitHub Copilot WindsurfCodex — und allem, wo du Text einfügen kannst.

So funktioniert’s

Drei Klicks vom Ärger zum Diff.

1

Ruf das Panel auf

Drück Alt+Shift+A (Mac: ⌥⇧A) in deiner laufenden App oder klick aufs Toolbar-Icon. Auf localhost lädt Notepix von selbst.

2

Markier, was dich stört

Pinne eine Note an ein Element, zieh einen Frame um einen Bereich oder skizzier mit dem Pen. Schreib die Änderung in ganz normalen Worten.

„Mach diesen Button größer und grün, wie den im Header“
3

Copy for AI → einfügen

Ein Klick bündelt jede Markierung mit dem exakten Element dahinter. Füg’s in den Chat deines Agents ein und sieh zu, wie die Fixes landen.

Die Markierungen

Vier Arten zu markieren. Ein präzises Briefing.

1NOTE klick ein Element an · sag die Änderung

Zeig auf die Stelle. Sag, was du willst.

Wähl Note und klick — ein nummerierter Pin landet auf dem Element, du tippst die Änderung. Zieh einen Frame um einen Bereich oder kritzle mit dem Pen.

Häng saubere Screenshots pro Markierung an und setz @Referenzen auf andere Elemente — „mach das passend zu @Heading“.

Das Notepix-Panel mit zwei Markierungen und Anweisungen in normalen Worten: einen Upgrade-Button dezenter machen, Abstände zwischen Stat-Karten angleichen
2SOURCE src/demo/components/UpgradeButton.jsx:6:25

Jede Markierung kennt den Code dahinter.

Nicht div.css-1q2w3e — sondern <button> in UpgradeButton — src/components/UpgradeButton.jsx:6. React 18/19, Vite, Next.js, CRA. Dein Agent öffnet die richtige Datei, statt danach zu greppen.

Jede Markierung hält außerdem den berechneten Style und die Klassenliste des Elements fest. Keine React-Seite? Dann gibt’s einen präzisen CSS-Selektor.

Eine Notiz im schwebenden Editor, mit einem freihändig gezeichneten roten Kreis auf dem Chart; die Bildunterschrift: jede Markierung kennt die React-Komponente und Datei dahinter
3MEASURE font 14px · pad 18 20 · gap ←18 →18

Echte Pixel statt Bauchgefühl.

Beim Hovern erscheint eine Anzeige auf DevTools-Niveau: Padding, Margin und der gemessene Abstand zu jedem Nachbarn — echte gerenderte Pixel.

So steht in der Notiz „24px zwischen den beiden — mach 8 draus“ — ohne dass du je die DevTools öffnest.

Beim Hovern über eine Stat-Karte erscheinen Komponenten-Label, Padding-Ring und gemessene 18-Pixel-Abstände zu den Nachbarkarten, mit einem Chip: font 14px, pad 18 20, gap 18
4BRIEF markdown · plain text · JSON · Claude in Chrome · MCP

Ein Klick. Ein Briefing, mit dem jeder Agent arbeiten kann.

Copy for AI packt jede offene Markierung — Element, Quelle, Style, Anweisung — in einem Rutsch in die Zwischenablage. Fünf Formate, darunter ein Übergabe-Prompt für Claude Code via Claude in Chrome.

Screenshots gehen gestempelt raus, mit dem #id-Badge ihrer Markierung — Bild und Anweisung geraten nie durcheinander.

Der Loop

Du pinnst. Dein Agent fixt. Die Karte hakt sich von selbst ab.

✓LIVE npx -y notepix-mcp setup · Stecker-Icon → grün

Spar dir die Zwischenablage: Der Agent liest selbst.

Ein Befehl registriert den lokalen Notepix-Server bei jedem Coding-Agent auf deinem Rechner. Dein Agent zieht jede Markierung direkt aus dem Browser und schaltet ihre Karte vor deinen Augen auf DONE, während er fixt.

Sag „fix jede Markierung, sobald ich sie pinne“ und klick dich weiter durch deine App, während die Diffs landen. Alles auf 127.0.0.1.

Das Notepix-Panel mit grünem Stecker-Icon und Markierung Nummer eins auf DONE, Text durchgestrichen — live abgehakt von einem verbundenen KI-Agent über MCP

Details

Außerdem an Bord.

Alles per Tastatur

Alt+Shift+N pinnt eine Notiz, ohne das Panel zu öffnen. Im Panel wechseln N F D S die Modi.

Saubere Screenshot-Ausschnitte

Das 📷 schneidet genau die Komponente aus — Notepix’ eigene Pins fliegen vorher raus.

Versteht SPA-Routen

Jede Route behält ihre eigenen Markierungen; das Panel folgt deiner clientseitigen Navigation.

Export / Import

JSON raus, JSON rein — hol dir die Markierungen von Teamkollegen dazu oder wechsle den Rechner.

Aufgeräumt per Default

Pins erscheinen nur, während du markierst. Panel ausblenden — und deine App bleibt vorzeigbar.

Bilder, die sich selbst zuordnen

Jeder Screenshot trägt den #id-Stempel seiner Markierung — Agents ordnen Bild und Anweisung über das Badge zu, nicht über die Reihenfolge beim Einfügen.

Ein Loop, kein One-Shot

Hak eine Markierung ✓ ab — sie bleibt als Referenz stehen, landet aber nicht mehr im nächsten Briefing. Jedes Löschen hat ein Undo.

Steht dir nie im Weg

Der Ghost-Modus blendet das Panel aus, bis du drüber hoverst. Zieh es, wohin du willst — und an jeder Kante größer oder kleiner.

Hilfe ist nur ein ? entfernt

Das ? holt den 30-Sekunden-Guide zurück. Shortcuts änderst du unter chrome://extensions/shortcuts.

Privacy by Design

Deine App verlässt nie deinen Rechner.

Kein Server, kein Account

Kein Backend. Notizen, Screenshots und Quellpfade liegen in Chromes lokalem Speicher auf deinem Rechner — nirgendwo sonst.

Kein Tracking

Keine Analytics, keine Telemetrie, keine Crash-Reports. Was du annotierst, geht niemanden etwas an.

Ein Netzwerk-Call — mehr nicht

Null Requests, bis du einen Lizenzschlüssel eingibst — dann genau eine Art: der Lizenz-Check bei Gumroad. Nie deine Seiten oder Notizen.

Preis

7 Tage kostenlos. Dann $6.43. Einmal.

$6.43 einmal zahlen · für immer deins

Noch in Prüfung im Chrome Web Store — der Install-Button geht mit dem Listing live.

Checkout über Gumroad · Lizenzschlüssel per E-Mail · Freischaltung im Panel

  • 7 Tage kostenlos testen, voller Funktionsumfang — kein Account, keine Kreditkarte, keine Anmeldung.
  • Einmal zahlen, für immer freigeschaltet — kein Abo, keine Seat-Rechnerei.
  • Deine Notizen werden nie gesperrt — bestehende Markierungen kannst du auch nach dem Test ansehen, kopieren und exportieren, bezahlt oder nicht.
  • Zieht mit dir um — derselbe Lizenzschlüssel schaltet Notepix auf einem neuen Rechner frei.

FAQ

Fragen? Antworten.

Brauche ich React dafür?

Nein — markieren kannst du jede Seite. Auf einem React-Dev-Build (Vite, Next.js, CRA; React 18 und 19) merkt sich jede Markierung zusätzlich den Komponentennamen und die Quelldatei:Zeile hinter dem Element. Auf Produktions-Builds und Nicht-React-Seiten gibt es stattdessen einen präzisen CSS-Selektor. Die Quelldatei-Zuordnung für Vue und Svelte steht auf der Roadmap.

Mit welchen KI-Agents funktioniert es?

Mit allem, wo du Text einfügen kannst: Claude Code, Cursor, GitHub Copilot, Windsurf, Codex, Aider, ein ganz normales Chat-Fenster. Das Briefing ist Klartext in deiner Zwischenablage — kein Account, kein Setup nötig. Das Einfügen kannst du dir auch komplett sparen, auf zwei Wegen: mit Claude Code, verbunden über Claude in Chrome (wähl das Übergabe-Format, dann liest er die Markierungen direkt von der Seite), oder mit dem optionalen Notepix-MCP-Server — ein Befehl, npx -y notepix-mcp setup, registriert ihn bei jedem Coding-Agent auf deinem Rechner — dann holt sich dein Agent Markierungen und Screenshots selbst und hakt sie beim Fixen ab.

Wie zeige ich meinem KI-Agent, welches Element er ändern soll?

Klick es einfach an. Notepix pinnt eine nummerierte Notiz ans Element und hält React-Komponente, Quelldatei samt Zeile, berechneten Style und einen sauberen Screenshot dahinter fest. Copy for AI packt das alles in ein einziges Briefing — füg es in Claude Code, Cursor oder Copilot ein, oder der Agent liest die Markierungen gleich selbst über MCP.

Ist Notepix ein Tool für UI-Annotation oder visuelles Feedback?

Beides — gebaut für den KI-Coding-Loop. Nutz es wie ein Design-Review- oder Bug-Report-Tool — Haftnotizen, Rahmen und Skizzen auf jeder Webseite, localhost inklusive — mit einem Unterschied: Jede Anmerkung trägt den Code-Kontext (Komponente, Datei, Selektor, Style), den ein KI-Coding-Agent braucht, um den Fix wirklich zu liefern.

Funktioniert es auf Lovable-, Replit-, v0- oder Bolt-Previews?

Ja — klick auf jeder http(s)-Seite aufs Notepix-Toolbar-Icon, Cloud-Previews eingeschlossen, und markier drauflos. Auf localhost-Dev-Servern lädt Notepix nach jedem Reload automatisch; Ein-Klick-Autoload für Preview-Domains ist das nächste geplante Update.

Wo liegen meine Notizen?

In Chromes lokalem Extension-Speicher, getrennt nach Seite und SPA-Route. Auf localhost-Dev-Servern lädt Notepix automatisch, deine Notizen sind also nach jedem Reload noch da. Die Markierungen jeder Seite kannst du als JSON-Datei exportieren und überall wieder importieren.

Was schickt Notepix übers Netz?

Nichts verlässt deinen Rechner — bis du einen Lizenzschlüssel eingibst. Ab dann gibt es genau eine Art von Request ins Netz: Notepix prüft deinen Schlüssel gegen Gumroads Lizenz-API, bei der Aktivierung und danach höchstens einmal pro Woche. Übertragen werden nur Schlüssel und Produkt-ID — nie Seiteninhalte, Notizen oder Screenshots. Schaltest du die optionale MCP-Verbindung ein, läuft die über 127.0.0.1 — deinen eigenen Rechner — und sonst nirgendwohin. Alle Details stehen auf der Datenschutzseite.

Was passiert nach der Testphase?

Beim Anlegen neuer Markierungen fragt Notepix nach der einmaligen Freischaltung für $6.43. Alles, was du schon erstellt hast, bleibt für immer ansehbar, kopierbar, exportierbar und löschbar — deine Notizen gehören dir.

Der Tastatur-Shortcut reagiert nicht?

Alt+Shift kann mit dem Umschalten des Tastaturlayouts kollidieren, besonders unter Windows. Öffne chrome://extensions/shortcuts und leg „Toggle the Notepix panel“ auf eine Kombination deiner Wahl — Toolbar-Icon und Rechtsklick-Menü funktionieren so oder so.

Nur Chrome?

Chrome 116+ und Chromium-basiertes Edge (getestet). Ein Edge-Add-ons-Listing und weitere Browser stehen auf der Roadmap.