Florious95/de-ai-ui

UI-Design ent-KI-en (De-AI UI)

Ein mit KI generiertes Interface sieht oft billig aus, weil die Details fehlen. — @bruc3van

Diese Skill fasst die öffentlich geteilten Erkenntnisse von acht chinesischsprachigen Designern auf X darüber zusammen, woran man KI-generierte Interfaces erkennt und wie man KI-Anweisungen gibt, um sie zu vermeiden. Die Regeln sind ausführbar und überprüfbar. Hinter jeder Regel steht der Autor in Klammern [Autor]; die vollständigen Quellenangaben und Zusammenfassungen findest du in der Datei references/sources.md. Mit [Allgemeine Praxis] gekennzeichnete Regeln dienen der Vervollständigung und geben nicht die Meinung eines bestimmten Autors wieder.

Wann verwenden / When to use

• Erstellen oder Ändern eines beliebigen Interfaces mit KI: Landingpages, Dashboards, Einstellungsseiten, Komponentenbibliotheken, Design-Tokens.
• Der Nutzer sagt: „Sieht aus wie von KI gemacht / billig / lieblos / hat diesen KI-Look / slop“, oder fordert „soll hochwertiger / edler wirken“.
• Vor der Auslieferung eines UI als Qualitätskontrolle (Review Pass).

Kernprinzipien / Core principles

1. Reduzieren vor Hinzufügen. Der häufigste Fehler von KI ist nicht, dass etwas fehlt, sondern dass zu viel da ist: überflüssige Beschreibungstexte, Trennlinien, Icons, Labels, Schatten, Farben, Animationen. Frage bei jedem Element: „Ist es wirklich notwendig?“ [ZaynHao] [dingyi] [yanliudreamer]
2. Interface tritt zurück, Inhalt tritt hervor. Verwende für die Benutzeroberfläche nur Schwarz, Weiß und Graustufen; reserviere Farbe für Fotos und Inhalte. [ianneo_ai]
3. Konsistenz durch Systeme, nicht durch Gefühl. Verwende Farbschemata wie Radix Colors, halte Abstände und Radien auf einem 4px-Raster, beschränke Schriftgrößen auf wenige Stufen und nutze vorhandene Komponentenbibliotheken und Designsysteme. [ZaynHao] [Kubai087] [yanliudreamer]
4. Details müssen „geometrisch korrekt“ sein. Konzentrische abgerundete Ecken, optische Ausrichtung, einheitliche Rahmenstärke. [Kubai087] [ZaynHao] [dingyi]
5. Erst definieren, dann umsetzen; erst das Ganze, dann Stück für Stück verbessern. Lege vorher fest: für wen ist das Interface, welches Problem löst es, welches Gefühl soll es vermitteln. Erstelle eine vollständige erste Version, liste Probleme auf, priorisiere sie und ändere nur eines pro Durchgang. [Xian0063]
6. Unterschiedliche Modi getrennt gestalten, nicht automatisch konvertieren. Apple fügt für das Clear-Modus-Symbol des Preview-Apps eine separate Ebene hinzu, weil die direkte Konvertierung des Standardmodus „schmutzig aussieht“. Gleiches gilt für Dark-/Night-/Transparentmodus. [remixdesigner] [ianneo_ai]

Überprüfbare Regeln / Checkable rules

Abgerundete Ecken & Rahmen (Details in references/radius-and-borders.md)

• Verschachtelte Ecken: innerer Radius = äußerer Radius − Abstand (r = R − p); beide teilen sich denselben Mittelpunkt. Von außen nach innen: Dialog/Card → Panel, Input, Button → Chip, Tag. Beispiel: Dialog 32, Padding 16 → innen 16; Panel mit 16, Chip mit Padding 8 → Chip 8. [Kubai087]
• Boxen auf derselben Ebene haben denselben Radius; Minimum 4px; Pill und Kreis bleiben vollständig rund. [Kubai087]
• Padding, Gap, Radius liegen alle auf einem 4px-Raster; wenn es Radius-Tokens gibt, verwende sie, keine hartcodierten Werte. [Kubai087]
• Superellipsen-Ecken als progressive Verbesserung: border-radius beibehalten, mit @supports (corner-shape: superellipse(1.25)) corner-shape hinzufügen; Pill/Kreis mit corner-shape: round. Wirkt in Chrome/Edge 139+, Safari/Firefox fallen automatisch auf normale Radien zurück. [Kubai087]
• Linien und Rahmen mit 0.5px und einheitlich über die gesamte Website („wo 0.5px hingehört, wurde 1px verwendet“ ist ein Slop-Merkmal). [ZaynHao] [dingyi] – Hinweis: ZaynHao weist darauf hin, dass dies eine persönliche Präferenz ist und speziell für moderne Displays gilt. Für ältere Geräte mit niedriger Auflösung bitte einen Fallback verwenden (siehe Referenzdatei).
• Keine willkürlichen abgerundeten Ecken oder Schatten; keine farbigen vertikalen Linien am linken Rand von Karten. Wenn abgerundete Ecken oder Schatten nötig sind, müssen die Werte zum funktionalen Kontext passen. [ZaynHao] [dingyi]
• Keine übermäßigen Details stapeln: Trennlinien, mehrschichtige Schatten, halbtransparente Farbüberlagerungen, Container mit Rahmen, Karten in Karten. [dingyi] [Xian0063]

