Frontend-Design
Erstelle hochwertige Frontend-Oberflächen, die generische „KI-Müll“-Ästhetik vermeiden. Echter, funktionierender Code mit außergewöhnlicher Liebe zu ästhetischen Details und kreativen Entscheidungen.
Design-Denken (vor dem Coden)
Verpflichte dich zu einer kühnen ästhetischen Richtung:
- Zweck: Welches Problem löst diese Oberfläche? Wer nutzt sie?
- Ton: Wähle ein Extrem – brutal minimalistisch, maximalistisches Chaos, retro-futuristisch, organisch/natürlich, luxuriös/verfeinert, verspielt/spielzeugartig, redaktionell/magazinartig, brutalistisch/roh, Art Deco/geometrisch, weich/pastellig, industriell/zweckmäßig
- Einschränkungen: Technische Anforderungen (Framework, Leistung, Barrierefreiheit)
- Differenzierung: Was macht diese Oberfläche UNVERGESSLICH? Was ist das eine, an das man sich erinnert?
Wähle eine klare konzeptionelle Richtung und führe sie präzise aus. Kühner Maximalismus und verfeinerter Minimalismus funktionieren beide – der Schlüssel ist Intentionalität, nicht Intensität.
Säulen der Frontend-Ästhetik
Typografie
Wähle Schriftarten, die schön, einzigartig und interessant sind. Vermeide generische Schriftarten wie Arial, Inter, Roboto, Systemschriften. Kombiniere eine markante Anzeigeschrift mit einer verfeinerten Textschrift. Unerwartete, charaktervolle Entscheidungen.
Farbe & Thema
Verpflichte dich zu einer stimmigen Ästhetik. Verwende CSS-Variablen für Konsistenz. Dominante Farben mit starken Akzenten sind besser als zurückhaltende, gleichmäßig verteilte Paletten.
Bewegung
Animationen für Effekte und Mikrointeraktionen. CSS-only für HTML, Motion-Bibliothek für React. Momente mit hoher Wirkung: Ein gut choreografierter Seitenaufbau mit gestaffelten Einblendungen erzeugt mehr Freude als verstreute Mikrointeraktionen. Scroll-Auslöser und Hover-Zustände, die überraschen.
Räumliche Komposition
Unkonventionelle Layouts. Asymmetrie. Überlappungen. Diagonaler Fluss. Gitter durchbrechende Elemente. Großzügiger Negativraum ODER kontrollierte Dichte.
Hintergründe & visuelle Details
Atmosphäre und Tiefe statt Volltonfarben. Verlaufsnetze, Rauschen-Texturen, geometrische Muster, geschichtete Transparenzen, dramatische Schatten, dekorative Rahmen, benutzerdefinierte Cursor, Körnung-Überlagerungen.
NIE verwenden
- Überstrapazierte Schriftfamilien (Inter, Roboto, Arial, Systemschriften)
- Klischeehafte Farbschemata (lila Farbverläufe auf weißem Hintergrund)
- Vorhersehbare Layouts und Komponentenmuster
- Einheitsdesign ohne kontextspezifischen Charakter
Interpretiere kreativ. Kein Design sollte gleich sein. Variiere zwischen hellen und dunklen Themen, verschiedenen Schriftarten, verschiedenen Ästhetiken. Konvergiere NIEMALS bei allgemeinen Entscheidungen über mehrere Generationen hinweg.
Passe die Implementierungskomplexität an die ästhetische Vision an. Maximalistische Designs benötigen aufwändigen Code. Minimalistische Designs benötigen Zurückhaltung, Präzision und sorgfältige Beachtung von Abständen, Typografie und subtilen Details.
Kevins Design-Kontext
Lies wiki/design/design-system.md für aktuelle Design-Tokens, bevor du mit UI-Arbeiten beginnst.
Siehe auch: wiki/design/aesthetic-systems.md für Archetypen der künstlerischen Richtung.
Verwandte Skills
web-design-guidelines– Einhaltung der Vercel Web Interface Guidelinesvercel-react-best-practices– Leistungsoptimierung für Reactfrontend-design-taste– Kevins persönlicher Skill für künstlerische Leitungmodern-web-design– Designtrends und Implementierungsmuster