Was macht Design-Excellenz?
Sorge dafür, dass KI-gebaute Apps handgemacht aussehen. Keine generischen Vorlagen. Keine offensichtlichen Muster.
<core_principle>
Der Handwerksstandard
Wenn jemand erkennt, dass es KI-generiert wurde, haben wir versagt.
Gutes Design ist unsichtbar. Nutzer sollten spüren, dass die App professionell ist, nicht, dass sie einer Vorlage folgt. </core_principle>
<color_system>
Farbphilosophie
Das Problem mit KI-Farbwahlen
KI neigt dazu:
- Lila Verläufe auf Weiß (Lovable-Standard)
- Übersättigte Akzentfarben
- Zu viele Farben in einem Interface
- Verläufe, wo einfarbige Farben besser funktionieren
Unser Ansatz: Zurückhaltung
Basis-Palette (Standard)
/* Verwende Tailwinds Slate-Skala für Neutrale */
--background: slate-50 /* Seitenhintergrund */
--surface: white /* Karten, Modals */
--border: slate-200 /* Trennlinien, Rahmen */
--text-primary: slate-900 /* Überschriften */
--text-secondary: slate-600 /* Fließtext */
--text-muted: slate-400 /* Platzhalter, Hinweise */
Akzentfarben (Wähle EINE pro App)
/* Standard: Blau (professionell, vertrauenswürdig) */
--accent: blue-600
--accent-hover: blue-700
--accent-light: blue-50
/* Alternativ nach App-Typ: */
/* Finanzen/Banking → Grün (Geld) */
/* Gesundheit/Wellness → Blaugrün (Ruhe) */
/* Essen/Restaurant → Orange (Appetit) */
/* Kreativ/Design → Lila (Kreativität) */
/* Dringend/Alarm → Rot (Aufmerksamkeit) */
Regeln
- EINE Akzentfarbe pro App, keine Ausnahmen
- Akzente sparsam einsetzen – nur Buttons, Links, Highlights
- Niemals Verläufe auf primären Buttons
- Hintergrund ist weiß oder fast weiß, nicht farbig
- Dark Mode: richtig invertieren, nicht einfach grau machen </color_system>
<typography_system>
Typografie-Regeln
Der Schriftenstapel
/* Überall nicht Inter vorgeben – Systemschriften verwenden */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Das wirkt auf jeder Plattform nativ */
Schriftskala (Tailwind-Klassen)
Seitentitel: text-2xl font-semibold (24px)
Abschnittstitel: text-lg font-medium (18px)
Kartentitel: text-base font-medium (16px)
Fließtext: text-sm (14px)
Klein/Bildtext: text-xs text-slate-500 (12px)
Anti-Patterns
❌ font-bold auf allem verwenden
❌ Zu viele Schriftgrößen in einer Karte mischen
❌ GROSSBUCHSTABEN für lange Texte
❌ Fließtexte zentrieren
❌ Reines Schwarz (#000) verwenden – stattdessen slate-900
Gute Muster
✅ Überschriften: semibold oder medium, niemals regular ✅ Fließtext: reguläre Stärke, gute Zeilenhöhe (1.5-1.6) ✅ Hierarchie beibehalten: max. 3 Größen pro Komponente ✅ Text meist linksbündig (außer Überschriften in zentrierten Layouts) </typography_system>
<spacing_system>
Abstände und Layout
Abstandsskala
Tailwinds Standardskala konsequent verwenden:
4 (1rem/16px) - Kleine Lücken, Inline-Elemente
6 (1.5rem/24px) - Mittlere Lücken, zwischen Komponenten
8 (2rem/32px) - Große Lücken, zwischen Abschnitten
12 (3rem/48px) - XL-Lücken, Seitenabschnitte
Seitenlayout
// Standard-Seitencontainer
<div className="p-4 md:p-6 lg:p-8">
{/* Seitentitel */}
<h1 className="text-2xl font-semibold mb-6">Dashboard</h1>
{/* Inhaltsabschnitte mit konsistenten Abständen */}
<section className="mb-8">
{/* Abschnittsinhalt */}
</section>
</div>
Karteneigene Abstände
<Card>
<CardHeader className="pb-4"> {/* Standard-Padding reduzieren */}
<CardTitle>Titel</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{/* Inhalt mit vertikalen Lücken */}
</CardContent>
</Card>
Anti-Patterns
❌ Inkonsistentes Padding (p-3 hier, p-5 dort) ❌ Zu wenig Weißraum (beenegtes Gefühl) ❌ Zu viel Weißraum (zusammenhangloses Gefühl) ❌ Unterschiedliche Lücken für gleichrangige Elemente </spacing_system>
<animation_system>
Bewegung und Animation
Philosophie
Animation sollte:
- Natürlich wirken, nicht auffällig
- Feedback geben, nicht ablenken
- Schnell sein (150-300ms), nicht langsam
- Dezent sein, nicht dramatisch
Standard-Übergänge
// Hover-Zustände – transition-colors oder transition-all verwenden
<div className="transition-colors hover:bg-slate-50">
// Karten-Hover – dezentes Anheben
<Card className="transition-shadow hover:shadow-md">
// Button-Hover – in shadcn integriert, nicht überschreiben
<Button>Bereits animiert</Button>
Framer Motion-Muster
// Seitenübergänge
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
// Listen-Staffelung
<motion.div
variants={{
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.1 }
}
}}
initial="hidden"
animate="show"
>
{items.map(item => (
<motion.div
key={item.id}
variants={{
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0 }
}}
>
{item.content}
</motion.div>
))}
</motion.div>
// Mikro-Interaktion – Button-Tippen
<motion.button whileTap={{ scale: 0.98 }}>
Klick mich
</motion.button>
Animations-Timing
- Hover-Effekte: 150ms
- Kleine Übergänge: 200ms
- Seitenübergänge: 300ms
- Komplexe Animationen: max. 400-500ms
Anti-Patterns
❌ Bounce-Effekte (wirkt billig) ❌ Langsame Animationen (>500ms wirkt träge) ❌ Animation auf jedem Element (überwältigend) ❌ Überall rotierende Ladeanzeigen (stattdessen Skeleton verwenden) ❌ Dramatische Eingangsanimationen </animation_system>
<component_patterns>
Komponenten-Entwurfsmuster
Karten
// Saubere Karte – keine übermäßige Dekoration
<Card className="bg-white border shadow-sm">
<CardContent className="p-4">
{/* Inhalt */}
</CardContent>
</Card>
// NICHT: rounded-3xl, schwere Schatten, Verlaufsrahmen
Buttons
// Primäre Aktion
<Button>Speichern</Button>
// Sekundäre Aktion
<Button variant="outline">Abbrechen</Button>
// Destruktive Aktion
<Button variant="destructive">Löschen</Button>
// Symbol-Button
<Button variant="ghost" size="icon">
<Settings className="h-4 w-4" />
</Button>
// NICHT: Verlaufsbuttons, 3D-Effekte, Symbole in primären Buttons (meistens)
Formulare
// Sauberes Formular-Layout
<div className="space-y-4">
<div className="space-y-2">
<Label>Name</Label>
<Input placeholder="Name eingeben" />
</div>
<div className="space-y-2">
<Label>E-Mail</Label>
<Input type="email" placeholder="[email protected]" />
</div>
</div>
// NICHT: Inline-Beschriftungen, schwebende Labels (außer gewünscht), Symbole in Eingabefeldern
Tabellen
// Saubere Tabelle
<Table>
<TableHeader>
<TableRow className="bg-slate-50">
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead className="text-right">Aktionen</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow className="hover:bg-slate-50">
<TableCell>Max Mustermann</TableCell>
<TableCell><Badge>Aktiv</Badge></TableCell>
<TableCell className="text-right">
<Button variant="ghost" size="sm">Bearbeiten</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
// NICHT: Zebrastreifen (veraltet), schwere Rahmen, zentrierter Inhalt
</component_patterns>
<anti_patterns_detail>
KI-generierte Warnsignale
Der „Lovable-Look“ (Vermeiden)
- Lila/violett als Primärfarbe
- Verlaufshintergründe auf weißen Karten
- rounded-3xl auf allem
- Emojis in Überschriften
- „Willkommen zurück, Benutzer! 👋“
- Generische Stockfoto-artige Illustrationen
Der „Bootstrap-Look“ (Vermeiden)
- Schwere Schlagschatten
- Runde Pillen-Buttons
- Blaue Links auf allem
- Kartendecks mit gleicher Höhe
- Jumbotron-artige Überschriften
Der „Material-Look“ (Vermeiden, außer gewünscht)
- Schwebende Aktionsbuttons (FAB)
- Erhöhte Karten überall
- Welligkeitseffekte auf allem
- Hamburger-Menü auf dem Desktop
Was lässt es „handgemacht“ aussehen?
- Zurückhaltung – Nicht jede Funktion wird hervorgehoben
- Hierarchie – Klare primäre, sekundäre, tertiäre Ebenen
- Weißraum – Luft zum Atmen
- Konsistenz – Gleiche Muster wiederholt
- Subtile Details – Kleine Akzente, die nicht schreien
- Echter Inhalt – Keine Platzhaltertexte sichtbar </anti_patterns_detail>
<review_checklist>
Design-Review-Checkliste
Farbcheck
- Nur EINE Akzentfarbe verwendet
- Keine Verläufe auf weißen Hintergründen
- Kein reiner schwarzer Text
- Ausreichender Kontrast für Barrierefreiheit
Typografie-Check
- Maximal 3 Schriftgrößen pro Komponente
- Korrekte Hierarchie (semibold Titel, regular Fließtext)
- Keine GROSSBUCHSTABEN-Absätze
- Zeilenhöhe lesbar (1.5+)
Abstandscheck
- Konsistentes Padding überall
- Genug Weißraum zwischen Abschnitten
- Inhalt fühlt sich nicht beengt an
- Mobile Abstände sind proportional
Animationscheck
- Übergänge sind dezent (150-300ms)
- Keine Bounce/Feder-Effekte
- Laden verwendet Skeleton, nicht Spinner
- Hover-Zustände geben Feedback
Komponenten-Check
- Karten haben keine übermäßige Dekoration
- Buttons folgen der Hierarchie (primär/sekundär)
- Formulare sind sauber angeordnet
- Tabellen sind lesbar und interaktiv
Abschlusscheck
- Würde ein Nutzer erkennen, dass dies KI-gemacht ist? (Sollte NEIN sein)
- Sieht es wie ein echtes Produkt aus? (Sollte JA sein)
- Ist es konsistent mit modernen SaaS-Apps? (Sollte JA sein) </review_checklist>