WEITERE LEKTÜRE
Weiterführende Informationen zu Cursor
Tutorials, Dokumentation und Walkthroughs zum Designen mit Cursor, wie im veröffentlichten Guide aufgeführt.
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.
Vom Briefing zur Oberfläche01 / Cursor
SIE BRINGEN DIE IDEE EIN↗
„Eine Preisseite, die wir im
Design Mode anpassen, nicht in CSS.“
DREI EINSTIEGE IN DIESEN CURSOR-GUIDE
Wählen Sie Ihren Einstieg mit Cursor
DIESER LEITFADEN · UI-DESIGN
Erstellen Sie ein Produktinterface mit Cursor
Dieser Leitfaden: Briefing, Referenzen, Designregeln und ein überprüftes HTML-Ergebnis.
Diese Anleitung lesen EINRICHTUNGCursor von Grund auf einrichten
Hier ist der vollständige Weg von einem sauberen System zu einem Cursor, der UI erstellen, in der Vorschau anzeigen und gegen Ihr Design System prüfen kann.
Zum Setup VERGLEICHVergleichen Sie Cursor mit anderen Agents
Wie sich Cursor von Codex und Claude Code für Design-Arbeit unterscheidet und wann Sie einen anderen Workflow wählen sollten.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Cursor-Design-Aufgabe
Eine Cursor-Design-Aufgabe, vom Briefing zum Interface
Eine einzelne Aufgabe, end-to-end gezeigt: das Briefing und die Vorgaben, die Sie übergeben, das Ergebnis, das zurückkommt, und die Prüfungen, die Sie vor dem Abschluss noch durchführen. Das Interface unten ist ein illustratives Beispiel für diese Seite, kein aufgezeichneter Cursor-Lauf.
1Design-Briefing und Vorgaben
BriefingGestalten Sie eine Pricing-Page für ein Entwickler-Tool mit drei Plänen und einem Monats-/Jahres-Umschalter. Behalten Sie den mittleren Plan als empfohlenen Plan bei und machen Sie den Vergleich gut überblickbar. Desktop und Smartphone.
- Design SystemVorhandene App-Tokens; Albert Sans, ein grüner Akzent
- Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
- InteraktionenAbrechnungs-Umschalter, CTA-Zustände der Pläne, FAQ-Links, Tastaturfokus auf dem Umschalter
- AusgabeEine in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Aufteilung der Arbeit: Sie, Cursor und OpenDesign
- Sie
Schreiben Sie das Briefing, wählen Sie das Design-System aus und definieren Sie die Abnahmekriterien.
- Cursor
Plant das Layout, schreibt HTML, CSS und JavaScript und überarbeitet es auf Anfrage.
- OpenDesign
Stellt das Design-System und den Skill bereit, rendert die Vorschau und speichert jede Version als Datei im Projekt.
- Prüfung
Visuelle Hierarchie, Abstände im 8px-Raster, beide Breakpoints und jede Interaktion werden vor der Übergabe geprüft.
3Cursor Artefakt: Die Preisseite bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Drei gleiche Spalten im 8px-Raster; der empfohlene Plan hebt sich durch Rahmen ab, nicht durch Größe.
Hierarchie
Visuelle Hierarchie
Preis, dann Planname, dann Funktionen; der Akzent markiert ein Badge und einen primären Button.
Responsive
Mobiles Layout
Die Pläne stapeln sich, der empfohlene Plan zuerst; der Umschalter bleibt oben erreichbar.
Interaktion
Interaktionsprüfungen
Schalten Sie den Abrechnungs-Umschalter, tabben Sie zu jedem CTA und öffnen Sie einen FAQ-Link.
Eignung
Wann Cursor zur Aufgabe passt – und wann nicht
Cursor passt, wenn
- Design Mode. Klicken, zeichnen oder per Sprache eine UI-Änderung beschreiben, und Cursor bearbeitet den Quellcode — visuelles Bearbeiten, das auf echtem Code basiert.
- Figma → Code. Figma-MCP-Server liefern echtes Layout und Tokens an Cursor, sodass es auf Basis des Designs baut, nicht eines Screenshots.
- Bidirektionales Figma. Manche MCPs erlauben Cursor, Figma-Designs programmatisch zu lesen und zu ändern, nicht nur zu konsumieren.
- Design-to-Code-Loop. Das gängige Muster: Entwurf in einem visuellen Tool, Import in Cursor, dann Verfeinern und Erweitern mit dem Agent.
Wählen Sie einen anderen Workflow, wenn
- Sie benötigen bearbeitbare Vektordateien. Das Artefakt ist HTML, kein bearbeitbares Design-Dokument. Prüfen Sie einen separaten Vektor-Workflow für Ihr benötigtes Asset-Format.
- Sie haben weder Referenz noch Vorgaben. Ohne Designsystem oder Beispiele tendiert die Ausgabe zu einem generischen Look; schreiben Sie zuerst das Briefing.
- Sie besitzen nicht die Zugangsdaten, die dieser Agent benötigt. Erforderlich: Cursor-Konto (verwendet Ihre eigenen Provider-Schlüssel). OpenDesign stellt keine Zugangsdaten bereit und leitet sie nicht weiter.
- Ihr Team arbeitet mit Claude Code oder Antigravity. Diese Agents haben eigene Seiten; der Arbeitsbereich ist derselbe, das Setup unterscheidet sich. Siehe verwandte Agents.
Kompatibilität
Cursor-Voraussetzungen vor dem Start
Dieser Leitfaden behandelt Cursor, wie es über die OpenDesign-Desktop-App verbunden wird. Veröffentlichte Referenzen geprüft am 6. September 2026.
Tool-UmfangCursor, von Cursor
Cursor ist ein KI-first Code-Editor auf Basis von VS Code mit einem integrierten Agent, der Änderungen im gesamten Projekt vornimmt. Diese Seite behandelt das Gestalten von Interfaces mit Cursor über OpenDesign, nicht die eigene Oberfläche von Cursor. Die Setup-Hinweise von OpenDesign listen die verfügbaren Agents auf.
Konten und AuthentifizierungCursor-Konto (nutzt Ihre eigenen Provider-Keys)
Cursor-Konto (nutzt Ihre eigenen Provider-Keys). Cursor verwendet Ihre eigenen Provider-Keys – nichts wird über OpenDesign weitergeleitet. Diese Seite verspricht kein Kontingent und keinen Preis.
System und VersionenDesktop-App oder Quellcode
Prüfen Sie die Download-Seite auf Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Quell-Quickstart betreffen das Ausführen aus dem Quellcode, nicht die Installation eines Desktop-Pakets. Mindestens kompatible Cursor-Version: hier nicht verifiziert.
VerbindungsprüfungDas Erfolgssignal
Folgen Sie den Verbindungsanweisungen Ihrer installierten Version und führen Sie dann eine kleine Aufgabe aus. Bestätigen Sie, dass Cursor sie erledigt hat und dass sich das Artefakt öffnet. Ein Download allein stellt noch keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Cursor-Einrichtung in drei Schritten
Laden Sie zuerst herunter, schließen Sie das Cursor-Setup für Ihre installierte Version ab und prüfen Sie dann ein kleines Ergebnis. Sie müssen OpenDesign nicht aus dem Quellcode bauen, um diesen Weg zu gehen.
- 1
Die OpenDesign-Desktop-App herunterladen
Wählen Sie das Paket für Ihren Computer, installieren Sie es und öffnen Sie die App.
OpenDesign herunterladenMEILENSTEINDie Desktop-App öffnet sich. Bereits installiert? Fahren Sie mit dem nächsten Schritt fort; ein erneuter Download ist nicht erforderlich. - 2
Bereiten Sie Ihre Cursor-Verbindung vor
Folgen Sie den Cursor-Anweisungen in Ihrer installierten Version. Cursor verwendet Ihre eigenen Provider-Keys — nichts wird über OpenDesign geleitet.
# .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.Aus den Cursor-Setup-Hinweisen im veröffentlichten Guide; prüfen Sie die Herstellerdokumentation für den aktuellen Befehl.
MEILENSTEINBestätigen Sie den vorgesehenen Agent und das Konto. Ist er nicht verfügbar, prüfen Sie die Kompatibilität, bevor Sie eine größere Aufgabe versuchen. - 3
Führen Sie eine kleine Cursor-Aufgabe aus
Verwenden Sie ein kleines Briefing, damit Sie den gesamten Ablauf beurteilen können, einschließlich einer Überarbeitung.
Start-BriefingErstellen Sie einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Verwenden Sie meine Designregeln. Prüfen Sie ihn bei Desktop- und Mobilbreiten.
MEILENSTEINÖffnen Sie das Ergebnis, testen Sie den Speicherstatus und fordern Sie eine konkrete Änderung an. Eine generierte Datei ist der Beginn der Überprüfung, nicht das Ende.
Um OpenDesign aus dem Quellcode auszuführen, folgen Sie stattdessen dem technischen Schnellstart.
Der Cursor-Design-Workflow
Der Cursor-Design-Workflow in fünf Schritten
Die gleiche Pricing-Page-Aufgabe, verfolgt vom Briefing bis zur verifizierten Datei. Jeder Schritt listet auf, was Sie beisteuern, was Cursor macht, was OpenDesign beiträgt und was Sie prüfen.
- 1
Design-Briefing
Klare Sprache, drei bis sechs Zeilen. Benennen Sie die Zielgruppe, die Aufgabe des Screens und die Plattformen.
- SieSchreiben Sie das Briefing; hängen Sie einen Referenz-Screenshot an, falls vorhanden.
- CursorLiest das Briefing und die Instruction-File des Projekts; fragt nach, wenn etwas unklar ist.
- OpenDesignStellt das Projekt, die Prompt-Oberfläche und das Skill für den Artefakttyp bereit.
- PrüfenStellen Sie sicher, dass das Briefing die Abnahmekriterien enthält. Diese jetzt hinzuzufügen ist günstiger als nach der Generierung.
- 2
Design-Vorgaben
Ein Design-System und ein paar feste Regeln. Das unterscheidet markenkonforme Ergebnisse von einem generischen Look.
- SieWählen Sie ein Design-System; legen Sie Breakpoints und verbindlich zu verwendende Komponenten fest.
- CursorLädt die DESIGN.md-Tokens und Posture-Regeln in den Kontext, bevor eine Zeile geschrieben wird.
- OpenDesignLiefert die Design-System-Bibliothek und bindet das ausgewählte System in die Skill-Vorlage ein.
- PrüfenDie Token entsprechen Ihrer Marke. Ein Akzent, die richtigen Schriften, der richtige Radius.
- 3
Die Oberfläche generieren
Cursor schreibt eine eigenständige HTML-Datei: Layout, Styles, Interaktionen und stabile Hooks.
- SieWarten Sie, oder beantworten Sie eine Rückfrage. Nichts zu konfigurieren.
- CursorPlant die Abschnitte, schreibt HTML, CSS und JavaScript, führt die Datei aus und behebt Fehler.
- OpenDesignSpeichert das Artefakt im Projektordner und indexiert es für die Vorschau.
- PrüfenNoch nichts. Beurteilen Sie die Datei nach dem Rendern, nicht anhand des Quellcodes.
- 4
Vorschau
Die Datei wird innerhalb von OpenDesign in den angeforderten Breiten dargestellt. Hier wird das Design beurteilt.
- SieWechseln Sie zwischen Breiten, klicken Sie sich durch die Interaktionen, hinterlassen Sie Kommentare zu Elementen.
- CursorLiest Ihre Kommentare zur Vorschau und bereitet die nächste Überarbeitung vor.
- OpenDesignRendert die Vorschau, stellt
data-od-id-Ziele für Kommentare und Änderungen bereit. - PrüfenHierarchie, Kontrast, Überlauf bei 390px, Fokuszustände und ob der Akzent sparsam eingesetzt wird.
- 5
Überarbeiten und Verifizieren
Fordern Sie Änderungen an, indem Sie auf Elemente in der Vorschau zeigen. Jede Überarbeitung ist eine neue Datei; nichts wird stillschweigend überschrieben.
- SieVerwandeln Kommentare in Anfragen; entscheiden, wann die Aufgabe abgeschlossen ist.
- CursorWendet die Änderungen direkt an und führt die Datei erneut aus.
- OpenDesignBehält Versionen nebeneinander; exportiert ein Bild oder das HTML, wenn Sie fertig sind.
- PrüfenNur den geänderten Bereich erneut prüfen, dann die gesamte Seite einmal bei jedem Breakpoint.
Ressourcen
Cursor-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Die Artefakttypen, die Cursor in OpenDesign erzeugen kann, ein Skill pro Typ.
Design Systems
Brand-Tokens und Komponenten, die Sie binden, bevor Cursor etwas generiert.
Vorlagen
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
Cursor-Einschränkungen, manuelle Prüfungen und Fallbacks
- UmfangDiese Seite behandelt Cursor als mit OpenDesign verbundenen Agent, nicht jede Cursor-Funktion.
- NutzungslimitsNutzungslimits und Kosten richten sich nach den verwendeten Zugangsdaten (Cursor-Account (verwendet Ihre eigenen Provider-Keys)). Diese Seite macht keine Aussage über kostenlose Kontingente.
- NetzwerkLokale Projektdateien bedeuten nicht, dass die Inferenz offline erfolgt. Prüfen Sie die Anbietereinstellungen und Datenrichtlinien Ihres Agents, bevor Sie sensible Eingaben teilen.
- Ausgabe ist HTMLArtefakte sind HTML-Dateien, keine Vektor-Design-Dateien. Figma-Round-Trips laufen über die eigene Figma-Integration von Cursor.
- Manuelle ÜberprüfungBarrierefreiheit, echte Inhalte, Markenkonformität und korrekte Interaktionen werden von Ihnen in der Vorschau geprüft. Betrachten Sie jede Selbstprüfung des Agents als ersten Durchgang.
- FallbackWenn der Agent nicht verfügbar ist oder eine Aufgabe fehlschlägt, prüfen Sie die Verbindungsanleitung und Authentifizierung der installierten Version. Bewahren Sie den Fehler und das letzte funktionierende Artefakt auf, bevor Sie die Konfiguration ändern.
FAQ
Häufige Fragen zu Cursor und OpenDesign
Kann Cursor wirklich Design-Arbeit leisten?
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 oder 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 verbinde ich Cursor 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.
Erste Design-Aufgabe mit Cursor starten
Beginnen Sie mit einer kleinen Aufgabe, bewerten Sie den Ablauf, und bringen Sie dann das eigentliche Briefing ein. Wählen Sie die Option, die zu Ihrem Setup passt; die Seite erkennt dies nicht automatisch.