Zeig deinem KI-Coding-Tool genau das zu ändernde Element

„Mach den zweiten Button größer.“ Die Anweisung nennt eine Änderung, aber keinen Ort – also muss dein KI-Coding-Tool raten, welchen Button du meinst. SuperchargeInspect macht Schluss mit dem Raten. Zeig auf das Element, schreib eine Notiz mit der gewünschten Änderung und kopiere eine Referenz, die die Notiz, einen annotierten Screenshot und die beobachteten Styles des Elements enthält. Mit einer einzigen Referenz übergibst du dem Tool das Element, sein Aussehen und die gewünschte Änderung.

Der Workflow in vier Schritten

Du startest eine Inspektion mit Alt+Shift+E oder über den Button in der Symbolleiste und bewegst dich dann per Hovern oder mit den Pfeiltasten über die Seite. Der Workflow besteht aus vier Schritten.

1. Element auswählen. Fahre mit der Maus darüber oder bewege dich mit den Pfeiltasten dorthin und drücke dann Enter, um es zu fixieren.
2. Notiz hinzufügen. Drücke erneut Enter, um deine Notiz zu schreiben. Beschreibe die Änderung in Worten, zum Beispiel „zieh diesen Button über die volle Breite“. Die Referenz kennzeichnet die Notiz als einzige gewünschte Änderung.
3. Referenz kopieren. Drücke Strg+Enter oder unter macOS Cmd+Enter. Ein einziger Eintrag in der Zwischenablage enthält die Textreferenz und das annotierte PNG.
4. Einfügen. Füge sie in dein KI-Coding-Tool ein und lass es selbst entscheiden, welchen Teil es verwendet.

Die Beispielkarte oben durchläuft genau diesen Ablauf. Klicke auf einen Teil, um ihn zu fixieren, und drücke dann „Copy reference“. Die Demo kopiert die Textreferenz und das annotierte PNG, genau wie die Erweiterung.

Was die Referenz enthält

Die Textreferenz ist reiner Text, den du schnell überfliegen kannst. Nach einem kurzen Header und einer Sicherheitszeile folgen deine Notiz und die Quell-URL, dann das Element mit seinem Locator-Hinweis und dem sichtbaren Text, der als Referenzdaten gekennzeichnet ist. Danach kommen die Viewport-Größe und Scrollposition, die Abmessungen des Elements und die beobachteten Styles: der deklarierte font-family-Stack, die Farbwerte, Padding und Margin auf jeder Seite, gap, Eckenradius und display. Den Abschluss bildet ein kurzer Markup-Auszug des Elements, so wie die Seite es zusammengesetzt hat.

Der annotierte Screenshot ist der sichtbare Ausschnitt mit einer Fußzeile darunter: deine Notiz, die Quelle, das Element und eine kurze Style-Zeile.

Die Sicherheitszeile kennzeichnet den Seitentext als Referenzdaten, damit sich Seitentext nicht als Anweisung ausgeben kann. Nur deine Notiz zählt als Anfrage.

In dein KI-Coding-Tool einfügen

Dein KI-Coding-Tool entscheidet, ob es den Text, das Bild oder beides verwendet. Nicht jede Kombination aus Tool und Betriebssystem wurde zertifiziert.

Wenn beim Einfügen nur ein Format übernommen wird, nutze „Copy text only“, „Copy image only“ oder „Save PNG“ im Menü „More ways to copy“.

Grenzen der Referenz

Eine kopierte Referenz ist eine beobachtete Momentaufnahme. Sie erfasst, was die Seite anzeigt, nicht, womit sie erstellt wurde. Inspect stellt keine Quelldateien, Komponentennamen oder CSS-Regeln des Autors wieder her. Der Schriftwert ist der deklarierte font-family-Stack, also die Liste, die die Seite anfordert. Das empfangende Tool bestimmt, welche Formate es übernimmt. Über SSH, in einem Remote-Container oder in einer gehosteten Entwicklungsumgebung wird das lokale Bild beim Einfügen nicht mitübertragen. Speichere das PNG zuerst und hänge es dann so an, wie das Remote-Tool Dateien entgegennimmt. Das gespeicherte PNG ist der saubere Ausschnitt ohne Fußzeile, deine Notiz wird also mit dem eingefügten Text übertragen.

Datenschutz

Inspect stellt keine Netzwerkverbindungen her, benötigt kein Konto und sendet niemals etwas an einen KI-Dienst oder schickt einen Prompt ab. Nichts, was du untersuchst, verlässt dein Gerät, bis du es selbst einfügst oder das PNG speicherst. Inspect merkt sich deine letzte Auswahl auf jeder Seite im Session Storage, der beim Schließen des Browsers gelöscht wird.

CSS-Werte mit dem CSS-Viewer auslesen und kopieren.