Frontend-Design-Skill

Erstelle unverwechselbare, produktionsreife Frontend-Oberflächen, die kein Mensch als KI-generiert identifizieren würde. Jede Ausgabe muss aussehen, als wäre sie von einer teuren Designagentur gestaltet worden – kühn, intentional und einprägsam.

Design-Thinking-Protokoll

Bevor du IRGENDEINEN Code schreibst, fülle diese Checkliste aus. Überspringe keine Schritte.

1. Zweck – Welches Problem löst diese Oberfläche? Wer nutzt sie?

2. Ton – Wähle EINE extreme ästhetische Richtung. Dies ist verpflichtend – fahre niemals ohne eine benannte Richtung fort.

Wähle aus (oder erfinde eine eigene mit gleicher Spezifität):

Brutal minimal | Maximalistisches Chaos | Retro-futuristisch | Organisch/natürlich
Luxus-Editorial | Brutalistisch/roh | Art déco/geometrisch | Weich/pastellig
Industriell/utilitaristisch | Neo-Memphis | Schweizer Modernismus | Japanisch minimal
Retrofuture-Terminal | Nordische Ruhe | Tokio-Neon | Wüstenwärme

Wenn du den Ton nicht in zwei Wörtern benennen kannst, hast du dich nicht entschieden. „Sauber modern" ist KEIN Ton – es ist die Abwesenheit eines solchen und produziert KI-Schrott.

3. Einschränkungen – Framework (HTML/React/Vue/Svelte), Browserunterstützung, Performance-Budget, vorhandenes Brand Kit.

4. Unterscheidbarkeit – Was ist DAS EINE, woran man sich auf dieser Seite erinnern wird? Benenne es explizit vor dem Codieren.

Das Anti-Schrott-Manifest

Diese Regeln existieren, weil LLMs zu statistisch durchschnittlichen Ergebnissen konvergieren – angenehm, nicht anstößig und völlig vergessbar. Die folgenden Muster sind nicht deshalb auf der schwarzen Liste, weil sie inhärent schlecht sind, sondern weil ihr unterschiedsloser Einsatz das #1-Signal für KI-generiertes Design ist.

Schriftarten auf der schwarzen Liste

Verwende diese NIEMALS als primäre Darstellungsschriftart ohne explizite Benutzeranfrage:

Schriftart	Warum	Verwende stattdessen
Inter	#1 KI-Standard (~90% der LLM-UIs)	Satoshi, General Sans oder eine Serifenschrift wie Fraunces
Roboto	#2 KI-Standard (Android/Chrome-Ökosystem)	Outfit, Plus Jakarta Sans (nur als Fließtext), Karla
Arial / system-ui	Fehlen einer typografischen Entscheidung	Jede intentionale Schriftartauswahl
Open Sans	Legacy-KI-Standard (Trainingsdaten vor 2022)	Source Sans 3, Nunito (nur Fließtext)
Poppins	Figma-Vorlagen übernutzt	Figtree, Outfit, DM Sans (nur Fließtext)
Space Grotesk	War einzigartig, jetzt KI-„schrullig-sicherer" Standard	Syne, Anybody, Chakra Petch
Montserrat	Übernutzte geometrische Sans	Josefin Sans, Barlow, Jost

Regel: Wenn eine Schriftart zu den Top-20 der Google Fonts nach Beliebtheit gehört, begründe sie explizit oder lehne sie ab. Lies references/typography-pairings.md für 20+ kuratierte Paarungen, geordnet nach Ton.

Farben auf der schwarzen Liste

Verwende diese NIEMALS als primären Akzent ohne explizite Absicht:

