Landing-Page

Landing Page

Erzeugen Sie eine in sich geschlossene HTML-Datei, die kunstvoll gestaltet und nicht generisch wirkt. Das Beispiel in examples/ (pulse-landing.html) ist die Qualitätslatte. Erreichen Sie das gleiche Niveau an Spezifität: echt wirkender Text, bewusste Abstände, eine Akzentfarbe.

Vor dem Bau

Sammeln Sie diese fünf Eingaben oder erfinden Sie sie (und halten Sie sie klar konsistent):

1. Produkt in einem Satz: was es ist und was es tut.
2. Zielgruppe: eine bestimmte Person, nicht „alle".
3. Die einzige Hauptaktion (anmelden, kaufen, herunterladen, Warteliste beitreten).
4. Ein Beleg: eine Zahl, ein Zitat oder ein konkretes Ergebnis. Wenn der Benutzer keinen hat, verwenden Sie einen Mechanismus („funktioniert offline", „kein Konto erforderlich") – erfinden Sie niemals Testimonials oder Statistiken.
5. Ton: Wählen Sie einen – ruhig/premium, gewagt/laut, warm/menschlich, technisch/präzise.

Wenn der Benutzer Ihnen ein Produkt und eine Zielgruppe genannt hat, stellen Sie keine weiteren Fragen. Treffen Sie vernünftige Entscheidungen und notieren Sie diese in einer Zeile am Ende.

