Landing Page Design

Eine Landing Page ist keine Homepage. Eine Homepage bedient mehrere Absichten. Eine Landing Page gewinnt eine Absicht:

ein Angebot → eine Zielgruppe → eine primäre Aktion.

Dieser Skill besteht aus zwei Hälften. Teil A legt fest, was die Seite sagt und wie sie strukturiert ist. Teil B ist das nicht verhandelbare visuelle System. Arbeite dich durch Teil A, bevor du Teil B berührst.

Umfang

Gilt für alle Web-UI-Arbeiten: Landing Pages, Marketingseiten, Komponenten, Dashboards, Prototypen und Design-Reviews. Wenn eine Regel hier mit einem Framework-Standard kollidiert, gewinnt diese Datei. Wenn die explizite Eingabe des Benutzers mit einer Regel kollidiert, gewinnt der Benutzer.

Begleitskill. Für die Modernisierung einer bestehenden Site anstelle einer Neuerstellung, verwende redesign-existing-projects (github.com/elayadesign/redesign-skill). Es diagnostiziert allgemeine Muster und verweist für jeden konkreten Wert auf diese Datei.

TEIL A — Strategie und Struktur

A1. Aufnahme

Sammle diese Informationen vor dem Entwerfen oder Schreiben ein. Frage nur nach dem, was fehlt, und stelle alle Fragen auf einmal, nicht nacheinander.

Zweck

Was ist die EINE primäre Aktion? (Testversion, Demo, Kauf, Warteliste, Download)
Was ist das Angebot, genau was bekommen sie?
Was zählt als Conversion? (Klick, Anmeldung, Kauf)

Zielgruppe und Kontext

Wer ist der ICP?
Welches Problem versuchen sie zu lösen?
Die drei häufigsten Einwände, also warum sie heute nicht konvertieren
Traffic-Quelle: Anzeigen, Suche, Social, E-Mail
Was wissen Besucher bereits, wenn sie landen?

Nachweise und Assets

Nachweispunkte: Logos, Testimonials, Zahlen, Fallstudien
Screenshots, Demovideo, Produkt-GIFs
Garantien, Rückgabebedingungen, Kündigungsbedingungen

Einschränkungen

Markenstimme: lässig oder professionell
Designrichtung: minimal editorial, verspielt 3D, Glas-UI
Mobile Priorität?

Wenn der Benutzer nicht antworten kann, triff eine vernünftige Annahme, formuliere sie in einem Satz und fahre fort. Stoppe die Erstellung nicht.

A2. Seitenstruktur

Above the fold (erforderlich)

Überschrift, Ergebnis plus Zielgruppe
Unterüberschrift, erklärt wie und fügt Spezifität hinzu
Primärer CTA, klares Verb plus was sie bekommen
Ein Nachweissignal, Logo-Strip, Statistik oder kurzes Testimonial
Hero-Visual, Produktscreenshot oder -video oder eine starke Illustration

Seitenmitte (das Argument) 6. Vom Problem zur Lösung, ein Abschnitt 7. Vorteile, drei bis fünf, ergebnisorientiert 8. Wie es funktioniert, drei Schritte 9. Social Proof, Testimonials oder eine Fallstudie

Unten (Einwände behandeln) 10. FAQ, sechs bis zwölf Fragen 11. Risikoumkehr, Testversion, jederzeit kündbar, Garantie 12. Finaler CTA, identisch mit dem oberen

Füge den obligatorischen Tagline-Enthüllungsabschnitt aus B11 irgendwo im Argument der Seitenmitte ein, typischerweise direkt nach dem Hero oder nach den Vorteilen.

A3. Layoutauswahl

Wähle eines aus und begründe warum.

Typ	Verwende wenn
A. Klassischer Hero plus Abschnitte	Das Produkt aus einem Hero-Screenshot verständlich ist. Am häufigsten.
B. Lange Story	Du musst aufklären und Skepsis überwinden.
C. Minimale Conversion-Seite	Hochintentiver Traffic (E-Mail an bekannte Nutzer) oder ein kurzes Angebot wie Download oder Warteliste.
D. Vergleichsseite	Suchintention schließt Alternativen ein ("X vs Y", "Bestes für"). Wird normalerweise mit SEO-Seiten kombiniert.

A4. Conversion-Regeln

Botschaft der Quelle anpassen. Wenn Traffic von Anzeigen kommt, spiegele die Anzeigenüberschrift im Hero wider und behalte dasselbe Versprechen und denselben visuellen Ton bei.

Den nächsten Schritt offensichtlich machen. Ein primärer CTA. Platziere niemals konkurrierende CTAs above the fold.

Vorteil zuerst schreiben. Features sind, was es tut. Vorteile sind, was das für sie bedeutet.

