Agentation: ein Annotationswerkzeug zur Erzeugung von Front-End-UI-Kontext für KI-Programmierassistenten

Agentation ist ein leichtgewichtiges Hilfsmittel für Front-End-Entwickler, das das Problem der menschlichen Interaktion mit KI-Programmierassistenten wie Claude Das Problem des “fehlenden Kontexts” bei der Kommunikation von UI-Problemen zwischen Code, Cursor, Windsurf und KI ist ein großes Problem im traditionellen Entwicklungsprozess. Wenn ein Entwickler im traditionellen Entwicklungsprozess einen Styling-Fehler oder einen Interaktionsfehler auf einer Webseite entdeckt, ist es oft schwierig, der KI in natürlicher Sprache die genaue Position des Elements in der Codebasis zu beschreiben. Agentation folgt dem Prinzip “what you see is what you get” und ermöglicht es dem Benutzer, Elemente auf einer Webseite anzuklicken, um sie zu kommentieren. Dabei werden automatisch die Klassennamen, Selektoren und hierarchischen Positionen der Komponente erfasst und diese technischen Details mit den Änderungen des Benutzers in einem strukturierten Markdown-Format kombiniert. Der Benutzer kopiert diese Informationen einfach in die KI, die anhand der genauen Positionsangaben die Quelldatei in der Codebasis schnell indizieren und korrigieren kann. Das Tool basiert derzeit auf React Ohne zusätzliche Abhängigkeiten und völlig unabhängig von spezifischen KI-Modellen kann jeder KI-Agent verwendet werden, der in der Lage ist, Text zu lesen.

Funktionsliste

• Beschriftung der visuellen ElementeWählen Sie ein beliebiges DOM-Element (z. B. eine Schaltfläche, eine Karte, einen Textabsatz) direkt auf der laufenden Webseite aus, indem Sie mit der Maus darüber fahren und klicken.
• Automatische Extraktion der technischen ParameterWenn ein Element ausgewählt wird, erfasst das Tool automatisch den CSS-Klassennamen, die ID, den hierarchischen Pfad (Selektoren) und andere wichtige Positionierungsinformationen des Elements.
• Strukturiertes Feedback erzeugenUnterstützung für das Hinzufügen von benutzerdefinierten Textbeschreibungen (z.B. “Farbe ändern”, “Abstand fixieren”) zu ausgewählten Elementen und Generierung von Markdown-Text mit technischem Kontext mit einem einzigen Klick.
• Debuggen von AnimationspausenAnimation anhalten“: Bietet eine Funktion zum Erfassen und Kennzeichnen dynamischer Effekte oder frame-spezifischer UI-Probleme.
• Genaue Positionierung des TextesUnterstützung der direkten Auswahl bestimmter Textabschnitte in einer Webseite für die Fehlerkorrektur, so dass die KI die Position der Komponente, in der sich der Text befindet, schnell finden kann.
• Plattformübergreifende KompatibilitätDie generierte Ausgabe ist im Standard-Markdown-Format und unterstützt nahtlos Claude Code, Cursor, Windsurf oder jedes LLM-Programmierwerkzeug, das kontextuelle Eingaben unterstützt.

Hilfe verwenden

Das Kernkonzept von Agentation ist “leichtgewichtig” und “nahtlose Integration”. Es erfordert keine komplexe Hintergrundkonfiguration, hauptsächlich in Form von in die Entwicklungsumgebung integrierten React-Komponenten. Im Folgenden finden Sie eine detaillierte Anleitung zur Verwendung von Agentation:

1. aktivierung und aktivierung

Agentation ist derzeit auf die Desktop-Browser-Umgebung ausgerichtet. In Projekten, die Agentation integrieren (in der Regel in einer Entwicklungsumgebung), erscheint ein Werkzeugsymbol in der unteren rechten Ecke Ihrer Webseite.

• AktivierungstoolKlicken Sie auf das Agentensymbol in der unteren rechten Ecke des Bildschirms oder verwenden Sie die Tastenkombinationen (falls konfiguriert), um den Anmerkungsmodus zu aktivieren. Wenn Sie nun die Maus bewegen, wird jedes HTML-Element auf der Seite (z. B. das <div>、<button>、<p>) werden hervorgehoben, um anzuzeigen, dass sie sich in einem Zustand befinden, in dem sie ausgewählt werden können.

2. die Kennzeichnung der Zielelemente

Wenn Sie in der Seitenvorschau etwas finden, das geändert werden muss (z. B. eine Schaltfläche hat die falsche Farbe, oder ein Textabschnitt ist falsch geschrieben):

• Auswahl der Elemente: Bewegen Sie den Mauszeiger über das Zielelement und klicken Sie auf die linke Taste, um es zu “sperren”.
• Feedback hinzufügenWenn Sie darauf klicken, öffnet sich ein Eingabefeld. Geben Sie Ihre Änderungen am Element ein, zum Beispiel: “Die abgerundeten Ecken dieser Schaltfläche sollten 8px betragen” oder “Das Klicken auf diese Karte reagiert nicht”.
• Mehrpunkt-AnmerkungSie können nacheinander auf verschiedene Stellen auf der Seite klicken, um mehrere Änderungswünsche auf einmal zu sammeln. So können Sie zum Beispiel gleichzeitig auf ein Höhenproblem in der Navigationsleiste und einen Linkfehler in der Fußzeile hinweisen.

