Ship Page

Erstelle interaktive, animationsreiche Landing Pages, die vollständig im Browser als einzelne HTML-Datei laufen.

Diese Fähigkeit hilft Nicht-Designern, professionelle Produktseiten durch visuelle Erkundung ("show, don't tell") zu entwickeln und anschließend produktionsreife Landing Pages mit echter Interaktivität zu generieren – keine statischen Mockups.

Kernprinzipien

Null Abhängigkeiten – Einzelne HTML-Datei mit Inline-CSS/JS. Kein npm, keine Build-Tools, keine Frameworks. Eine einzelne HTML-Datei überlebt jedes React-Projekt.
Zeigen, nicht erzählen – Menschen können nicht beschreiben, was sie wollen, aber sie erkennen es, wenn sie es sehen. Generiere visuelle Vorschauen, lass sie auswählen.
Anti-AI-Schrott – Keine lila Farbverläufe auf Weiß. Keine generischen SaaS-Vorlagen. Jede Seite sollte maßgeschneidert für das Produkt wirken.
Standardmäßig interaktiv – Landing Pages sind keine Folien. Sie haben Scroll-Animationen, Hover-Zustände, Datenzähler, Partikeleffekte und Mikrointeraktionen, die Besucher zum Bleiben bewegen.
Versandbereit – Die Ausgabe funktioniert sofort. Die HTML-Datei kann überall abgelegt werden – GitHub Pages, Vercel, Netlify oder einfach im Browser geöffnet.

Erkennungsmodus

Modus A: Neue Seite – Von Grund auf neu erstellen. Gehe zu Phase 1.
Modus B: README-Konvertierung – Ein GitHub-README oder eine Produktbeschreibung in eine Landing Page verwandeln. Inhalt extrahieren, dann zu Phase 1 Schritt 2 gehen (Inhaltsfragen überspringen, direkt zu Stil).
Modus C: Verbesserung – Eine bestehende HTML-Landing Page verbessern. Lesen, Struktur verstehen, Inhalt erhalten, verbessern. Beachte die Regeln für Viewport und Abschnittsdichte.

Phase 1: Erkundung

Verstehe das Produkt und sammle Inhalte. Stelle ALLE Fragen in einem einzigen AskUserQuestion-Aufruf.

Frage 1 – Produkttyp (Header: "Produkt"): Was baust du? Optionen: SaaS / Entwicklerwerkzeug / Mobile App / Open-Source-Projekt / Persönliche Marke / Andere

Frage 2 – Inhalt (Header: "Inhalt"): Was soll die Seite enthalten? Optionen: Ich füge meinen Inhalt ein / Aus meinem README ziehen / Einfach für mich beschreiben / Ich habe ein Dokument

Frage 3 – Schlüsselabschnitte (Header: "Abschnitte", multiSelect: true): Welche Abschnitte benötigst du? Optionen: Hero mit CTA / Funktionen-Raster / Wie es funktioniert / Preisgestaltung / Erfahrungsberichte / FAQ / Statistiken und Kennzahlen / Newsletter-Anmeldung / GitHub Stars Abzeichen

Frage 4 – Startziel (Header: "Start"): Wo wird diese Seite leben? Optionen: GitHub Pages / Eigenständige Website / Product Hunt Launch / Nur Erkundung

Wenn der Benutzer Inhalte bereitstellt (README, Beschreibung, Dokument), fahre fort mit:

Schritt 1.1: Inhaltsanalyse

Analysiere die bereitgestellten Inhalte und extrahiere:

Produktname und einzeilige Beschreibung
Hauptfunktionen (anstreben 3-6)
Zielgruppensignale
Genannte Metriken/Zahlen
Handlungsaufforderung (was sollen Besucher tun?)

Bestätige über AskUserQuestion (Header: "Inhaltscheck"): "Hier ist, was ich extrahiert habe – sieht das richtig aus?" Optionen: Sieht gut aus / Lass mich anpassen

Phase 2: Stil-Erkundung

Dies ist die "show, don't tell"-Phase. Die meisten Menschen können Designpräferenzen nicht in Worte fassen.

Schritt 2.1: Stimmungswahl

