mein-skill

Landing Page Guide V2

Übersicht

Dieser Skill ermöglicht die Erstellung von unverwechselbaren, konversionsstarken Landing Pages, die Folgendes kombinieren:

• Bewährtes Konversions-Framework: 11 wesentliche Elemente von DESIGNNAS für hohe Konversionsraten
• Außergewöhnliche Designqualität: Mutige ästhetische Entscheidungen, die unvergessliche Markenerlebnisse schaffen
• Produktionsreifer Code: Next.js 14+ mit ShadCN UI, TypeScript und Performance-Optimierung

Philosophie: Eine Landing Page muss Besucher konvertieren UND sie dazu bringen, sich an deine Marke zu erinnern. Generische, vorlagenartige Seiten scheitern an beidem. Dieser Skill stellt sicher, dass deine Landing Pages funktional effektiv und visuell außergewöhnlich sind.

Wann dieser Skill verwendet werden sollte

Verwende diesen Skill, wenn Benutzer Folgendes anfragen:

• Erstellung von Landing Pages, Marketing-Seiten oder Produktseiten
• Next.js- oder React-basierte Promotion-Websites
• Seiten, die Besucher in Kunden verwandeln und visuell hervorstechen müssen
• Professionelle Marketing-Seiten mit außergewöhnlicher Designqualität
• Landing Pages, die generische „Vorlagen"-Ästhetik vermeiden
• Markenerlebnisse, die sowohl konversionsoptimiert als auch einprägsam sind

Design Thinking: Bevor du programmierst

Bevor du eine Landing Page implementierst, lege eine MUTIGE ästhetische Richtung fest, die zur Marke und zum Produkt passt:

1. Kontext verstehen

• Zweck: Welches Problem löst dieses Produkt? Wer ist die Zielgruppe?
• Markenpersönlichkeit: Ist diese Marke verspielt, professionell, luxuriös, minimalistisch, gewagt, technisch?
• Branche: Welche visuelle Sprache erwartet diese Branche (oder sollen wir sie brechen)?
• Abgrenzung: Was macht diese Marke unvergesslich? Was ist DAS eine Ding, an das sich Besucher erinnern werden?

2. Wähle eine ästhetische Richtung

Wähle eine extreme Richtung und setze sie vollständig um. Beispiele:

Minimalistisch & Verfeinert

• Brutal saubere Layouts, großzügiger Weißraum
• Anspruchsvolle Typografie mit großen Größenkontrasten
• Monochrome oder begrenzte Farbpalette (max. 2-3 Farben)
• Subtile Mikrointeraktionen, elegante Übergänge
• Beispiele: Luxusprodukte, professionelle Dienstleistungen, Premium-SaaS

Gewagt & Maximalistisch

• Reichhaltige, komplexe visuelle Schichten
• Dynamische Animationen und Scrolleffekte
• Verlaufsnetze, Texturen und überlappende Elemente
• Lebendige Farbpaletten mit hohem Kontrast
• Beispiele: Kreativagenturen, Unterhaltung, junge Marken

Retro-Futuristisch

• Nostalgische Elemente mit moderner Umsetzung
• Geometrische Muster, Neon-Akzente
• Glitch-Effekte, Scanlines, Körnungstexturen
• Monospace- oder Display-Schriften mit Charakter
• Beispiele: Gaming, Tech-Startups, kreative Tools

Organisch & Natürlich

• Sanfte, fließende Formen und Verläufe
• Natürlich inspirierte Farben (Erdtöne, Pastelle)
• Geschmeidige Animationen, die natürliche Bewegungen nachahmen
• Abgerundete Ecken, weiche Schatten
• Beispiele: Wellness, Nachhaltigkeit, Lebensmittel

Redaktionell & Magazinartig

• Starke typografische Hierarchie
• Gitterbrechende, asymmetrische Layouts
• Große, wirkungsvolle Bilder
• Mutiger Einsatz von Weißraum und negativem Raum
• Beispiele: Inhaltsplattformen, Medien, Bildung

Brutalistisch & Roh

