Was macht Landing-Page-Builder?
Verwandle eine Kurzbeschreibung in eine schnelle, responsive, eigenständige Landingpage, die sofort auf GitHub Pages, Netlify oder einem anderen statischen Host bereitgestellt werden kann.
1. Sammle die Kurzbeschreibung
Bevor du schreibst, stelle sicher, dass diese Informationen vorliegen. Frage nur nach dem, was fehlt, und das in einer einzigen Nachricht.
| Feld | Beispiel |
|---|---|
| Produkt / Angebot | „LearnMizo – Lerne die Mizo-Sprache online“ |
| Zielgruppe | „Eltern in der Diaspora, die wollen, dass ihre Kinder Mizo sprechen“ |
| Hauptnutzen für den Besucher | „In 30 Tagen eine einfache Unterhaltung führen können“ |
| Primärer Call-to-Action | „Kostenlose Lektion starten“ + Ziel-URL |
| Vorhandene Belege | Echte Zahlen, echte Zitate, Logos (oder „noch keine“) |
| Marke | Farben, Schriftarten, Tonfall (oder „Wähle für mich aus“) |
Wenn der Benutzer sagt „Bau es einfach“, triff sinnvolle Annahmen und liste sie am Anfang deiner Antwort auf.
2. Schreibe zuerst den Text (vor jeglichem HTML)
Folge der Struktur in references/page-structure.md. Regeln:
- Überschrift = Nutzen, nicht Funktion. Maximal ~10 Wörter. Test: Würde die Zielgruppe sagen „Ja, das ist es, was ich will“?
- Unterüberschrift erklärt das Wie in einem Satz.
- Ein primärer CTA, wiederholt (Hero, Seitenmitte, Footer). Immer dieselbe Formulierung.
- Vorteile werden als „Du kannst…“ oder „Kein … mehr“ formuliert, nicht als Funktionslisten.
- Erfinde niemals Belege. Keine gefälschten Testimonials, Nutzerzahlen, Bewertungen oder Logos. Wenn Belege fehlen, verwende einen klar gekennzeichneten Platzhalter:
<!-- TODO: füge ein echtes Kundenstatement ein -->und einen sichtbaren „Ihr Testimonial hier“ nur im Entwurf. - Halte das Leseniveau einfach (Ziel: Klasse 6–8).
3. Baue die Seite
Starte mit assets/template.html und ersetze die {{Platzhalter}}.
Technische Anforderungen:
- Einzelne Datei, gesamtes CSS inline im
<style>-Tag; keine Frameworks. JavaScript nur, wenn nötig (z. B. FAQ-Umschalter). - Mobile-First; teste Breiten 360 px, 768 px, 1280 px.
- Semantisches HTML: eine
<h1>, Abschnitte mit<h2>,<main>,<footer>. - Fülle
<title>(≤60 Zeichen),meta description(≤155 Zeichen) und Open-Graph-Tags aus. - Farbkontrast mindestens WCAG AA (4,5:1 für Fließtext).
- Buttons ≥ 44 px hoch; CTA ohne Scrollen auf Mobilgeräten sichtbar.
- Bilder: verwende
loading="lazy", setze Breite/Höhe und beschreibendesalt-Attribut.
4. Qualitätskontrolle vor der Auslieferung
Durchlaufe references/checklist.md und behebe alle Fehler. Liefere dann:
- Die HTML-Datei.
- Eine dreizeilige Zusammenfassung: gewählte Überschrift, CTA, getroffene Annahmen.
- Zwei alternative Überschriften für A/B-Tests.