Cursor hat gerade den Designübergang abgeschafft.

Der Cursor hat die nervigste Schleife in der Front-End-Entwicklung in etwas verwandelt, das sich fast illegal anfühlt. Anstatt zwischen Figma, deinem Code-Editor und einem Chrome-Tab, den du mit Cmd+R bearbeitest, zu springen, lebt Cursors neuer Visual Editor direkt im integrierten Browser und bearbeitet den echten Code hinter dem, was du siehst.

Vor ein paar Wochen hat Cursor ein komplettes Browser-Fenster in die IDE integriert, sodass du `localhost` nutzen kannst, ohne deinen Editor zu verlassen. Jetzt erhält dieser Browser eine Sidebar im Figma-Stil: Klicke auf Element auswählen, fahre mit der Maus über irgendetwas auf der Seite, und du erhältst Steuerungen für Layout, Typografie, Abstände, Hintergrund, Rahmen, Schatten und mehr.

Das bedeutet, dass der klassische Ablauf – Designer erstellt Mockups, Entwickler übersetzt sie in HTML/CSS, aktualisiert, passt an, aktualisiert erneut – beginnt zu kollabieren. Du ziehst eine Karte, änderst den Abstand oder tauschst ein 3×2-Raster gegen ein 2×3-Raster visuell aus, klickst auf Anwenden, und die KI von Cursor schreibt den zugrunde liegenden React- oder Next.js-Code für dich um und lädt die Vorschau neu.

Anstatt mit drei Werkzeugen und zwei mentalen Modellen zu jonglieren, arbeiten Sie auf einer einzigen Oberfläche, die sich wie ein Design-Tool verhält, aber mit der Verbindlichkeit eines IDEs. Der Editor bietet: - Layout-Steuerelemente für Raster, Flex, Zeilen, Spalten und freie Positionierung - Erscheinungsbild-Steuerelemente für Schriftart, Größe, Farbe, Zeilenhöhe, Ausrichtung, Unschärfe und Schatten - Abstands-Steuerelemente für Innenabstand, Außenabstand, Abstand und Dimensionen

Dieser Workflow macht die Überschrift “Figma Killer-Features” technisch falsch, aber in die richtige Richtung. Cursor versucht nicht, Figma’s Zusammenarbeit, Prototyping oder Designsysteme zu ersetzen; es geht um die Übergabe selbst, die langsame Übersetzungsebene zwischen ansprechenden Rahmen und funktionierenden Komponenten.

Designer können jetzt die produktionsähnliche Benutzeroberfläche anpassen, ohne CSS anzufassen, während Entwickler in ihrem Code bleiben und die KI die Boilerplate-Anpassungen übernehmen lässt. Das Tool verwischt die Rollen: Die Person, die das Auto-Layout anpasst, und die Person, die JSX bearbeitet, könnten dieselbe sein, die im selben Fenster an derselben Live-Vorschau arbeitet.

Nennen Sie es einen Paradigmenwechsel oder einfach ein überfälliges Upgrade, aber die Wirkung ist klar. Cursors visueller Editor verwandelt die Front-End-Arbeit von „bearbeiten, speichern, aktualisieren“ in „sehen, ziehen, anwenden“, während die KI im Hintergrund leise den Code zusammenfügt.

Cursor behandelt Ihre IDE jetzt wie ein Live-Browserfenster, nicht wie einen Dateieditor mit einer Vorschau. Die neue Kombination vereint einen integrierten Cursor-Browser mit einem schwebenden Visual Editor-Panel, das direkt über Ihrer laufenden Anwendung sitzt. Sie wechseln nicht mehr zu Chrome oder Safari; Ihr localhost ist buchstäblich ein weiteres Fenster innerhalb von Cursor.

Starten Sie einen Entwicklungsserver und Ihre App erscheint sofort in diesem eingebetteten Browser, inklusive Adressleiste. Sie können `localhost:3000` aufrufen, herumklicken, Modalfenster auslösen und lange Seiten scrollen, ganz wie auf einer normalen Webseite. Der Kontextwechsel wird zu einem einzigen Arbeitsbereich zusammengefasst, sodass Designanpassungen, Codeänderungen und visuelle Überprüfungen in einem einzigen Durchlauf erfolgen.