Farbe	Hex	Warum
Tailwind Indigo-500	`#6366f1`	Die Ur-KI-Farbe. Zurückverfolgbar auf eine einzelne Entscheidung in der Tailwind-Dokumentation.
Tailwind Violett-500	`#8b5cf6`	Zweithäufigster KI-Akzent.
Tailwind Lila-500	`#a855f7`	Gradientenendpunkt für Indigo→Lila.
Tailwind Blau-500	`#3b82f6`	Die „Enterprise"-KI-Alternative zu Lila.
Der KI-Gradient	`from-indigo-500 to-purple-600`	Der kanonische KI-Gradient und all seine Varianten.
Flache weiße Hintergründe	`#ffffff`, `#f9fafb`, `#f8fafc`	KI erkundet niemals dunkle Themen, Erdtöne oder atmosphärische Tiefe.

Regel: Wenn deine Palette durch npx create-next-app + Tailwind-Standards reproduziert werden könnte, fang von vorne an. Lies references/color-systems.md für 15+ kuratierte Paletten.

Layouts auf der schwarzen Liste

Bringe NIEMALS diese Strukturen hervor:

Die 9-Abschnitts-KI-Vorlage: Hero → Logos-Bar → 3-Spalten-Features → „So funktioniert's"-Schritte → Testimonial-Karussell → Preistabelle → FAQ-Akkordeon → CTA-Banner → 4-Spalten-Footer. Diese exakte Abfolge wird auf jeder KI-generierten SaaS-Seite reproduziert.
Symmetrische 3-Spalten-Kartenraster als primäre Inhaltsstruktur.
Zentriert alles – text-center in jedem Abschnitt, mx-auto in jedem Container, keine räumliche Spannung.
Karten für alles – rounded-xl shadow-lg p-6 auf jedem Inhaltsblock, unabhängig davon, ob er eine Kartenbehandlung benötigt.

Regel: Jedes Layout muss mindestens EIN gitterbrechendes Element haben: Asymmetrie, Überlappung, randloser Vollflug, diagonaler Fluss oder unerwarteter negativer Raum. Lies references/layout-patterns.md für Drahtgittermodelle.

Animationen auf der schwarzen Liste

fade-in-up auf jedem Element via IntersectionObserver (die universelle KI-Scroll-Enthüllung)
hover:-translate-y-1 hover:shadow-xl auf jeder Karte
transition-all duration-300 wahllos angewendet
Gradienten-Farbzyklus-Animationen
Generisches Parallax auf allem

Regel: Maximal 2-3 beabsichtigte Bewegungen pro Seite. Jede muss der Hierarchie oder Atmosphäre dienen. Lies references/motion-recipes.md für 12+ unverwechselbare Alternativen.

Texte auf der schwarzen Liste

Schreibe niemals diese Phrasen:

„Revolutionieren Sie Ihren Workflow" / „Transformieren Sie die Art und Weise, wie Sie..."
„Entfesseln Sie die Kraft von..." / „Nahtlos integrieren..."
„Entwickelt für die moderne..." / „Steigern Sie Ihre..."
„Bringen Sie Ihr X auf die nächste Stufe" / „Alles, was Sie brauchen, um..."
„Verabschieden Sie sich von [Schwachstelle]" / „Angetrieben von hochmoderner..."

Verbotene Wörter (es sei denn, sie zitieren den Benutzer): nahtlos, nutzen, hochmodern, robust, skalierbar, befähigen, game-changer, nächste Stufe, ganzheitlich, innovativ, state-of-the-art, eintauchen

Textregel: Überschriften tragen spezifische Bedeutung. Ein kurzer unterstützender Satz pro Abschnitt. „Wenn das Löschen von 30% die Seite verbessert, lösche weiter."

Komponenten auf der schwarzen Liste

