Cursor Design Mode Annotate: UI markieren und den Agenten Code ändern lassen

Mit Cursor Design Mode Annotate markierst du Änderungen auf einer laufenden Webseite und schickst sie samt Elementdaten und Screenshot an einen Coding-Agenten. Verwende Cursor 3.24.18 oder neuer, öffne den Browser im Agents Window und wähle Annotate oder drücke Cmd/Ctrl + Shift + D. Aktiviere Batch edits, um mehrere zusammengehörige Änderungen zu sammeln und gemeinsam zu senden.

Das hilft, wenn du das Problem auf der Seite erkennst, aber die zuständige React-Komponente, CSS-Regel oder Vorlage nicht kennst. Auch erfahrene Entwickler können visuelle Hinweise damit direkter mit dem Quellcode verbinden. Der Agent muss die Anfrage trotzdem richtig verstehen und das Projekt korrekt ändern. Prüfe deshalb anschließend sowohl den Code als auch die dargestellte Seite.

Wo ist Annotate, und warum sehe ich nur ein Stiftsymbol?

Annotate befindet sich in der Browser-Symbolleiste innerhalb des Agents Window von Cursor. Welche Schaltfläche erscheint, hängt von deiner Version und der verwendeten Oberfläche ab.

So öffnest du den Modus:

1. Öffne dein Projekt in Cursor und anschließend das Agents Window.
2. Starte eine Agentensitzung oder öffne eine bestehende Sitzung. Öffne dann den Browser, der deine laufende Anwendung anzeigt.
3. Klicke in der Browser-Symbolleiste auf Annotate. Alternativ fokussierst du den Browser und drückst unter macOS Cmd + Shift + D, unter Windows und Linux Ctrl + Shift + D.
4. Du kannst auch die Befehlspalette öffnen und nach Toggle Design Mode suchen.
5. Beachte die Hinweiszeile oben auf der Seite. Dort stehen die jeweils verfügbaren Maus- und Tastaturaktionen.

Laut der offiziellen Dokumentation zum Design Mode ist Annotate ab Cursor 3.24.18 verfügbar.

Siehst du ein Stiftsymbol mit der Bezeichnung Design Mode, prüfe zuerst deine Version. Frühere Versionen verwenden dieses Bedienelement statt der neuen Annotate-Schaltfläche. Aktualisiere Cursor, um die dokumentierte Annotate-Oberfläche zu verwenden.

Die Symbolleiste kann aus zwei weiteren Gründen anders aussehen. Vor dem ersten Öffnen von Design Mode zeigt die Schaltfläche eine Try Annotate-Vorschau mit einer kurzen Demonstration. Nachdem du mehr als fünf Notizen erstellt hast, erscheint nur noch das Symbol.

Zum Beenden klickst du auf die Schaltfläche zum Verlassen in der Hinweiszeile, drückst erneut den Kurzbefehl oder verwendest Esc. Esc bricht zunächst einen laufenden Zeichenstrich, eine Textbearbeitung oder eine offene Notiz ab. Erst wenn diese Aktionen geschlossen sind, beendet die Taste den Design Mode.

Die öffentliche Cursor-Dokumentation nennt keine konkreten Abonnements für Annotate und bestätigt keinen Zeitplan für die Freigabe an alle Konten. Eine ausreichend neue Version bedeutet daher nicht automatisch, dass jedes Konto die Funktion erhält.

Wie wählst du Elemente aus, zeichnest Hinweise und änderst CSS?

Wähle ein Element aus, wenn die zu ändernde Komponente feststeht. Markiere einen Bereich, wenn es um Abstände, Ausrichtung oder eine größere Anordnung geht.

Ein oder mehrere Elemente auswählen

Klicke in der laufenden Anwendung auf ein Element, um es auszuwählen und eine Notiz zu öffnen. Beschreibe darin die gewünschte Änderung.

Stell dir beispielsweise ein SaaS-Dashboard mit einem überladenen Kopfbereich, einem Suchfeld und einer Reihe von Filterschaltflächen vor. Wähle das Suchfeld aus und schreibe:

Vergrößere die Höhe des Eingabefelds und seinen Innenabstand. Richte den Text vertikal an den Filterschaltflächen aus. Behalte die vorhandenen Farben bei.

Das ausgewählte Element gibt dem Agenten ein konkretes Ziel. Der Text beschreibt das gewünschte Ergebnis.

Für mehrere zusammengehörige Elemente hältst du Shift gedrückt und klickst auf jedes Element. Wähle beispielsweise das Suchfeld und die Filterschaltflächen aus. Bitte den Agenten, sie an derselben Grundlinie auszurichten und ihre Höhe zu vereinheitlichen.