Sei spezifisch.

❌ "Spare Zeit und optimiere"
✅ "Reduziere deine wöchentliche Berichterstattung von 4 Stunden auf 15 Minuten"

Risiko reduzieren. Wähle mindestens eines aus: kostenlose Testversion, kostenloser Plan, keine Kreditkarte, jederzeit kündbar, Geld-zurück-Garantie.

Behandle Einwände als Abschnitt, nicht als Fußnote. Verschiebe die FAQ bei Angeboten mit hohen Hürden nach vorne. Platziere Beweise direkt neben der Behauptung, die sie stützen.

A5. Texten

Überschriftsformeln

"{Ergebnis} ohne {Schmerz}"
"Das {Kategorie} für {Zielgruppe}"
"Liefere {Ergebnis} in {Zeit}"

Unterüberschrift. Ein oder zwei Sätze. Erkläre, was es ist und für wen es ist.

CTA. Verb plus was sie bekommen. Niemals "Mehr erfahren" oder "Absenden". Verwende "Kostenlose Testversion starten", "Demo buchen", "Checkliste herunterladen".

Vorteilspunkte. Fetter Vorteil, dann der Beweis oder das Detail. Beispiel: Schnellere Iteration — generiere drei Layout-Varianten mit einem Klick.

Hinweis: Die Copy-Regeln aus B1 gelten weiterhin. Keine Bindestriche in Sätzen, keine verwaisten Wörter.

A6. Bau-Reihenfolge

Arbeite Abschnitt für Abschnitt in dieser Reihenfolge:

Hero
Vorteile
Wie es funktioniert
Beweise
FAQ
Finaler CTA

Baue die gesamte Seite niemals bei jeder Iteration neu auf. Abschnitt für Abschnitt behält die Kontrolle und hält die Diffs überprüfbar.

A7. SEO und AEO

Indiziere nicht reine Kampagnenseiten oder zeitlich stark begrenzte Angebote. Verwende noindex oder halte sie hinter einem nicht indizierten Pfad.

Indiziere zeitlose Angebote und Seiten, bei denen die Suchintention mit dem Versprechen übereinstimmt. Füge einen klaren Titel und eine Meta-Beschreibung, interne Links von der Startseite und den Feature-Seiten sowie die FAQ in einfacher Frage-und-Antwort-Form für AEO hinzu. Füge FAQ-Schema hinzu, falls angemessen.

A8. Fallstricke

Zu viele CTAs above the fold
Vages Wertversprechen: "optimieren", "verbessern"
Eine große Feature-Liste ohne Ergebnisse
Beweise am Ende vergraben
Mobiles Layout, das die Lesbarkeit beeinträchtigt
Kein klarer nächster Schritt

TEIL B — Visuelles System

Jeder visuelle Wert muss durch diese Regeln aufgelöst werden, anstatt ad hoc erfunden zu werden.

B1. Typografie

Schriftarten

Verwende: Geist, Manrope, Geist Mono, Poppins.

Verwende niemals: Inter, Roboto, Arial, Open Sans, Helvetica.

Verwende niemals kursive Schriftarten irgendwo im Interface.

Eine Schriftart pro Seite. Kombiniere keine zwei Schriftarten, es sei denn, die Eingabe fordert explizit danach. Geist Mono ist nur für Code, Daten oder numerische UIs erlaubt, wo eine monospaced Schrift funktional erforderlich ist.

Verwende niemals ultra fette Gewichtungen (900 / Black). Begrenze auf semibold oder bold.

Copy-Regeln

Keine Bindestriche im Text. Verwende - nicht in Fließtext, Überschriften oder Labels. Formuliere den Satz stattdessen um.

Keine verwaisten Wörter. Ein einzelnes Wort darf niemals allein in der letzten Zeile stehen. Wende text-wrap: balance für Überschriften und text-wrap: pretty für Fließtext an.

Schriftskala

Löse Schriftgrößen immer in Tailwinds Standard-Schriftskala auf. Lasse niemals willkürliche Werte an Ort und Stelle, einschließlich text-[19px], font-size: 22px oder 1.4rem.

Wenn eine vorhandene Größe nicht genau auf einer Stufe liegt, runde sie auf die nächstkleinere Stufe ab, unter Berücksichtigung sowohl der Größe als auch der zugehörigen Zeilenhöhe.

Klasse	Größe	Zeilenhöhe
`text-xs`	12px (0.75rem)	16px
`text-sm`	14px (0.875rem)	20px
`text-base`	16px (1rem)	24px
`text-lg`	18px (1.125rem)	28px
`text-xl`	20px (1.25rem)	28px
`text-2xl`	24px (1.5rem)	32px
`text-3xl`	30px (1.875rem)	36px
`text-4xl`	36px (2.25rem)	40px
`text-5xl`	48px (3rem)	1
`text-6xl`	60px (3.75rem)	1
`text-7xl`	72px (4.5rem)	1
`text-8xl`	96px (6rem)	1
`text-9xl`	128px (8rem)	1

