Der neue Visual Editor für den Cursor Browser

Mit großer Freude kündigt Cursor die Einführung eines neuen Visual Editors für den Cursor Browser an. Dieser Editor vereint Design und Programmierung in einem einzigen Tool und ermöglicht es Nutzern, UI-Elemente zu ziehen, Eigenschaften zu inspizieren und Änderungen interaktiv vorzunehmen. Dies führt zu einer intuitiveren und unmittelbaren Gestaltung von Benutzeroberflächen, die die Kluft zwischen Design und Code schließt.

Drag-and-Drop-Funktionalität

Der Visual Editor ermöglicht es Entwicklern, das Layout und die Struktur einer Webseite direkt durch Ziehen und Ablegen von gerenderten Elementen im DOM-Baum zu manipulieren. Diese Funktionalität vereinfacht den Designprozess erheblich, da Entwickler die Reihenfolge von Schaltflächen ändern, Abschnitte rotieren und verschiedene Grid-Konfigurationen testen können, ohne zwischen verschiedenen Tools wechseln zu müssen.

Direktes Testen von Komponenten

In modernen Anwendungen, die häufig mit React entwickelt werden, haben Komponenten Eigenschaften, die verschiedene Zustände steuern. Der Visual Editor macht es einfach, diese Eigenschaften in der Seitenleiste anzuzeigen, sodass Änderungen an verschiedenen Varianten einer Komponente schnell vorgenommen werden können.

Visuelle Steuerung von Eigenschaften

Die Seitenleiste des Visual Editors ermöglicht es Nutzern, Stile mit Schiebereglern, Farbpaletten und eigenen Farbtokens sowie Designsystemen präzise anzupassen. Jede Anpassung ist vollständig interaktiv, mit Live-Farbwählern, die die Auswahl in Echtzeit anzeigen, sowie Steuerungen zur Anordnung von Grids, Flexbox-Layouts und Typografie.

Interaktive Änderungsanfragen

Eine der innovativsten Funktionen des Editors ist die Möglichkeit, auf beliebige Elemente in der Benutzeroberfläche zu klicken und die gewünschten Änderungen zu beschreiben. Nutzer können beispielsweise auf ein Element klicken und sagen: „Mach das größer“, während sie bei einem anderen Element anweisen: „Mach das rot“. Die Agenten arbeiten parallel und innerhalb von Sekunden sind die Änderungen live.

Die Zukunft der Webentwicklung

Der neue Visual Editor von Cursor vereint Design und Programmierung und hilft Nutzern, ihre Ideen besser zu artikulieren, sodass die Ausführung nicht durch technische Einschränkungen limitiert wird. Die Vision ist eine Zukunft, in der Agenten noch tiefer mit dem Bau von Webanwendungen verbunden sind und Menschen ihre Ideen durch Schnittstellen ausdrücken können, die Gedanken direkt mit Code verbinden.

Fazit

Mit der Einführung des Visual Editors für den Cursor Browser wird ein bedeutender Schritt in Richtung einer nahtlosen Integration von Design und Entwicklung gemacht. Solche Tools sind entscheidend für die Zukunft der Webentwicklung, da sie die Zusammenarbeit zwischen Designern und Entwicklern fördern und die Effizienz steigern.

Quellenliste:

• Quelle: A Visual Editor for the Cursor Browser
• Browser-Dokumentation von Cursor
• Neuigkeiten in Cursor 2.2