Verwende die Mehrfachauswahl, wenn sich Elemente gemeinsam ändern sollen. Für unabhängige Änderungen oder unterschiedliche Anweisungen sind getrennte Notizen meist klarer.

Einen Bereich markieren und auf der Seite zeichnen

Ziehe mit dem Mauszeiger über die Seite, um einen Bereich zu markieren. Beschreibe anschließend die Änderung und ergänze visuelle Markierungen.

In der Hinweiszeile stehen vier Zeichenwerkzeuge bereit:

• Draw: Zeichne eine freie Form oder umfahre einen Bereich, der Aufmerksamkeit braucht.
• Ellipse: Kreise ein Element oder eine Gruppe von Elementen ein.
• Rectangle: Umrahme einen Abschnitt der Seite.
• Arrow: Zeige auf die Stelle, die geändert werden soll.

Halte beim Ziehen Shift gedrückt, um die Bewegung auf eine Achse zu begrenzen. Mit Option unter macOS oder Alt unter Windows und Linux zeichnest du das Rechteck von seiner Mitte aus. Mit Cmd/Ctrl + Z machst du eine Zeichnung rückgängig.

Angenommen, eine Übersichtskarte steht zu dicht an einem Diagramm. Zeichne ein Rechteck um den Übergang zwischen beiden und füge diese Notiz hinzu:

Füge zwischen den Übersichtskarten und dem Diagramm 24px vertikalen Abstand hinzu. Behalte die aktuellen Abmessungen des Diagramms bei und erhalte das responsive Layout.

Die Zeichnung zeigt, wo die Änderung nötig ist. Der Text beschreibt das Ergebnis und die Bedingungen, die bestehen bleiben sollen.

Sichtbaren Text direkt bearbeiten

Doppelklicke auf ein Textelement, um dessen Inhalt auf der Seite zu ändern. Speichere die Bearbeitung mit Return oder Enter. Mit Esc setzt du sie zurück.

Ändere beispielsweise die Überschrift „Usage Overview“ direkt im Browser in „API Usage“. Du musst den Austausch nicht zusätzlich in einer Anweisung beschreiben.

Dabei ist ein Unterschied wichtig: Textänderungen warten immer auf Send, auch wenn Batch edits ausgeschaltet ist. Das Speichern auf der Seite sendet die Änderung noch nicht an den Agenten.

Betrachte die direkte Textbearbeitung als Vorschlag für eine Codeänderung, nicht als dauerhafte Änderung nur im Browser. Cursor übermittelt sie mit der Notiz, damit der Agent das eigentliche Projekt aktualisieren kann.

CSS-Eigenschaften im Inspektor ändern

Wähle in einer Notiz für genau ein Element Edit CSS properties, um dessen CSS-Inspektor zu öffnen. Filtere die Liste, ändere einen Wert und sende die CSS-Anpassungen mit der Notiz.

Das eignet sich für gezielte Änderungen an Innenabständen, Schriftgröße, display-Verhalten oder Positionierung. Statt alles in natürlicher Sprache zu erklären, kannst du die Eigenschaft direkt ändern.

Prüfe die Seite, nachdem der Agent die Anpassungen übernommen hat. Der neue CSS-Wert kann mit vorhandenen Stilen, Layoutregeln oder dem responsiven Verhalten zusammenwirken. Kontrolliere auch die Codedifferenzen. So stellst du fest, ob die richtige Komponente geändert wurde und keine sachfremden Änderungen hinzugekommen sind.

Eine Notiz diktieren

Die Spracheingabe ist verfügbar, sobald eine Notiz Text oder CSS-Änderungen enthält. Klicke auf Dictate oder halte die Schaltfläche während des Sprechens gedrückt.

Du kannst gesprochene Anweisungen mit einer Zeichnung verbinden. Kreise beispielsweise ein Werbebanner ein und beschreibe, dass der Text kürzer werden soll. Der Button soll rechts ausgerichtet sein, und auf Mobilgeräten sollen die Elemente untereinander stehen.

Lies die entstandene Notiz vor dem Senden durch. Visuelle Markierungen zeigen das Ziel, während der diktierte Text das gewünschte Ergebnis beschreibt. Klare Formulierungen bleiben wichtig, besonders bei mehreren Änderungen an derselben Komponente.

Wann solltest du Batch edits einschalten?

Schalte Batch edits ein, wenn du mehrere zusammengehörige visuelle Änderungen sammeln und gemeinsam umsetzen lassen möchtest. Lass es ausgeschaltet, wenn du eine Element- oder Bereichsnotiz sofort senden und das Ergebnis vor dem nächsten Schritt prüfen möchtest.

Der Schalter ist anfangs ausgeschaltet. Er beeinflusst das Senden von Element- und Bereichsnotizen. Direkte Textänderungen warten dagegen immer auf Send.

