Tutorials
Schritt-für-Schritt-Anleitungen zum Designen und Prototyping mit Cursor, handverlesen aus dem ganzen Web.
Marken-Assets und Icon-Sets mit Cursor generieren
Nutze Cursor, um SVG-Icon-Systeme, Favicons und eine konsistente visuelle Identität im Code zu erstellen — definiere eine Palette und Strich-Regeln einmalig und generiere dann passende Marken-Symbole und exportiere produktionsreife Assets.
Landing Page mit Cursor, shadcn/ui und Tailwind erstellen
Von der leeren Next.js-App zur produktiven Landing Page: Scaffolding mit shadcn/ui, Prompt-gesteuerte Section-Layouts in Cursor und Design Tokens für konsistente Hero-, Pricing- und Footer-Bereiche.
Durchsetzung eines Design Systems mit .cursor/rules
Erstellen Sie eine design-system.mdc-Regeldatei, die Spacing-Skala, Farb-Token, Radius und Typografie festlegt, damit jede von Cursor generierte Komponente markenkonform bleibt — mit Beispielen für scoped Rules und Glob-Targeting.
Projektrichtlinien für Designkonsistenz (.cursor/rules)
Cursor's offizielles Rules-System ermöglicht es dir, wiederverwendbare, scoped Anweisungen zu fixieren — einschließlich einer Design-System-Regel, die Token, Abstände und Komponentenkonventionen kodiert — damit jede Generierung markenkonform bleibt. Behandelt MDC-Format, Globs und automatisch anhängige vs. immer aktive Regeln.
UI-Design in Cursor aus Screenshots — Figma nicht erforderlich
Ein praktischer Design-Mode-Workflow: Referenzen von Dribbble, Mobbin oder Pinterest direkt in den Agent-Chat einfügen, eine Design-System-Regeldatei anpinnen und eine polierte Komponente iterieren, ohne Figma jemals zu öffnen.
Der tägliche Workflow eines Design Engineers in Cursor
Wie Designer, die coden, ihre Cursor-Einrichtung strukturieren — Regeln für Token und Barrierefreiheit, Playwright MCP für visuelle Tests und eine enge Schleife aus Prompt, Diff-Review und Pixel-Verfeinerung.
Figma zu Code in Cursor mit dem Dev Mode MCP Server
So verbindest du Figmas Dev Mode MCP Server mit Cursor, damit der Agent Frames, Variablen und Auto Layout direkt ausliest – und ausgewählte Designs in saubere, Token-aware React- und Tailwind-Komponenten umwandelt.
Figma MCP Server in Cursor einrichten
Die offizielle Anleitung zum Verbinden von Figmas Dev Mode MCP Server mit Cursor, damit der Agent ausgewählte Frames, Variablen und Auto Layout direkt ausliest und Code generiert, der deine Design Tokens berücksichtigt. Enthält den Cursor MCP Installationsablauf und Tipps zum Prompting.
Cursor-Prompting für Daten-Dashboards ohne generisches Aussehen
Muster zum Prompting von Dashboard-Layouts in Cursor — Informationshierarchie, Chart-Dichte und Leer-Zustände vorab beschreiben, dann mit Referenzbildern verfeinern, damit das Ergebnis gestaltet statt vorlagenbasiert wirkt.
Cursor 2.0 — Multi-Agent-Schnittstelle und nativer Browser
Cursor 2.0 reorganisiert die IDE um Agents statt Dateien herum und liefert ein natives Browser-Tool, das der Agent zur Iteration und zum Testen von UIs nutzen kann. Das Fundament des Visual Editor Design Workflows, ergänzt durch Composer, Cursors eigenständiges Low-Latency-Coding-Modell.
Cursor's Visual Editor: Zeigen, Anfordern und Anwenden
Eine Anleitung zum Visual Editor von Cursor im Browser — Drag-and-Drop-Layout-Bearbeitung, ein Figma-ähnlicher Inspector für Abstände und Typografie, sowie der Apply-Schritt, der visuelle Anpassungen in echtes JSX und Tailwind umwandelt.
Cursor 2.2 — Visual Editor, Debug Mode und Multi-Agent Judging
Das offizielle Cursor 2.2 Changelog. Mit dem Browser Visual Editor (Design Mode), Debug Mode, Multi-Agent Judging, Plan Mode Mermaid-Diagrammen und Pinned Chats — das Release, das visuelle Gestaltung in die Agent-Schleife integrierte.
Cursor Browser Visual Editor — Design Mode für deine Live-App
Der offizielle Visual Editor von Cursor verwandelt die Browser-Vorschau in eine Design-Oberfläche: Drag-and-Drop-Layout-Bearbeitung im DOM, ein Figma-ähnlicher Inspector für Abstände, Farben, Typografie und Design Tokens, React-State-Schalter und ein Point-and-Prompt-Workflow, den ein Agent direkt in echten Code übernimmt.
Cursor Design Mode erklärt (visuelles Editing)
Builder.io's tiefgreifende Analyse von Cursors Design Mode — was die Figma-ähnliche Seitenleiste beim Editing deiner Live-React-App gut macht, und die ehrlichen Limitierungen (kein Multi-Select, kein einfaches Undo, LLM-gesteuerte Edits) versus eines echten Design-Tools.
Cursor hat die Design-Übergabe revolutioniert
Eine detaillierte Analyse, wie der Visual Editor von Cursor die Designer-zu-Developer-Übergabe vereinfacht — durch visuelle Live-App-Bearbeitung und persistente, überprüfbare Code-Änderungen ohne separate Spezifikationen.