Klicken Sie auf die Element auswählen-Schaltfläche und der Cursor wechselt in einen Modus, der sich anfühlt wie eine Fusion aus Chrome DevTools und Figma. Fahren Sie über die Seite und jeder DOM-Knoten wird an Ort und Stelle hervorgehoben, von einem einzelnen `<span>` bis zu einem vollständigen Rasterabschnitt. Ein Klick sperrt Ihre Auswahl und verbindet sie mit dem Visual Editor-Bereich auf der rechten Seite.

Dieses Panel zeigt eine dichte Sammlung von Steuerelementen, die den tatsächlichen Code darunter zugeordnet sind. Sie können: - Elemente ziehen, um sie im Layout neu anzuordnen - Layouttypen wechseln (Raster, Reihe, Spalte, Freiform) - Polsterung, Margin, Abstand und Höhe mit Schiebereglern anpassen

Erscheinungseinstellungen gehen genauso tief. Schriftfamilie, Größe, Farbe, Ausrichtung, Zeilenhöhe, Abstände, Hintergrund, Rand, Schatten und Unschärfe liegen nur wenige Pixel vom Live-Element entfernt. Ändern Sie eine Überschrift in eine andere Schriftart, färben Sie sie gelb, zentrieren Sie sie und fügen Sie einen Rand hinzu, und klicken Sie dann auf Anwenden, um diese Änderungen als strukturierten Änderungsantrag zu verpacken.

Entscheidend ist, dass Sie das tatsächliche Produkt manipulieren und nicht ein statisches Mockup. Wenn Sie ein 3×2-Raster in ein 2×3-Layout umwandeln oder eine Karte dehnen, aktualisiert Cursor die laufende React-App und synchronisiert sich über seinen KI-Agenten mit dem Code. Aktualisieren Sie die Seite, und die Änderungen bleiben bestehen, da sie jetzt in Ihren Komponenten leben und nicht in einem verworfenen Prototyp.

Cursors neuer Workflow beginnt mit einem einzigen, gewagten Prompt. Astro K Joseph öffnet ein leeres Projekt in Cursor, startet Gemini 3 Pro und tippt etwas ein wie: „Erstelle mir eine Landing Page für eine KI-Automatisierungsplattform ähnlich wie die NATO, mit schlankem UI, Animationen und modernem Design.“ Eine Anfrage später hat er eine vollständig strukturierte React-Landing-Page, komplett mit einem Hero-Bereich, einem Gitter von Feature-Karten, Schaltflächen, Farbverläufen und Animationen.

Dieser ursprüngliche KI-Generationsschritt ist absichtlich groß angelegt. Anstelle von manuellem Codieren von Layout, Typografie und Komponenten generiert das Modell die gesamte Erfahrung: Routing, Komponenten, CSS und Interaktionen. Der integrierte Browser von Cursor zeigt auf den Entwicklungsserver auf localhost, sodass die frisch generierte Seite live innerhalb der IDE erscheint, ohne dass ein Kontextwechsel erforderlich ist.

Von dort übernimmt der Visual Editor. Joseph klickt auf „Element auswählen“, fährt mit der Maus über die Live-Seite und wählt einen beliebigen DOM-Knoten aus: Hero-Überschrift, CTA-Button oder ein Sechs-Karten-Layout. Eine Figma-artige Seitenleiste schiebt sich hinein und zeigt Steuerungen für Layout und Erscheinungsbild: Position, Anzeige (Raster, Reihe, Spalte, Freiform), Innenabstand, Außenabstand, Schriftart, Schriftgröße, Zeilenhöhe, Farbe, Hintergrund, Rand, Schatten und Unschärfe.

Mikro-Anpassungen, die früher das Durchsuchen von CSS bedeuteten, werden jetzt zur direkten Manipulation. Er: - Ändert die Schriftart des Haupttextes in eine andere Familie - Wechselt die Textfarbe auf Gelb - Ändert das Layout des Feature-Rasters von 3×2 auf 2×3 - Passt Abstände, Höhe, Polsterung und Margen mit Schiebereglern an