Verhalten	Batch edits ausgeschaltet	Batch edits eingeschaltet
Element- oder Bereichsnotizen	Werden einzeln gesendet	Sammeln sich als nummerierte Markierungen
Element- oder Bereichsnotizen senden	Mit Return oder Enter in der Notiz sofort senden	Über Send in der Symbolleiste alle ausstehenden Notizen senden
Nachrichten bündeln	Jede Notiz wird separat gesendet	Ausstehende Notizen werden als eine Nachricht gesendet
Direkte Textänderungen	Warten auf Send	Warten ebenfalls auf Send
Ausstehende Notizen prüfen	Ausstehende Textänderungen in der Send-Liste prüfen, sofern vorhanden	Gesammelte Notizen in der Liste neben Send prüfen
Ausstehende Notizen entfernen	Clear All entfernt ausstehende, aber keine bereits gesendeten Notizen	Mit Clear All die ausstehenden Notizen entfernen

Unterscheide zwischen sofort gesendeten Notizen und ausstehenden Textänderungen. Bei ausgeschaltetem Batch edits kannst du eine Element- oder Bereichsnotiz mit Return oder Enter sofort senden. Eine direkte Textänderung bleibt bis zum Senden ausstehend. Auch diese Änderungen kannst du in der Send-Liste prüfen oder mit Clear All aus der Liste entfernen.

Bei eingeschaltetem Batch edits ersetzt ein Send-Button mit der Anzahl ausstehender Notizen die Annotate-Schaltfläche. Vor dem Senden kannst du die nummerierten Markierungen prüfen. Wenn du alle ausstehenden Notizen sendest, wird auch Design Mode beendet.

Verlässt du den Modus mit ungesendeten Notizen, bleibt Send in der Symbolleiste. Die Schaltfläche bleibt dort, bis du die Notizen sendest oder entfernst.

Praxisbeispiel: Eine Preisseite überarbeiten

Angenommen, du möchtest drei Probleme auf einer Preisseite beheben:

1. Die Hauptüberschrift benötigt zu viel vertikalen Platz.
2. Der zentrale Handlungsbutton ist nicht am Preis ausgerichtet.
3. Die Vergleichstabelle wirkt auf kleinen Bildschirmen zu gedrängt.

Aktiviere Batch edits und erstelle für jedes Problem eine Notiz.

Wähle für die Überschrift den Text aus und verlange eine kleinere Schrift, ohne die visuelle Hierarchie zu verlieren. Wähle den Button zusammen mit dem Preis aus, um ihre Ausrichtung zueinander zu zeigen. Markiere bei der Vergleichstabelle den betreffenden Bereich und beschreibe das gewünschte responsive Verhalten.

Prüfe vor dem Senden die nummerierten Markierungen. Jede Notiz muss auf das richtige Element oder den richtigen Bereich verweisen. Sende dann alle Notizen gemeinsam als eine Nachricht.

Diese Methode eignet sich besonders, wenn die Änderungen eine zusammenhängende Aufgabe bilden. Der Agent kann die Notizen gemeinsam betrachten und ihre Beziehungen berücksichtigen. Das Bündeln garantiert allerdings nicht, dass das Modell jede Anweisung korrekt umsetzt.

Hängt eine Änderung von einem wichtigen Zwischenergebnis ab, sende die erste Notiz separat. Prüfe die aktualisierte Seite und entscheide dann über den nächsten Schritt. Ändere beispielsweise zuerst das gesamte Seitenlayout. Bitte den Agenten anschließend, die Abstände zwischen einzelnen Komponenten fein abzustimmen.

Mit Cmd/Ctrl + L in einer Notiz oder während einer Textbearbeitung kannst du den Inhalt stattdessen in das Chat-Eingabefeld übernehmen. Er wird dabei weder direkt gesendet noch für Send zurückgehalten. Halte Option/Alt gedrückt und klicke auf ein Element, um es direkt zum Chat-Eingabefeld hinzuzufügen. Ist bereits eine Notiz geöffnet, fügt derselbe Kurzbefehl das Element dieser Notiz hinzu.

Welchen Kontext erhält der Agent tatsächlich?

Jede gesendete Notiz enthält deine Anweisung, strukturierte Elementdaten und einen zugeschnittenen Screenshot. In unterstützten React-, Vue- und Svelte-Anwendungen kommen Komponenteninformationen hinzu. Sie helfen dem Agenten, den passenden Quellcode zu finden.

Cursor dokumentiert für jedes ausgewählte Element folgende Informationen:

