Cursor UI-Design: Wohin der Prompt gehört

Cursor hat drei Orte für eine Design-Anweisung: den Chat, eine Regeldatei und ein Dokument, das es indexieren kann. Jeder passt zu einer anderen Größe von Aufgabe.

Eine Komponente: der Chat

Stell das Tool-Menü auf Cursor, kopiere den Prompt und füg ihn in den Chat ein, mit der Zieldatei geöffnet oder per @ referenziert. Der Vorspann verlangt reines CSS im bestehenden Stylesheet. Cursor neigt dazu, Styles bei kleinen Komponenten direkt ins JSX zu schreiben; siehst du style={{...}} im Diff, sag "verschieb das in die CSS-Datei", und es macht das.

Das ganze Projekt: eine Regeldatei

Cursor liest .cursor/rules/*.mdc (ältere Projekte: .cursorrules). Nimm einen Stil-Prompt von den Stil-Seiten und speichere ihn als Regel, die für deine UI-Dateien gilt:

---
description: Design direction for all UI
globs: src/**/*.tsx, src/**/*.css
alwaysApply: true
---
(paste the style prompt)

Tokens: --bg:#faf6f1; --fg:#1a1a1a; --accent:#f26207; --radius:12px;
Never add a CSS framework. Keep hover and focus-visible states on every interactive element.

Bleib unter 200 Wörtern. Lange Regeldateien werden im Kontext abgeschnitten, und die letzten Zeilen sind die, die verschwinden.

Referenzdokumente: das Markdown indexieren

Cursor kann eine URL als Dokumentation indexieren. Trag https://designforai.dev/llms.txt in den Einstellungen unter Docs ein, dann kannst du im Chat "@Docs designforai use the neo-brutalist card" schreiben. Der Index deckt jede Snippet- und Stil-Seite als Markdown ab.

Worauf du achten solltest

Composer benennt Klassen manchmal um, damit sie zu deiner Namenskonvention passen. Harmlos, solange es konsistent ist; prüfe, ob das CSS mit umbenannt wurde.
Steckt Tailwind im Projekt, übersetzt Cursor das CSS in Utilities, wenn die Regel es nicht verbietet. Der Vorspann im kopierten Prompt deckt das ab, eine Regeldatei braucht die Zeile aber ebenfalls.
Animierte Snippets: Cursor legt @keyframes gern in eine Komponentendatei, wo CSS Modules den Namen scopen. Das funktioniert noch, aber der Name ändert sich, und eine zweite Komponente kann ihn nicht wiederverwenden. Leg Keyframes in eine globale Datei.