Glassmorphism-Landing-Skill
Erstelle eine einseitige Landing-Page im Glassmorphism-Stil, erstellt mit Tailwind-Klassen. Das gesamte Erscheinungsbild beruht auf einer Regel: Unschärfe ist nur sichtbar, wenn sich etwas Farbenfrohes dahinter befindet – daher schwebt jedes Glaspaneel über einem Verlaufsfeld, niemals über flachem Weiß.
Das Glas-Rezept
Ein gemeinsames Paneel-Rezept, das auf jede Oberfläche angewendet wird:
backdrop-blur-xl bg-white/10 border border-white/20 shadow-2xl rounded-2xl
Schichtregeln:
- Der Seitenhintergrund ist ein lebendiger Verlauf (zwei oder drei Farbtöne). Paneele sind die einzige transluzente Schicht darüber.
- Ein Akzentfarbton treibt Verläufe und primäre Aktionen an; der Rest bleibt neutral.
- Text auf Glas ist weiß bei 90-100% Deckkraft für Überschriften und 60-70% für Fließtext; platziere niemals kontrastarmen grauen Text auf einem hellen Glaspaneel.
- Füge jedem Paneel einen 1px
border-white/20-Rand hinzu – das ist es, was das Glas als physische Platte erscheinen lässt, nicht als unscharfes Rechteck. - Ecken großzügig abrunden (
rounded-2xl/rounded-3xl); Glas wirkt weich, nicht scharf.
Farbvariationen
Liefere die vier unten stehenden Variationen als auswählbares Set aus; das Beispiel zeigt sie als eine Reihe von Themen-Chips, die das Verlaufsfeld und den Akzent live wechseln.
| Variation | Verlaufsfeld | Akzent |
|---|---|---|
| aurora | violett → pink → amber | #7C3AED |
| ocean | himmel → cyan → indigo | #0EA5E9 |
| ember | rose → orange → gelb | #F43F5E |
| forest | smaragd → teal → limette | #10B981 |
Workflow
- Lies die aktive DESIGN.md (oben eingefügt). Wenn sie Farbe und Schriftart definiert, verwende diese Tokens für Text und die primäre Aktion; das Glas-Rezept und der Verlauf sind der eigene Beitrag dieses Stils.
- Nenne das Produkt und das Versprechen aus dem Brief. Nur echte Kopie.
- Layout: Klebe-Glas-Navigation, Hero mit einem H1 + einem Absatz + CTA über dem Verlauf, eine Themenvariations-Reihe, ein 3-spaltiges Raster aus Glas-Feature-Karten, ein Glas-Testimonial-Paneel und ein abschließender CTA.
- Halte das handwerkliche Niveau: ein H1; primärer CTA verwendet den Akzent; Fließtext auf Glas bleibt >= 4,5:1; Fokusringe sind auf einer transluzenten Oberfläche sichtbar; das Layout bricht unter 768px auf eine Spalte zusammen.
- Gib eine eigenständige
index.htmlaus. Tailwind wird für den Prototyp über das Play CDN geladen; die Produktionsausgabe sollte Tailwind stattdessen kompilieren.
Anti-Patterns
- Glaspaneelen über einem flachen, nahezu weißen Hintergrund (die Unschärfe verschwindet).
- Mehr als zwei Akzentfarbtöne gleichzeitig auf dem Bildschirm.
- Text unscharf machen oder Glas auf Glas auf Glas stapeln, bis der Kontrast verschwindet.
- Mattierte Paneele mit scharfen quadratischen Ecken.