---
name: webdesign-skill
description: Nutze diesen Skill für Frontend-Design, Webdesign, Layout-Überarbeitung, responsive Seiten, Komponentenstil, UI-Verfeinerung und Seitenaufbau in Kaffeewelt. Verwende ihn auch dann, wenn der Nutzer eine Seite hochwertiger, ruhiger, präziser oder weniger generisch haben will.
---

# Frontend-Design-Skill

## 1. Frontend-Design-Skill
Nutze diesen Skill für die Umsetzung von Webdesign in sauberes, responsives Frontend. Arbeite mobile-first. Halte Layout, Typografie, Abstände und Komponenten konsistent. Verwende semantisches HTML, klare CSS-Strukturen und möglichst wenig unnötige visuelle Effekte. Das Ergebnis soll hochwertig, ruhig und präzise wirken, nicht generisch.

### Regeln
- Arbeite zuerst die Seitenstruktur aus, dann Komponenten, dann Feinschliff.
- Nutze maximal 1 Primärakzentfarbe plus neutrale Flächen.
- Links standardmäßig linksbündig, nicht alles zentrieren.
- Nutze eine 4px-basierte Spacing-Logik.
- Achte auf gute Lesbarkeit, klare Hierarchien und saubere Ausrichtung.
- Keine Standard-KI-Muster wie 3 gleiche Feature-Karten mit Icon-Kreis und Marketingfloskeln.
- Buttons, Inputs, Cards und Navigation müssen visuell zusammenpassen.
- Komponenten sollen wiederverwendbar und konsistent benannt sein.

### Ausgabeformat
- Liefere zuerst eine kurze Struktur der Seite.
- Danach die Komponentenliste.
- Danach den finalen HTML/CSS/JS-Code.
- Nenne zum Schluss offene Designentscheidungen oder Annahmen.

## 2. Responsive-Checkliste
Prüfe jede Ausgabe systematisch auf Responsive-Verhalten.

### Breakpoints
- Mobile: 375px
- Tablet: 768px
- Desktop: 1280px

### Prüfpunkte
- Kein horizontaler Scroll.
- Alle Touch-Ziele mindestens 44x44px.
- Navigation auf Mobile sinnvoll reduziert.
- Grids kollabieren sauber auf 1 Spalte.
- Bilder und Medien skalieren korrekt.
- Überschriften umbrechen sauber.
- Buttons und Formulare bleiben bedienbar.
- Abstände bleiben proportional.
- Hero-Bereich nimmt auf Mobile nicht den ganzen Screen unbrauchbar ein.
- Tabellen oder Vergleichsbereiche werden gestapelt oder scrollbar gelöst.

### Abschlussfrage an Codex
Prüfe nach der Umsetzung explizit: Was bricht auf 375px zuerst, was wirkt auf 1280px zu leer, und was ist die kleinste sinnvolle Korrektur?

## 3. Styleguide-Datei
Diese Vorgaben gelten projektweit.

### Designrichtung
- Modern, ruhig, präzise.
- Wenig Farben, viel Hierarchie über Typografie, Abstand und Flächen.
- Keine übertriebene Glows, Neon-Verläufe oder zufällige Dekoformen.

### Farben
- Hintergrund: warmes oder neutrales Off-White.
- Text: dunkles Grau statt reines Schwarz.
- Primärfarbe: ein kontrollierter Akzent, z. B. Teal, Blaugrün oder gedecktes Blau.
- Linien und Borders: sehr subtil.

### Typografie
- Maximal 2 Schriftfamilien.
- Klare Trennung zwischen Display und Body.
- Body standardmäßig 16px.
- Kleine UI-Texte nie unter 12px.
- Wenige Größenstufen, dafür klare Gewichtung.

### Abstände
- 4, 8, 12, 16, 24, 32, 48, 64 als Hauptstufen.
- Sections großzügiger als Komponenten.
- Keine zufälligen Pixelwerte.

### Komponentenstil
- Cards: leichte Tiefe oder subtile Border.
- Buttons: klar, solide, ohne harte Verläufe.
- Inputs: ruhig, gut lesbar, mit klarer Fokusmarkierung.
- Navigation: einfach, verständlich, ohne überladene Effekte.

## 4. Referenzscreenshots
Nutze Referenzscreenshots nicht zum Kopieren, sondern zur Analyse.

### Was aus Screenshots extrahiert werden soll
- Layout-Rhythmus
- Verhältnis von Text zu Weißraum
- Hierarchie der Headlines
- Verhalten von Cards, CTAs und Navigation
- Mobile- und Desktop-Unterschiede
- Tonalität des Designs

### Anleitung für Codex
Wenn Screenshots vorliegen, beschreibe zuerst:
1. Welche Layoutlogik sichtbar ist.
2. Welche 3 Gestaltungsprinzipien dominieren.
3. Welche Komponenten übernommen werden können.
4. Was bewusst nicht übernommen werden soll.

Dann erst implementieren.

## 5. Kombinierter Prompt
Nutze den Frontend-Design-Skill, die Responsive-Checkliste und den Styleguide gemeinsam. Analysiere bereitgestellte Referenzscreenshots zuerst, leite daraus Layout- und Stilregeln ab und setze dann eine responsive Seite um. Arbeite mobile-first, vermeide generische KI-Layouts und prüfe das Ergebnis abschließend für 375px, 768px und 1280px.