Frage über AskUserQuestion (Header: "Stimmung", multiSelect: true, max 2): Welches Gefühl sollen Besucher bekommen? Optionen: Futuristisch & Technisch / Sauber & Minimalistisch / Kühn & Energetisch / Dunkel & Premium / Verspielt & Kreativ / Corporate & Vertrauenswürdig

Schritt 2.2: Stilvorschauen generieren

Basierend auf der Stimmungswahl 3 verschiedene Einzelabschnitt-HTML-Vorschauen generieren, die zeigen:

Typografiewahl (Kopfzeilen- + Textschriftart-Paarung)
Farbpalette (Hintergrund, Text, Akzent, CTA)
Hero-Abschnitt-Layout mit Produktname
Eine Mikrointeraktion oder Animation
Gesamtatmosphäre (Hintergrundbehandlung, Abstände)

Jede Vorschau sollte eine vollständige, funktionierende HTML-Datei sein, die nur den Hero-Abschnitt auf drei komplett unterschiedliche Arten zeigt. Speichere Vorschauen unter .ship-page/previews/.

Lies references/STYLE_PRESETS.md für kuratierte Preset-Definitionen. Verwende Presets als FOUNDATION und passe sie für das spezifische Produkt an.

Bestätige über AskUserQuestion (Header: "Wähle deinen Stil"): "Welche Richtung spricht dich an?" Optionen: Stil A / Stil B / Stil C / Elemente mischen (beschreiben)

Schritt 2.3: Direkte Preset-Auswahl (Alternative)

Wenn der Benutzer bereits weiß, was er will, oder sagt "mach es einfach dunkel/minimal/technisch":

Lies references/STYLE_PRESETS.md
Ordne das nächstgelegene Preset zu
Überspringe die Vorschau-Generierung, gehe zu Phase 3

Phase 3: Landing Page generieren

Generiere die vollständige Landing Page mit Inhalten aus Phase 1 und Stil aus Phase 2.

Strukturregeln

Jede Landing Page folgt dieser Architektur:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Schriftarten, CSS-Variablen, alle Stile inline -->
  <!-- Keine externen Abhängigkeiten außer Google Fonts + Font Awesome CDN -->
</head>
<body>
  <nav><!-- Fixierte Navigation mit Produktname + CTA --></nav>
  
  <section class="hero"><!-- Über der Falte: Überschrift, Unterüberschrift, CTA --></section>
  <section class="features"><!-- Funktionen-Raster oder Präsentation --></section>
  <section class="social-proof"><!-- Statistiken, Erfahrungsberichte, Logos --></section>
  <!-- ... weitere Abschnitte nach Bedarf ... -->
  <section class="cta-final"><!-- Abschließender Aufruf zum Handeln --></section>
  <footer><!-- Links, Copyright --></footer>

  <script>
    // Scroll-Animationen, Zähler, Interaktionen – alles inline
  </script>
</body>
</html>

Verbindliche technische Anforderungen

Viewport-Anpassung – Jeder Abschnitt sollte sich "voll" anfühlen, aber niemals überlaufen. Verwende min-height: 100vh für den Hero, proportionale Höhen für andere.
Responsiv – Muss auf Mobilgeräten funktionieren. Verwende clamp() für alle Schriftgrößen, viewportrelative Einheiten für Abstände.
Scroll-Animationen – Verwende IntersectionObserver für Enthüllen-beim-Scrollen. Elemente sollten beim Scrollen des Benutzers animiert eingeblendet werden.
Leistung – CSS-Animationen bevorzugt vor JS. will-change auf animierten Elementen. Scroll-Handler entprellen.
Barrierefreiheit – Semantisches HTML, ausreichender Kontrast, prefers-reduced-motion Media Query für alle Animationen.

Abschnittsdichtegrenzen

Pro Abschnitt (um Überfüllung zu vermeiden):

Hero: 1 Überschrift (max 8 Wörter), 1 Unterüberschrift (max 20 Wörter), 1-2 CTAs, optionaler Hintergrundeffekt
Funktionen: Max 6 Karten. Pro Karte: Icon + Titel (3-4 Wörter) + Beschreibung (max 15 Wörter)
Statistiken/Kennzahlen: Max 4 Zähler
Erfahrungsberichte: Max 3 Zitate
Preisgestaltung: Max 3 Stufen
FAQ: Max 6 Einträge (Akkordeon/Zusammenklappfunktion verwenden)