• Unkonventionelle Layouts, bewusst „hässlich"
• Systemschriften oder bewusst einfache Typografie
• Hoher Kontrast, begrenzte Farben
• Minimale oder keine Animationen
• Beispiele: Kunst, Mode, Anti-Establishment-Marken

KRITISCH: Wähle EINE klare Richtung. Kühner Maximalismus und verfeinerter Minimalismus funktionieren beide – der Schlüssel ist Absichtlichkeit, nicht Intensität. Führe deine gewählte Richtung mit Präzision und Konsistenz über alle 11 Elemente hinweg aus.

3. Definiere dein Designsystem

Lege vor dem Programmieren diese Kernentscheidungen fest:

Typografie-Auswahl

• Display-Schrift: Wähle etwas Unverwechselbares und Einprägsames (NICHT Inter, Roboto, Arial oder Systemschriften)
  • Erwäge: Space Grotesk, Clash Display, Cabinet Grotesk, Syne, DM Serif Display, Zodiak, Fraunces, Archivo Black, Unbounded, Outfit
  • Oder verwende Google Fonts mit Bedacht: Playfair Display, Crimson Pro, Libre Baskerville, Epilogue, Plus Jakarta Sans
  • Konvergiere NIEMALS auf übliche Optionen – variiere Schriftarten über verschiedene Projekte hinweg
• Text-Schrift: Verfeinerte, lesbare Wahl, die die Display-Schrift ergänzt
  • Erwäge: DM Sans, General Sans, Switzer, Geist, Manrope, Karla, Work Sans
• Maßstab: Lege eine klare Hierarchie fest (z.B. H1: 4rem → H2: 3rem → H3: 2rem → Fließtext: 1rem)

Farbpalette

• Dominante Farbe: Deine primäre Markenfarbe (60% Verwendung)
• Akzentfarbe: Hochkontrastfarbe für CTAs (10% Verwendung)
• Neutrale Palette: Grautöne oder Erdtöne (30% Verwendung)
• Hintergrundstrategie: Einfarbig, Verlauf, Textur oder Muster?
• Definiere als CSS-Variablen für Konsistenz

Bewegungsstrategie

• Seitenladevorgang: Gestaffelte Enthüllungen mit animation-delay für Hero-Elemente
• Scroll-Interaktionen: Fade-ups, Parallaxe oder scroll-ausgelöste Animationen?
• Hover-Zustände: Subtile Skalierung, Farbverschiebung oder dramatische Transformationen?
• CTA-Animationen: Wie erregen Buttons Aufmerksamkeit, ohne nervig zu sein?

Räumlicher Ansatz

• Layout-Stil: Zentriert und symmetrisch? Asymmetrisch und dynamisch? Gitterbrechend?
• Abstandssystem: Eng und dicht? Großzügig und luftig?
• Abschnittsfluss: Traditionell gestapelt? Diagonal? Überlappend?

Das 11-Elemente-Framework

Jede effektive Landing Page muss diese 11 wesentlichen Elemente enthalten. Sie basieren auf dem bewährten Framework von DESIGNNAS für hochkonvertierende Landing Pages.

Jedes Element hat ZWEI Anforderungen:

1. Funktionale Anforderung (für Konversion) – Muss enthalten sein
2. Design-Exzellenz (für Einprägsamkeit) – Muss unverwechselbar und schön sein

Element-für-Element-Design-Leitfaden

1. URL mit Schlüsselwörtern

Funktional: SEO-optimierte, beschreibende URL-Struktur Design: N/V (SEO-fokussiert)

2. Firmenlogo (Header)

Funktional: Markenidentität prominent platziert (oben links) Design-Exzellenz:

• Erwäge animiertes Logo beim Seitenladen
• Sticky-Header mit sanften Scroll-Übergängen
• Logo-Variation für verschiedene Scroll-Zustände
• Header-Hintergrund: transparent → fest mit backdrop-blur
• Navigationstypografie, die deiner Display-Schriftauswahl entspricht

3. SEO-optimierter Titel und Untertitel (Hero)