Kombiniere das Skalen-Snapping nicht mit unabhängig eingestellten benutzerdefinierten Zeilenhöhen an anderer Stelle in einem Audit. Laufweite und Zeilenhöhe dürfen nur innerhalb des Werts angepasst werden, den die passende Stufe bereits bietet, sodass die beiden Regeln niemals gegeneinander wirken.

Button-Typografie

Hauptbuttons: text-base (16px), semibold.
Kleinere Header-Buttons: text-sm (14px), semibold.

B2. Abstände

Nur diese Werte. Nichts dazwischen, nichts außerhalb.

Token	Wert
Spacing-0	0
Spacing-25	2px
Spacing-50	4px
Spacing-75	8px
Spacing-100	12px
Spacing-200	16px
Spacing-300	24px
Spacing-400	32px
Spacing-500	40px
Spacing-600	48px
Spacing-700	64px
Spacing-800	80px
Spacing-900	96px

Hauptbuttons: 8px vertikales Padding, 12px horizontales Padding.

B3. Eckradius

Verwende nur Tailwinds Radius-Werte.

Verschachtelte Radius-Formel. Wenn eine Form innerhalb einer anderen Form sitzt und der Abstand zwischen ihnen weniger als 32px beträgt:

innerer Radius = äußerer Radius − Abstand

Wende dies nur an, wenn das Ergebnis größer als 2 ist. Darunter belasse die innere Form eckig oder unverändert.

Beispiel: Eine äußere Karte mit rounded-2xl (16px) mit 8px internem Padding ergibt ein inneres Element mit einem Radius von 8px (rounded-lg).

B4. Rahmen und Hintergründe

Wende niemals einen Rahmen auf nur eine Seite einer Karte an. Rahmen gehen ganz herum oder gar nicht.
Verwende niemals Farbverläufe in Hintergründen. Hintergründe sind einfarbig.

Dark-Mode-Hintergrundfarben

Verwende nur diese:

#000000 · #181818 · #1F1F1F · #272727 · #313131 · #131209

B5. Hero-Bereich

Überschriftfarbe

Dark-Theme: Links-nach-rechts-Verlauf auf dem Überschriftstext, #FFFFFF → #9B9B9B.
Light-Theme: Links-nach-rechts-Verlauf auf dem Überschriftstext, #000000 → #666666.

Dies ist der einzige Ort, an dem Farbverläufe verwendet werden, und nur auf Text, niemals auf dem Hintergrund.

Layout

Überschrift und Unterüberschrift erhalten beide eine maximale Breite von 680px.
Lese den Überschriftstext und füge Zeilenumbrüche an sinnvollen Stellen ein.
Brich niemals eine Zeile so, dass eine Phrase ungeschickt abgeschnitten wird oder den Satz schwerer lesbar macht. Brich dort, wo der Gedanke bricht.

B6. Symbole

Verwende: Phosphor, Solar oder Iconamoon.

Verwende niemals: Material Icons, Material Symbols.

B7. Bewegungschoreographie (Fluiddynamik)

Verwende niemals Standard-Übergänge. Jede Bewegung simuliert reale Masse und Federphysik durch benutzerdefinierte kubische Beziers.

transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]

Fluid Island Nav

Geschlossener Zustand. Die Navigationsleiste ist eine schwebende Glas-Pille, die vom oberen Rand getrennt ist: mt-6, mx-auto, w-max, rounded-full.

Hamburger-Morph. Beim Klicken drehen und verschieben sich die Hamburger-Linien fließend zu einem perfekten X mit rotate-45 und -rotate-45 mit absoluter Positionierung. Sie dürfen niemals einfach verschwinden.

Modaler Öffnungsvorgang. Das Menü öffnet sich als bildschirmfüllendes Overlay mit einem starken Glaseffekt: backdrop-blur-3xl bg-black/80 oder bg-white/80.

Gestaffelte Masken-Enthüllung. Nav-Links im geöffneten Zustand blenden ein und gleiten von einer unsichtbaren Box nach oben, translate-y-12 opacity-0 aufgelöst zu translate-y-0 opacity-100, gestaffelt pro Element mit delay-100, delay-150, delay-200 und so weiter.

Scroll-Interpolation

Elemente erscheinen niemals statisch beim Laden. Wenn sie in den Viewport kommen, führen sie eine sanfte, schwere Aufwärtsblende aus:

translate-y-16 blur-md opacity-0  →  translate-y-0 blur-0 opacity-100

über 800ms oder länger.