Zu viel Inhalt für einen Abschnitt? Teile ihn in zwei Abschnitte mit einem visuellen Bruch dazwischen.

CSS-Architektur

:root {
  /* Typografie – immer clamp() verwenden */
  --font-display: 'EIGENE_AUSWAHL', serifenlos;
  --font-body: 'EIGENE_AUSWAHL', serifenlos;
  --heading-size: clamp(2rem, 5vw, 4.5rem);
  --body-size: clamp(0.875rem, 1.5vw, 1.125rem);
  
  /* Farben – vollständige Palette definieren */
  --bg-primary: #...;
  --bg-secondary: #...;
  --text-primary: #...;
  --text-secondary: #...;
  --accent: #...;
  --accent-hover: #...;
  --cta-gradient: linear-gradient(...);
  
  /* Abstände */
  --section-padding: clamp(3rem, 8vw, 8rem);
  --content-width: min(90vw, 1200px);
  
  /* Animation */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scroll-Enthüllen-Basisklasse */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

JavaScript-Grundlagen

Verwende immer diese Muster:

// Scroll-Enthüllen mit IntersectionObserver
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// Animierte Zähler (für Statistikabschnitte)
function animateCounter(el, target, duration = 2000) { ... }

// Sanftes Scrollen für Nav-Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => { ... });

Lies references/SECTION_LIBRARY.md für vollständige Abschnittsvorlagen mit HTML-, CSS- und JS-Mustern für jeden Abschnittstyp.

Anti-AI-Schrott-Checkliste

Vor dem Generieren überprüfen:

Schriftarten sind NICHT Inter, Roboto, Arial oder Systemstandards
Farbschema ist NICHT lila-gradient-auf-weiß
Hero verwendet nicht die Worte "Revolutionieren" oder "Supercharge"
CTA-Buttons haben Hover-Animationen, nicht nur Farbwechsel
Hintergrund hat Textur/Tiefe – NICHT flache Volltonfarbe
Mindestens eine unerwartete Designentscheidung (asymmetrisches Layout, kühne Typografie, kreativer Abschnittsseparator)

Lieferung

Speichere die HTML-Datei mit einem beschreibenden Namen: {produktname}-landing.html
Im Browser öffnen: open {produktname}-landing.html
Dem Benutzer präsentieren und Feedback einholen

Phase 4: Iteration

Nach der ersten Generierung über AskUserQuestion (Header: "Feedback") fragen: "Wie sieht es aus?" Optionen: Abschicken! / Farben-Schriftarten anpassen / Layout ändern / Abschnitte hinzufügen-entfernen / Mit neuem Stil von vorne beginnen

Für Änderungen diese Regeln befolgen:

Inhalte hinzufügen: Zuerst die Abschnittsdichtegrenzen prüfen. Wenn überschritten, Abschnitte teilen.
Stil ändern: CSS-Variablen aktualisieren, Struktur nicht neu schreiben.
Abschnitte hinzufügen: Lies references/SECTION_LIBRARY.md für die Abschnittsvorlage, füge in logischer Reihenfolge ein.
Abschnitte entfernen: Sauber löschen, prüfen, dass keine JS-Referenzen brechen.

Referenzen (Progressive Offenlegung)

Diese Fähigkeit verwendet progressive Offenlegung – lade Referenzdateien nur bei Bedarf:

Datei	Wann lesen	Enthält
`references/STYLE_PRESETS.md`	Phase 2 (Stil-Erkundung)	5 kuratierte Stil-Presets mit vollständigen CSS-Variablen, Schriftart-Paarungen und Hintergrundbehandlungen
`references/SECTION_LIBRARY.md`	Phase 3 (Generierung)	Vollständige HTML/CSS/JS-Vorlagen für jeden Abschnittstyp (Hero, Funktionen, Preisgestaltung usw.)

Ship Page — Prompt→interaktive Landing (1 HTML)

Was ist Ship Page — Prompt→interaktive Landing (1 HTML)?

In Ihrer bevorzugten KI fragen

Dokumentation