Wie die Prompts auf dieser Seite geschrieben sind

Jedes Snippet kommt mit einem Prompt, und jeder Prompt folgt derselben Form. Diese Seite erklärt die Form, damit du eigene schreiben kannst, wenn das Regal nicht hergibt, was du brauchst.

Die eine Regel: das Ergebnis beschreiben, nicht den Code

Ein KI-Coding-Tool ist gut darin, eine präzise Beschreibung in CSS zu verwandeln. Es ist schlecht darin zu raten, was "mach es schöner" heißt. Also nennt der Prompt die Farbe als Hex-Wert, den Radius in Pixeln, den Schatten mit Offsets und Blur, und was bei Hover, Fokus und Active passiert. Nichts bleibt dem Geschmack überlassen.

Hier ist der Prompt für Kobalt Block:

Ein kräftig blauer Button #2563eb mit weißem Text 15px semibold, 8px Radius und 13px mal 24px Padding. Er hat einen zarten 1px blauen Schatten; beim Hover dunkelt er auf #1d4ed8 ab und der Schatten wächst auf 0 4px 12px bei 35% Blau. Active geht auf #1e40af ohne Schatten. Fokus zeigt eine 3px halbtransparente blaue Outline.

Lies ihn noch einmal und zähl die Zahlen. Sechs Stück. Das ist der Unterschied zwischen einem Prompt, der den Button reproduziert, und einem, der "einen blauen Button" erzeugt, was jedes Tool schon von allein tut, meistens schlecht.

Die vier Teile

1. Form und Größe. Padding, Radius, Rahmen, Schriftgröße und -gewicht. Hat das Element eine feste Breite, sag es.
2. Farbe. Hintergrund, Text, Rahmen, jeweils als Hex- oder rgba-Wert. Den Farbraum nennst du nur, wenn er zählt (oklch für Verläufe, die nicht schlammig werden sollen).
3. Zustände. Hover, focus-visible, active, disabled. Sag, was sich ändert, um wie viel, und wie lang die Transition dauert.
4. Bewegung. Animiert etwas, gib Dauer, Easing und ob es loopt. Erwähne prefers-reduced-motion, wenn die Animation dekorativ ist.

Was die Tool-Auswahl ergänzt

Das kleine "For"-Menü neben jedem Copy-prompt-Button stellt einen Satz voran, der auf das Tool abgestimmt ist: Klassennamen behalten, reines CSS, keine Bibliothek ergänzen. Claude Code und Cursor installieren sonst gern eine Abhängigkeit, um einen Spinner zu zeichnen. Der Satz verhindert das. Die Auswahl wird in deinem Browser gemerkt, du triffst sie also einmal.

Warum das Markup mitkopiert wird

Der Prompt kopiert das Demo-HTML unter die Beschreibung. Ohne es erfindet das Tool eine eigene Struktur, und eine Card mit anderer Elementreihenfolge braucht anderes CSS. Mit ihm stylt das Tool genau das, was auf dieser Seite steht.

Eigene schreiben

Öffne den Browser-Inspector auf einem Element, das dir gefällt, lies die berechneten Werte ab und schreib sie in der Vierer-Reihenfolge von oben auf. Keine Adjektive. Ertappst du dich bei "modern" oder "clean", ersetz das Wort durch eine Zahl. Ein so geschriebener Prompt ist meist kürzer als das CSS, das er erzeugt, und übersteht es, nächsten Monat in ein anderes Tool eingefügt zu werden.