3. die Handhabung dynamischer Inhalte

Bei Seiten, die komplexe Animationen oder Übergänge enthalten, ist die Erfassung bestimmter Zustände oft schwierig.

• Animation anhaltenKlicken Sie auf das “Pause”-Symbol (normalerweise ein Einfriersymbol) in der Symbolleiste von Agentation. Dadurch wird die CSS-Animation und die JS-Rendering-Schleife auf der Seite angehalten und die Seite bleibt beim aktuellen Frame stehen.
• genaue KennzeichnungWährend die Seite statisch ist, können Sie dynamische Elemente, die normalerweise vorbeifliegen, bequem für Anmerkungen auswählen.

4. das Erzeugen und Exportieren von Kontexten

Nachdem die Beschriftung aller Fragen abgeschlossen ist, müssen diese Informationen an die KI weitergegeben werden:

• Erstellung von BerichtenKlicken Sie auf die Schaltfläche “Kopieren” oder “Exportieren” in der Symbolleiste, und Agentation wird den Pfad des ausgewählten Elements übernehmen (z. B. .sidebar > .nav-actions > button.primary) und Ihre getippten Notizen in einen übersichtlich formatierten Markdown-Text.
• Inhalt VorschauDer generierte Text enthält nicht nur Ihre natürlichsprachlichen Beschreibungen, sondern auch maschinenlesbare Code-Locators. Dies ist der Schlüssel für die Fähigkeit der KI, Dateien mit Präzision zu finden.

5. fahrender KI-Fixcode

Der letzte Schritt besteht darin, Ihren KI-Programmierassistenten zu verbinden:

• Befehl "EinfügenÖffnen Sie das von Ihnen verwendete AI-Tool (z. B. Cursor Chat-Fenster, oder Claude Code (die Terminalschnittstelle), und fügen Sie den soeben kopierten Text ein.
• Korrekturen durchführenSobald AI die Informationen erhält, muss es nicht mehr raten, welche Datei “der blaue Button” ist, sondern es führt direkt eine globale Suche (Grep) durch die Codebasis nach Klassennamen und Selektor durch, findet schnell die entsprechende React-Komponente oder CSS-Datei und generiert den Korrekturcode auf der Grundlage Ihres Feedbacks.

Anwendungsszenario

1. Feinabstimmung des UI-Stils
   Front-End-Entwickler müssen oft das Padding, den Margin oder die Farbe von Komponenten anpassen. Mit Agentation müssen Entwickler nicht manuell den entsprechenden CSS-Dateinamen der Komponente nachschlagen. Klicken Sie einfach auf die Komponente im Browser und notieren Sie “Padding erhöht auf 20px”, dann kann AI direkt die Stildatei für die Änderung finden.
2. Fehlerkorrekturen für komplexe Komponenten
   In extrem tiefen React-Komponentenbäumen (z. B. ein Button in einem Modal, das in einer Seitenleiste verschachtelt ist) kann die manuelle Suche nach den Quelldateien zeitaufwändig sein. Agentation generiert präzise DOM-Pfade, die AI helfen, die genaue Position der Komponente im Projekt sofort zu finden.
3. Stapelweises Korrekturlesen von Werbetexten
   Bei mehreren Rechtschreibfehlern auf einer Webseite können technisch nicht versierte Personen (z. B. Produktmanager oder Designer), die das Tool in einer Entwicklungsumgebung verwenden, den fehlerhaften Text direkt auswählen und den korrekten Text eingeben, und das generierte Feedback wird direkt an die KI zur Ersetzung weitergegeben, wodurch Mehrdeutigkeiten in der verbalen Kommunikation vermieden werden.

QA

1. F: Benötigt Agentation Unterstützung durch Back-End-Dienste?
   A: Nicht erforderlich. Es handelt sich um ein reines Front-End-Tool, das in der Regel als React-Komponente ohne Back-End-Abhängigkeiten in Ihr Projekt integriert wird, wobei die gesamte Datenverarbeitung lokal im Browser erfolgt.
2. F: Unterstützt es nur React-Projekte?
   A: Die offizielle Dokumentation zeigt hauptsächlich die Verwendung der React-Umgebung, aber die Kernlogik (DOM-Auswahl und Pfadgenerierung) ist allgemein. Wenn es jedoch als npm-Paket eingeführt wird, wird es hauptsächlich an das React-Ökosystem angepasst.
3. F: Warum macht generiertes Feedback die Arbeit von KI besser?
   A: Große Modelle (LLMs) sind intelligent, aber sie können Ihren Bildschirm nicht sehen. Die traditionelle Aufforderung “Befestigen Sie die Schaltfläche in der oberen rechten Ecke” ist sehr vage. .header-right .login-btn Diese genaue Charakterisierung des Codes ermöglicht es, die KI so zu nutzen, wie sie es bei grep Die direkte Abfrage der Codebasis auf Befehlsniveau beseitigt die “Illusion” und das Rätselraten.
4. F: Stellen Sie dieses Tool in Rechnung?
   A: Das Tool existiert derzeit als Open-Source- oder kostenloses Entwicklungswerkzeug mit dem primären Ziel, die Arbeitsabläufe bei der KI-gestützten Programmierung zu optimieren.