Domscribe
Domscribe · Coding
Domscribe ist ein Open-Source-Tool zum Debuggen von Frontends, das KI-Coding-Agents Augen für dein laufendes Frontend gibt. Man kann es sich als Open-Source-Entwicklertool vorstellen, das für eine einzige Aufgabe gebaut wurde: die Lücke zwischen dem zu schließen, was dein Code sagt, und dem, was der Browser tatsächlich rendert. Es verbindet den Browser in beide Richtungen mit dem Quellcode: Du klickst auf ein DOM-Element und beschreibst eine Änderung, oder dein Agent fragt eine Quelldatei ab, um den Live-DOM-Snapshot, die Komponenten-Props und den Zustand zu sehen. Im Hintergrund läuft es auf einer DOM-zu-Quellcode-Zuordnung, die zur Build-Zeit entsteht, sodass jedes Element auf die exakte Datei und Zeile zurückzeigt. Es arbeitet mit jedem MCP-kompatiblen Agent und jedem Bundler, erscheint unter MIT-Lizenz und entfernt die gesamte Instrumentierung aus Produktions-Builds. Keine bezahlten Tarife. Keine Sitzplatzlimits.
Über Domscribe
Was ist Domscribe
Domscribe ist eine Pixel-zu-Code-Brücke für KI-gestützte Frontend-Arbeit. Coding-Agents können deine Quelldateien lesen, aber sie sehen nicht, was im Browser tatsächlich gerendert wird, und deshalb raten sie bei Layout, Styling und Komponentenstruktur. Domscribe schließt diese Lücke, indem es eine zweiseitige Verbindung zwischen dem DOM und deinem Quellcode-Baum aufbaut.
Das Tool injiziert deterministische data-ds-Attribute zur Build-Zeit über AST-Parsing. Es hält jede Zuordnung in einem Manifest fest. Zur Laufzeit erfasst es Live-Props, Zustand und DOM-Snapshots. Dein Agent stellt dann eine einfache Frage: Was wird in dieser Zeile gerendert? Er bekommt eine echte Antwort statt eines Screenshots, den er erst deuten muss.
Die größte Einschränkung ist der Umfang. Domscribe deckt heute React, Vue, Next.js und Nuxt ab, mit eigenen Adaptern für andere Setups, sodass frameworkspezifische Interna auf nicht unterstützten Stacks nicht sauber abgebildet werden. Außerdem setzt es voraus, dass dein Agent MCP spricht, was Tools ausschließt, die nur reine Text-Prompts annehmen.
Erste Schritte
- Installiere das Paket und führe
npx domscribe initim Wurzelverzeichnis deines Projekts aus. - Füge das Bundler-Plugin für dein Build-Tool hinzu (Vite 5-7, Webpack 5 oder Turbopack), damit Quelldateien stabile
data-ds-IDs erhalten. - Richte deinen MCP-kompatiblen Agent, etwa Claude Code, GitHub Copilot, Cursor oder Gemini, auf den MCP-Endpunkt von Domscribe.
- Starte deinen Entwicklungsserver, öffne die App und klicke auf ein beliebiges Element, um eine Änderungsanfrage in klarer Sprache abzugeben.
- Lass den Agent die Stelle im Quellcode abfragen, die Änderung machen und das Ergebnis gegen den Live-DOM bestätigen.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Domscribe.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Frontend-Entwickler
- Full-Stack-Entwickler, die mit KI-Agents arbeiten
- Teams, die bereits Claude Code oder Cursor nutzen
Aufgaben
- Layout- und Styling-Fehler beheben
- Komponenten-Props und Styles anpassen
- Prüfen, was eine Quellcodezeile rendert
Szenarien
- Schnelle UI-Iteration während der Feature-Arbeit
- Zustandsgesteuertes Rendering debuggen
- Einarbeitung in eine unbekannte Codebasis
Wichtigste Funktionen
Stabile IDs zur Build-Zeit
Domscribe parst jede Quelldatei während des Builds und injiziert deterministische data-ds-Attribute mit xxhash64, dann hält es jede Zuordnung in einem Manifest fest. Diese IDs bleiben über Hot Module Replacement und Fast Refresh hinweg stabil, sie überleben also den Zyklus aus Bearbeiten, Speichern und Neuladen, der fast jede Frontend-Arbeit ausmacht. Sie brechen nicht in dem Moment, in dem du eine Datei bearbeitest. Keine Laufzeit-Heuristiken. Kein Raten, welches Element welches ist.
Zweiseitige Verknüpfung von DOM und Quellcode
Das Tool arbeitet in beide Richtungen. Klicke auf ein DOM-Element und beschreibe die gewünschte Änderung, und Domscribe löst sie auf die exakte Quellstelle auf, die dein Agent bearbeiten soll. Oder lass den Agent eine Quelldatei und Zeile abfragen, um zu sehen, was dort gerade gerendert wird. Welche Richtung du nutzt, hängt von der Aufgabe ab. Keine Seite muss über die andere raten.
Tiefe Laufzeiterfassung
Über rohes HTML hinaus extrahiert Domscribe Live-Props, Zustand und Komponenten-Metadaten über React-Fiber-Traversierung und Vue-VNode-Inspektion. Dein Agent bekommt den vollen Komponentenkontext hinter einem gerenderten Element, nicht nur das Markup. Das ist wichtig. Es bedeutet, dass der Agent darüber nachdenken kann, warum etwas so aussieht, wie es aussieht.
MCP-Unterstützung mit einer REST-Schicht
Annotationen liegen als JSON-Dateien in einem Ordner .domscribe/annotations/ in deinem Repository und werden über REST-APIs bereitgestellt, die der MCP-Server für den Agent-Zugriff kapselt. Domscribe liefert 12 Tools und 4 Prompts über MCP und arbeitet mit Claude Code, GitHub Copilot, Cursor, Gemini, Kiro und jedem anderen MCP-Client. Alles bleibt lokal, ohne externe Abhängigkeiten.
Schwärzung personenbezogener Daten
E-Mails, Token und sensible Muster werden automatisch bereinigt, bevor Daten den Browser verlassen. Das ist ein echter Schutz. Für Teams, die an Apps mit echten Nutzerdaten arbeiten, ist es der Unterschied zwischen einem Tool, das man gegen eine Staging-Umgebung laufen lassen kann, und einem, das man nicht kann.
Keine Auswirkung auf die Produktion
Jedes data-ds-Attribut, jedes Overlay-Skript und jede Relay-Verbindung wird aus Produktions-Builds entfernt, und die CI erzwingt das. Dein ausgeliefertes Bundle bleibt sauber, du opferst also weder Bundle-Größe noch setzt du die Instrumentierung Endnutzern aus.
Vor- und Nachteile
Vorteile
- Kostenlos und Open Source unter MIT-Lizenz, ohne bezahlte Tarife oder Sitzplatzlimits.
- Bildet DOM-Elemente auf exakte Quellstellen ab, sodass Agents nicht mehr die falsche Datei bearbeiten.
- Erfasst Live-Props und Zustand und gibt Agents Kontext, den Screenshots nicht liefern können.
- Framework-agnostisch innerhalb der unterstützten Liste und kompatibel mit jedem MCP-basierten Agent.
- Schwärzung personenbezogener Daten und Produktionsbereinigung halten sensible Daten und Bundle-Größe im Griff.
Nachteile
- Erfordert ein unterstütztes Framework (React, Vue, Next.js, Nuxt) oder einen eigenen Adapter; nicht unterstützte Stacks werden nicht sauber abgebildet.
- Nur mit MCP-kompatiblen Agents nützlich, reine Prompt-Tools können es also nicht verwenden.
- Die Einrichtung berührt deine Bundler-Konfiguration und den Entwicklungsserver, was einen Schritt hinzufügt, bevor es überhaupt etwas tut.
Häufige Fragen
Es baut eine Brücke zwischen deinem laufenden Frontend und deinem KI-Coding-Agent. Der Agent kann entweder auf einen Klick auf ein DOM-Element reagieren oder eine Quellzeile abfragen, um den Live-DOM, Props und Zustand zu sehen, und dann eine Änderung mit vollem Kontext machen.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Domscribe.
Alternativen zu Domscribe
Forefront
Forefront · CodingForefront ist eine Webplattform zum Bauen mit Open-Source-KI. Sie lassen sich führende Open-Source-Sprachmodelle mit eigenen Daten feintunen, ihre Leistung bewerten und sie über eine API ausführen oder exportieren, um sie selbst zu hosten. Entwickler, die den Komfort einer geschlossenen Plattform wollen, aber darauf bestehen, ihre Modelle und Daten zu besitzen, sind hier die Zielgruppe.
Startkit
StartKit.AI · CodingStartkit ist ein Boilerplate zum Bauen von KI-SaaS-Produkten und KI-Wrappern. Man kann es sich als KI-Startup-Boilerplate vorstellen, bei dem die langweiligen Teile schon verdrahtet sind: Authentifizierung, Zahlungen über Stripe und Lemon Squeezy, Nutzungslimits, transaktionale E-Mail und ein KI-API-Starter-Kit, das mit OpenAI, Anthropic, Groq oder Llama spricht. Man klont das Repository, setzt seinen Preis und kümmert sich um den Teil des Produkts, für den Menschen wirklich bezahlen. Es basiert auf Next.js über React und Tailwind, deshalb fühlt sich ein Großteil des Boilerplate-Codes schon vertraut an.
Testim
Tricentis · CodingTestim ist eine KI-gestützte Plattform für Testautomatisierung, mit der man End-to-End-Tests für Web-, Mobile- und Salesforce-Anwendungen baut und ausführt. Sie setzt auf maschinelles Lernen, um Tests stabil zu halten, wenn sich eine Oberfläche ändert, sodass Teams weniger Zeit mit der Reparatur kaputter Selektoren verbringen. Nicht schlecht für ein Tool für automatisierte Tests, das Sie heute schon nutzen können. Sie erstellen Tests, indem Sie Aktionen im Browser aufzeichnen, und fügen danach JavaScript hinzu, wenn Sie mehr Kontrolle brauchen. Für ein beschäftigtes QA-Team eine solide Wahl.