Web-Apps
Margin heftet Kundenkommentare ans Element, speichert Selektor, Screenshot und Gerät und gibt alles über MCP an Coding-Agents wie Claude Code weiter.
Animation von der Landingpage: Die Kundin pinnt am Handy einen Kommentar, der Agent liest ihn über MCP und antwortet, dann wird abgehakt.
8 h 32 min
vom ersten Commit bis zur Fassung für den internen Einsatz
git log, Commits db3b24e und a022582, 06.10.2026
28,7 KiB
groß ist das Widget komprimiert, ohne Abhängigkeiten
esbuild-Build von dist/widget.js, gzip -9, 09.10.2026
100
Lighthouse-Punkte für Performance mobil, Median aus 5 Läufen
Lighthouse 12.8.2, margin-comments.com, 09.10.2026
Ausgangslage
Wer Websites mit Coding-Agents wie Claude Code, Codex oder Cursor baut, bekommt Kundenfeedback trotzdem wie früher: als Screenshot mit rotem Pfeil per Mail, als Slack-Nachricht oder als PDF. Bevor der Agent etwas reparieren kann, muss ein Mensch übersetzen, welche Seite, welches Element, welcher Viewport und welcher Browser gemeint sind.
Diese Übersetzung wollte ich in meinen eigenen Projekten loswerden. Also habe ich Margin gebaut, zuerst als internes Werkzeug und nur mit Diensten von Cloudflare. Zwei Bedingungen standen fest: Kunden brauchen kein Konto, und ein Agent bekommt nur die Rechte, die ich ihm gebe.
Vorgehen
01
Ein Klick im Kommentarmodus heftet das Feedback an das gemeinte Element. Margin speichert dazu bis zu fünf geprüfte Selektoren, URL, Viewport, Pixeldichte, Browser und Farbschema. Findet das Widget ein Element nach einem Umbau nicht mehr, sucht es über den Text und zuletzt über die gespeicherte Position.
Animation von der Landingpage: Die Hervorhebung gleitet auf ein Element, der Pin springt an die Klickstelle, das Eingabefeld öffnet sich.
02
Nach dem Absenden öffnet der Worker die Seite in Cloudflare Browser Run, mit Viewport, Pixeldichte, Farbschema und Scrollposition der Kundin. Er blendet gängige Cookie-Banner aus, wartet auf Bilder, Schriften und Animationen und zeichnet dann Umrandung und Pin ein. Meine erste Fassung hatte das DOM in ein Canvas nachgezeichnet und dabei GSAP- und Scroll-Animationen falsch dargestellt.
Serverseitig gerenderter Screenshot im Dashboard: Das kommentierte Element ist gestrichelt umrandet, der Pin sitzt an der Klickstelle.
03
Im selben Worker läuft ein MCP-Server mit sechs Tools: vier lesen, zwei schreiben, keines löscht. Der Agent holt Kommentar, Selektor, Gerätekontext und Screenshot, behebt den Fehler und antwortet direkt unter dem Kommentar, wo auch die Kundin die Antwort sieht. Ein Token gilt für ein Projekt, darf zuerst nur lesen und läuft nach 90 Tagen ab.
Im Dashboard steht die Antwort von Claude Code unter dem Kommentar der Kundin: Der Agent hat den Kommentar über MCP gelesen und die Seite bei 390 × 844 Pixeln geprüft.
04
Kundinnen und Kunden kommen über einen persönlichen Link ins Widget und sehen das Dashboard nie. Erledigen dürfen sie nur ihre eigenen Kommentare, und das prüft der Server, nicht das Widget. Abhaken ist eine einzige Bewegung: Der Haken zeichnet sich, Zeile und Pin zerfallen zu Rauch, die Liste schließt sich darunter.
Im Widget auf einer Demo-Website wird ein Kommentar abgehakt: Zeile und Pin zerfallen zu Rauch, die Liste schließt sich.
Ergebnis
Margin ist in meinen eigenen Projekten im Einsatz, die Landingpage sammelt eine Warteliste. Wie viel Zeit es pro Feedbackrunde spart, habe ich noch nicht gemessen.
Gemessen ist die Technik. Die Landingpage erreicht mobil im Median aus fünf Läufen 100 Lighthouse-Punkte für Performance und 100 für Barrierefreiheit, beim Laden verschiebt sich nichts. Das Widget ist komprimiert 28,7 KiB groß, alle 25 Unit-Tests sind grün.
Cloudflare Workers, Cloudflare D1, Cloudflare R2, Cloudflare Access, Cloudflare Browser Run, Cloudflare Email Service, MCP, React, Hono, Astro
Stimme
Weitere Referenzen
Kostenloser 30-Minuten-Check
Alles Weitere klärt sich am schnellsten im Gespräch: 30 Minuten per Video, ohne Verkaufsdruck.
Lieber schreiben? [email protected]
