Chat ist eine Oberfläche für die Arbeit mit Agenten, aber UI-Arbeit ist meist räumlich. Designer, PMs und Frontend-Entwickler kommunizieren oft über Annotationen, die auf Elemente, Bereiche oder den Zustand einer Seite verweisen.

Design Mode, das wir heute aktualisieren, hilft uns dabei, die Lücke zwischen dem zu verkleinern, was du siehst, und dem, was der Agent versteht. Damit kannst du dein Produkt im richtigen Kontext bearbeiten, ohne aus dem Flow zu kommen.

Im Cursor-Browser kannst du auf ein beliebiges Element klicken, auf der Seite zeichnen oder eine Änderung per Sprache beschreiben, und Cursor erhält den Kontext, den es braucht, um den Code zu bearbeiten, während du schon mit der nächsten Änderung weitermachst.

So lassen sich Designänderungen mit Agenten schneller und einfacher iterativ umsetzen, weil die Anweisung nicht mehr nur ein Satz ist, sondern auch das ausgewählte Element, den dahinterliegenden Code, das umgebende Layout und die visuellen Zusammenhänge auf der Seite umfassen kann.

Dadurch wird der Weg vom Bemerken zur Bearbeitung kürzer. Du kannst auf den Teil der Oberfläche zeigen, den du meinst, ohne das laufende Produkt zu verlassen, und dich weiter direkt auf das Produkt selbst beziehen, während Agenten im Hintergrund die Änderungen vornehmen.

#Zeige, zeichne oder beschreibe die Änderung

Design Mode bietet dir mehrere Möglichkeiten, dem Agent zu vermitteln, was du ändern möchtest. Du kannst ein Element auswählen, mehrere Referenzen hinzufügen, über die Oberfläche zeichnen oder per Spracheingabe die Änderung beschreiben.

Eine Mehrfachauswahl ist nützlich, wenn die Änderung von der Beziehung zwischen Elementen abhängt. Du kannst auf zwei Komponenten verweisen und den Agent bitten, eine an die andere anzugleichen, wiederholte Inhalte zu entfernen oder eine Gruppe von Komponenten gemeinsam anzupassen.

Zeichnen ist nützlich, wenn der Agent wissen muss, auf welchen Bereich der Seite sich die Anweisung bezieht. Du kannst einen überfüllten Abschnitt einkreisen, einen Bereich umrahmen oder einen Teil einer animierten Seite markieren. Die Markierung liegt über einem eingefrorenen Bild des Viewports, sodass der Agent genau den Seitenzustand sieht, auf den du dich bezogen hast.

In dieser Version kannst du Anweisungen auch per Spracheingabe geben, und wir haben die Zielgenauigkeit verbessert und das Ganze beschleunigt. Insgesamt fühlen sich visuelle Interaktionen im Design Mode dadurch mehr wie Teil eines normalen Bearbeitungsablaufs an.

Hinter den Kulissen fügt die Auswahl eines Elements dem Kontext zwei sich ergänzende Signale hinzu: die Identität des Elements (xpath, die Komponente, Attribute, berechnete Stile, Props aus dem Fiber-Tree) und einen Screenshot für den räumlichen Kontext (Layout, umgebende Elemente und den exakten Seitenzustand). So erhält der Agent genau das, was er braucht, um die Quelle zu finden und den Code effizient zu bearbeiten.

#Das Modell an den Rhythmus der Arbeit anpassen

Wenn du eine Benutzeroberfläche verfeinerst, führt eine Änderung meist direkt zur nächsten. Du passt eine Komponente an, bemerkst die Abstände darum herum und siehst dann, wie eine andere Komponente dazu passen sollte.

Mit Design Mode kannst du diese Änderungen losschicken, sobald sie dir auffallen. Du kannst auf ein Element zeigen, die Änderung beschreiben, zu einem anderen Teil der Seite wechseln und eine weitere Änderung abschicken, bevor die erste abgeschlossen ist. Design Mode erleichtert Multitasking und macht es möglich, mehrere Subagenten zu verwalten.

Dieser Ablauf funktioniert am besten mit einem Modell, das gezielte UI-Änderungen schnell umsetzen kann. Composer 2.5 eignet sich dafür besonders gut, weil es schnell ist und stark bei der Arbeit an Oberflächen. Sobald Agenten fertig sind, wird die App per Hot-Reload aktualisiert. Du siehst, wie die Änderungen in der laufenden App erscheinen, und machst weiter, bis sich die Oberfläche richtig anfühlt.

Wir glauben, dass die Zukunft der Softwareentwicklung es Benutzern ermöglicht, nahtlos zwischen höheren Abstraktionsebenen und Details auf niedrigerer Ebene zu wechseln und dabei auf Wunsch im Flow-Zustand zu arbeiten. Design Mode gibt Benutzern die Kontrolle, den Handlungsspielraum und die präzisen Bearbeitungswerkzeuge, die das möglich machen.

Probiere Design Mode im Agents-Fenster aus. Lies die Browser-Dokumentation, um mehr zu erfahren, oder lade Cursor herunter, um erste Schritte zu machen.