Funktional: Klares Wertversprechen mit Schlüsselwörtern Design-Exzellenz:

• Typografie: Mach das MASSIV und unvergesslich (4rem-6rem+)
• Verwende hier deine unverwechselbare Display-Schrift
• Erwäge Verlaufstext, umrissenen Text oder Textschatten für Wirkung
• Animiere Titelwörter mit gestaffeltem Fade-in (animation-delay)
• Der Untertitel sollte 50% der Größe des Titels haben, andere Schriftstärke oder Schriftart
• Füge visuellen Rhythmus mit Zeilenumbrüchen und Abständen hinzu

4. Primärer CTA (Hero)

Funktional: Haupt-Call-to-Action-Button im Hero-Bereich Design-Exzellenz:

• Mache ihn UNMÖGLICH zu übersehen: Größe, Farbkontrast, Position
• Vermeide langweilige Rechtecke: erwäge Pillenformen, einzigartige Ränder oder geometrische Formen
• Füge Mikrointeraktionen hinzu: Hover-Skalierung, Schattenausdehnung, Farbverschiebung
• Erwäge duale CTAs mit primärer/sekundärer Hierarchie
• Eingangs-Animation, die den Blick anzieht (Verzögerung nach dem Titel)
• Füge visuelle Hinweise hinzu: Pfeile, Symbole oder pulsierende Effekte

5. Sozialer Beweis (Hero)

Funktional: Bewertungen, Rezensionen, Benutzerstatistiken Design-Exzellenz:

• Zahlen sollten RIESIG sein und beim Laden animiert werden (Count-up-Effekt)
• Statistik-Karten mit Verlaufshintergründen oder subtilen Rändern
• Kunden-Avatare in überlappenden Kreisen
• Sternebewertungen mit benutzerdefinierter Gestaltung (nicht die standardmäßigen gelben Sterne)
• „Wie gesehen in"-Logos mit korrekter Abstands- und Transparenzbehandlung
• Erwäge rotierende Testimonials oder animierte soziale Beweise-Karussells

6. Bilder oder Videos (Medienbereich)

Funktional: Visuelle Demonstration des Produkts/der Dienstleistung Design-Exzellenz:

• KRITISCH: Verwende niemals Platzhalter oder generische Bilder
• Produkt-Screenshots mit Gerätemockups (Laptop-/Telefonrahmen)
• Füge Tiefe hinzu: Schatten, Reflexionen, 3D-Kippeffekte
• Erwäge: Schwebende Screenshots, Parallax-Scrolleffekte, Video-Hintergründe
• Bild-Enthüllungs-Animationen beim Scrollen (Fade-up, Slide-in)
• Für Videos: Benutzerdefiniertes Play-Button-Design, ambienter Hintergrundglanz
• Raster-Layouts: Asymmetrisch, überlappend oder Bento-Box-Stil

7. Kernvorteile/Funktionen

Funktional: 3-6 Hauptvorteile mit Symbolen Design-Exzellenz:

• Symbole: Benutzerdefiniert gestaltet oder sorgfältig ausgewählt (KEINE generischen Linien-Symbole)
• Erwäge: Verlaufsfüllungen, animierte Symbole beim Hover, 3D-artige Illustrationen
• Kartendesign-Varianten: Glas-Morphismus, Neumorphismus, Verlaufsränder, subtile Schatten
• Gestaffelte Animation, während der Benutzer zu diesem Abschnitt scrollt
• Asymmetrisches Layout statt langweiliger 3-Spalten-Raster
• Hintergrundelemente: subtile Muster, Verläufe oder dekorative Formen
• Typografie: Funktionsüberschriften in deiner Display-Schrift, fett und prominent

8. Kundenstimmen

Funktional: 4-6 authentische Bewertungen mit Fotos Design-Exzellenz:

• Fotobehandlung: Kreisförmige Avatare mit Verlaufsrändern oder einzigartigen Formen
• Kartenhintergründe: Subtile Verläufe, Milchglaskanten oder erhöhte Schatten
• Anführungszeichen: Überdimensioniert, dekorativ oder benutzerdefiniert gestaltet
• Layout: Mauerwerks-Raster, Karussell oder gestaffelt vertikal
• Bewertungssterne: Benutzerdefinierte Farben passend zur Markenpalette
• Hover-Effekte: Anheben, erweitern oder glühen
• Kundenname und Titel: Verfeinerte Typografie

9. FAQ-Bereich

Funktional: 5-10 häufige Fragen mit Akkordeon-UI Design-Exzellenz:

• Akkordeon-Animationen: Sanftes Auf-/Zuklappen mit Nachlass
• Symbole: Benutzerdefinierte Chevrons oder Plus-/Minus-Zeichen mit Drehung
• Hover-Zustände bei Fragen
• Typografie: Fragen fett oder in einer anderen Schriftstärke
• Erwäge: Zweispaltiges Layout auf dem Desktop, Q&A-Paare nebeneinander
• Hintergrund: Subtile Farbverschiebung vom vorherigen Abschnitt
• Abstände: Großzügige Polsterung innerhalb der Akkordeon-Elemente

10. Finaler CTA

Funktional: Unterer Call-to-Action für die zweite Chance zur Konversion Design-Exzellenz:

• Mache es zu einem HERO-Moment: Dies ist die letzte Chance
• Vollbreiter Abschnitt mit dramatischem Hintergrund (Verlauf, Muster oder Farbe)
• CTA-Button noch GRÖSSER als der Hero-CTA
• Füge Dringlichkeit hinzu: Countdown-Timer, begrenzte Plätze, Knappheitsindikatoren
• Umgebe ihn mit überzeugendem Text und Mikro-Vorteilen
• Animation: Parallaxe-Hintergrund, schwebende Elemente oder scroll-ausgelöste Effekte
• Erwäge: E-Mail-Eingabe + Button-Kombination für Newsletter/Warteliste

11. Kontaktinformationen/Rechtliches (Footer)

Funktional: Footer mit vollständigen Informationen, rechtlichen Links Design-Exzellenz:

• Mehrspaltiges Layout mit klarer Informationshierarchie
• Soziale Symbole: Hover-Effekte (Farbverschiebung, Skalierung oder Drehung)
• Newsletter-Anmeldung: Gestaltetes Eingabefeld mit Inline-Button
• Typografie: Kleiner, aber dennoch lesbar (14-16px)
• Hintergrund: Dunkler als der Körper oder deutlich andersfarbig
• Trenner vom Inhalt: Subtile Verlaufslinie oder dekorativer Teiler
• Untere Leiste: Copyright und rechtliche Links mit korrekten Abständen

Kritisch: Alle 11 Elemente müssen in jeder Landing Page enthalten sein. Keine Ausnahmen.

Für detaillierte Erklärungen jedes Elements siehe references/11-essential-elements.md.

Design-Ästhetik-Richtlinien

Typografie-Exzellenz

• Verwende NIEMALS generische Schriftarten: Inter, Roboto, Arial, Helvetica, system-ui
• Display-Schriften sollten unverwechselbar und einprägsam sein
• Paare sie mit Bedacht: Display-Schrift für Überschriften + verfeinerte Textschrift für Fließtext
• Skaliere dramatisch: Schaffe eine klare Hierarchie mit großen Größensprüngen (nicht subtilen Unterschieden)
• Zeichenabstand: Passe ihn für Display-Schriften an (oft ist engeres Tracking nötig)
• Zeilenhöhe: Display = 1.1-1.2, Körper = 1.6-1.8

Farben & Visuelle Kohärenz

• Definiere CSS-Variablen für alle Farben (Konsistenz wahren)
• Dominante Farbe sollte überall vorkommen (nicht nur bei CTAs)
• Akzentfarben müssen ausreichenden Kontrast für Barrierefreiheit aufweisen (mindestens WCAG AA)
• Vermeide: Lila Verläufe auf Weiß (übermäßig verwendete KI-Ästhetik)
• Hintergründe: Schaffe Atmosphäre mit Verläufen, Meshes, Mustern oder Texturen
  • Verlaufs-Meshes: Mehrfarbige sanfte Verläufe
  • Rauschtexturen: Subtile Körnung für Tiefe
  • Geometrische Muster: Punkte, Linien oder Formen bei geringer Deckkraft
  • Geschichtete Transparenzen: Überlappende farbige Abschnitte