Design-Token (Standardsystem – „Tinte & Zitrus")

Verwenden Sie diese, sofern der Benutzer keine Markenfarben angibt. Ändern Sie alle Werte an einer Stelle: dem :root-Block.

:root{
  --bg:#0F1013;        /* Seitenhintergrund */
  --panel:#17181D;     /* Erhöhte Oberflächen */
  --line:#26272E;      /* Haarfeine Linien, Ränder */
  --ink:#F4F2EA;       /* Primärer Text */
  --muted:#9BA0A6;     /* Sekundärer Text */
  --accent:#D9F24F;    /* EINE Akzentfarbe – Buttons, Highlights */
  --radius:14px;
  --font:"Inter","Helvetica Neue",Arial,sans-serif;
}

Regeln, die das Design aussehen lassen:

• Eine Akzentfarbe. Alles Klickbare oder Wichtige verwendet sie; nichts anderes konkurriert damit. Keine Regenbogenverläufe, kein lila-blauer „KI-Verlauf".
• Die Schriftart macht die Arbeit. Überschrift bei 56–72px, Schriftstärke 800, Buchstabenabstand leicht negativ (-0.02em). Fließtext 17–18px, Zeilenhöhe 1.6. Kapitälchen-Etiketten (12px, Buchstabenabstand 0.12em, Großbuchstaben, gedämpft) über Überschriften.
• Abstände in Vielfachen von 8. Abschnitt-Padding 96px oben/unten auf dem Desktop. Wenn ein Abstand willkürlich wirkt, liest es sich wie generiert.
• Haarfeine Linien statt Schatten. Trennen Sie Abschnitte mit 1px --line-Rändern, nicht mit Schlagschatten oder schwebenden Karten auf farbigem Hintergrund.
• Zahlen als Design. Große Statistikzahlen (48px+) in der Akzentfarbe oder Tinte, mit kleinen gedämpften Etiketten. Maximal eine Zeile mit drei Statistiken.

Seitenrezept (in dieser Reihenfolge)

1. Obere Leiste – Wortmarke links, zwei oder drei reine Textlinks, ein Akzent-Button (die Hauptaktion). Dünne untere Linie.
2. Hero – Kapitälchen-Etikett (Kategorie), Überschrift, ein unterstützender Satz (maximal 22 Wörter), primärer Button + ein ruhiger sekundärer Link. Rechte Seite oder darunter: ein Produktvisual aus CSS (ein Mock-Fenster, eine Statistik-Karten-Gruppe, eine typografische Komposition). Niemals eine leere graue Platzhalterbox.
3. Logo/Beleg-Streifen – eine Zeile: „Verwendet von …" mit Text-Wortmarken oder die Beleg-Statistik-Zeile. Überspringen Sie dies vollständig, wenn es keinen ehrlichen Beleg gibt.
4. Problem → Wandel – zwei Spalten: die alte Art (gedämpft, durchgestrichen wirkend) vs. die Art des Produkts. Kurze Zeilen, keine Absätze über 3 Zeilen.
5. Funktionen – genau drei oder vier. Jede: Kapitälchen-Zahl (01–04), Titel, zweizeilige Beschreibung. Raster mit haarfeinen Linien, nicht sechs identische Icon-Karten.
6. So funktioniert es – drei nummerierte Schritte, jeweils eine Zeile.
7. Preis oder Angebot – wenn der Benutzer einen Preis genannt hat: ein hervorgehobener Plan, was enthalten ist als Checkliste, der Hauptaktions-Button. Wenn kein Preis: ein Wartelisten/CTA-Band stattdessen.
8. FAQ – maximal vier Fragen, geschrieben gegen echte Einwände (Preis, Aufwand, Wechsel, „Ist das etwas für mich").
9. Abschließendes CTA-Band – Akzent-Hintergrundblock, tintenfarbener Text, Überschrift wiederholt das Hauptversprechen in anderen Worten, ein Button.
10. Footer – Wortmarke, eine Zeile Positionierung, winzige Links. Keine Sitemap-Farm.

Textregeln

• Überschriftsformel: [konkretes Ergebnis] für [bestimmte Person] oder eine konkrete Behauptung, die das Produkt untermauern kann. „Gewinnen Sie Ihre Abende zurück, Läufer" – nicht „Willkommen in der Zukunft der Produktivität".
• Jeder Abschnitt muss mindestens ein konkretes Nomen und eine Zahl oder einen Namen enthalten. Vage Adjektive („nahtlos", „leistungsstark", „revolutionär", „hochmodern", „nächstes Level") sind verboten.
• Buttons sagen, was passiert: „Kostenlos starten", „Vorlage holen", „Warteliste beitreten". Niemals „Mehr erfahren" als primäre Aktion.
• Schreiben Sie wie der Hersteller des Produkts, sparsam in der ersten Person Plural („wir haben das gebaut, weil…"), niemals in der Unternehmenssprache von „Lösungen".

Anti-Patterns (der „KI-Look" – niemals tun)

• Lila/blaue Verlaufs-Hintergründe für das Hero oder Verlaufstext.
• Drei identische Karten mit Emojis oder generischen SVG-Icons in Kreisen.
• „🚀 Beschleunigen Sie Ihren Workflow"-artiger Text, Ausrufezeichen in Überschriften.
• Lorem ipsum, „Feature One / Feature Two", Stockfoto-Platzhalter.
• Alles zentriert. Mischen Sie linksbündige Textblöcke mit versetzten Visuals.
• Mehr als zwei Schriftstärken-Familien oder mehr als eine Akzentfarbe.
• Gefälschte Testimonials, gefälschte Logos, erfundene Statistiken. Niemals.

Technische Regeln

• Eine HTML-Datei, CSS in <style>, keine externen Assets außer einem Google-Fonts-Link (Inter oder die Markenschriftart des Benutzers). Kein JavaScript erforderlich, außer einem optionalen FAQ-Umschalter.
• Semantische Tags: header, main, section, footer. Ein echtes <h1> einmal.
• Responsive: einspaltig unter 760px, Hero-Visual unter dem Text, Touch-Ziele mindestens 44px.
• Halten Sie die Datei unter ~700 Zeilen. Wenn mehr nötig ist, macht die Seite zu viel – schneiden Sie einen Abschnitt weg.

QA-Checkliste (vor der Auslieferung durchführen)

• Eine Akzentfarbe, konsistent verwendet; keine Verläufe außer einem subtilen gleichen Farbton-Hintergrundverlauf.
• Überschrift enthält ein konkretes Ergebnis und eine bestimmte Zielgruppe oder einen Mechanismus.
• Jede Zahl auf der Seite stammt vom Benutzer oder von den tatsächlichen Mechanismen des Produkts.
• Keine verbotenen Wörter: nahtlos, supercharge, revolutionieren, hochmodern, nächstes Level, entfalten Sie Ihr Potenzial.
• Sieht bei 390px Breite ohne horizontales Scrollen korrekt aus.
• Die Hauptaktion erscheint mindestens dreimal (obere Leiste, Hero, Abschlussband).