Was macht Landing – Geführte Sales-Page-Generierung?

Ein Tool zur geführten Generierung von Verkaufsseiten. Diese Skill übernimmt die Struktur, die Countdown-Logik und den geführten Fragenablauf. Das Designsystem wird an UUPM delegiert, mit einem Fallback-Pfad, falls UUPM nicht installiert ist.

Laufzeitanforderung: Benötigt eine Umgebung, die Bash ausführen kann. Claude Code unterstützt dies nativ; Claude Desktop benötigt ein Shell-MCP.

Arbeitsablauf – Übersicht

Schritt 1: Geführte Fragerunde, 3 Phasen
   |
Schritt 2: Designsystem-Handling, UUPM oder Fallback
   |
Schritt 3: Präsentation von 2–3 Stiloptionen
   |
Schritt 4: HTML generieren
   |
Schritt 5: Ausgabe in generated-pages/{slug}/

Schritt 1: Geführte Fragerunde

Grundregel: Keinen Kontext außerhalb dieses Flusses verwenden

Verwende innerhalb des /landing-Workflows ausschließlich die Antworten, die der Benutzer in diesem Moment gibt. Beziehe dich nicht auf:

Gesprächsverlauf, z. B. frühere Themen oder Projekte
Speichersysteme wie MEMORY.md oder Persona-Dateien
Inhalte aus vorhandenen Projektordnern

Warum: Jeder Benutzer hat einen anderen Kontext und das Skill-Verhalten muss konsistent bleiben. Selbst wenn du das Fachgebiet gut kennst, verhalte dich so, als würdest du alles von Null ausfüllen. Die endgültige Seite sollte auf den Antworten des Benutzers basieren, nicht auf KI-Annahmen.

Schlechtes Beispiel: „Das klingt nach dem Kurs ‚Super Individual Work Method‘, richtig?“ Das bezieht sich auf einen gespeicherten Kontext.

Gutes Beispiel: Leite die Branche nur aus A1 und A2 ab. Frage nicht: „Ist das der X-Kurs?“

Detaillierte Fragenliste: references/question-bank.md

Drei Phasen:

A. Produktpositionierung, 4 Fragen – Produkttyp, Branche, Markenton, Slug
B. Inhalte ausfüllen, 10 Fragen – Hero / Hook / About / Learn / Testimonials optional / Audience / Info / Pricing / FAQ / Speaker
C. Countdown und CTA, 3–4 Fragen – Zuerst fragen, ob ein Countdown benötigt wird, dann Details und CTA-Text erfragen

Regeln zur Fragenpräsentation

Jede Frage muss Folgendes enthalten:

Die Frage selbst
Gute und schlechte Beispiele als Leitplanken
Das Antwortfeld
Spezielle Befehle: skip für optionale Fragen und generate 3 for me für KI-generierte Optionen

Ja/Nein vor optionalen Abschnitten

B5a – Frage, ob Schüler-Erfahrungsberichte eingefügt werden sollen. Wenn Nein, überspringe B5b.
C0 – Frage, ob ein Countdown-Timer enthalten sein soll. Wenn Nein, überspringe C1–C2.

Expertenmodus, Schnellpfad

Wenn der Benutzer sagt: „Ich werde alles auf einmal einfügen“, überspringe die Leitplankenanzeige, empfange den vollständigen Text und klassifiziere alles in einem Durchgang.

Antworten sammeln

Speichere alle endgültigen Antworten in generated-pages/{slug}/answers.json in diesem Format:

{
  "product": { "type": "...", "industry": "...", "tone": ["...", "..."], "slug": "..." },
  "content": {
    "hero": { "title": "...", "subtitle": "..." },
    "hook": "...",
    "about": "...",
    "learn": ["...", "..."],
    "testimonials": [{ "name": "...", "quote": "...", "role": "..." }],
    "audience": { "fit": ["..."], "unfit": ["..."] },
    "info": [{ "label": "...", "value": "..." }],
    "pricing": [{ "plan": "...", "price": "...", "note": "..." }],
    "faq": [{ "q": "...", "a": "..." }],
    "speaker": { "name": "...", "bio": ["..."], "photo": "..." }
  },
  "countdown": {
    "enabled": true,
    "deadline": "2026-04-30T23:59:00+08:00",
    "onZero": "ended-state"
  },
  "cta": { "text": "Jetzt registrieren", "href": "#" }
}

Schritt 1.5: DESIGN.md erkennen

Bevor der Schritt zum Designsystem beginnt, prüfe, ob der Benutzer bereits Marken-Designrichtlinien hat:

# Suche nach DESIGN.md in der Prioritätsreihenfolge
DESIGN_FILE=""
for f in \
  "$PROJECT_ROOT/DESIGN.md" \
  "$PROJECT_ROOT/design.md" \
  "$PROJECT_ROOT/.claude/DESIGN.md" \
  "$HOME/.claude/DESIGN.md"; do
  if [ -f "$f" ]; then
    DESIGN_FILE="$f"
    break
  fi
done

Wenn DESIGN.md existiert, direkt anwenden

Wenn DESIGN.md gefunden wird, lies dessen Markenfarben, Typografie und Stilregeln und verwende sie dann direkt als Designsystem:

Analysiere die Farben, Typografie und Stil-Abschnitte in DESIGN.md.
Bestätige mit dem Benutzer: „Ich habe Ihre DESIGN.md gefunden. Die Markenfarbe ist #XXX und die Schriftart ist XXX. Soll ich diese Konfiguration verwenden?“
Wenn der Benutzer bestätigt, überspringe Schritt 2 und Schritt 3 und gehe direkt zu Schritt 4, um HTML zu generieren.
Wenn der Benutzer nein sagt, fahre normal mit Schritt 2 fort.

Wenn DESIGN.md nicht existiert, fahre mit Schritt 2 fort

Verwende entweder den UUPM-Fluss oder den Fallback-Fluss.

Warum dieser Schritt existiert: Lektion 3-2 lehrt die Schüler, DESIGN.md zu erstellen. Wenn /landing es nicht liest, hat der Schüler Markenrichtlinien erstellt, die nicht verwendet werden können, was die Erfahrung beeinträchtigt. Eine DESIGN.md sollte visuelle Ausgaben wie Social Cards, Präsentationen und Verkaufsseiten steuern.

Schritt 2: Designsystem-Handling, nur wenn keine DESIGN.md existiert

Detaillierter Ablauf: references/uupm-integration.md

UUPM erkennen

test -d ~/.claude/skills/ui-ux-pro-max || \
test -d "$PROJECT_ROOT/.claude/skills/ui-ux-pro-max" || \
command -v uipro

Wenn eine der Prüfungen erfolgreich ist, ist UUPM installiert und der Ablauf wechselt in den UUPM-Modus.

Wenn alle Prüfungen fehlschlagen, zeige die Überzeugungsnachricht aus references/uupm-integration.md.

Verzweigung, wenn UUPM nicht installiert ist

Benutzerantwort	Handhabung
`y` / `yes` / `ok`	Führe `npm install -g uipro-cli && uipro init --ai claude --global` aus, fahre dann nach der Installation mit Schritt 3 fort
`n` / `no` / `later`	Verwende den Fallback-Modus, siehe `references/fallback-design-rules.md`
Installation schlägt fehl	Zeige den Fehler und frage, ob mit Fallback fortgefahren werden soll

UUPM-Modus: Designsystem generieren

Erstelle die Abfrage aus den Antworten der Phase A:

query="<A2 Branche> <A3 Ton-Schlüsselwörter>"
slug="<A4>"

python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py \
  "$query" \
  --design-system \
  --persist \
  -p "$slug" \
  -f markdown

Das Ergebnis wird in design-system/MASTER.md geschrieben. Lies es und analysiere Farben, Typografie, Muster und Antimuster.

Schritt 3: Stiloptionen präsentieren

UUPM-Modus

Verwende das von UUPM empfohlene Muster als primäre Option. Wähle dann 2 kompatible, aber unterschiedliche Optionen aus den anderen 7 Landing-Page-Stilen aus, sodass insgesamt 3 Optionen entstehen.

Wenn UUPM beispielsweise Hero-Centric + Social Proof empfiehlt, füge Conversion-Optimized und Trust & Authority als Vergleichsoptionen hinzu.

Stelle jeden Stil als Mini-Vorschaukarte mit <div class="cards"> dar, unter Bezugnahme auf die visuelle Begleit-UI, damit der Benutzer wählen kann.

Fallback-Modus

Claude generiert 2 Richtungen, z. B. minimalistisch vs. verspielt. Jede Richtung enthält eigene Farb-, Typografie- und Abstandsregeln. Der Benutzer wählt eine aus.

Schritt 4: HTML generieren

Skelett lesen: templates/base.html

Countdown-JS lesen: templates/countdown.js

Zusammenbaulogik