Diese Änderungen existieren weiterhin nur in der visuellen Ebene, bis er auf Anwenden klickt. Zu diesem Zeitpunkt erfasst Cursor die Änderungen und sendet sie über die Schaltfläche „Senden“ an den KI-Agenten. Das Modell übersetzt jede visuelle Anpassung in präzise Codeänderungen – aktualisiert JSX, Tailwind-Klassen oder CSS-Module – und schreibt sie zurück in das Repository.

Ein kurzes Aktualisieren im Cursor-Browser bestätigt die Schleife: Das Raster wird jetzt in 2×3 dargestellt, die Typografie bleibt erhalten und die neuen Farben bleiben bestehen. Der eigene Artikel von Cursor, Ein visueller Editor für den Cursor-Browser, beschreibt dies als die Umwandlung von „was du siehst“ in „was der Code tatsächlich ist“, ohne jemals die IDE zu verlassen.

Figma-Veteranen werden ein unheimliches Gefühl der déjà-vu verspüren, sobald die Cursor-Visual-Editor-Seitenleiste geöffnet wird. Ein ausgewähltes Element im IDE-Browser rückt ins Blickfeld, und die rechte Leiste füllt sich mit vertrauten Eigenschaftsgruppen: Layout, Erscheinung, Effekte, Abstände. Es sieht weniger nach einem Code-Tool aus und mehr wie ein abgespeckter Figma-Inspektor, der direkt mit Ihrem JSX und CSS verbunden ist.

Der Abschnitt Erscheinungsbild spiegelt die grundlegenden visuellen Steuerungen wider, die Designer täglich hunderte Male berühren. Sie erhalten Typografie-Steuerungen für Schriftfamilie, -größe und -gewicht sowie Zeilenhöhe und Buchstabenabstand, die sich wie die Schieberegler und numerischen Eingaben von Figma verhalten. Der Cursor bietet auch Schalter für die Textausrichtung – links, rechts, zentriert – sodass die Änderung der Komposition einer Hauptüberschrift sich genau wie das Anpassen in einer Design-Datei anfühlt.

Farben erhalten ebenfalls eine erstklassige Behandlung. Ein integrierter Farbauswähler erlaubt es dir, Text- oder Hintergrundfarben in Echtzeit auszutauschen, mit Unterstützung für feste Füllungen und Farbverläufe, die auf echte CSS-Werte zurückgeführt werden. Rahmen, Schatten und Unschärfen befinden sich in eigenen Mini-Stapeln, die jeweils über Schalter und numerische Steuerungen verfügen, sodass du eine 1px-Kontur, einen sanften Kartenschatten oder einen subtilen Hintergrundunschärfe einstellen kannst, ohne durch Tailwind-Klassen oder SCSS-Variablen suchen zu müssen.

Layout ist der Bereich, in dem die Figma-DNA am deutlichsten zum Vorschein kommt. Der Layout-Bereich zeigt Anzeige-Modi – Raster, Flex, Reihe, Spalte, Freiform – die direkt mit den zugrunde liegenden CSS-Eigenschaften korrespondieren, jedoch als einfache Dropdowns und Schalter dargestellt werden. Sie können ein 3×2-Raster von Karten in ein 2×3-Layout verwandeln, indem Sie eine Voreinstellung auswählen und dann einen Abstandsschieber ziehen, um sie zu verteilen, ganz so, wie Sie den Auto-Layout-Abstand in Figma bearbeiten.

Für Flex- und Grid-Container sind die Steuerungen für Ausrichtung und Rechtfertigung sofort nachvollziehbar. Sie erhalten Schaltflächen, um Elemente am Anfang, in der Mitte oder am Ende auszurichten, sowie zur Verteilung des Abstands zwischen ihnen, ohne `justify-content` oder `align-items` zu berühren. Padding und Margin erscheinen als klassische Box-Modell-Steuerungen, bei denen Sie alle Seiten ziehen können, um sie anzupassen, oder sie entsperren und jede Kante unabhängig anpassen können.

