Frontend-Design-Skill-Beispiel

---
name: Modern Frontend Design
description: Create beautiful, unique UI designs that avoid generic AI aesthetics
version: 1.0.0
author: Design Community
platforms:
  - claude-code
  - codex
categories:
  - design
  - frontend
tags:
  - ui
  - ux
  - css
  - tailwind
---

# Modernes Frontend-Design

## Designphilosophie

Erstellen Sie Oberflächen, die sich handgefertigt und absichtsvoll anfühlen, nicht generiert.
Jede Designentscheidung sollte der Benutzererfahrung dienen und die
einzigartige Identität der Marke widerspiegeln.

## Den "KI-Look" vermeiden

Häufige KI-Designmuster, die vermieden werden sollten:
- Generische Gradient-Hintergründe (#667eea bis #764ba2)
- Überstrapazierte Stock-ähnliche Illustrationen
- Überall perfekt symmetrische Layouts
- Lila/Blau/Rosa-Farbkombinationen
- Generische abgerundete Karten mit Schlagschatten

## Visuelle Prinzipien

### Typografie

**Hierarchie ist alles:**
- Maximal eine Display-Schrift, eine Body-Schrift
- Klare Größenprogression (1.25x oder 1.333x Skala)
- Großzügige Zeilenhöhe (1.5-1.75 für Fließtext)
- Absichtliche Laufweite für Überschriften

**Gute Kombinationen:**
- Display: Clash Display / Body: Satoshi
- Display: Cabinet Grotesk / Body: General Sans
- Display: Fraunces / Body: Commissioner

### Farbstrategie

**Von Markenfarben ausgehen, nicht von Trends:**
1. Mit einer Primärfarbe beginnen
2. Eine neutrale Palette hinzufügen (warme oder kühle Grautöne)
3. Maximal eine Akzentfarbe
4. Tönungen/Schattierungen verwenden, nicht zufällige Farben

**Beispielpalette:**
- Primär: Tiefes Teal #0F766E
- Neutrals: Slate-Skala
- Akzent: Warmes Amber #F59E0B
- Hintergrund: Gebrochenes Weiß #FAFAF9

### Abstände und Layout

**Konsistenter Rhythmus:**
- 8px-Rastersystem verwenden
- Großzügiger Weißraum (mehr als Sie denken)
- Asymmetrie schafft visuelles Interesse
- Inhalte atmen lassen

**Raster-Richtlinien:**
- Maximale Inhaltsbreite: 1200-1440px
- Großzügige Seitenränder (5-10% Viewport)
- Komponentenabstände: 24px, 48px, 96px

### Komponenten

**Karten:**
- Subtile Schatten (nicht box-shadow: 0 4px 6px)
- Erwägen Sie keinen Schatten + Rahmen stattdessen
- Mikro-Interaktionen beim Hover
- Vermeiden Sie überall perfekt abgerundete Ecken

**Buttons:**
- Klare visuelle Hierarchie (primär, sekundär, ghost)
- Ausreichendes Padding (mindestens 12px 24px)
- Hover-Zustände, die sich reaktionsschnell anfühlen
- Erwägen Sie Pillenform ODER leichte Abrundung, nicht beides

**Formulare:**
- Große Touch-Ziele (mindestens 44px)
- Klare Fokus-Zustände
- Inline-Validierungsfeedback
- Hilfreicher Platzhaltertext

## Moderne CSS-Techniken

### Layout

\`\`\`css
/* Fluid Container mit maximaler Breite */
.container {
  width: min(90%, 1200px);
  margin-inline: auto;
}

/* Responsives Raster ohne Media Queries */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}
\`\`\`

### Typografie

\`\`\`css
/* Fluid Typografie */
.heading {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.body {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
}
\`\`\`

### Bewegung

\`\`\`css
/* Sanfte, absichtsvolle Übergänge */
.interactive {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.interactive:hover {
  transform: translateY(-2px);
}
\`\`\`

## Dos und Don'ts

### Do
- Mit Inhalt beginnen, dann darum herum designen
- Echten Text verwenden, nicht Lorem Ipsum
- Auf echten Geräten testen
- Dark Mode von Anfang an berücksichtigen
- Leistung priorisieren

### Don't
- Mehr als 2-3 Schriftgewichte verwenden
- Alles animieren
- Barrierefreiheit ignorieren
- Dribbble-Shots direkt kopieren
- Einfache Oberflächen überkomplizieren

## Beispiele

### Hero-Sektion - Gut
Sauberes, fokussiertes Layout mit klarer Hierarchie und absichtsvollem Abstand.
Einzelner Call-to-Action, minimale Ablenkungen, authentische Bilder.

### Hero-Sektion - Schlecht
Gradient-Hintergrund, mehrere CTAs, die um Aufmerksamkeit konkurrieren,
Stock-Fotos, zu viele dekorative Elemente.

## Tailwind-Empfehlungen

\`\`\`jsx
// Gut: Absichtsvoll, zugänglich
<button className="
  bg-teal-700 text-white
  px-6 py-3 rounded-lg
  font-medium
  hover:bg-teal-800
  focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2
  transition-colors
">
  Jetzt starten
</button>

// Vermeiden: Generischer KI-Stil
<button className="
  bg-gradient-to-r from-purple-600 to-pink-600
  px-4 py-2 rounded-full
  shadow-lg hover:shadow-xl
  text-white font-bold
">
  Hier klicken!
</button>
\`\`\`