Cursor Design Mode revolutioniert die Zusammenarbeit mit KI-Agenten: Statt mühsam Änderungen zu beschreiben, zeigen Sie einfach auf Elemente, zeichnen Anmerkungen direkt ins UI oder sprechen Ihre Anweisungen aus. Das spart Zeit und macht das Iterieren an Design-Änderungen intuitiver denn je. Erfahren Sie, wie die neue Funktion den Abstand zwischen dem, was Sie sehen, und dem, was der Agent versteht, auf ein Minimum reduziert.

Cursor Design Mode schließt die Lücke zwischen Sehen und Verstehen

Chat-basierte Interfaces sind nur ein Weg, mit Agenten zu arbeiten. Doch wer an Benutzeroberflächen arbeitet – ob Designer, Product Manager oder Frontend-Entwickler – denkt räumlich. Annotationen, Pfeile und Markierungen auf der Oberfläche sind das natürliche Vokabular dieser Berufsgruppen. Genau hier setzt Cursor Design Mode an. Das Tool ermöglicht es, Produkte direkt im laufenden Kontext zu bearbeiten, ohne den Workflow zu verlassen. Über den integrierten Browser lassen sich einzelne Elemente anklicken, Bereiche markieren oder Änderungen per Spracheingabe beschreiben. Der Agent erhält dabei nicht nur einen Textbefehl, sondern den gesamten visuellen Kontext: das selektierte Element, den dahinterliegenden Code, das Layout und die räumlichen Beziehungen auf der Seite. Das macht die Schleife zwischen Beobachten und Editieren messbar enger.

Point, Draw, Narrate: Drei Wege zur präzisen Anweisung

Cursor Design Mode bietet mehrere Eingabeformen, um der KI die eigene Absicht unmissverständlich zu vermitteln.

Elemente gezielt ansprechen

Mit einem einfachen Klick auf ein Element im laufenden App-Browser wird dieses selektiert. Nutzer können direkt gegen dieses Element eine Anweisung senden und den Agenten den Code editieren lassen. Die Auswahl liefert dem Modell zwei entscheidende Signale: zum einen die technische Identität des Elements, zum anderen einen Screenshot des aktuellen Seitenzustands mit Layout-Kontext und Nachbarelementen.

Multi-Selektion für komplexe Zusammenhänge

Oft hängen Änderungen von Beziehungen zwischen Elementen ab. Die Multi-Selektion erlaubt es, mehrere Komponenten zu markieren und den Agent zu bitten, eines an das andere anzupassen, wiederholte Inhalte zu entfernen oder ganze Gruppen gemeinsam zu modifizieren. Das ist besonders wertvoll für konsistente Design-Systeme.

Zeichnen und Markieren auf dem Interface

Wenn die räumliche Zuordnung der Anweisung wichtig ist, können Nutzer direkt auf der Seite zeichnen. Ob ein Kreis um einen überladenen Bereich, ein Rechteck um eine Region oder Markierungen auf animierten Seiten – die Annotation liegt über einem eingefrorenen Frame des Viewports. So sieht der Agent exakt den Zustand, auf den sich die Anweisung bezieht.

Spracheingabe für flüssige Kommandos

Neu in dieser Version ist die Spracheingabe. Nutzer können Änderungen einfach per Stimme beschreiben und dabei gleichzeitig zeichnen oder Elemente auswählen. Im Hintergrund wurde die Zielgenauigkeit erhöht und die Latenz reduziert, sodass visuelle Interaktionen sich wie ein natürlicher Teil des Editier-Prozesses anfühlen.

Multitasking und parallele Subagenten im Flow-State

Das Verfeinern von UIs folgt selten einer linearen Kette. Oft führt eine Editierung direkt zur nächsten Beobachtung: Ein Abstand wird angepasst, und sofort fällt auf, dass eine benachbarte Komponente nicht mehr passt. Cursor Design Mode erlaubt es, diese Beobachtungen im laufenden Betrieb abzuschicken, ohne auf den Abschluss vorheriger Aufgaben zu warten. Man zeigt auf ein Element, beschreibt die Änderung, wechselt zu einem anderen Teil der Seite und sendet den nächsten Edit – während der erste Agent noch arbeitet. Dieser asynchrone Ansatz macht das Management mehrerer Subagenten erst praktikabel. Besonders Composer 2.5 profitiert davon, da das Modell gezielte UI-Änderungen schnell und präzise umsetzt. Sobald ein Agent fertig ist, lädt die App per Hot Reload neu. Die Änderungen erscheinen sofort im laufenden Produkt, und der Nutzer bleibt im Flow.

Ausblick: Nahtlos zwischen Abstraktion und Detail navigieren

Die Zukunft der Softwareentwicklung sieht vor, dass Nutzer jederzeit nahtlos zwischen hohen Abstraktionsebenen und Low-Level-Details wechseln können – im Idealfall ohne den Flow-State zu verlieren. Cursor Design Mode liefert genau die Kontrolle, Präzision und Handlungsfähigkeit, die dieses Ziel realisierbar machen. Direkte visuelle Prompts, parallele Editier-Loops und enge Kopplung zwischen Sehen und Code verwandeln das Interface in einen lebendigen Dialog mit der KI.

Quelle: Cursor Blog – Direct agents with visual prompts in Design Mode