Bewegung & Animation

• Seitenladevorgang: Ein gut orchestrierter Auftritt mit gestaffelten Enthüllungen
  • Hero-Titelwörter blenden nacheinander ein (animation-delay: 0ms, 100ms, 200ms)
  • Untertitel folgt (Verzögerung: 300ms)
  • CTA erscheint zuletzt (Verzögerung: 500ms) mit Betonung
• Scroll-Animationen: Abschnitte blenden beim Betreten des Ansichtsfensters auf
  • Verwende Intersection Observer API oder Framer Motions Scroll-Trigger
  • Karten erscheinen gestaffelt (jede mit inkrementeller Verzögerung)
• Hover-Zustände: Überraschen und erfreuen
  • Buttons: Skalieren, Schatten ausdehnen, Farbe verschieben
  • Karten: Anhebeffekt mit Schatten
  • Bilder: Subtiler Zoom oder Parallaxe
• Leistung: Bevorzuge CSS-Animationen gegenüber JavaScript
  • Verwende transform und opacity (GPU-beschleunigt)
  • Vermeide das Animieren von width, height, top, left

Räumliche Komposition & Layout

• Brich das Raster: Nimm nicht standardmäßig zentrierte, symmetrische Layouts
• Asymmetrie: Eine Seite größerer Text, andere Seite visuell
• Überlappende Elemente: Schichte Abschnitte für Tiefe
• Diagonaler Fluss: Abgewinkelte Trennlinien zwischen Abschnitten
• Großzügiger Weißraum ODER kontrollierte Dichte (wähle eines und setze es um)
• Z-Achsen-Denken: Verwende Schatten, Unschärfe und Schichtung für Tiefe

Vermeide generische KI-Ästhetik

Diese Muster lassen Landing Pages „KI-generiert" und vergesslich wirken:

NICHT:

• ❌ Inter/Roboto/Arial-Schriftarten
• ❌ Lila Verläufe auf weißen Hintergründen
• ❌ Perfekt zentrierte, symmetrische Layouts jedes Mal
• ❌ Generische Linien-Symbole
• ❌ Standardmäßige gelbe Sternebewertungen
• ❌ Langweilige rechteckige Buttons ohne Persönlichkeit
• ❌ Weißer Hintergrund ohne visuelles Interesse
• ❌ Standardisierte Dreispalten-Funktionsraster
• ❌ Stockfotos von Leuten, die auf Laptops zeigen

SOLL:

• ✅ Wähle unverwechselbare Schriftarten, die zur Markenpersönlichkeit passen
• ✅ Setze auf eine einzigartige Farbpalette (nicht immer lila!)
• ✅ Erstelle unerwartete Layouts mit Asymmetrie
• ✅ Gestalte oder wähle charaktervolle Symbole
• ✅ Gestalte alle UI-Elemente individuell, um der Ästhetik zu entsprechen
• ✅ Füge Hintergrundtexturen, Verläufe oder Muster hinzu
• ✅ Variiere Layouts über die Abschnitte hinweg
• ✅ Verwende Produkt-Screenshots, benutzerdefinierte Illustrationen oder authentische Fotografie

Technologie-Stack-Anforderungen

Wenn …

[aus Platzgründen gekürzt]

[Hinweis: Der letzte Teil des Dokuments wurde aufgrund der Zeichenbegrenzung gekürzt. In der vollständigen Übersetzung wären auch die Punkte „Technologie-Stack-Anforderungen“, „Schritt-für-Schritt-Umsetzungsleitfaden für den Skill“, „Beispiele für Befehlskonstruktion“ und die Struktur der Referenzdateien enthalten.]