Lese templates/base.html.
Bedingt rendern:
- {{#if countdown.enabled}} – Behalte den großen Hero-Countdown und die untere Sticky-Leiste; andernfalls beide Abschnitte entfernen.
- {{#if testimonials}} – Behalte den Abschnitt mit Erfahrungsberichten; andernfalls entfernen.
Fülle Inhalte aus answers.json ein.
Injiziere Design-Token in <style>. Im UUPM-Modus lese MASTER.md. Im Fallback-Modus generiere sie aus den drei Fallback-Regeln.
Injiziere countdown.js nur, wenn Countdown aktiviert ist.

Navigation, erforderlich und oben fixiert

Die Navigation ist eine feste Anforderung und muss auf jeder generierten Seite enthalten sein:

Marke: Links. Ein kurzer Name, abgeleitet vom A4-Slug, oder eine kurze englische Abkürzung basierend auf dem Produkttyp.
Abschnittslinks: Mitte. Verlinke auf About / Learn / Audience / Pricing / Speaker / FAQ. Füge keine Links für optionale Abschnitte hinzu, die nicht vorhanden sind.
Registrieren-CTA: Rechts. Kurzes Label, z. B. „Registrieren“ oder „Kaufen“.
Beim Scrollen fixiert. Füge beim Scrollen einen Schatten hinzu, der über JS classList.toggle('.scrolled') gesteuert wird.
Links auf Mobilgeräten unter 860px ausblenden.

Erforderliche Daten, abgeleitet aus answers.json:

"nav": {
  "brandText": "AI Solo Workshop",
  "linkAbout": "Workshop",
  "linkLearn": "Was du lernen wirst",
  "linkAudience": "Für wen es ist",
  "linkPricing": "Pläne",
  "linkSpeaker": "Dozent",
  "linkFaq": "FAQ",
  "ctaShort": "Registrieren"
}

Das Navigationsstyling sollte dem ausgewählten Designsystem folgen, einschließlich Typografie, Farben und Trennlinienstil. Die Struktur und die Links bleiben gleich.

Einzeldatei-HTML-Strategie

Verwende Tailwind über CDN: <script src="https://cdn.tailwindcss.com"></script>
Inline-CSS in <style>
Inline-JS in <script>
Verwende vom Schüler bereitgestellte Bild-URLs

Dies macht es für die Schüler am einfachsten, in Framer, Notion oder ein CMS zu kopieren und einzufügen.

Schritt 5: Ausgabe

Schreibe nach generated-pages/{slug}/:

generated-pages/
└── {slug}/
    ├── index.html
    ├── design-system.md    # Nur im UUPM-Modus
    └── answers.json

Datei für den Benutzer nach dem Schreiben öffnen

Sage dem Benutzer nicht, die Datei manuell zu öffnen. Öffne sie für ihn:

open "generated-pages/{slug}/index.html"

Unter macOS wird die Datei im Standardbrowser geöffnet. Wenn dies fehlschlägt, z. B. in einer Linux-Umgebung ohne open, dann sage dem Benutzer, wie er sie manuell öffnen kann.

Abschließende Nachricht an den Schüler:

Verkaufsseite generiert und im Browser geöffnet.

Dateispeicherort:
   generated-pages/{slug}/index.html

Möchtest du den Text bearbeiten? Bearbeite das HTML direkt oder führe /landing erneut aus, um die Antworten neu auszufüllen. Die vorhandene answers.json wird gelesen.

Fehlerbehandlung

Situation	Verhalten
npm-Berechtigungsfehler	Schlage `! sudo npm install -g uipro-cli` vor, dann lass den Schüler manuell ausführen
npm existiert nicht	Schlage die Installation von Node.js über Homebrew oder nvm vor
Python3 existiert nicht	Schlage `brew install python3` vor
UUPM search.py schlägt fehl	Protokolliere den Fehler und falle automatisch zurück
Bash-Tools nicht verfügbar	Fange den Fehler ab und falle zurück auf die Anzeige manueller Befehle
Ein Ordner mit demselben Slug existiert bereits	Frage, ob überschrieben, ein Zeitstempel hinzugefügt oder ein anderer Name gewählt werden soll

Außerhalb des Geltungsbereichs

Abonnement- oder Mitgliedschaftsseiten, Service-Beratungsseiten
Garantie- oder Rückerstattungsabschnitte
Mehrsprachige Seiten, derzeit nur Englisch
Formularintegration wie Zahlung oder Abonnement; CTA ist nur ein Link
Tatsächliche Bereitstellung
on-zero: new-price-Verhalten

Auslösephrasen

/landing, „Erstelle eine Verkaufsseite“, „Hilf mir, eine Landing Page zu erstellen“, „Verkaufsseite“

Landing – Geführte Sales-Page-Generierung

Was ist Landing – Geführte Sales-Page-Generierung?

In Ihrer bevorzugten KI fragen

Dokumentation