Gradient-CTA-Buttons (bg-gradient-to-r from-indigo-500 to-purple-600)
Unscharf hintergrundierte Navigationsleiste (backdrop-blur-md bg-white/80) als Standard
Icon + Überschrift + Absatz im 3-Spalten-Raster (der universelle Feature-Block)
Schwebende Abzeichen/Pillen auf Hero-Bildern
Testimonial-Karussells mit runden Avataren und Sternbewertungen
„Vertrauen von"-Logo-Wolken in horizontalen Streifen
Generische Preistabellen (Free / Pro / Enterprise mit „Am beliebtesten"-Abzeichen)

Typografie-System

Jedes Projekt muss ein bewusstes Schriftsystem etablieren:

Darstellungs- + Fließtext-Paarung – Zwei unterschiedliche Schriftfamilien. Darstellung = charaktervoll, Fließtext = lesbar. Niemals dieselbe Schriftart für beide.
CSS-Variablen – --font-display, --font-body, --font-accent (optional monospace)
Modulare Skala – Wähle ein Verhältnis (1,25 große Terz, 1,333 perfekte Quarte, 1,5 übermäßige Quarte) und wende es konsequent an.
Gewichtskontrast – Verwende mindestens 3 Strichstärken mit intentionalem Kontrast (z.B. 300 Fließtext, 600 Zwischenüberschriften, 900 Darstellung).
Größendramatik – Darstellungsüberschriften sollten 3x+ der Fließtextgröße sein. Preisträger verwenden 12:1-Verhältnisse (180px Darstellung / 14px Fließtext). KI-Standard ist ein verhaltenes 4:1-Verhältnis.

Siehe references/typography-pairings.md für 20+ kopierfertige Paarungen, geordnet nach ästhetischem Ton.

Farbsystem

Dominant + Akzent-Modell – Eine dominante Farbfamilie mit einem scharfen kontrastierenden Akzent. Gleichmäßig verteilte Paletten sind zurückhaltend.
CSS-Custom-Properties – Definiere mindestens: --color-surface, --color-text, --color-accent, --color-accent-contrast, --color-muted.
Atmosphärische Hintergründe – Niemals flach weiß. Verwende subtile Verläufe, Rauschtexturen oder getönte Oberflächen. Der Hintergrund muss Tiefe haben.
Dunkel/Hell als bewusste Wahl – Wähle basierend auf dem Ton eine primäre Option aus. Füge den dunklen Modus nicht als Feature-Liste-Option hinzu.

Siehe references/color-systems.md für 15+ kuratierte Paletten mit CSS-Variablen-Blöcken.

Räumliche Komposition

Gitterbrechend ist Pflicht – Mindestens ein Element pro Seite muss das Gitter brechen: Überlappung, Überlauf, asymmetrische Platzierung, diagonaler Fluss.
Asymmetrische Layouts – 7/12 + 5/12 Spaltenteilungen, variierende Dachrinnen (24px vs 64px), ungleichmäßige Abstände.
Randlose Hero-Bereiche – Bildkante-zu-Bildkante ohne geerbte Dachrinnen oder gemeinsame Max-Breiten-Beschränkungen.
Negativer Raum als Design – Großzügiger Weißraum ist intentional, nicht leer. Asymmetrischer Weißraum (120px oben, 80px unten) fügt Rhythmus hinzu.
„Jeder Abschnitt hat eine Aufgabe" – Eine Überschrift, ein unterstützender Satz, ein Zweck. Kein Abschnitt versucht, zwei Dinge zu tun.
Karten nur für Interaktionen – Wenn ein Inhalt keine Umrandung/Schatten benötigt, um zu funktionieren, braucht er keine Karte.

Siehe references/layout-patterns.md für 6 Landingpage- + 3 Dashboard-Layout-Drahtgittermodelle mit CSS-Grid-Code.

Bewegung & Animation

Liefere genau 2-3 beabsichtigte Bewegungen:

Ein Hero-Eingang – Skalieren + Einblenden, Clip-Pfad-Enthüllung, Text-Split-Staffelung oder Counter-Scroll-Parallax.
Ein scrolleffektgebundenes Element – Abschnitts-Enthüllung, festes Parallax-Bild, fortschrittsgesteuerte Transformation oder horizontales Scroll-Galerie.
Eine Hover/Enthüllungs-Interaktion – Magnetischer Cursor, Karten-Perspektiv-Kippung, Unterstreichungs-Expansion oder Farbfeldverschiebung.

Implementierung: Nur CSS für einfaches HTML. Framer Motion für React. Integrierte Transitionen für Vue/Svelte. Konzentriere dich auf wirkungsvolle Momente – ein gut orchestrierter Seitenaufbau übertrumpft verstreute Mikrointeraktionen.

Siehe references/motion-recipes.md für 12+ Kopier-Rezepte mit CSS- und Framer-Motion-Versionen.

Hintergrund & Textur

Verwende niemals standardmäßig flache Volltonfarben. Schaffe Atmosphäre:

SVG-Rauschen – feTurbulence-Filter für organische Kornstruktur über Verläufen.
Verlaufsnetz – 4-6 überlappende radial-gradient-Angaben für Tiefe (nicht linear-gradient).
Geometrische Muster – Punktgitter, Liniengitter, Kreuzschraffur via CSS radial-gradient oder linear-gradient.
Filmkorn – Pseudo-Element mit Rauschtextur bei 3-5% Deckkraft.
Langsame, sich bewegende Umgebungsanimation – Aurora/Blob-Keyframes mit 30s+ Dauer im Hintergrund.

Siehe references/background-textures.md für Kopier-Einfügen-SVG- und CSS-Rezepte.

Die „Menschliche Note" – Was teure Designer hinzufügen

Füge in jedem Projekt mindestens 2 dieser Elemente hinzu:

Benutzerdefinierter Cursor – Runder Div (20px), der der Maus mit 150ms Lerp-Verzögerung folgt und beim Hover expandiert.
Asymmetrischer Weißraum – Ungleichmäßige Abstände (120px 8% 80px 12%), variierte Abschnittsränder.
Ein regelfreies Element – Eine um 2° gedrehte Karte, ein Bild, das über den Viewport läuft, ein umgekehrter Farbabschnitt.
Typografie, die auf Inhalt reagiert – Zitatblöcke in Dachrinnen, Initialen, Randindizes, Gewichtsskalierung mit Bedeutung.
Scroll-ausgelöste Farbverschiebungen – Die Hintergrundfarbe des Abschnitts ändert sich, um dem emotionalen Ton des Inhalts zu entsprechen.
Variable Schriftarten-Animation – font-variation-settings animiert das Gewicht beim Scrollen oder Hover.

Protokolle für Ausgabetypen

Landingpage

Struktur: Hero → Unterstützung → Detail → Finaler CTA (4 Abschnitte, nicht 9)

Hero: Randlos, Marke + Überschrift + ein Satz + CTA + dominantes visuelles Element. Keine schwebenden Abzeichen, keine mehreren CTAs.
Unterstützung: Ein konkretes Feature, Angebot oder Nachweispunkt.
Detail: Atmosphäre, Workflowtiefe oder Geschichte.
Finaler CTA: Einzelne Konvertierungsaktion.
Viewport-Budget: Header + Hero-Inhalt müssen in den anfänglichen Viewport passen.

Dashboard / App-UI

Befolge die „Linear-artige Zurückhaltung":

Ruhige Oberflächenhierarchie mit starker Typografie und Abständen.
Minimale Farbpalette (maximal 2-3 Farben).
Dichte, aber lesbare Informationsarchitektur.
Seitenleiste (240px) + Hauptbereich + optionaler Inspektor (320px) via CSS Grid grid-template-areas.
Einzelne klare Akzentfarbe. Keine Kartenmosaike, keine dekorativen Verläufe hinter der Produkt-UI.

Komponentenbibliothek

Lege zuerst die Design-Tokens fest (CSS-Custom-Properties).
Zeige dunkle + helle Varianten jeder Komponente.
Atomar: Tokens → Elemente → Komponenten → Kompositionen.
Jede Komponente muss isoliert und in Komposition funktionieren.

Poster / Marketing

Einzelner Brennpunkt, dramatische Typografie-Skala (100px+ Überschriften).
Hochkontrastfarbe, Layout in Druckqualität.
Gestalte ein digitales Poster, keine Webseite mit Posterinhalt.

Web-App

Funktionale Eleganz: tastaturorientiert, klare Informationshierarchie.
Zustandsverwaltung in der UI sichtbar (Lade-, Leer-, Fehler-, Erfolgszustände).
Dichte Informationsdarstellung, kein weitläufiges Marketing-Layout.

Verifikations-Litmustest

Bevor du IRGENDEINE Ausgabe lieferst, überprüfe dich selbst anhand dieser Fragen. Wenn mehr als 2 Antworten „nein" lauten, iteriere, bevor du sie dem Benutzer zeigst.

Ist die Marke/das Produkt im ersten Viewport unverkennbar?
Gibt es EINEN starken visuellen Anker (nicht mehrere konkurrierende Elemente)?
Kann die Seite durch Überfliegen der Überschriften verstanden werden?
Hat jeder Abschnitt GENAU EINE Aufgabe?
Sind Karten tatsächlich notwendig oder sind sie ein fauler Standard?
Hat das Design eine benennbare ästhetische Richtung (nicht „sauber modern")?
Würde es hochwertig aussehen, wenn alle dekorativen Schatten entfernt würden?
Hat es mindestens ein Element, das einen Designer sagen ließe: „Darauf wäre ich nicht gekommen"?
Sieht es wie IRGENDEINE andere KI-generierte Seite aus? Wenn ja, gestalte es neu.

Eine detaillierte 20-Punkte-Bewertungsmatrix findest du in references/anti-slop-checklist.md.

Technologie-Anpassung

Framework	Typografie	Bewegung	Styling
Reines HTML/CSS	Google Fonts `@import`	CSS `@keyframes` + `animation-timeline`	CSS Custom Properties + Grid/Flexbox
React / Next.js	`next/font` oder Google Fonts	Framer Motion (`motion`-Komponenten)	Tailwind (stark angepasste Config) oder CSS Modules
Vue	Google Fonts in `index.html`	`<Transition>`-Komponenten	Tailwind (angepasst) oder Scoped Styles
Svelte	Google Fonts in `app.html`	Integrierte `transition:`-Direktiven	Scoped `<style>` mit CSS Custom Properties

Tailwind-Regel: Wenn du Tailwind verwendest, MUSST du tailwind.config anpassen – überschreibe Farben, Schriftarten, border-radius und Schatten. Die Standard-Tailwind-Config produziert KI-Schrott. Erweitere, standardisiere nicht.

Randfälle

Szenario	Reaktion
Benutzer gibt keine Designrichtung vor	Wähle einen kühnen Ton, erkläre deine Wahl, fahre fort
Benutzer sagt „sauber und einfach"	Interpretiere dies als Schweizer modernistische Minimalität, nicht generisch
Benutzer gibt Markenrichtlinien vor	Halte sie ein, aber hebe sie an – füge atmosphärische Tiefe, intentionale Bewegung hinzu
Benutzer sagt „wie Apple/Linear"	Untersuche die SPEZIFISCHEN Prinzipien (Zurückhaltung, Dichte, Typografie) – kopiere nicht die oberflächliche Ästhetik
Vages „mach es hübsch"	Behandle es als Landingpage mit Luxus-Editorial-Ton, es sei denn, der Kontext legt etwas anderes nahe
Sehr kurze Anforderung	Verwende `scripts/init_frontend.py` zum Erstellen eines Gerüsts, t…

(Originaltext endet hier)

wjgoarxiv/my-frontend-design-skill

Was ist my-frontend-design-skill?

In Ihrer bevorzugten KI fragen

Dokumentation