WEITERE LEKTÜRE
Weiterführende Informationen zu Cursor
Eine Cursor-Design-Leseliste aus dem veröffentlichten Leitfaden: Tutorials, Dokumentation und Walkthroughs für das Designen mit Cursor.
Cursor 
OpenDesign Mit Cursor
in OpenDesign
gestalten.
Wie Sie Interfaces mit Cursor in OpenDesign gestalten: Design Mode für visuelle Bearbeitungen an echtem Code, Figma als Eingabe, eine Pricing-Page-Aufgabe vom Briefing bis zur geprüften Datei und die Grenzen, die Sie vorher kennen sollten.
DREI STARTPUNKTE FÜR CURSOR
Wählen Sie Ihren Cursor-Startpunkt
DIESER LEITFADEN · UI-DESIGN
Eine Produktoberfläche in Cursor erstellen
Dieser Leitfaden behandelt ein Briefing, Referenzen, Designregeln und ein geprüftes HTML-Artefakt.
Diese Anleitung lesen EINRICHTUNGCursor von Grund auf einrichten
Der vollständige Weg von einer sauberen Installation bis zu einem Cursor, der UI erstellt, eine Vorschau anzeigt und sie anhand Ihres Designsystems prüft.
Zum Setup VERGLEICHVergleichen Sie Cursor mit anderen Agents
Wie Cursor im Vergleich zu Codex und Claude Code für Designarbeit abschneidet und wann Sie einen anderen Workflow wählen sollten.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Cursor-Design-Aufgabe
Eine Cursor-Designaufgabe: Vom Briefing zur Oberfläche
Dieses Beispiel verfolgt eine Aufgabe vom Briefing und den von Ihnen übergebenen Einschränkungen über das von Cursor zurückgegebene Artefakt bis zu den Prüfungen, die Sie weiterhin durchführen, bevor Sie sie als abgeschlossen bezeichnen. Die folgende Oberfläche ist ein illustratives Beispiel, das für diese Seite erstellt wurde, kein aufgezeichneter Cursor-Lauf.
1Design-Briefing und Vorgaben
BriefingEntwerfen Sie eine Preisseite für ein Entwicklertool mit drei Tarifen und einem Umschalter für monatlich / jährlich. Machen Sie den mittleren Tarif zum empfohlenen und halten Sie den Vergleich übersichtlich. Desktop und Telefon.
- Design SystemVorhandene App-Tokens; Albert Sans; ein einzelner grüner Akzent
- Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
- InteraktionenAbrechnungsumschalter, CTA-Zustände der Tarife, FAQ-Links und Tastaturfokus auf dem Umschalter
- AusgabeEine einzelne eigenständige HTML-Datei mit stabilen
data-od-id-Hooks
2Wer macht was: Sie, Cursor und OpenDesign
- Sie
Schreiben Sie das Briefing, wählen Sie das Designsystem und definieren Sie die Abnahmekriterien.
- Cursor
Plant das Layout, schreibt das HTML, CSS und JavaScript und überarbeitet dann auf Anfrage.
- OpenDesign
Liefert das Designsystem und den Skill, rendert die Vorschau und speichert jede Version als Datei im Projekt.
- Prüfung
Prüfen Sie vor der Übergabe die visuelle Hierarchie, den Abstand im 8px-Raster, beide Breakpoints und jede Interaktion.
3Cursor-Artefakt: Preisseite bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Drei gleich breite Spalten im 8px-Raster; der empfohlene Tarif wird durch seinen Rahmen hervorgehoben, nicht durch seine Größe.
Hierarchie
Visuelle Hierarchie
Zuerst der Preis, dann der Tarifname, dann die Funktionen; der Akzent erscheint auf einem Badge und einer primären Schaltfläche.
Responsive
Mobiles Layout
Auf Mobilgeräten stapeln sich die Tarife mit dem empfohlenen Tarif zuerst; der Umschalter bleibt oben erreichbar.
Interaktion
Interaktionsprüfungen
Schalten Sie den Abrechnungsumschalter um, tabben Sie durch jeden CTA und öffnen Sie einen FAQ-Link.
Eignung
Wo Cursor passt – und wo nicht
Cursor passt, wenn
- Design-Modus. Klicken, zeichnen oder beschreiben Sie eine UI-Änderung per Stimme, und Cursor bearbeitet die Quelle – visuelle Bearbeitung, die auf echtem Code basiert. Wenn Sie entscheiden, ob Cursor ersetzt oder mit einem Design-Arbeitsbereich kombiniert werden soll, lesen Sie den OpenDesign-vs-Cursor-Vergleich.
- Figma → Code. Figma MCP-Server liefern echtes Layout und Tokens an Cursor, sodass es aus dem Design statt aus einem Screenshot erstellt. Der OpenDesign-vs-Figma-Vergleich erklärt die Zuständigkeitsgrenze von der Zeichenfläche zum Repository.
- Bidirektionales Figma. Einige MCP-Server ermöglichen es Cursor, Figma-Designs sowohl programmgesteuert zu lesen als auch zu ändern, nicht nur zu konsumieren.
- Design-to-Code-Schleife. Das übliche Muster: in einem visuellen Tool entwerfen, in Cursor bringen, dann mit dem Agenten verfeinern und erweitern.
Wählen Sie einen anderen Workflow, wenn
- Sie benötigen bearbeitbare Vektordateien. Das Artefakt ist HTML, kein bearbeitbares Designdokument. Für ein Asset-Format, das Vektoren erfordert, suchen Sie einen separaten Vektor-Workflow.
- Sie haben keine Referenz und keine Einschränkungen. Ohne Designsystem oder Beispiele driftet die Ausgabe zu einem generischen Look; schreiben Sie das Briefing, bevor Sie beginnen.
- Sie haben nicht die Anmeldedaten, die dieser Agent benötigt. Erforderlich: ein Cursor-Konto (das Ihre eigenen Provider-Schlüssel verwendet). OpenDesign stellt weder Anmeldedaten bereit noch fungiert es als Proxy dafür.
- Ihr Team arbeitet in Claude Code oder Antigravity. Diese Agenten haben ihre eigenen Seiten; der Arbeitsbereich ist gemeinsam, während die Einrichtung abweicht. Siehe verwandte Agenten.
Kompatibilität
Cursor-Voraussetzungen vor dem Start
Diese Seite behandelt Cursor als einen Agenten, der an die OpenDesign-Desktop-App angebunden ist; sie deckt nicht jede Cursor-Funktion ab. Veröffentlichte Referenzen geprüft am 6. September 2026.
Tool-UmfangCursor, von Cursor
Cursor ist ein VS Code-basierter, KI-first Code-Editor mit einem eingebetteten Agenten, der projektweit bearbeitet. Hier ist das Thema Interface-Design mit diesem Cursor-Agenten über OpenDesign, nicht Cursors eigene UI. Die Setup-Hinweise von OpenDesign listen die verfügbaren Agenten auf.
Konten und AuthentifizierungCursor-Konto (nutzt Ihre eigenen Provider-Keys)
Anmeldedaten: Cursor-Konto (verwendet Ihre eigenen Provider-Schlüssel). Diese Schlüssel werden direkt von Cursor verwendet – OpenDesign fungiert nicht als Proxy dafür. Es wird hier kein Kontingent und kein Preis zugesagt.
System und VersionenDesktop-App oder Quellcode
Desktop-Builds erscheinen auf der Download-Seite. Node.js- und pnpm-Anforderungen gehören zum Ausführen von OpenDesign aus dem Quellcode, nicht zur Installation des Desktop-Pakets. Eine minimale Cursor-Version wird auf dieser Seite nicht verifiziert.
VerbindungsprüfungDas Erfolgssignal
Verwenden Sie die Verbindungsschritte, die Ihre installierte Version anzeigt, und senden Sie dann eine kleine Aufgabe durch Cursor. Prüfen Sie, ob Cursor sie verarbeitet hat und ob die resultierende Datei geöffnet wird. Allein das Herunterladen beweist keine funktionierende Verbindung.
Mit der Desktop-App beginnen
Cursor-Einrichtung in drei Schritten
Installieren Sie die Desktop-App, schließen Sie die Cursor-Verbindungsschritte für Ihre Version ab und verifizieren Sie dann mit einem kleinen Ergebnis. Diesen Weg zu befolgen erfordert nicht, OpenDesign aus dem Quellcode zu erstellen.
- 1
Die OpenDesign-Desktop-App herunterladen
Wählen Sie das Desktop-Paket, das zu Ihrer Maschine passt, installieren Sie es und starten Sie OpenDesign.
OpenDesign herunterladenMEILENSTEINOpenDesign startet. Wenn es bereits installiert ist, fahren Sie mit dem nächsten Schritt fort – laden Sie es nicht erneut herunter. - 2
Bereiten Sie Ihre Cursor-Verbindung vor
Führen Sie die Cursor-Einrichtung durch, die Ihre installierte Version anzeigt. Cursor verwendet Ihre Provider-Schlüssel direkt; OpenDesign fungiert nicht als Proxy dafür.
# .cursor/rules/design.mdc --- description: Project design conventions alwaysApply: true --- - Reuse existing design-system tokens and components; never hardcode hex or spacing. - At most two typefaces and one accent color. - Brand-first hierarchy; restrained motion. No hero cards, no oversized rounded corners. - Build responsive by default; verify desktop and mobile in the preview before finishing.Entnommen aus den Cursor-Setup-Hinweisen im veröffentlichten Leitfaden; der aktuelle Befehl sollte anhand der Herstellerdokumentation überprüft werden.
MEILENSTEINStellen Sie sicher, dass der ausgewählte Agent Cursor ist und das Konto das beabsichtigte ist. Wenn Cursor nicht verfügbar ist, prüfen Sie die Kompatibilität, bevor Sie eine größere Aufgabe versuchen. - 3
Führen Sie eine kleine Cursor-Aufgabe aus
Wählen Sie eine kompakte erste Anfrage, eine, die Sie durch die vollständige Schleife beurteilen können, einschließlich einer einzigen Überarbeitung.
Start-BriefingErstellen Sie einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Befolgen Sie meine Designregeln. Prüfen Sie ihn bei Desktop- und Mobilbreiten.
MEILENSTEINÖffnen Sie die gerenderte Datei, testen Sie den Speicherzustand und bitten Sie um eine bestimmte Änderung. Ein generiertes Artefakt beginnt die Überprüfung; es beendet sie nicht.
Verwenden Sie für eine quellcodebasierte OpenDesign-Installation stattdessen den technischen Schnellstart.
Der Cursor-Design-Workflow
Cursors Design-Schleife: Fünf Schritte vom Briefing zur geprüften Datei
Verfolgen Sie die Preisseite von einem kurzen Briefing über Cursors Agent-Modus und die In-Editor-Vorschau bis zu einer geprüften Datei. Jeder Schritt benennt Ihren Input, Cursors Rolle, den Beitrag von OpenDesign und die von Ihnen durchgeführte Prüfung.
- 1
Design-Briefing
Halten Sie es einfach und kurz – etwa drei bis sechs Zeilen. Sagen Sie, wem der Bildschirm dient, was er erreichen muss und welche Plattformen er anspricht.
- SieEntwerfen Sie das Briefing und fügen Sie einen Referenz-Screenshot bei, wenn einer existiert.
- CursorLiest das Briefing und die Instruction-File des Projekts; fragt nach, wenn etwas unklar ist.
- OpenDesignLiefert das Projekt, die Chat-Oberfläche für den Prompt und den auf den Artefakttyp abgestimmten Skill.
- PrüfenPrüfen Sie, ob das Briefing Abnahmekriterien enthält. Sie vor der Generierung festzulegen kostet weniger, als sie danach zu korrigieren.
- 2
Design-Vorgaben
Bringen Sie ein Designsystem und ein paar feste Einschränkungen mit. Dieser Kontext verhindert, dass die Ausgabe in einen generischen Look abdriftet.
- SieWählen Sie das Designsystem und benennen Sie dann die Breakpoints und alle Komponenten, die wiederverwendet werden müssen.
- CursorBevor Cursor irgendein Markup schreibt, liest es die DESIGN.md-Tokens und Grundregeln in den Kontext ein.
- OpenDesignOpenDesign führt die Designsystem-Bibliothek mit und bindet Ihre Auswahl in die Skill-Vorlage ein.
- PrüfenÜberprüfen Sie die Tokens anhand Ihrer Marke: ein einzelner Akzent, korrekte Schriftarten, korrekter Radius.
- 3
Die Oberfläche generieren
Cursor erzeugt eine eigenständige HTML-Datei – Layout, Stile, Interaktionen und stabile Hooks inklusive.
- SieWarten Sie oder antworten Sie, wenn Cursor eine klärende Frage stellt. Hier gibt es nichts zu konfigurieren.
- CursorCursor plant die Abschnitte, schreibt das HTML, CSS und JavaScript, führt die Datei aus und korrigiert, was fehlschlägt.
- OpenDesignOpenDesign speichert das Artefakt im Projektordner und indexiert es, damit die Vorschau es öffnen kann.
- PrüfenNoch nicht. Warten Sie, bis die Datei gerendert wird, und beurteilen Sie dann das Ergebnis statt die Quelle.
- 4
Vorschau
OpenDesign rendert die Datei in den von dir angegebenen Breiten. Das Design wird hier beurteilt, in der Vorschau.
- SieÄndere die Viewport-Breiten, teste jede Interaktion und kommentiere direkt an den Elementen.
- CursorCursor liest die Kommentare, die du in der Vorschau hinterlassen hast, und bereitet die nächste Überarbeitung vor.
- OpenDesignOpenDesign rendert die Vorschau und stellt
data-od-id-Ziele für Kommentare und Bearbeitungen bereit. - PrüfenPrüfe Hierarchie, Kontrast, Überlauf bei 390px, Fokus-Zustände und ob der Akzent sparsam bleibt.
- 5
Überarbeiten und Verifizieren
Zeige in der Vorschau auf Elemente, um Änderungen anzufordern. Jede Überarbeitung landet als neue Datei—stille Überschreibungen gibt es nicht.
- SieWandle deine Kommentare in Anfragen um und entscheide, wann die Aufgabe abgeschlossen ist.
- CursorCursor wendet die Änderungen direkt an und führt die Datei erneut aus.
- OpenDesignOpenDesign hält Versionen nebeneinander und exportiert ein Bild oder das HTML, wenn du fertig bist.
- PrüfenPrüfe zuerst nur den geänderten Bereich und dann die vollständige Seite einmal bei jedem Breakpoint.
Ressourcen
Cursor-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Artefakttypen, die Cursor in OpenDesign erzeugen kann, mit je einem Skill pro Typ.
Design Systems
Die Marken-Tokens und Komponenten, die gebunden werden müssen, bevor Cursor mit der Generierung beginnt.
Vorlagen
Einstiegspunkte für Decks, Landing Pages und Produkt-Screens.
Einschränkungen
Cursor-Grenzen, manuelle Prüfungen und Fallbacks
- UmfangDiese Seite behandelt Cursor als einen über OpenDesign verbundenen Agenten; sie deckt nicht jede Cursor-Funktion ab.
- NutzungslimitsKosten- und Nutzungslimits richten sich nach dem verwendeten Zugang (Cursor-Konto (verwendet deine eigenen Provider-Schlüssel)). Hier wird kein Anspruch auf ein kostenloses Kontingent erhoben.
- NetzwerkProjektdateien lokal zu halten macht die Inferenz nicht offline. Bevor du sensible Eingaben sendest, prüfe die Provider-Einstellungen und Datenrichtlinien des Agenten.
- Ausgabe ist HTMLCursor liefert HTML-Artefakte statt bearbeitbarer Vektor-Designdateien. Jeder Figma-Roundtrip läuft über Cursors eigene Figma-Integration.
- Manuelle ÜberprüfungDu bist der Prüfer – in der Vorschau – für Barrierefreiheit, echte Inhalte, Markenpassung und Interaktionskorrektheit. Ein Selbstcheck des Agenten zählt nur als erster Durchlauf.
- FallbackWenn Cursor nicht verfügbar ist oder eine Aufgabe fehlschlägt, ziehe die Verbindungsanweisungen und die Authentifizierung für die von dir installierte Version zu Rate. Bevor du die Konfiguration änderst, bewahre den Fehler und das letzte funktionierende Artefakt auf.
FAQ
Häufige Fragen zu Cursor und OpenDesign
Kann Cursor echte Designarbeit liefern?
Ja — mit einem Design-Skill, einem Design-System und echten Referenzbildern im Kontext erzeugt Cursor produktionsreife, responsive UI, und die In-Editor-Vorschau lässt Sie das visuell prüfen und verfeinern. Ohne diesen Kontext tendiert es zu einem generischen Look — genau diese Lücke schließt OpenDesign.
Ist das ein offizielles Cursor-Produkt?
Nein. OpenDesign ist ein unabhängiges Open-Source-Projekt, das Cursor als Agent integriert. Es ergänzt Cursor um eine local-first, offene Skill- und Design-System-Bibliothek.
Brauche ich ein Cursor-Abonnement, um mit Cursor zu designen?
Sie können einen Cursor-Account/-Abonnement nutzen oder Ihre eigenen Modell-Keys mitbringen (BYOK). OpenDesign leitet Ihre Zugangsdaten in keinem Fall über einen Proxy um — sie werden direkt von Ihrem Agent verwendet.
Cursor vs. Claude Code für Frontend-Design?
Beide sind stark. Claude Code ist bekannt für spezifische, codebase-bewusste Design-Entscheidungen; Cursors Stärke ist die enge Build-and-See-Schleife mit einer Live-Vorschau direkt im Editor. Viele Teams nutzen beide — OpenDesign lässt Sie zwischen Agents wechseln, ohne Ihren Design-Workflow zu ändern.
Wie verbindet Cursor sich mit Figma?
Fügen Sie den offiziellen Figma-MCP-Server in Cursor hinzu, fügen Sie dann einen Figma-Frame-Link in den Chat ein und bitten Sie Cursor, ihn umzusetzen. Der Server stellt echte Komponenten, Variablen und Layout-Daten bereit, sodass der generierte Code dem Quell-Design entspricht.
Cursor’s Grundlage: AI-First-VS-Code-Fork
Cursor ist ein AI-first-Code-Editor, entwickelt von Anysphere. Er ist ein Fork von VS Code, behält also den vertrauten Editor, die Erweiterungen und die Tastenkürzel, baut aber den Arbeitsablauf um einen KI-Agenten herum neu auf, der dein gesamtes Projekt lesen, mehrere Dateien bearbeiten, Befehle ausführen und iterativ mit dir im Loop arbeiten kann.
Für Designarbeit sind die wichtigen Oberflächen der Agent-Modus (du beschreibst ein Ergebnis, und Cursor plant und bearbeitet dateiübergreifend), Inline-Edits und Tab-Vervollständigungen für schnelle Anpassungen, eine In-Editor-Vorschau / ein Browser, damit du die laufende UI siehst, ohne das Fenster zu verlassen, sowie MCP-Unterstützung, mit der externer Kontext wie eine Live-Figma-Datei einbezogen werden kann.
Projektregeln: Cursor liest Projekt-Anweisungsdateien — versionierte `.mdc`-Regeln unter `.cursor/rules` und eine schlichte `AGENTS.md` —, sodass du deine Designkonventionen dort hinterlegen kannst, wo der Agent sie bei jedem Lauf liest.
Modelle: Cursor ist modellflexibel: Es kommt mit Frontier-Modellen über dein Abonnement und unterstützt zusätzlich eigene Modell-Schlüssel, sodass du die Engine hinter demselben Editor-Workflow wählst.
MCP: Es spricht das Model Context Protocol, sodass externe Server — am relevantesten der Figma-MCP-Server — zu erstklassigem Kontext für den Agenten werden.
Zugangsdaten: Cursor-Konto / Abonnement (Hobby / Pro / Business) oder eigene Modell-Schlüssel (BYOK)
Form: AI-first-Code-Editor (VS-Code-Fork) mit In-Editor-Agent und Vorschau
Anbieter: Anysphere
Für Designarbeit sind die wichtigen Oberflächen der Agent-Modus (du beschreibst ein Ergebnis, und Cursor plant und bearbeitet dateiübergreifend), Inline-Edits und Tab-Vervollständigungen für schnelle Anpassungen, eine In-Editor-Vorschau / ein Browser, damit du die laufende UI siehst, ohne das Fenster zu verlassen, sowie MCP-Unterstützung, mit der externer Kontext wie eine Live-Figma-Datei einbezogen werden kann.
Projektregeln: Cursor liest Projekt-Anweisungsdateien — versionierte `.mdc`-Regeln unter `.cursor/rules` und eine schlichte `AGENTS.md` —, sodass du deine Designkonventionen dort hinterlegen kannst, wo der Agent sie bei jedem Lauf liest.
Modelle: Cursor ist modellflexibel: Es kommt mit Frontier-Modellen über dein Abonnement und unterstützt zusätzlich eigene Modell-Schlüssel, sodass du die Engine hinter demselben Editor-Workflow wählst.
MCP: Es spricht das Model Context Protocol, sodass externe Server — am relevantesten der Figma-MCP-Server — zu erstklassigem Kontext für den Agenten werden.
Zugangsdaten: Cursor-Konto / Abonnement (Hobby / Pro / Business) oder eigene Modell-Schlüssel (BYOK)
Form: AI-first-Code-Editor (VS-Code-Fork) mit In-Editor-Agent und Vorschau
Anbieter: Anysphere
Cursor’s Design-Vorteil: enge Build-and-See-Schleife
Cursors Design-Vorteil ist keine einzelne Funktion — es ist die Enge der Bauen-und-Sehen-Schleife. Drei Dinge lassen es sich wie ein Designwerkzeug anfühlen statt wie ein generischer Codegenerator.
Eine enge Iterieren-und-Beobachten-Schleife: Du gibst einen Prompt, Cursor bearbeitet dateiübergreifend, und die In-Editor-Vorschau rendert das Ergebnis sofort — du justierst Abstände, Hierarchie und Bewegung in Sekunden, statt den Umweg über ein separates Terminal und einen Browser zu nehmen.
Direktes visuelles Editieren: Über den Chat hinaus kannst du in der Vorschau Elemente auswählen und Stile nachjustieren, sodass kleine visuelle Korrekturen sich wie Design-Edits anfühlen statt wie Codearchäologie.
Projektregeln und MCP-Kontext: Mit `.cursor/rules` (oder `AGENTS.md`) und dem Figma-MCP-Server arbeitet der Agent gegen deine Tokens, Komponenten und echten Design-Spezifikationen statt zu raten.
Geschmack entsteht aus drei Inputs, die du lieferst: ein Designsystem, ein Skill und echte Referenzbilder.
Die Lehre ist dieselbe, die jeder Agent lehrt: Cursor hat nicht von Haus aus Geschmack. Es erzeugt gutes Design, wenn du ihm Vorgaben machst — ein Designsystem, ein ästhetisches Skill und konkrete Referenzen. OpenDesign bündelt genau diese Inputs, weshalb die beiden zusammenpassen (mehr dazu unten).
Eine enge Iterieren-und-Beobachten-Schleife: Du gibst einen Prompt, Cursor bearbeitet dateiübergreifend, und die In-Editor-Vorschau rendert das Ergebnis sofort — du justierst Abstände, Hierarchie und Bewegung in Sekunden, statt den Umweg über ein separates Terminal und einen Browser zu nehmen.
Direktes visuelles Editieren: Über den Chat hinaus kannst du in der Vorschau Elemente auswählen und Stile nachjustieren, sodass kleine visuelle Korrekturen sich wie Design-Edits anfühlen statt wie Codearchäologie.
Projektregeln und MCP-Kontext: Mit `.cursor/rules` (oder `AGENTS.md`) und dem Figma-MCP-Server arbeitet der Agent gegen deine Tokens, Komponenten und echten Design-Spezifikationen statt zu raten.
Geschmack entsteht aus drei Inputs, die du lieferst: ein Designsystem, ein Skill und echte Referenzbilder.
Die Lehre ist dieselbe, die jeder Agent lehrt: Cursor hat nicht von Haus aus Geschmack. Es erzeugt gutes Design, wenn du ihm Vorgaben machst — ein Designsystem, ein ästhetisches Skill und konkrete Referenzen. OpenDesign bündelt genau diese Inputs, weshalb die beiden zusammenpassen (mehr dazu unten).
Cursor für Design von Grund auf einrichten
Installiere Cursor von cursor.com und melde dich mit deinem Cursor-Konto an, oder konfiguriere eigene Modell-Schlüssel (BYOK) in den Einstellungen.
Öffne dein Projekt und wähle ein Modell im Chat- / Agent-Panel.
Füge Projektregeln hinzu: erstelle `.cursor/rules/*.mdc` für strukturierte, glob-basierte Konventionen oder eine schlichte `AGENTS.md` für einfache, gut lesbare Anweisungen.
Verbinde den Figma-MCP-Server (optional), damit der Agent Live-Design-Kontext lesen kann.
Starte deinen Dev-Server und nutze die In-Editor-Vorschau, um die UI während der Iteration zu sehen und zu prüfen.
Die Reihenfolge beim Setup: installieren → authentifizieren → Projektregeln konfigurieren → ein Skill hinzufügen → Vorschau-Verifikation aktivieren.
Eine minimale Projektregel-Datei bringt den Agenten dazu, für eine Marke zu gestalten, statt auf einen generischen Look zurückzufallen. Lege sie dort ab, wo Cursor sie bei jedem Lauf liest:
Kodiere deine Designregeln: Lege deine Tokens, Primitives und Konventionen in `.cursor/rules` oder `AGENTS.md` ab und verweise Cursor darauf, damit die Ausgabe zu einer Marke passt, statt auf einen generischen Look zurückzufallen.
Halte Prompts klein: Cursors enge Schleife belohnt fokussierte Anfragen — iteriere jeweils an einer Komponente oder einem Zustand und beobachte die Vorschau zwischen den Durchläufen.
Nutze den Abschnitt zum aktuellen Setup für Befehle und versionsspezifische Details, die sich ändern können.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Öffne dein Projekt und wähle ein Modell im Chat- / Agent-Panel.
Füge Projektregeln hinzu: erstelle `.cursor/rules/*.mdc` für strukturierte, glob-basierte Konventionen oder eine schlichte `AGENTS.md` für einfache, gut lesbare Anweisungen.
Verbinde den Figma-MCP-Server (optional), damit der Agent Live-Design-Kontext lesen kann.
Starte deinen Dev-Server und nutze die In-Editor-Vorschau, um die UI während der Iteration zu sehen und zu prüfen.
Die Reihenfolge beim Setup: installieren → authentifizieren → Projektregeln konfigurieren → ein Skill hinzufügen → Vorschau-Verifikation aktivieren.
Eine minimale Projektregel-Datei bringt den Agenten dazu, für eine Marke zu gestalten, statt auf einen generischen Look zurückzufallen. Lege sie dort ab, wo Cursor sie bei jedem Lauf liest:
Kodiere deine Designregeln: Lege deine Tokens, Primitives und Konventionen in `.cursor/rules` oder `AGENTS.md` ab und verweise Cursor darauf, damit die Ausgabe zu einer Marke passt, statt auf einen generischen Look zurückzufallen.
Halte Prompts klein: Cursors enge Schleife belohnt fokussierte Anfragen — iteriere jeweils an einer Komponente oder einem Zustand und beobachte die Vorschau zwischen den Durchläufen.
Nutze den Abschnitt zum aktuellen Setup für Befehle und versionsspezifische Details, die sich ändern können.
# .cursor/rules/design.mdc
---
description: Project design conventions
alwaysApply: true
---
- Reuse existing design-system tokens and components; never hardcode hex or spacing.
- At most two typefaces and one accent color.
- Brand-first hierarchy; restrained motion. No hero cards, no oversized rounded corners.
- Build responsive by default; verify desktop and mobile in the preview before finishing.Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Der Vorschau-zu-UI-Workflow
Der wirkungsvollste Design-Loop mit Cursor besteht darin, eine Referenz in funktionierende, responsive UI zu verwandeln und im Editor zu iterieren, bis sie passt — und dabei die ganze Zeit die Live-Vorschau zu beobachten, statt zu raten.
Beginne mit den klarsten visuellen Referenzen, die du hast — und schließe mehrere Zustände ein (Desktop und Mobil, Hover, leer, Ladezustand), nicht nur einen Hero-Shot.
Sei im Prompt konkret; vage Prompts erzeugen generische UI.
Bereite ein Designsystem vor und sage Cursor, wo die Tokens und kanonischen Primitives liegen.
Halte die In-Editor-Vorschau offen und deinen Dev-Server am Laufen, damit jede Änderung sofort bei den Breakpoints gerendert wird, die dir wichtig sind.
Iteriere, indem du die gerenderte UI mit den Referenzen abgleichst — und nutze die direkte Elementauswahl in der Vorschau für kleine visuelle Korrekturen.
Füttere Referenzen, indem du ein Bild an den Chat anhängst und dann mit konkreten Vorgaben promptest:
Committiere gute Iterationen und mache schlechte rückgängig (und sage Cursor, wenn du etwas rückgängig machst), damit jeder Durchlauf auf einer sauberen Basis aufbaut — dieselbe Disziplin, die jede Agent-Schleife vom Abdriften abhält.
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Beginne mit den klarsten visuellen Referenzen, die du hast — und schließe mehrere Zustände ein (Desktop und Mobil, Hover, leer, Ladezustand), nicht nur einen Hero-Shot.
Sei im Prompt konkret; vage Prompts erzeugen generische UI.
Bereite ein Designsystem vor und sage Cursor, wo die Tokens und kanonischen Primitives liegen.
Halte die In-Editor-Vorschau offen und deinen Dev-Server am Laufen, damit jede Änderung sofort bei den Breakpoints gerendert wird, die dir wichtig sind.
Iteriere, indem du die gerenderte UI mit den Referenzen abgleichst — und nutze die direkte Elementauswahl in der Vorschau für kleine visuelle Korrekturen.
Füttere Referenzen, indem du ein Bild an den Chat anhängst und dann mit konkreten Vorgaben promptest:
Committiere gute Iterationen und mache schlechte rückgängig (und sage Cursor, wenn du etwas rückgängig machst), damit jeder Durchlauf auf einer sauberen Basis aufbaut — dieselbe Disziplin, die jede Agent-Schleife vom Abdriften abhält.
Implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens.
Match spacing, layout, and hierarchy; make it responsive.
Keep the preview open — verify desktop and mobile match the
references and iterate until they do.Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Cursor + Figma: Design ↔ Code über MCP
Cursor verbindet sich über den offiziellen Figma-MCP-Server mit Figma, was dem Agenten strukturierten Zugriff auf eine Live-Figma-Datei statt eines flachen Screenshots gibt. Das nimmt dem Handoff das Raten.
Design → Code: Kopiere den Link eines Frames in Figma, füge ihn in Cursor ein und bitte es, das Design umzusetzen. Der MCP-Server legt echten Design-Kontext offen — Komponenten, Variablen, Layoutdaten, Tokens —, sodass der generierte Code zur Quelle passt, statt sie anzunähern.
Bleib ausgerichtet: Wenn Design-Tokens, Stile und Komponenten in Figma konsistent verwendet werden (und Code Connect, wo verfügbar), bleibt Cursors Ausgabe auf dein echtes Designsystem abgebildet, statt Primitives neu zu erfinden.
Richte den remote Figma-MCP-Server einmal ein, und er steht Cursor als erstklassiger Kontext zur Verfügung. Weil MCP ein offener Standard ist, ist derselbe Server über Cursor, Claude Code, Codex und VS Code hinweg wiederverwendbar — genau die Art portabler Multi-Agent-Fähigkeit, für deren Orchestrierung OpenDesign gebaut ist.
Design → Code: Kopiere den Link eines Frames in Figma, füge ihn in Cursor ein und bitte es, das Design umzusetzen. Der MCP-Server legt echten Design-Kontext offen — Komponenten, Variablen, Layoutdaten, Tokens —, sodass der generierte Code zur Quelle passt, statt sie anzunähern.
Bleib ausgerichtet: Wenn Design-Tokens, Stile und Komponenten in Figma konsistent verwendet werden (und Code Connect, wo verfügbar), bleibt Cursors Ausgabe auf dein echtes Designsystem abgebildet, statt Primitives neu zu erfinden.
Richte den remote Figma-MCP-Server einmal ein, und er steht Cursor als erstklassiger Kontext zur Verfügung. Weil MCP ein offener Standard ist, ist derselbe Server über Cursor, Claude Code, Codex und VS Code hinweg wiederverwendbar — genau die Art portabler Multi-Agent-Fähigkeit, für deren Orchestrierung OpenDesign gebaut ist.
Cursor vs. Codex vs. Claude Code für Design
Für Designarbeit gibt es keinen einzelnen Sieger — jeder Agent hat eine andere Stärke, und erfahrene Teams kombinieren sie. Eine faire Zusammenfassung:
Cursor — Visuelle Bauen-und-Sehen-Schleife mit Live-In-Editor-Vorschau und direktem Elementeditieren — Enge Iterieren-und-Beobachten-UI-Arbeit innerhalb einer IDE
Codex — Starker visueller Feinschliff mit einem Frontend-Skill; Bildverständnis und sandboxed Runs — Delegierte asynchrone Builds und portable AGENTS.md-Regeln
Claude Code — Konkrete Designentscheidungen (Hex, Abstände, Typografie) und codebase-bewusste UX — Frontend-Reasoning und Refactorings mit großem Kontext
Das wiederkehrende Urteil der Community ist, dass Geschmack von Menschen kommt: Alle drei fallen ohne Skills, Referenzen und Vorgaben auf eine generische Ästhetik zurück. Das ist das eigentliche Problem, das es zu lösen gilt — und es hat die Form eines Designwerkzeugs, nicht eines Modells.
Agent — Design-Stärke — Am besten geeignet für
Cursor — Visuelle Bauen-und-Sehen-Schleife mit Live-In-Editor-Vorschau und direktem Elementeditieren — Enge Iterieren-und-Beobachten-UI-Arbeit innerhalb einer IDE
Codex — Starker visueller Feinschliff mit einem Frontend-Skill; Bildverständnis und sandboxed Runs — Delegierte asynchrone Builds und portable AGENTS.md-Regeln
Claude Code — Konkrete Designentscheidungen (Hex, Abstände, Typografie) und codebase-bewusste UX — Frontend-Reasoning und Refactorings mit großem Kontext
Das wiederkehrende Urteil der Community ist, dass Geschmack von Menschen kommt: Alle drei fallen ohne Skills, Referenzen und Vorgaben auf eine generische Ästhetik zurück. Das ist das eigentliche Problem, das es zu lösen gilt — und es hat die Form eines Designwerkzeugs, nicht eines Modells.
Agent — Design-Stärke — Am besten geeignet für
Den „AI-Slop“-Look vermeiden: Fallstricke und Korrekturen
Die häufigste Beschwerde über von Cursor generiertes Design ist, dass es generisch aussieht — weiche Verläufe, schwebende Panels, überdimensionierte abgerundete Ecken, dramatische Schatten, eine Inter-und-Lila-Anmutung, die „schreit, dass eine KI das gemacht hat“. Weitere berichtete Probleme sind Layouts, die auf Mobilgeräten brechen, und Anweisungen, die in UI-Texte durchsickern.
Füge ein Design-Skill hinzu: Ein kuratiertes Ästhetik-Skill zwingt Cursor, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look.
Nutze die Vorschau zur Verifikation: Rendere und prüfe selbst über Breakpoints hinweg in der In-Editor-Vorschau, damit Layouts nicht stillschweigend auf Mobilgeräten brechen.
Liefere Tokens und Referenzen: Echte Design-Tokens und Referenz-Screenshots sind der größte einzelne Hebel für die Ausgabequalität.
Kodiere Regeln in `.cursor/rules`: Lege Regeln nach dem Muster „keine Hero-Cards, maximal zwei Schriftarten, Marken-Hierarchie zuerst“ dort ab, wo der Agent sie bei jedem Lauf liest.
Beachte, dass jede Gegenmaßnahme darauf hinausläuft, dem Agenten einen kuratierten Design-Kontext zu geben. Diesen Kontext pro Projekt von Hand zu pflegen, ist die Mühsal, die OpenDesign beseitigt.
Füge ein Design-Skill hinzu: Ein kuratiertes Ästhetik-Skill zwingt Cursor, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look.
Nutze die Vorschau zur Verifikation: Rendere und prüfe selbst über Breakpoints hinweg in der In-Editor-Vorschau, damit Layouts nicht stillschweigend auf Mobilgeräten brechen.
Liefere Tokens und Referenzen: Echte Design-Tokens und Referenz-Screenshots sind der größte einzelne Hebel für die Ausgabequalität.
Kodiere Regeln in `.cursor/rules`: Lege Regeln nach dem Muster „keine Hero-Cards, maximal zwei Schriftarten, Marken-Hierarchie zuerst“ dort ab, wo der Agent sie bei jedem Lauf liest.
Beachte, dass jede Gegenmaßnahme darauf hinausläuft, dem Agenten einen kuratierten Design-Kontext zu geben. Diesen Kontext pro Projekt von Hand zu pflegen, ist die Mühsal, die OpenDesign beseitigt.
Cursor in OpenDesign: Die Design-Ebene
OpenDesign ist die Open-Source-Design-Schicht, nach der der obige Workflow immer wieder verlangt. Es behandelt Cursor als First-Party-Adapter und umhüllt es mit einer kuratierten Skill- und Designsystem-Bibliothek, einer strukturierten Render-Pipeline und einer lokalen Desktop-UI — sodass der Design-Kontext, der Cursor gut macht, vom ersten Lauf an vorhanden ist und nicht jedes Mal von Hand zusammengestellt wird.
Authentifiziere dich mit deinem Cursor-Konto oder deinen eigenen Modell-Schlüsseln (BYOK) — die Zugangsdaten bleiben auf deiner Maschine und werden niemals über uns geleitet.
Wähle ein Designsystem und ein Skill und generiere dann Decks, Prototypen und Landing Pages mit konsistentem Geschmack.
Jedes Artefakt und jede DESIGN.md-Datei liegt in deinem eigenen Repo, nicht in einer gehosteten Cloud.
Derselbe Cursor-Agent, derselbe Schlüssel — plus ein echter, portabler Open-Source-Design-Workflow drumherum. Es ist local-first und Apache-2.0, sodass nichts an deiner Arbeit oder deinen Zugangsdaten deine Maschine verlässt.
Installiere OpenDesign und wähle Cursor als deinen Agenten.
Authentifiziere dich mit deinem Cursor-Konto oder deinen eigenen Modell-Schlüsseln (BYOK) — die Zugangsdaten bleiben auf deiner Maschine und werden niemals über uns geleitet.
Wähle ein Designsystem und ein Skill und generiere dann Decks, Prototypen und Landing Pages mit konsistentem Geschmack.
Jedes Artefakt und jede DESIGN.md-Datei liegt in deinem eigenen Repo, nicht in einer gehosteten Cloud.
Derselbe Cursor-Agent, derselbe Schlüssel — plus ein echter, portabler Open-Source-Design-Workflow drumherum. Es ist local-first und Apache-2.0, sodass nichts an deiner Arbeit oder deinen Zugangsdaten deine Maschine verlässt.
Installiere OpenDesign und wähle Cursor als deinen Agenten.
Steht OpenDesign mit Cursor in Verbindung?
Nein. Cursor ist ein Produkt von Anysphere; OpenDesign ist ein unabhängiges Open-Source-Projekt, das es als First-Party-Adapter integriert.