Für JavaScript-gesteuerte Enthüllungen verwende IntersectionObserver oder Framer Motions whileInView. Verwende niemals window.addEventListener('scroll') — es verursacht kontinuierliche Reflows und tötet die mobile Leistung.

B8. Inhaltsrealismus

Versende niemals Füllmaterial. Dies sind die Anzeichen dafür, dass eine Seite generiert und nicht erstellt wurde.

Kein Lorem Ipsum. Schreibe echten Entwurfstext.
Kein "Max Mustermann". Verwende vielfältige, realistische Namen.
Keine Platzhaltermarken wie "Acme Corp", "Nexus" oder "SmartFlow". Erfinde kontextbezogene, glaubwürdige Namen.
Keine runden, gefälschten Zahlen wie 99.99%, 50%, $100.00. Verwende organische Daten: 47.2%, $99.00, +1 (312) 847-1928.
Keine AI-Klischees. Niemals "Elevate", "Seamless", "Unleash", "Next Gen", "Game changer", "Delve", "Tapestry" oder "In der Welt von".
Überschriften im Satzfall, nicht Alles Groß.
Aktive Stimme. "Wir konnten Ihre Änderungen nicht speichern", nicht "Fehler sind aufgetreten".
Keine Ausrufezeichen in Erfolgsmeldungen und kein "Hoppla!" bei Fehlern. Sei direkt: "Verbindung fehlgeschlagen. Bitte versuchen Sie es erneut."
Einzigartige Avatare pro Person und abwechslungsreiche Blogpost-Daten.

B9. Zustände

Jedes interaktive Element wird mit seinem vollständigen Zustandssatz ausgeliefert:

Hover — Hintergrundverschiebung, leichte Skalierung oder Verschiebung
Aktiv — scale(0.98) oder translateY(1px) für physisches Feedback
Fokus — ein sichtbarer Fokusring. Barrierefreiheitsanforderung, nicht optional.
Laden — Skelett-Loader, die wie das tatsächliche Layout geformt sind, keine kreisförmigen Spinner
Leer — eine zusammengestellte "Erste Schritte"-Ansicht, niemals ein leeres Panel
Fehler — inline und spezifisch. Niemals window.alert().

Keine toten Links. Ein Button, der auf # zeigt, ist entweder verlinkt oder visuell deaktiviert. Die aktuelle Seite muss in der Navigation angezeigt werden.

B10. Auslieferungsanforderungen

Dinge, die vergessen werden und eine Seite unfertig wirken lassen:

Datenschutzerklärung und AGB-Links im Footer
Eine benutzerdefinierte, gebrandete 404
Clientseitige Formularvalidierung für E-Mail-Format und Pflichtfelder
Ein "Zum Inhalt springen"-Link für Tastaturnutzer
Cookie-Einwilligung, wo die Rechtsordnung dies erfordert
Ein gebrandetes Favicon
<title>, Meta-Beschreibung, og:image und Social-Sharing-Tags
Alt-Text auf jedem bedeutungsvollen Bild
Semantisches HTML: <nav>, <main>, <article>, <aside>, <section>
Ein Weg zurück von jeder Seite

B11. Tagline-Enthüllungsabschnitt (obligatorisch)

Jede Landing Page enthält einen großen Textabschnitt, der den Kernnutzen oder das Motto angibt, getrennt vom Hero. Er sitzt weiter unten auf der Seite als eigener Moment, nicht direkt unter dem Hero gestapelt.

Text

Mindestens zwei Textzeilen.
Eine Nutzenaussage oder ein Motto, geschrieben in der Stimme von A5, keine generische Abschnittsüberschrift.

Typografie

Größe text-4xl bis text-6xl, abhängig von der Zeilenanzahl, gemäß der B1-Schriftskala.
Maximale Breite wie beim Hero gedeckelt, sodass Zeilen an sinnvollen Stellen gemäß B5 umbrechen.

Animation

Der Text beginnt in einem subtilen, gedämpften Ton, etwa 25 bis 35 % Deckkraft der Basis-Textfarbe des Themas.
Während der Abschnitt in den Viewport scrollt, wechselt jedes Wort einzeln von diesem gedämpften Ton zur vollen Textfarbe, in Lesereihenfolge.
Wörter werden einzeln aktiviert, wenn sie eine Auslöselinie überqueren, nicht der gesamte Block schaltet auf einmal um. Der Übergang verwendet die benutzerdefinierte Easing-Kurve aus B7, niemals eine lineare Blende.
Implementiere mit IntersectionObserver pro Wort oder einem einzigen Scroll-Listener, der durch requestAnimationFrame gedrosselt wird. Niemals einen ungedrosselten...

In Ihrer bevorzugten KI fragen

Dokumentation