Ringophilia/style-fits-the-job

Stil muss zur Aufgabe passen

Problem

KI-generierte UI hat eine Standard-Ästhetik, die immer gleich aussieht, egal für was:

• Glassmorphism-Karten (backdrop-filter: blur() + halbtransparentes Weiß)
• Neumorphism (erhabene/versenkte Schatten)
• Lila-blaue Verläufe, Verlaufs-Buttons, -Texte, -Rahmen
• Unscharfe, bunte Lichtpunkte auf dunklem Hintergrund
• Neon leuchtendes box-shadow, bei Hover vergrößern, schweben, rotieren
• Jeder Abschnitt ist eine Karte mit 24px Radius, davor ein Emoji im Titel
• „✨ KI-gesteuert“, „🚀 Jetzt starten“-Floskeln

Ergebnis: Ein Spesenabrechnungstool für die Buchhaltung, ein Log-Viewer für Admins – sehen aus wie ein Game-Launcher oder eine Crypto-Landing-Page. Benutzer, die es acht Stunden täglich nutzen, werden abgelenkt, finden nichts, und es wirkt unseriös.

Und umgekehrt: Ein kleines Spiel für Freunde, ein Glücksrad, ein Haustiertagebuch – werden zu grauen Tabellen mit Standard-Blau-Buttons, langweilig.

Stil ist keine Frage von „schön oder hässlich“, sondern von „passend oder nicht passend“.

Schritt 1: Was gibt es bereits im Projekt

Priorität von hoch nach niedrig:

1. Bestehendes Design-System / Komponentenbibliothek / Theme-Datei (tailwind.config, theme.ts, CSS-Variablen, Figma-Link, Branding-Vorgaben): verwende es, erfinde nichts Neues.
2. Bereits vorhandene Seiten im Projekt: neue Seite muss wie eine Schwester aussehen.
3. Plattform-Richtlinien: Windows-Native Anwendungen folgen Fluent / WinUI, macOS folgt HIG, Android folgt Material. Plattform-spezifische Materialien (z. B. Mica / Acrylic in Windows 11) sind legitim, aber nur an den vorgesehenen Stellen (Fensterhintergrund, Flyout-Menü), nicht auf jeder Karte.
4. Wenn nichts davon vorhanden ist, entscheidest du basierend auf dem Kontext.

Schritt 2: Kontext erkennen

Diese Signale helfen:

Signal	Tendenz dezent	Tendenz verspielt
Wer nutzt es?	Mitarbeiter, Profis, Kunden von Kunden	Normale Spieler, Freunde, Kinder, Fans
Wie wird es genutzt?	Täglich, lange Zeit, immer wieder dieselbe Aktion	Gelegentlich, kurz, zum Spaß
Inhalt	Tabellen, Zahlen, Formulare, Logs, Code	Bilder, Charaktere, Geschichten, Errungenschaften, Interaktion
Fehlerkosten	Hoch: Geld, Daten, Verträge, Produktion	Niedrig: Einfach nochmal versuchen
Gewünschtes Gefühl	Zuverlässig, effizient, professionell, nicht störend	Lustig, überraschend, persönlich, teilenswert

Schritt 3: Richtung je nach Kontext wählen

Geschäftlich / Produktivität / Interne Tools / Daten-Backend / Entwickler-Tools

• Farben: Neutrale Farben dominieren (Weiß, Hellgrau, Dunkelgrau), eine Akzentfarbe für Hauptaktionen und Schlüsselzustände; Statusfarben (Erfolg/Warnung/Fehler) haben feste Bedeutung – nicht dekorativ verwenden.
• Schriftart: System-Schriftart oder eine bewährte serifenlose Schrift; Zahlen in tabular-nums oder font-variant-numeric: tabular-nums, damit Spalten ausgerichtet sind.
• Dichte: Mittlere bis hohe Informationsdichte, kompakte Tabellenzeilen, Weißraum dient Gruppierung, nicht um „edel“ zu wirken.
• Dekoration: Kaum vorhanden. Kleine Eckenradius (4–8px), dünne Rahmen oder sehr flache Schatten. Keine Verläufe, Leuchteffekte, Glassmorphism, Hintergrund-Lichtpunkte.
• Animationen: Nur für Feedback (Laden, Aufklappen, Statuswechsel), 150–200ms. Keine Eintrittsanimationen, Hover-Vergrößerungen, Parallaxe.
• Icons: Ein einheitlicher linearer Icon-Satz (Lucide, Fluent Icons, Material Symbols). Keine Emojis.
• Texte: Direkt, konkret: „Speichern“, „CSV exportieren“, „3 Einträge zu genehmigen“.

Unterhaltung / Spiele / Kreativ / Sozial / Kinder / Persönliches Interesse

