Wir freuen uns, einen visuellen Editor für den Cursor Browser vorzustellen. Er bringt deine Web‑App, deine Codebasis und leistungsstarke visuelle Editor-Tools in einem einzigen Fenster zusammen. Du kannst Elemente per Drag-and-drop anordnen, Komponenten und Props direkt inspizieren und Änderungen beschreiben, während du einfach darauf zeigst und klickst. So werden die Oberflächen in deinem Produkt direkter und intuitiver, und die Lücke zwischen Design und Code schließt sich.

#Mit Drag-and-Drop neu anordnen

Der visuelle Editor ermöglicht es dir, das Layout und die Struktur einer Website direkt zu bearbeiten, indem du gerenderte Elemente per Drag-and-Drop im DOM-Baum verschiebst.

So werden visuelles Design und Code zusammengeführt. Du kannst die Reihenfolge von Buttons ändern, Abschnitte umsortieren und verschiedene Grid-Konfigurationen testen, ohne den Kontext wechseln zu müssen. Sobald das visuelle Design deiner Vorstellung entspricht, sag dem Agent, dass er es anwenden soll. Der Agent findet die relevanten Komponenten und aktualisiert den zugrunde liegenden Code für dich.

#Zustände von Komponenten direkt testen

Viele moderne Apps werden in React entwickelt, wo Komponenten Eigenschaften (props) haben, um unterschiedliche Zustände zu steuern. Der visuelle Editor macht es leicht, diese Props in der Seitenleiste verfügbar zu machen, sodass du Änderungen an verschiedenen Varianten einer Komponente vornehmen kannst.

#Eigenschaften mit visuellen Steuerelementen anpassen

Die Seitenleiste des visuellen Editors ermöglicht es dir, Stile mit Schiebereglern, Paletten sowie deinen eigenen Farbtokens und deinem Designsystem präzise zu verfeinern. Jede Änderung ist vollständig interaktiv: Live-Farbwähler, die deine Auswahl in Echtzeit anzeigen, sowie Steuerelemente, mit denen du Grids, Flexbox-Layouts und Typografie präzise anpassen und neu anordnen kannst.

#Klicken und prompten

Mit dem visuellen Editor kannst du außerdem auf beliebige Elemente deiner Benutzeroberfläche klicken und in einem Prompt beschreiben, was du ändern möchtest. Du könntest auf ein Element klicken und eingeben: „Mach das größer“, bei einem anderen: „Mach das rot“ und bei einem dritten: „Tausche ihre Reihenfolge.“ Die Agents laufen gleichzeitig, und nach wenigen Sekunden sind deine Änderungen live.

#Auf der nächsthöheren Abstraktionsebene

Der neue visuelle Editor von Cursor vereint deine Arbeit über Design und Code hinweg und hilft dir, präziser auszudrücken, was du möchtest, sodass die Umsetzung nicht mehr durch die reine Mechanik begrenzt ist.

Wir sehen eine Zukunft, in der Agents noch enger mit dem Erstellen von Web-Apps verknüpft sind und Menschen ihre Ideen über Oberflächen ausdrücken, die Gedanken direkter mit Code verbinden. Diese Funktionen sind ein Schritt in diese Richtung.

Lies die Browser-Dokumentation. Erfahre mehr über alle neuen Funktionen in Cursor 2.2.