Landing Page Builder
Philosophie
Dieser Skill produziert Landingpages, die visuell gewagt sind – nicht die üblichen Schachtelcontainer, Kartenraster und vorhersehbaren Webvorlagen. Jedes Ergebnis soll sich wie ein bewusst gestaltetes Design-Artefakt anfühlen:
- Layout – mutig – Clip-Path-Divider statt horizontaler Linien. Typografie, die vom Bildschirmrand läuft. Elemente, die aus ihrem Raster ausbrechen. Vollbild-Überschriften.
- SVG als Kern des Designs – Nicht nur dekorative Spielereien. SVG-Pfade animieren beim Scrollen, Icons haben Persönlichkeit, Hintergrundtexturen aus
<feTurbulence>-Rauschen. - Räumliche Tiefe – GSAP ScrollTrigger erzeugt echte räumliche Tiefe: Abschnitte überlappen sich, klebrige Panels bleiben fixiert, während der Inhalt darüber gleitet, Parallaxe auf separaten z-Ebenen.
- Hintergrundtextur – Jeder Abschnitt hat Struktur. Niemals ein flacher, einfarbiger Hintergrund.
- Navigation – überraschend – Die Navigation ist nie eine Standard-Horizontal-Leiste.
Gebündelte Assets (VERWENDE DIESE – erfinde sie nicht neu)
Dieser Skill enthält bereits vorgefertigte Assets. Lies sie und verwende sie direkt:
| Datei | Inhalt | Wann verwenden? |
|---|---|---|
assets/style-preview-template.html | 57-Stadt-Stil-Vorschauelemente | Schritt 2: sed-Ersetzung von __PRODUCT_NAME__ + __PRODUCT_HEADLINE__, speichern als style-preview.html, öffnen |
assets/options-preview-template.html | Interaktive Demos: Nav-Stile, Farbvarianten, Übergangsstile, Hero/Features/Testimonials-Varianten | Schritt 3: sed-Ersetzung der Stadt-Farb-Tokens + Produktname, speichern als options-preview.html, öffnen |
assets/textures.css | 6 CSS-Textur-Klassen (.texture-kyoto, .texture-paris, .texture-tokyo, etc.) | Kopiere die passende Klasse in style.css |
assets/gsap-snippets.js | 6 GSAP-Animationen (Blur-Eingang, Linien-Enthüllung, Parallaxe, Sticky-Steps, Blast-Menü, Magnetischer Pill) | Kopiere die relevanten Funktionen in main.js |
assets/clip-paths.css | 8 Clip-Path-Divider-Klassen (.clip-diagonal-br, .clip-parallelogram, .clip-arc-bottom, etc.) | Verwende mindestens 2 in style.css für Abschnitts-Trenner |
assets/sections/hero-variants.html | 3 Hero-Vorlagen (Vollbild/Teilbild/Minimaler Abstieg) | Schritt 4: Wähle die Variante passend zur Benutzer-Typografie-Präferenz, kopieren und anpassen |
assets/sections/features-variants.html | 6 Features-Vorlagen (Große Zahlen/Alternierende Anzeige/Zeitstrahl/Bento-Gitter/Horizontaler Scroll/Aufklappbare QA) | Schritt 4: Wähle basierend auf Inhaltstyp (Statistiken → große Zahlen, Funktionsweise → Zeitstrahl) |
assets/sections/testimonial-variants.html | 6 Testimonials-Vorlagen (Kompakte Karten/Einzelspalten-Zitate/Mosaik/Horizontaler Scroll/Gesprächsblasen/Avatar-Wand) | Schritt 4: Wähle basierend auf Anzahl der Testimonials und visuellem Stil |
assets/sections/conversion-variants.html | Preistabelle, FAQ, Brand-Wall, Starke CTA | Schritt 4: Kopiere den entsprechenden Abschnitt, alle verwenden CSS Custom Properties |
references/product-demo-hero.md | Prinzipien für Produkt-Demo-Hero + Szenen-Design-Anleitung | Lesen, wenn der Benutzer den Produkt-Workflow im Hero zeigen möchte (siehe Schritt 3/4) |
Die Qualitätsgarantie dieses Skills kommt von der Nutzung dieser Assets. Sie kodieren spezifische Designentscheidungen, die die Ausgaben einzigartig machen. Beschreibe nicht, was zu tun ist – kopiere den Code und passe ihn an.
Der Arbeitsablauf
Schritt 1: Das Produkt verstehen
Verwende die bereits vom Benutzer angegebenen Produkt- und Stilinformationen; frage nur nach, wenn Produktdetails fehlen:
„Erzähle mir, worum es bei deiner Landingpage geht – Produkt-/Dienstname und ein Satz dazu.“
Wenn der Benutzer bereits eine Produktbeschreibung, eine ausgewählte Stadt oder die Entscheidung an den Agenten delegiert hat, gehe direkt zum entsprechenden Schritt.
Schritte 2–3: Optionale Stil- und Layout-Vorschau
Wenn der Benutzer bereits eine Wahl getroffen hat, verwende diese direkt; wenn der Agent die Wahl trifft, lies die relevanten Stadteinträge, begründe die Auswahl und fahre fort. Wenn ein Vergleich nötig ist, generiere eine lokale Vorschau gemäß Preview-Workflow. Wenn keine Preview-Fähigkeit verfügbar ist, biete im Dialog wenige Kandidaten an, ohne das Öffnen einer Seite als endgültige Entscheidung zu werten.
Schritt 4: Die Landingpage generieren
Ausgabe in {product-name}-landing/:
{product-name}-landing/
├── index.html
├── style.css
├── main.js
└── assets/
└── icons.svg
4a — Bash-Assembly (zuerst ausführen, bevor eine Datei geschrieben wird)
Ziel: Vermeide es, bereits gebündelte Assets als Modell-Tokens auszugeben. Verwende stattdessen Bash, um die fertigen Assets in die Ausgabedateien zu kopieren und zu pipen. Nur produktspezifische Inhalte (Kopien, Tokens, Overrides) werden vom Modell geschrieben.
Schritt 1 — Verzeichnisse anlegen
_SKILL_DIR="<Absoluter Pfad des Skills>"
_OUT="./{product-name}-landing"
mkdir -p "$_OUT/assets"
Schritt 2 — Abschnittsvarianten in eine Staging-Datei zusammenstellen
Plane, welche Varianten verwendet werden sollen (siehe Tabelle unten), und pipe sie dann in eine Staging-Datei:
# Ersetze B / C / B / PRICING durch die tatsächlichen Benutzerwahlen
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
"$_SKILL_DIR/assets/sections/hero-variants.html" B > "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
"$_SKILL_DIR/assets/sections/features-variants.html" C >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
"$_SKILL_DIR/assets/sections/testimonial-variants.html" B >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
"$_SKILL_DIR/assets/sections/conversion-variants.html" PRICING >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
"$_SKILL_DIR/assets/sections/conversion-variants.html" CTA >> "$_OUT/_sections.html"
Für Testimonials verwende: A, B, C, D, E, F
Für Conversion-Abschnitte verwende: PRICING, COMPARE_PRICING, BRAND_WALL, CTA, FAQ_A, FAQ_B
Schritt 3 — Gebündelte CSS-Utilities in die style.css-Basis kopieren
# Textur: verwende das `--texture`-Flag (lies niemals die gesamte `city-styles.md`)
python3 "$_SKILL_DIR/assets/scripts/get_city_tokens.py" "STADT_NAME" --texture > "$_OUT/_texture.css"
# Clip-Paths: alle Klassen kopieren, das Modell wählt per Klassennamen aus
cat "$_SKILL_DIR/assets/clip-paths.css" >> "$_OUT/_texture.css"
Schritt 4 — GSAP-Snippets in die main.js-Basis kopieren
cat "$_SKILL_DIR/assets/gsap-snippets.js" > "$_OUT/_gsap-base.js"
Lies nun die drei Staging-Dateien (_sections.html, _texture.css, _gsap-base.js), um zu verstehen, was verfügbar ist, und schreibe dann die endgültigen Ausgabedateien.
4b — Referenz der Abschnittsvarianten
Häufige Seitenabläufe:
- SaaS-Tool: Hero D → Features C → Features A → Testimonials A → Pricing → FAQ A → CTA
- Agentur-Portfolio: Hero A → Features B → Testimonials C → CTA
- Entwickler-Tool: Hero B → Features C → Features A → Testimonials A → Pricing → FAQ B → CTA
- Luxusprodukt: Hero C → Features B → Testimonials B → CTA
- B2C-App: Hero E → Features E → Testimonials F → CTA
| Wenn der Benutzer braucht… | Verwende diese Vorlage | Variante |
|---|---|---|
| Hero – massive, kühne Aussage | Vollbild-Überschrift | A |
| Hero – Produktvisual + Headline | Teilbild-Spannung | B |
| Hero – elegant, geschichtenorientiert | Minimaler Abstieg | C |
| Hero – Produkt hat einen Workflow zu zeigen | Produkt-Demo | D (auch references/product-demo-hero.md lesen) |
| Hero – typografiegesteuert, hohe Wirkung | Text-Explosion | E |
| Hero – erzählerisch, editorial | Magazin-Riss | F |
| Hero – spielerischer Produkt-Launch | Pop-up-Karte | G |
| Features – Fokus auf Daten/Metriken | Große Zahlen | A |
| Features – Produktscreenshots | Alternierende Anzeige | B |
| Wie es funktioniert – Schritt für Schritt | Zeitstrahl | C |
| Features – modulare Story-Blöcke | Bento-Gitter | D |
| Features – durchsuchbares Fähigkeitsband | Horizontaler Scroll-Karussell | E |
| Features – Einwände behandeln | Aufklappbare QA | F |
| Preistabelle | Preistabelle | PRICING |
| Preisvergleich mit Umschalter | Vergleichs-Preistabelle | COMPARE_PRICING |
| Testimonials – kompaktes Raster | Kompakte Karten im Raster | A |
| Testimonials – Magazin-Stil | Einzelspalten-Zitatwand | B |
| Testimonials – Masonry-Layout | Mosaik | C |
| Testimonials – horizontaler Scroll | Scrollendes Band | D |
| Testimonials – Sprechblasen | Gesprächsblasen | E |
| Testimonials – Avatar-Wand | Video-Avatar-Wand | F |
| Vertrauenswürdige Markenlogos | Marken-Wall | BRAND_WALL |
| Finaler CTA | Starker CTA-Bereich | CTA |
| FAQ – editorial Layout | Editorial-Typ | FAQ_A |
| FAQ – Kartenraster | Vollbreiten-Fokus | FAQ_B |
4c — Die Ausgabedateien schreiben
index.html – Mit dem Write-Tool schreiben. Kein Markdown-Block, direkt in die Datei.
- Dokumentstruktur:
<html>,<head>(Google Fonts, GSAP CDN, Links zu style.css + main.js),<body> - Nav-HTML passend zum gewählten Nav-Stil
<style>-Blöcke und<section>-HTML aus_sections.htmlin Seitenreihenfolge einfügen- Alle Platzhalter-Texte durch echte Produkttexte ersetzen – passend zum Stil der Stadt
- Kein Lorem Ipsum, kein Platzhaltertext
- Vorlagen-Einheitlichkeit durchbrechen: variiere die visuelle Gewichtung der Elemente innerhalb jedes Abschnitts. Die Vorlage zeigt ein sich wiederholendes Muster – mache ein Element zum Blickfang (Akzent-Hintergrund, größere Karte, hervorgehobenes Badge, anderes internes Layout) und lasse die anderen zurücktreten. Kein Abschnitt sollte wie ein Raster von Klonen aussehen.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
style.css – Mit dem Write-Tool schreiben. Struktur:
:root-Block – vollständiges Design-Token-System: Farben aus$CITY_*-Token, gewählte Schriften, Abstandsskala, Radien. Dies ist der einzige Teil, den das Modell von Grund auf schreibt.- Textur- und Clip-Path-CSS aus
_texture.csseinfügen - Nav-CSS passend zum gewählten Nav-Stil (aus
references/nav-catalog.md) - Layout- und Typografie-Overrides – nur was von den Abschnitts-Standards abweicht
clamp() für ALLE Überschriften-Schriftgrößen:
- Hero-Überschrift:
clamp(2.8rem, 7vw, 7rem)– selbst bei ausladenden Varianten nicht über 7rem - Abschnittsüberschrift:
clamp(2rem, 4vw, 4rem) - Große Zahlen/Deko-Zahlen:
clamp(4rem, 10vw, 9rem) - Untertitel/Erklärtexte:
clamp(1rem, 1.4vw, 1.2rem)
FÜGE KEINE Kommentare zu style.css hinzu – sie verbrauchen Tokens und bieten keinen Mehrwert für die Ausgabedatei.
main.js – Mit dem Write-Tool schreiben. Struktur:
gsap.registerPlugin(ScrollTrigger)- Kopiere die relevanten Funktionen aus
_gsap-base.js– Mindestanforderung:initHeroEntrance()– verzögerte Einblendung der Hero-ElementeinitParallax()– mindestens 2 Ebenen mit unterschiedlichen Geschwindigkeiten- Abschnitts-Überschriften-Enthüllung beim Betreten des Viewports
initStickySteps()ODERinitBlastMenu()ODERinitMagneticPill()– passend zur Nav/ zum Layout
- Aufruf-Reihenfolge am Ende;
ScrollTrigger.refresh()nach dem Laden der Schriftarten
FÜGE KEINE Kommentare zu main.js hinzu.
assets/icons.svg – SVG-Sprite mit <symbol>-Elementen. Mindestens: Logo-Zeichen, Nav-Umschalter, Pfeil, Häkchen, 2–3 produktrelevante Feature-Icons. Der Icon-Stil muss zur Strichstärke und Geometrie des Stadtstils passen.
Nachdem alle Dateien geschrieben wurden, lösche die Staging-Dateien:
rm -f "$_OUT/_sections.html" "$_OUT/_texture.css" "$_OUT/_gsap-base.js"
Design-Gesetze (Diese niemals brechen)
- Kein
#ffffff-Hintergrund. Weder für Abschnitte noch für Karten. Warme Neutrale:#f5ede0. Kühle:#edf0ee. Dunkel:#08060f. Karten erhalten einen leichten Farbstich, niemals reines Weiß. - Kein
#6366f1. Die Farbe kommt aus der Stadtstil-Palette. - Bestimme den Übergangstyp für jede Abschnittsgrenze unabhängig. Jedes Paar benachbarter Abschnitte hat seine eigene visuelle Beziehung – verwende nicht überall die gleiche Clip-Path-Klasse. Der Benutzer wählt eine Übergangsrichtung (geometrisch scharf / organisch weich / Cover-Blend / minimale Linie / KI-Auto) in der Optionsvorschau. Verwende diese Richtung, um einzuschränken, welche Klassen du auswählst:
GEOMETRIC→ Diagonalen, Fasen, Stufen;ORGANIC→ Kurven, Muscheln, Bögen;BLEND→ Cover-Overlays und Verlaufs-Überblendungen;MINIMAL→ Haarfeine Linien. Wenn__AI_CHOOSE__, durchsuche zuerst den Eintrag der ausgewählten Stadt inreferences/city-styles.mdnach Divider-/Übergangssprache. Wende dann pro-Grenzen-Logik an: überlege, was die beiden Abschnitte sind (Hero → Features, Features → Pricing, etc.), ihre relative Energie und den gesamten Seitenrhythmus. Verfügbare Klassen inassets/clip-paths.css: diagonal (clip-diagonal-*,clip-parallelogram), gebogen (clip-round-bottom,clip-scallop,clip-arc-bottom), Verlauf-Überblendung (section-dissolve), flache Linie (section-rule). - Keine generischen Icons. Passe die Strichstärke und Geometrie des Stadtstils an.
- Mindestens zwei Schriftarten. Display-/Serifen-Schrift für Überschriften + saubere Sans für Fließtext. Aus
references/city-styles.md. Dekorative/Handschrift-Akzente (wenn ein Stadtstil eine erwähnt) für Wasserzeichen, Zitate oder dekorative Elemente – niemals auf Buttons, Navigation oder Fließtext. - Navigation muss überraschen. Verwende die gewählte Nav aus
references/nav-catalog.mdmit ihrem vollständigen Überraschungselement. - Verwende die gebündelten Assets. Die Texturen, GSAP-Snippets und Clip-Paths müssen aus den Asset-Dateien des Skills stammen – nicht von Grund auf neu implementiert.
.line-wrapCJK-Fix. Wenn die Seite chinesischen oder japanischen Text enthält und.line-wrap { overflow: hidden }für Zeilen-Enthüllungsanimationen verwendet, fügepadding-top: 0.15em; margin-top: -0.15em;hinzu, um zu verhindern, dass CJK-Oberlängen oben abgeschnitten werden.- Keine Clone-Raster. Wenn ein Abschnitt mehrere sich wiederholende Elemente enthält (Feature-Reihen, Preiskarten, FAQ-Elemente, Testimonials), dürfen sie nicht alle die gleiche visuelle Behandlung erhalten. Ein Element sollte der Blickfang sein – größer, akzentuiert oder mit einem anderen Layout – während die anderen die Nebenrolle spielen. Ein Abschnitt sollte sich wie ein Poster mit visueller Hierarchie anfühlen, nicht wie eine Tabelle mit identischen Zeilen. Dies ist der mit Abstand häufigste Grund, warum Seiten „schablonenhaft“ statt gestaltet aussehen.
Referenzdateien
references/city-styles.md– Exakte Design-Parameter (Schriften, Farben, Texturen, Bewegung, Icons) für jede Stadtästhetikreferences/nav-catalog.md– 4 Nav-Stile mit vollständigen Implementierungshinweisen und GSAP-Codereferences/imagery-derivation.md– Wie man jede nicht-städtische Beschreibung (Szene, Epoche, Material, Emotion) in ein konkretes Design-Token-System übersetzt. Lies dies, wenn der Benutzer etwas beschreibt, das nicht eine der 57 Stadtelemente ist.references/product-demo-hero.md– Wann und wie man eine zeitgesteuerte Produkt-Workflow-Demo im Hero (Variante D) aufbaut. Enthält Szenen-Design-Anleitung, 3-Akt-Struktur,onEnter()-Callback-Muster und Produkttyp → Szenen-Zuordnungstabelle. Lies dies, wenn der Benutzer den Produktprozess im Hero zeigen möchte.
Fakten und Degradation
Bewertungen, Kundenlogos, Zahlen und Preise in den Vorlagen dienen nur als Strukturbeispiele; ohne Nachweise löschen oder durch echte Produktbeschreibungen ersetzen, keine falschen Endorsements erfinden. Die Implementierung muss Tastaturbedienung, prefers-reduced-motion und statischen lesbaren Inhalt bei fehlgeschlagenem Script-/CDN-Laden unterstützen. Visuelle Abnahmehinweise beziehen sich auf tatsächlich geprüfte Viewports und Zustände; ohne Rendering kann keine visuelle Prüfung bestätigt werden.