• Farben: Kräftig, mutig, bunt, einprägsam. Thematische Farbschemata, Verläufe, Illustrationen als Hintergrund sind erlaubt.
• Schriftart: Überschriften können auffällige Display-Schriften haben, Fließtext muss weiterhin lesbar sein.
• Dekoration: Illustrationen, Sticker, Texturen, Charaktere, handgezeichnete Elemente – aber thematisch passend, nicht willkürlich „cool“. Ein Pixel-Spiel soll Pixel-Optik haben, ein Märchen-Thema soll märchenhaft wirken, nicht einheitlich lila Neon.
• Animationen: Reichhaltiger: Elastic, Partikel, Feier-Animationen, Soundeffekte. Belohnungsgefühl erzeugen.
• Texte: Dürfen Tonfall, Persönlichkeit und Insider-Witze haben.

Zwischenbereich

Alltagstools für Endverbraucher (Haushaltsbuch, ToDo, Kalender, Fitness-Tracker), Portfolio, Produkt-Landing-Page: Grundton dezent, Benutzerfreundlichkeit zuerst. An wenigen Stellen (Leerzustände, Abschluss-Momente, Markenfarben, Illustrationen) Persönlichkeit einbringen.

Verspielt ≠ KI-Standard-Stil. Glassmorphism, lila-blaue Verläufe, Neon-Lichtpunkte sind auch im Unterhaltungsbereich nur „generischer KI-Look“, nicht der Stil des Produkts. Gute Verspieltheit hat ein Thema.

Bei Unsicherheit: Frage den Benutzer

Wenn der Kontext nicht klar ist oder der Benutzer mehrere Möglichkeiten hat, fragen, bevor du schreibst. Stelle konkrete Optionen zur Auswahl, nicht „Was für einen Stil magst du?“:

✓ „Welchen Stil bevorzugst du für dieses Tool?
   A. Dezent professionell: Heller Hintergrund, neutrale Farben, kompakte Tabellen, wie Linear / Notion
   B. Freundlich und locker: Runder, weiche Farben, ein paar Illustrationen, wie Duolingos Einstellungsseite
   C. Ausdrucksstark: Mutige Farben und Animationen, geeignet für Show oder Entertainment
   Wenn du unsicher bist, mache ich erstmal Version A.“

Wenn deine Umgebung es erlaubt, kannst du auch zwei bis drei kleine Vorschauen (nur andere Farben und Schriftarten desselben Interfaces) zeigen und den Benutzer wählen lassen.

Nicht fragen, wenn es unnötig ist: Wenn der Benutzer den Zweck klar genannt hat („für die Buchhaltung unserer Firma“), wenn das Projekt bereits einen Stil hat, oder wenn die Anforderung eindeutig ist („mach ein Tetris-Spiel“), dann entscheide direkt und erkläre am Ende kurz deine Wahl, damit der Benutzer korrigieren kann.

Schritt 4: Selbstkontrolle

Stelle dir bei jeder Dekoration im Interface die Frage: Was verliert der Benutzer, wenn ich es entferne? Wenn die Antwort „nichts“ ist und es ein Tool-Interface ist, entferne es.

Punkt-für-Punkt-Prüfung:

• Durchsuche den Code nach backdrop-filter, linear-gradient, box-shadow mit bunten Leuchteffekten, animation, Emojis: Ist jede Verwendung beabsichtigt?
• Tritt die Akzentfarbe nur bei Hauptaktionen und Schlüsselzuständen auf? Oder überall?
• Mache einen Screenshot (hintergrundfreundlich): Sieht man zuerst den Inhalt und die Hauptaktion oder die Dekoration?
• Denke aus der Perspektive des Benutzers: Wird er es acht Stunden täglich öffnen / zehn Minuten nutzen? Passt der Stil?

Grenzen

• Wenn der Benutzer explizit einen Stil wünscht („Ich will Cyberpunk“, „Mach‘s schick“), dann mach genau das, auch wenn es ein Tool ist.
• Wenn der Benutzer Referenzbilder, Referenz-Websites oder Branding-Vorgaben mitgibt, richte dich nach diesen.
• Demo-, Marketing- oder Präsentationsseiten dürfen ausdrucksstärker sein als Alltags-Tools, müssen aber zu Marke und Zielgruppe passen.

Checkliste

• Gibt es im Projekt ein bestehendes Design-System, Theme oder bereits erstellte Seiten? Habe ich es verwendet?
• Welcher Kontext ist das? Wer nutzt es, wie lange, wie hoch sind die Fehlerkosten?
• Wenn der Kontext unklar war, habe ich dem Benutzer konkrete Optionen angeboten?
• Tool-Interface: Sind Glassmorphism, lila-blaue Verläufe, Neon-Leuchten, Lichtpunkt-Hintergründe, Emoji-Icons und sinnlose Animationen vermieden?
• Unterhaltungs-Interface: Hat es eine thematische Persönlichkeit, nicht nur graue Tabellen oder generischen KI-Glamour?
• Wird die Akzentfarbe nur an den richtigen Stellen eingesetzt?
• Kann ich zu jeder Dekoration sagen, wofür sie gut ist?