Designer müssen "das ausgewogener machen" nicht mehr in ein seitenlanges Entwicklungsticket umformulieren. Sie können einen Abschnitt anklicken, die Schriftgröße von 32px auf 40px erhöhen, 24px vertikalen Abstand hinzufügen und ein Grid in eine einzige Reihe schieben – alles innerhalb von Cursor – während die KI sich um die komplizierten CSS-Unterschiede kümmert. Das Ergebnis: Figma-Instinkte werden 1:1 auf Produktionscode angewendet, und die psychologische Barriere zwischen Design und Umsetzung beginnt zu bröckeln.

Handoff bedeutete früher eine ordentlich verpackte Figma-Datei, ein PDF-Spezifikation und ein Gebet. Der neue Visuelle Editor von Cursor verwandelt das in eine gemeinsame, lebendige Oberfläche, auf der Designer und Entwickler gleichzeitig am gleichen laufenden Code in derselben IDE arbeiten. Anstatt Rotenlinien zu exportieren, justieren Designer jetzt das tatsächliche Produkt, das ausgeliefert wird.

Cursors integrierter Browser hat bereits den „Design → Ausführen → Inspektion“-Zyklus in ein einziges Fenster zusammengefasst. Wenn man die Figma-ähnliche Seitenleiste darüberlegt, erscheint das alte Ritual, statische Mockups in Jira-Tickets zu verschieben, veraltet. Designer warten nicht mehr auf einen Sprint, nur um zu sehen, ob eine 4px-Padding-Änderung auf einem echten Element tatsächlich gut aussieht.

Da der Editor Layout-, Typografie- und Erscheinungssteuerungen für jeden ausgewählten DOM-Knoten bereitstellt, können Designer direkt im Live-UI nach pixelgenauer Ausrichtung streben. Sie können: - Abstände und Innenabstände um 1 Pixel anpassen - Ein 3×2-Raster mit einem Dropdown-Menü in 2×3 umschalten - Schriftarten, Zeilenhöhe und Farb-Tokens aus einem einzigen Panel anpassen

All das geschieht, ohne eine Zeile CSS zu berühren, während die KI von Cursor im Hintergrund die zugrunde liegenden Stile und Komponenten neu schreibt.

Das kehrt die übliche Machtstruktur um. Anstatt „kleine visuelle Korrekturen“ anzufordern, agieren Designer innerhalb von Cursor als erstklassige Mitwirkende, klicken dann auf Anwenden und senden Änderungen an den KI-Agenten, der dann den Code aktualisiert. Die Git-Historie dokumentiert ihre Änderungen als konkrete Diffs, nicht als vage Anfragen wie „mach es auffälliger“.

Echtzeit-Zusammenarbeit ist nicht länger ein Privileg von Figma. Ein Entwickler kann den Cursor-Browser auf `localhost` beobachten, sehen, wie ein Designer eine Karte zieht, einen Verlauf ändert oder ein Flex-Layout umschaltet, und dann sofort die Komponenten-API refaktorisieren oder einen gemeinsamen Stil extrahieren. Die Feedback-Zyklen schrumpfen von Tagen asynchroner Kommentare auf Minuten der parallelen Iteration.

So sieht ein designgeführter IngenieurWorkflow aus: die visuelle Realität und der Code-Bereich verschmelzen zu einer einzigen Umgebung. Designer arbeiten an echten Komponenten, unter realen Einschränkungen, und Ingenieure übernehmen produktionsbereite Unterschiede anstelle von interpretierenden Spezifikationen. Cursor verlagert effektiv „Design“ von einer Vorproduktionsphase in den Kern des Bauprozesses.

Das Neugestalten eines Layouts in Cursor fühlt sich jetzt näher an wie das Bearbeiten eines Rahmens in Figma, als an das Ringen mit einem Stylesheet. Der visuelle Editor zeigt Grid- und Flexbox-Steuerungen direkt in einer Seitenleiste an, sodass du die Struktur manipulierst, während die KI im Hintergrund den zugrunde liegenden CSS-Code leise umschreibt. Du bleibst in der Browser-Vorschau, aber jede Anpassung wird dauerhaft im Code gespeichert.