Kontext	Was Cursor übermittelt	Nutzen
HTML-Tag	Tag-Name des Elements	Identifiziert den Elementtyp
Attribute	id, Klassen und Attribute des Elements	Unterscheidet das Ziel von anderen Elementen
Selektorpfad	Pfad im Stil eines CSS-Selektors	Hilft, das Element auf der gerenderten Seite zu finden
Sichtbarer Text	Die ersten 200 Zeichen des sichtbaren Texts	Verbindet die Auswahl mit dem dargestellten Inhalt
Geometrie	Größe und Position des Elements	Beschreibt Lage und Abmessungen
Berechnete Stile	Farbe, Hintergrundfarbe, Schriftgröße, Schriftfamilie, display und position	Liefert Informationen über die tatsächliche Darstellung
Komponentenkontext	Komponentenname und Komponenten-Stack in React, Vue und Svelte	Hilft, das gerenderte Element mit dem Quellcode zu verbinden
Screenshot	Ausschnitt des Elements oder des markierten Bereichs samt Zeichnung	Zeigt den visuellen Kontext der Änderung

Das ist konkreter als eine Anweisung wie „Mach den Kopfbereich schöner“. Der Agent erhält ein Ziel, Darstellungswerte, sichtbaren Inhalt und ein Bild.

Es bleibt dennoch eine begrenzte Momentaufnahme. Die Dokumentation verspricht weder einen vollständigen DOM-Auszug noch das gesamte Stylesheet oder die berechneten Stile aller Vorfahren. Auch der komplette Anwendungszustand und ein Screenshot der ganzen Seite sind nicht zugesichert. Der Komponenten-Stack ist für die genannten Frameworks verfügbar. Er garantiert jedoch nicht, dass der Agent in jedem Projekt die richtige Quelldatei findet.

Bei einem ausgewählten Button erhält der Agent beispielsweise dessen Typ, Klassen, Abmessungen, Text und berechnete Stile. Der Screenshot kann seine Anordnung neben dem Preis zeigen. In einer React-Anwendung können die Komponenteninformationen helfen, den gerenderten Button seinem Komponenten-Stack zuzuordnen.

Derselbe Komponentenkontext ist für Vue und Svelte dokumentiert. Auch dort enthält er den Komponentennamen und den Komponenten-Stack. Die Dokumentation verspricht keine identischen Ergebnisse bei der Quellcodesuche über unterschiedliche Frameworks oder Projekte hinweg.

Der Agent muss weiterhin das Repository untersuchen, die umgebende Implementierung verstehen und eine geeignete Änderung wählen. Prüfe nach Abschluss die Codedifferenzen und die laufende Seite.

Cursor dokumentiert keine Formel für die Tokenkosten der Screenshots und Elementmetadaten von Annotate. Rechne daher weder mit festen Kosten pro Notiz noch mit einer garantierten Verringerung der gesamten Modellnutzung durch Bündelung. Batch edits ändert die Art der Übermittlung. Die tatsächlichen Kosten hängen vom Ablauf des Agenten und der Modellnutzung ab.

Wie prüfst du die Änderungen des Agenten?

Nutze Annotate für eine präzisere Anfrage und prüfe anschließend die Implementierung im Projekt sowie das gerenderte Ergebnis.

Gehe nach dem Senden so vor:

1. Warte, bis der Agent die betreffenden Änderungen abgeschlossen hat.
2. Prüfe die Codedifferenzen auf sachfremde Anpassungen, falsche Selektoren und Abweichungen von bestehenden Komponentenkonventionen.
3. Kontrolliere die laufende Seite nach dem Hot Reload, sofern dein Entwicklungsserver ihn unterstützt.
4. Prüfe das Layout erneut bei den für deine Anwendung wichtigen Viewport-Größen.
5. Teste bei Bedarf Bedienung und Barrierefreiheit, einschließlich Tastaturfokus und lesbarem Text.

Cursor erklärt in der Ankündigung vom 28. Oktober 2026, dass Annotate beim Prüfen von Designs in verschiedenen Bildschirmgrößen hilft. Die bereitgestellte öffentliche Design-Mode-Dokumentation beschreibt jedoch keinen automatischen Test des responsiven Verhaltens. Prüfe die Viewport-Größen deshalb separat, sofern deine installierte Umgebung keine dokumentierte Automatisierung dafür bietet.

Für umfangreichere Oberflächenarbeit kannst du mit Inspo MCP Designvorlagen und Screenshots an Coding-Agenten übergeben. Das löst eine andere Aufgabe: Annotate kennzeichnet, was an einer laufenden Oberfläche geändert werden soll. Designvorlagen zeigen dagegen, welches visuelle Ergebnis du anstrebst.

Wenn du einen übergreifenden Entwicklungsablauf auswählst, lies den Vergleich von Cursor und Codex für 2026. Er behandelt Arbeitsabläufe, Preise und bedarfsabhängige Nutzung.