Was macht Frontend Design?
Erstelle einprägsame Frontend-Oberflächen, die sich durch mutige kreative Entscheidungen von generischer KI-generierter Ästhetik abheben.
Siehe auch:
ui-designfür Grundlagen (Typografie, Farbe, Abstände),web-designfür CSS-Muster.
Installation
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install frontend-design
WAS dieser Skill tut
Leitet die Erstellung visuell unverwechselbarer Web-Oberflächen an:
- Festlegen einer kühnen ästhetischen Richtung vor dem Programmieren
- Bewusste Entscheidungen bei Typografie, Farbe und Raum
- Bewegung und Mikrointeraktionen, die begeistern
- Vermeidung der vorhersehbaren Muster, die KI-generierte UIs kennzeichnen
WANN man ihn verwenden sollte
- Beim Erstellen einer neuen Komponente, Seite oder Webanwendung
- Bei der Entwicklung von Landing Pages, Marketingseiten oder Produkt-UIs
- Beim Redesign von Oberflächen, um sie einprägsamer zu machen
- Bei jeder Frontend-Arbeit, bei der visuelle Wirkung zählt
SCHLAGWÖRTER
Frontend-Design, Web-UI, UI-Design, Landing Page, kreatives UI, Web-Ästhetik, Typografie, visuelles Design, Bewegungsdesign, unverwechselbare Oberfläche
Design-Thinking-Prozess
Bevor du Code schreibst, lege eine ästhetische Richtung fest:
1. Kontext verstehen
- Zweck: Welches Problem löst diese Oberfläche?
- Zielgruppe: Wer nutzt sie und was erwartet sie?
- Randbedingungen: Framework, Leistung, Barrierefreiheitsanforderungen
2. Eine kühne Richtung wählen
Wähle eine extreme Ästhetik – Mittelmäßigkeit ist vergesslich:
| Richtung | Eigenschaften |
|---|---|
| Brutal-minimalistisch | Schroff, essenziell, nichts Überflüssiges |
| Maximalistisches Chaos | Dicht, geschichtet, bewusst überwältigend |
| Retro-futuristisch | Vermischt Vintage-Ästhetik mit moderner Technik |
| Organisch/Natürlich | Weich, fließend, von der Natur inspiriert |
| Luxuriös/Verfeinert | Hochwertige Materialien, subtile Eleganz |
| Verspielt/Spielzeugartig | Lustig, zugänglich, bunt |
| Redaktionell/Magazinartig | Schriftenlastig, rasterbasiert |
| Brutalistisch/Roh | Offene Struktur, Anti-Design |
| Art déco/Geometrisch | Kühne Formen, Symmetrie, Ornamente |
| Industriell/Zweckmäßig | Funktionsorientiert, robust |
3. Das einprägsame Element identifizieren
Was ist das eine Ding, an das sich jemand bei dieser Oberfläche erinnern wird? Stehe dazu.
Ästhetische Richtlinien
Typografie
NIEMALS generische Schriftarten verwenden:
- Arial, Helvetica, system-ui
- Inter, Roboto (außer hochgradig beabsichtigt)
DO wähle unverwechselbare Schriftarten:
- Kombiniere eine charakterstarke Auszeichnungsschrift mit einer eleganten Fließtextschrift
- Entdecke: Space Grotesk, Clash Display, Cabinet Grotesk, Satoshi, General Sans, Instrument Serif, Fraunces, Newsreader
/* Beispiel-Kombination */
--font-display: 'Clash Display', sans-serif;
--font-body: 'Satoshi', sans-serif;
Farbe und Thema
- Verpflichte dich zu einer stimmigen Palette – keine abgesicherten Kompromisse
- Dominant + Akzent ist besser als gleichmäßig verteilte Farben
- CSS-Variablen für Konsistenz verwenden
- Vermeide lila Verläufe auf Weiß (der „KI-Standard“)
:root {
--color-bg: #0a0a0a;
--color-surface: #141414;
--color-text: #fafafa;
--color-accent: #ff4d00;
--color-muted: #666666;
}
Räumliche Komposition
Erwartungen brechen:
- Asymmetrie statt perfekter Balance
- Überlappende Elemente bewusst einsetzen
- Diagonaler Fluss oder unkonventionelle Layouts
- Großzügiger Negativraum ODER kontrollierte Dichte – keine Mitte
- Rasterdurchbrechende Elemente, die Aufmerksamkeit erregen
Bewegung und Interaktion
Konzentriere dich auf Momente mit großer Wirkung:
- Seitenladen: Gestaffelte Einblendungen mit
animation-delay - Scroll-getriggerte Animationen, die überraschen
- Hover-Zustände mit Persönlichkeit
- Bevorzuge CSS-Animationen für HTML; Motion-Bibliothek für React
/* Gestaffelter Eintritt */
.card { animation: fadeUp 0.6s ease-out backwards; }
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
Hintergründe und Atmosphäre
Tiefe und Atmosphäre schaffen:
- Verlaufsnetze und Mehrfarbverläufe
- Rauschen-Texturen und Körnung-Overlays
- Geometrische Muster oder subtile Raster
- Geschichtete Transparenzen
- Dramatische Schatten oder völlige Flachheit
- Benutzerdefinierte Cursor für interaktive Elemente
Implementierungsprinzipien
Komplexität an die Vision anpassen
- Maximalistische Vision → aufwändiger Code mit umfangreichen Animationen
- Minimalistische Vision → Zurückhaltung, Präzision, perfekte Abstände
- Eleganz = die Vision gut umsetzen, nicht mehr hinzufügen
Zwischen Generationen variieren
Sich niemals auf Muster versteifen:
- Helle/dunkle Themen abwechseln
- Bei jeder Iteration andere Schriftfamilien verwenden
- Unterschiedliche ästhetische Richtungen erkunden
- Jedes Design sollte sich einzigartig anfühlen
NIEMALS tun
- NIEMALS generische Schriftfamilien verwenden (Inter, Roboto, Arial, Systemschriften)
- NIEMALS lila Verläufe auf weißen Hintergründen – die „KI-Ästhetik“
- NIEMALS vorhersehbare, von der Stange wirkende Layouts verwenden
- NIEMALS die Design-Thinking-Phase überspringen – verstehen, bevor man baut
- NIEMALS mit sicheren, mittelmäßigen Ästhetiken lavieren – bekenne dich zu einer Richtung
- NIEMALS vergessen, dass unverwechselbares Design unverwechselbaren Code erfordert
- NIEMALS bei den gleichen Mustern zwischen Generationen verharren – bewusst variieren
- NIEMALS Komplexität ohne Zweck hinzufügen – Minimalismus und Maximalismus erfordern beide Absicht