In Astro K Josephs Demo beginnt ein Abschnitt mit sechs Karten als 3x2 CSS-Grid. Er wählt den Grid-Container aus, öffnet die Layout-Steuerelemente und wechselt mit ein paar Klicks auf den Spalten- und Zeilensteuerelementen zu einem 2x3 Layout. Kein `grid-template-columns`, kein `repeat()`, kein Rätseln mit Brucheinheiten.

Das Gap-Tuning wird zur Ziehbewegung anstelle einer Suche durch verschachtelte Klassendateien. Wenn er über den Gap-Regler fährt, zieht er, um den Abstand zwischen den Karten zu vergrößern und beobachtet, wie die Live-Vorschau in Echtzeit gedehnt wird. Höhe, Polsterung und Margin befinden sich in demselben Panel, sodass der vertikale Rhythmus und der weiße Raum zu einer kontinuierlichen Anpassung werden, anstatt drei separate CSS-Änderungen vorzunehmen.

Die Reihenfolge der Elemente, historisch gesehen ein Problem bei Flexbox, wird auch zu einem Problem der direkten Manipulation. Sie können eine Karte greifen und sie an eine neue Position im Grid ziehen, und Cursor aktualisiert die DOM-Reihenfolge oder Layout-Regeln entsprechend. Das ersetzt den geistigen Aufwand, mit `order`, `flex-direction` und Media Queries herumzuhantieren, nur um zwei Blöcke zu vertauschen.

Diese visuelle Schicht ist besonders wichtig, wenn Layouts dicht werden. Komplexe Marketingseiten mit verschachtelten Flex-Containern, responsiven Gittern und Utility-Klassen erfordern oft: - Nachverfolgen, welcher Container tatsächlich den Abstand steuert - Zuordnen von Klassennamen zu Tailwind oder benutzerdefinierten Token - Testen von Breakpoints in einem externen Browser

Der Cursor fasst diese Schleife zu einer einzelnen Oberfläche zusammen. Sie klicken, ändern den Layoutmodus (Raster, Reihe, Spalte, Freiform), ziehen Schieberegler und klicken auf Anwenden. Der KI-Agent schreibt dann den JSX oder HTML sowie das relevante CSS um, und das Ergebnis ist sofort im eingebetteten Browser sichtbar.

Alte Arbeitsabläufe bedeuteten entweder das manuelle Bearbeiten von tief verschachtelten Layoutregeln oder das Verfassen eines langen, fragilen Prompts wie „verwandle dieses 3x2-Raster in 2x3, behalte die gleichen Abstände bei, ändere die Kartenbreite nicht.“ Der Ansatz von Cursor verwandelt dies zunächst in einen visuellen Vorgang und in eine Sprachanweisung als zweites. Für weitere Details dokumentiert Cursor diese Steuerungen unter Cursor 2.2: Visueller Editor für den Cursor-Browser.

Durch Klicken auf Anwenden verwandelt sich Cursor von einem Designspielzeug in eine Refactoring-Engine. Jede Anpassung, die Sie im visuellen Panel vornehmen – Schriftartwechsel, 8px Padding-Erhöhung, Raster von 3x2 auf 2x3 – wird in eine strukturierte Änderungsübersicht serialisiert, die mehr wie eine Diff-Spezifikation als ein Style-Guide aussieht. Anstelle von „mach es schöner“ dokumentiert Cursor „Farbe: #FFEB3B → #FF0000“, „padding-top: +8px“, „grid-template-columns: 3 → 2.“

Diese granularen Bearbeitungen werden zu einem Prompt-Payload für den AI-Agenten von Cursor. Das Tool packt den DOM-Pfad des Elements, seine aktuellen berechneten Stile und die genauen Anpassungen, die Sie vorgenommen haben, zusammen und sendet diesen Kontext neben Ihrem gewählten Modell (Composer, Gemini 3.0 Pro usw.). Der Agent erkennt nicht nur, was Sie visuell möchten, sondern auch, wo sich dieses Element im Komponentenbaum befindet.