Farbe (Details in references/color.md)

• Die Interface-Chrome (Buttons, Karten, Eingabefelder) standardmäßig nur in Schwarz, Weiß und Graustufen; Farbe bleibt Fotos, Illustrationen und Dateninhalten vorbehalten. [ianneo_ai]
• Alle Farben durch Radix UI Colors ersetzen und gemäß deren 12-stufiger Helligkeitsskala verwenden. [ZaynHao] (Die Stufen entsprechen Hintergrund / Komponente / Rahmen / Vollfarbe / Text; siehe Radix-Dokumentation [Allgemeine Praxis])
• 3–5 charakteristische Farben auswählen, die den Ton des Produkts angeben (z. B. aus Lieblingswebsites oder -Apps, wie die Hintergrundfarbe #f6f4f0). [ZaynHao]
• Nicht: Lila/bläuliche Verläufe, Verlaufsbuttons, farbige Icons, jede Karte eine andere Farbe, einzelne farbige Buchstaben. [dingyi] [Xian0063] [ianneo_ai]

Schrift & Typografie (Details in references/typography-cjk.md)

• Nicht mehr als 4 Schriftgrößen, idealerweise 3; Minimum 12px. Wenn die Hierarchie nicht ausreicht, verwende Schriftgewicht, Farbe und Abstand statt zusätzlicher Größen. [ZaynHao] [dingyi]
• Hero-Header nicht übertrieben groß; keine KAPITALCHEN für Zwischenüberschriften, keine kleinen Überschriften über der Hauptüberschrift, keine Kapitelnummern, keine code-ähnlichen Breadcrumbs. [dingyi] [Xian0063]
• Drei abgenutzte Schriftarten vermeiden: Instrument Serif, Space Grotesk, Bricolage Grotesque; keine übermäßige Verwendung von Mono- und Kursivschrift. [dingyi]
• Chinesische font-family: zuerst Westen, dann Osten; auf gängige Systeme abgestimmt, zuletzt sans-serif als Fallback; chinesische Schriftartnamen in Englisch schreiben; Namen mit Leerzeichen in doppelte Anführungszeichen setzen. Fertige Deklarationen siehe Referenzdatei. [ricouii]
• Nicht standardmäßig alles zentriert setzen. [Xian0063]

Text & Inhalt (Details in references/copy-and-content.md)

• Kein Mittelpunkt „·“ als Trennzeichen verwenden; vorhandene entfernen. [ZaynHao] [dingyi]
• Keine redundanten erklärenden Beschreibungstexte; keine Emojis im Fließtext, keine Emoji-Icons über Überschriften. [ZaynHao] [dingyi] [Xian0063]
• Text an die Zielgruppe anpassen: verständlich, aber nicht zu umgangssprachlich; Länge passend zum funktionalen Kontext; keine erfundenen Begriffe. [ZaynHao] [dingyi]
• Keine erfundenen Daten oder Social Proofs (wie „10.000+ zufriedene Kunden“); kein erzwungenes Abonnementformular am Ende. [Xian0063 zitiert Hallmarks Prüfpunkt]
• Diagramme nicht „überdetailliert“ gestalten; überall Tags/Badges sind ebenfalls ein Slop-Merkmal. [dingyi]

Animation & Interaktion (Details in references/motion-and-interaction.md)

• Übergangsanimationen minimal halten; wenn nötig, Grundeinstellung ease-out, ca. 250ms. Scroll-Animationen sparsam einsetzen, Übergänge zurückhaltend. [ZaynHao] [dingyi]
• Eintritt mit ease-out statt ease-in; Dropdown-Menü wächst von der auslösenden Button-Position aus, Startskalierung 0.96 statt 0; Button beim Drücken auf 0.97 skalieren; Toasts stapeln sich, ohne Inhalt zu verdecken; lange Namen abschneiden, große Zahlen abkürzen. [Xian0063 zitiert Emil Kowalski Skills]
• Interaktionen, die den Nutzer zum Innehalten und Nachdenken zwingen, vermeiden; wenn nötig, an Stellen platzieren, an denen der Nutzer ohnehin eine Wahl treffen würde, und die Informationspriorität neu ordnen. [ZaynHao]
• Das kleine Dropdown-Pfeil-Icon auf dem Button separat korrigieren – dingyi hält dies für den „schwerwiegendsten“ und am wenigsten beachteten Detailpunkt auf der Liste. [dingyi]

Komponenten, Assets & Icons (Details in references/libraries-and-skills.md, references/icons-and-detail.md)

• Vorhandene Komponentenbibliotheken / Designsysteme und Tokens priorisieren, nicht das Rad neu erfinden; auf bewährte UX-Muster erfolgreicher Produkte verweisen. [yanliudreamer] [Kubai087]
• Alle Icons in einer Benutzeroberfläche aus demselben Stilsystem; Linienstärke, Radien, Proportionen und visuelles Gewicht einheitlich (z. B. Remix Icon). [yanliudreamer] [Kubai087]
• Assets für Dark-/Night-/Clear-Modi separat behandeln, nicht durch Filter konvertieren. [remixdesigner] [ianneo_ai]

Arbeitsablauf / Workflow

1. Vor dem Codieren (Before coding)

• Klären: Für wen ist das Interface, welches Problem löst es, welches Gefühl soll es vermitteln? Wenn unklar, stelle dem Nutzer Fragen. In dieser Phase noch kein Design. [Xian0063]
• Vorhandene Komponentenbibliotheken und Design-Tokens (Farben / Radien / Abstände / Schriftgrößen) des Projekts lesen; wenn vorhanden, darauf aufbauen; wenn nicht, ein minimales Token-Set erstellen (siehe examples/tokens.css).
• Visuelle Regeln festlegen: 3–5 Markenfarben + Radix Graustufen, ≤4 Schriftgrößen, 4px-Raster, Radius-Hierarchie, 0.5px-Rahmen, chinesischer Schriftart-Stack. [ZaynHao] [Kubai087] [ricouii]

2. Während des Codierens (While coding)

• Vor jedem neuen Element fragen: „Kann ich es weglassen?“: Beschreibungstexte, Trennlinien, Icons, Badges, Schatten, Farben. [yanliudreamer] [ZaynHao]
• Zuerst das vollständige Seitenlayout erstellen, nicht punktuell optimieren. [Xian0063] [yanliudreamer]
• Bei komplexen visuellen Richtungen 3–4 Varianten zum Vergleich erstellen, um den „Prototypen-Sog“ zu vermeiden (wenn bereits viel Code investiert wurde, optimiert man nur noch in eine Richtung). [yanliudreamer]

3. Qualitätskontrolle (Review pass)

• Punkt für Punkt die Checkliste in references/slop-checklist.md durchgehen und Treffer notieren.
• Nach Wichtigkeit sortieren, nur eine Änderung pro Durchgang, bestätigen, dann zur nächsten. [Xian0063]
• Bei Radien-Änderungen eine Liste im Format element: alt -> neu ausgeben, wie von Kubai087 gefordert.
• Screenshots in mindestens 3 verschiedenen Breiten machen (Taste Skills Prüfmethode, [Xian0063] zitiert), und Dark Mode überprüfen.
• Feedback als „Zielbeschreibung“ statt „Pixelvorgabe“ formulieren: Probleme auf dem Screenshot markieren, den gewünschten Effekt beschreiben, die konkreten Werte von der KI berechnen lassen. [Xian0063]

Direkt in KI kopierbare Prompts / Copy-paste prompts

Die vollständige Version (mit Kubai087s englischem Originalprompt und ZaynHaos 10 Prompts) findest du in references/prompts.md. Die am häufigsten verwendete Kombination:

Bitte gestalte dieses Interface nach den Regeln „Ent-KI-en