Landing Page
Diese Fähigkeit erstellt Landingpages, die konvertieren – nicht nur Seiten, die gut aussehen. Sie kombiniert eine bewährte Abschnittsreihenfolge mit echtem Text und produktionsreifem Code.
Analogie: Eine Landingpage ist ein Verkäufer, der niemals schläft. Ein guter Verkäufer folgt einer Reihenfolge – Aufmerksamkeit erregen, den Schmerz benennen, die Heilung zeigen, es beweisen, um den Abschluss bitten. Die untenstehende Abschnittsstruktur ist dieses Drehbuch.
Workflow
Schritt 1 — Stelle bis zu 3 Fragen (nicht mehr)
- Was verkaufst oder bietest du an? (Produkt, Dienstleistung, SaaS, Beratung)
- Wer ist der ideale Kunde? (der Avatar – sei spezifisch)
- Was ist die einzelne Hauptaktion, die der Besucher ausführen soll? (kaufen, einen Anruf buchen, anmelden, der Warteliste beitreten)
Wenn die Nachricht diese bereits beantwortet, überspringe diesen Schritt.
Schritt 2 — Erstelle die Abschnittsstruktur (bewährte psychologische Reihenfolge)
- Hero — klares Wertversprechen + primärer CTA. Der Besucher muss in 5 Sekunden verstehen, was das ist und warum es wichtig ist.
- Problem — verstärke den Schmerz des Kunden. Lass ihn die Kosten spüren, die entstehen, wenn er das Problem nicht löst.
- Lösung — wie das Produkt/die Dienstleistung diesen Schmerz löst.
- Features — 3-6 Schlüsselelemente, formuliert als Nutzen, nicht als Spezifikationen („am Wochenende ausliefern", nicht „mit X-Framework gebaut").
- Sozialer Beweis — Testimonials, Logos, Zahlen, Ergebnisse.
- Preise — falls zutreffend; klare Stufen, eine hervorgehoben.
- FAQ — töte die häufigsten Einwände, bevor sie den Verkauf stoppen.
- Abschließender CTA — wiederhole das Wertversprechen und die Hauptaktion.
Schritt 3 — Aktiviere ui-design für das visuelle System
Übergib die Erstellung des Designsystems an die ui-design-Fähigkeit (Stil, Palette, Typografie, Abstände, Dark Mode), bevor die Komponenten geschrieben werden. Erfinde hier keine visuellen Entscheidungen.
Delegation: Das Designsystem selbst wird je nach Verfügbarkeit bezogen – wenn ui-ux-pro-max installiert ist, lass es das System generieren (optional verfeinert durch taste-skill); wenn keines installiert ist, falle auf die eingebetteten Prinzipien in ui-design zurück. Die Landingpage funktioniert auf beide Arten; die Originale machen sie nur schärfer. Blockiere niemals aufgrund einer fehlenden Abhängigkeit.
Schritt 4 — Erzeuge den Text, nicht nur den Code
Diese Fähigkeit schreibt den Basistext für jeden Abschnitt – Überschrift, Untertitel, Haupttext, CTA-Beschriftungen – zugeschnitten auf das Angebot und den Avatar. Code ohne Text ist eine halbe Landingpage.
Schritt 5 — Standard-Stack und optionale Add-ons
Standard-Stack: React + Vite + Tailwind. Frage vor dem Bauen, ob die Seite Folgendes benötigt:
- Animationen → Framer Motion
- Ein Formular → React Hook Form
- Analytics → welcher Anbieter (z. B. Plausible, GA, PostHog)
Füge diese nur hinzu, wenn der Benutzer sie möchte; blähe nicht standardmäßig auf.
Schritt 6 — Ausgabe
Liefere einsatzbereite Komponenten, keine Prototypen – jeder Abschnitt als echte Komponente, mit den Design-Tokens verdrahtet, mit dem generierten Text an Ort und Stelle und mit behandelten Leer-/Lade-/Fehlerzuständen, wo relevant (z. B. das Formular).