Von dort aus durchforstet Cursor Ihren Codebestand – JSX, CSS-Module, Tailwind Utility Soup, sogar Inline-Stile – um die wahre Quelle der Wahrheit zu finden. Wenn eine gelbe Überschrift von einer Tailwind-Klasse kommt, aktualisiert der Agent `text-yellow-400` auf `text-red-500`, anstatt einen zufälligen `style={{ color: "#FF0000" }}` einzufügen. Wenn ein Grid-Layout in `className="grid grid-cols-3 gap-6"` lebt, schreibt es das auf `grid-cols-2` um und passt die Abstände entsprechend an.

Entscheidend ist, dass Cursor nicht einfach neue CSS-Snippets am Ende einer Datei hinzufügt. Die KI führt gezielte Refaktorisierungen durch: Sie bearbeitet bestehende Klassen, fasst Duplikate zusammen und behält Design-Tokens oder Variablen intakt. Sie kann ändern:

• 1React/Next.js JSX und Props
• 2CSS, SCSS und CSS-Module
• 3Tailwind und Utility-klassifizierte Strings

Diese Brücke vom visuellen Intent zur strukturierten Codeänderung ist der wahre Schlüssel. Cursor verwandelt Ihre Drag-and-Drop-Experimente in kohärente, repositoryweite Änderungen, die Auffrischungen, Code-Reviews und zukünftige Refaktorisierungen überstehen, anstatt Sie mit einem Haufen unhaltbarer Überschreibungen zurückzulassen.

Cursors neuer Visual Editor lädt sofort zu Vergleichen mit Figma ein, spielt jedoch eine andere Rolle im Stack. Figma beherrscht die frühen Phasen: Erkundung, Designsysteme, Prototyping, mehrspieler Kommentare. Cursor kommt später ins Spiel und fungiert als Code-Implementierungswerkzeug, das echte Komponenten und Stile bearbeitet, anstatt Arbeitsflächen und -rahmen.

Figma übertrifft Cursor weiterhin in Bezug auf die Strenge von Designsystemen, Komponentenvarianten und plattformübergreifendes Prototyping. Cursor hingegen gewinnt, wenn sich die Frage von „Wie sollte das aussehen?“ zu „Wie integrieren wir dieses genaue Layout in produktiven React-Code auf meinem Rechner?“ ändert.

No-Code- und Low-Code-Builder wie Webflow und Framer stehen näher an Cursors Versprechen, haben jedoch einen entscheidenden Nachteil: Sie kontrollieren die Laufzeit. Ihr Projekt lebt in ihrem visuellen Canvas, ihrem Hosting, ihrem Schema, mit Exportpfaden, die oft wie ein nachträglicher Gedanke erscheinen, anstatt einen erstklassigen Workflow zu bieten.

Cursor kehrt dieses Modell um. Der visuelle Editor arbeitet direkt mit deinem lokalen framework-basierten Codebase – Next.js, React, Vue, was auch immer du bereits auslieferst – sodass: - Du deine Git-Historie und Branching-Strategie beibehältst - Du deine Build-Pipeline, Tests und Infrastruktur beibehältst - Du Plattformabhängigkeiten und proprietäre Rendering-Engines vermeidest

Im Vergleich zu einem Standard-Setup mit VS Code + GitHub Copilot liegt der Vorteil von Cursor in der nahtlosen Integration. Copilot schlägt Zeilen und Blöcke vor; Cursor vereint einen integrierten Browser, bedienungsfreundliche Figma-ähnliche Steuerelemente und KI-Agenten zu einer durchgängigen Oberfläche, auf der Sie sehen, anpassen und ausliefern können, ohne zwischen den Tools wechseln zu müssen.

Ein typischer Copilot-Ablauf sieht immer noch so aus: JSX bearbeiten, speichern, zu Chrome wechseln, aktualisieren, CSS anpassen, wiederholen. Der Cursor komprimiert diesen Zyklus in einen engen visuellen Feedbackprozess: Wählen Sie ein Element aus, ziehen Sie es, passen Sie den Abstand an, klicken Sie auf Anwenden und sehen Sie zu, wie die KI Ihren Code neu schreibt, während der integrierte Browser live aktualisiert wird.

Marktseitig zielt Cursor nun auf das unangenehme Mittel zwischen Design-Tools und Webseitenbaukästen ab. Es bietet visuelle Kontrolle, die sich wie das Layout-Panel von Webflow anfühlt, verlangt jedoch nie von Ihnen, Ihren Editor, Ihr Repository oder Ihre Framework-Konventionen aufzugeben.

Wenn dieses hybride Modell bestehen bleibt, stehen die etablierten Unternehmen unter Druck von beiden Seiten. Figma riskiert, an „Übergabe“-Relevanz zu verlieren, während Designer und Front-End-Entwickler in Cursor gemeinsam arbeiten, während Webflow und Framer ihren Lock-in rechtfertigen müssen gegenüber einem Tool, das nahezu WYSIWYG-Bearbeitung über einfachen, prüfbaren Code ermöglicht, den man bereits besitzt.

Der visuelle Editor von Cursor fühlt sich wie Magie an, wenn er funktioniert, aber er existiert derzeit in einer sehr spezifischen Welt. Die Erfahrung wirkt am ausgefeiltesten auf React und anderen modernen JavaScript-Stacks, wo JSX, Komponenten und Props sauber auf den DOM abgebildet werden können, den das Tool manipulieren kann. Bewegt man sich in servergerenderte Templates, Legacy jQuery-Apps oder benutzerdefinierte Web-Komponenten, wird das Verhalten unklarer, mit weitaus weniger Garantien, dass ein Drag auf dem Bildschirm in vernünftigen Code übersetzt wird.

Die Unterstützung für Designsysteme stößt ebenfalls an ihre Grenzen. Der Editor kann CSS-Variablen, Farben und Abstände anpassen, versteht jedoch noch nicht Ihre vollständige Token-Taxonomie, komplexe Themenstruktur oder maßgeschneiderte Utility-Klassen, wie es ein ausgereiftes Designsystem in Figma tut. Teams, die auf strikte atomare oder BEM-Konventionen angewiesen sind, könnten feststellen, dass Cursor gerne Stile generiert, die gegen die internen Regeln verstoßen.

Versionskontrolle fügt eine weitere Ebene der Reibung hinzu. KI-generierte Patches betreffen oft mehrere Dateien gleichzeitig, und ein einzelnes „Anwenden“ kann Differenzen erzeugen, die strukturelle JSX-Änderungen mit kaskadierenden CSS-Änderungen vermischen. Das Lesen dieser Git-Differenzen in einer großen React-Codebasis kann sich anfühlen, als würde man ein minifiziertes Build-Artefakt anstelle eines von Menschen verfassten Commits überprüfen.

Teams müssen einen Prozess dafür entwickeln. Einige werden visuelle Änderungen hinter Überprüfungsregeln verstecken oder verlangen, dass jeder AI-generierte Beitrag Folgendes enthält: - Eine kurze von einem Menschen verfasste Zusammenfassung - Screenshots oder GIFs der Änderung - Einen Link zur Cursor-Sitzung oder zum Prompt

Selbst dann bedeutet das Debuggen eines unerwarteten Layout-Verschiebung zwei Wochen später, sich durch KI-erstellten Code zu arbeiten, und nicht durch eine sorgfältig erzählte Refaktorisierung.

Komplexe Front-End-Arbeiten verschwinden ebenfalls nicht. Die Zustandsverwaltung in Redux, Zustand oder dem React-Kontext, komplizierte Formularvalidierungen, Authentifizierungsabläufe und datenintensive Dashboards erfordern weiterhin Ingenieure, die die Lebenszyklen von Komponenten, Memoization und Leistungsbudgets verstehen. Cursor kann ein Preiskarten-Grid in Sekunden von 3x2 auf 2x3 umgestalten; es kann jedoch keinen resilienten Offline-First-Sync-Engine entwerfen.

Für Teams, die diesen Arbeitsablauf evaluieren, helfen Ressourcen wie Cursors neuer visueller Editor verwandelt Ihre IDE in ein Webdesign-Studio, ihn korrekt einzuordnen: ein leistungsstarkes Hilfsmittel zur Implementierung von Code, kein Ersatz für Frontend-Architektur oder tiefes Produktdenken.

Code-Editoren sind seit Jahren nicht mehr nur Textfelder; Cursors visueller Editor bringt sie näher an vollwertige Kreativstudios. Wenn deine IDE einen Browser, ein Figma-ähnliches Layout-Panel und einen KI-Paarprogrammierer integriert, der auf Befehl Code umschreibt, bearbeitest du nicht mehr „Dateien“, sondern leitest eher eine Produktionspipeline an einem Ort.

Dieser Schritt passt zu einem breiteren Wandel hin zu Integrierten Persönlichen Umgebungen – Arbeitsbereichen, in denen Codierung, Design, Dokumentation und Projektmanagement zu einer einzigen Oberfläche verschmelzen. Git-Diffs, Designanpassungen, Architekturdiagramme und Funktionsspezifikationen beginnen, sich wie verschiedene Ansichten auf dasselbe Projektgraf zu fühlen, anstatt wie separate Anwendungen, die durch Copy-Paste und Slack-Threads zusammengefügt werden.

Heute ist der Stack von Cursor Code + Browser + visueller Editor + KI, aber die Richtung zeigt weiter nach vorne. Stellen Sie sich live Komponentenstatus-Steuerelemente vor, die React-Props, Varianten im Storybook-Stil und Feature-Flags direkt in der Seitenleiste darstellen, sodass Sie durch Lade-, Fehler- und Erfolgszustände blättern können, ohne jemals JSX zu berühren.

Die nächsten Schritte schreiben sich nahezu von selbst. Aus der IDE heraus könntest du: - KI-generierte A/B-Tests für einen Hero-Bereich erstellen - Einen Prozentsatz des Traffics über deine Dev-Server-Konfiguration leiten - Echtzeit-Metriken in die Seitenleiste des Editors streamen

Design-Reviews könnten direkt im Code erfolgen: Ein PM zieht eine Karte, passt den Text an, kennzeichnet die Änderung als „Experiment 14“ und die KI öffnet einen Branch, verknüpft Analysen und veröffentlicht eine Zusammenfassung in deinem bevorzugten Tracker. Das Artefakt ist kein Figma-Frame oder ein PDF; es handelt sich um ein laufendes Experiment mit Code, Daten und Begründungen, die alle zusammengeführt sind.

Da IDEs weiterhin angrenzende Werkzeuge absorbieren, verschiebt sich der Schwerpunkt für Softwarearbeit entscheidend zu diesem All-in-One-Cockpit. Der visuelle Editor von Cursor sieht aus wie ein kleines Upgrade der Lebensqualität für Frontend-Entwickler, aber er zeichnen leise die Grenze zwischen „Design-Tool“ und „Entwicklungsumgebung“ neu.

So betrachtet, bedeutet dieses Update nicht nur das Ende eines Teils der Designübergabe. Es lässt eine Zukunft erahnen, in der „öffnen Ihres Editors“ bedeutet, in das primäre Studio für die Entwicklung, Gestaltung und Auslieferung von Software einzutreten – von Anfang bis Ende.

Was ist Cursors neuer visueller Editor?

Es ist eine Funktion, die eine Figma-ähnliche Benutzeroberfläche im integrierten Browser der IDE hinzufügt, sodass Sie die Benutzeroberfläche Ihrer Webanwendung visuell bearbeiten können, während ein KI-Agent den entsprechenden Code schreibt.

Ist der Cursor Visual Editor ein vollständiger Ersatz für Figma?

Noch nicht. Es überzeugt in der Implementierung und Iteration von Designs direkt im Code, ersetzt jedoch nicht die Kernstärken von Figma in der initialen Gestaltung, dem Prototyping oder der Teamzusammenarbeit.

Wie verändert der Visual Editor tatsächlich meinen Code?

Sie wählen ein Element aus, ändern seine Eigenschaften visuell und bestätigen dann die Änderungen. Ein KI-Agent interpretiert diese visuellen Anpassungen und überarbeitet Ihre tatsächlichen Quelldateien (wie CSS oder JSX).

Ist dieses Feature jetzt verfügbar?

Ja, der Visual Editor ist für alle Benutzer in der Cursor-Version 2.2 und höher verfügbar. Möglicherweise müssen Sie Ihre Anwendung aktualisieren, um darauf zugreifen zu können.