whicencer/product-landing

Produkt-Landingpage

Erstelle eine einseitige Marketing-Seite für ein einzelnes Produkt in einem durchgängigen visuellen Stil. Die Abschnittsdateien in references/ enthalten die detaillierten Regeln; diese Datei enthält den Arbeitsablauf und die für alle Abschnitte geltenden Regeln.

Arbeitsablauf

Schritt 1 – Fragen (eine Nachricht, bevor Code geschrieben wird)

Sammle die unten stehenden blockierenden Informationen in einer einzigen Nachricht. Frage in der Sprache des Benutzers.

• Überspringe jeden Punkt, den der Benutzer bereits in seiner Anfrage genannt hat.
• Falls nichts fehlt, überspringe diesen Schritt vollständig.
• Biete für jeden Punkt einen Standardwert an, damit der Benutzer kurz antworten oder ihn überspringen kann.

Punkt	Standardwert, falls übersprungen
Produktname + Beschreibung in einem Satz	– (erforderlich, darf nicht übersprungen werden)
4–8 Hauptfunktionen	Aus der Produktbeschreibung ableiten
Primäre Handlungsaufforderung: Button-Label + Link	"Loslegen" → #
Preise: Pläne, Preise, Währung – oder "kein Preisabschnitt"	Kein Preisabschnitt
Markenfarbe	#229ED9

Frage NICHT nach rechtlichem Namen, Adresse, Kontakten oder Links zu rechtlichen Seiten – verwende Platzhalter (siehe Schritt 5). Frage keine weiteren Runden. Nach der Antwort erstelle die Seite.

Schritt 2 – Planen

Entscheide still, ohne zu fragen:

• Anzeigemodus der Funktionen (agent / command / search / task) – siehe references/features.md.
• 1–3 Beispiele pro Funktion, die 3–4 Schritte von "Wie es funktioniert", alle Überschriften und Texte.

Schritt 3 – Abschnittsregeln lesen

Lese jede Datei kurz vor dem Erstellen ihres Abschnitts in Seitenreihenfolge:

1. references/hero.md – Navigation + Heldenbereich
2. references/features.md – Funktionsgalerie + Tabelle (verwendet assets/feature-showcase.js)
3. references/how-it-works.md
4. references/pricing.md – überspringen, falls es keinen Preisabschnitt gibt
5. references/final-cta.md
6. references/footer.md

Schritt 4 – Erstellen

Gib diese Dateistruktur aus (sofern der Benutzer kein Framework angefordert hat):

• index.html

• css/styles.css

• js/main.js

• js/feature-showcase.js

• index.html – nur Markup. Keine <style>-Blöcke, keine style=""-Attribute, außer wenn ein Skript sie setzt, kein Inline-JS. Das einzige erlaubte Inline-<script> ist der JSON-Beispiele-Block des Funktionsabschnitts.

• css/styles.css – alle Styles. Beginnt mit den Design-Tokens auf :root, dann Abschnitte in Seitenreihenfolge, jeder unter einem Kommentar-Header (/* ===== Hero ===== */).

• js/main.js – Seitenverhalten von dir geschrieben (Navbar-Zustand, mobiles Menü, Jahr im Footer usw.).

• js/feature-showcase.js – kopiere assets/feature-showcase.js bytegenau. Füge es niemals in main.js ein oder bearbeite es.

• Binde Dateien wie folgt ein:

  • <link rel="stylesheet" href="css/styles.css"> im <head>;
  • <script src="js/feature-showcase.js" defer></script> und <script src="js/main.js" defer></script> am Ende des <head>.

• Nur einfache Skripte – kein type="module", keine Imports. Die Seite muss funktionieren, wenn sie direkt von der Festplatte geöffnet wird (file://).

• Nur relative Pfade, damit der Ordner ohne Änderungen auf jeden Host hochgeladen werden kann.

Schritt 5 – Prüfen und melden

1. Gehe die Checkliste jeder Abschnittsdatei und die globale Checkliste unten durch. Behebe, was nicht stimmt.
2. Antworte dem Benutzer mit einer kurzen Liste aller Platzhalter, die er ausfüllen muss (Rechtsname, Adresse, Kontakte, Links zu rechtlichen Seiten, #-Links, $XX-Preise).

Globale Regeln

Fakten

Erfinde niemals Fakten über das Unternehmen: Preise, Pläne, Zahlen, Kundennamen, Testimonials, Rechtsname, Adresse, E-Mails, Handles, URLs. Verwende offensichtliche Platzhalter und liste sie in Schritt 5 auf.

Design-Tokens

Definiere diese als CSS-Variablen auf :root und verwende ausschließlich sie:

:root {
  --brand: #229ED9;              /* ersetzt durch die Markenfarbe des Benutzers */
  --brand-tint: color-mix(in srgb, var(--brand) 12%, white);
  --text: #0A0A0A;
  --text-muted: #6B6B70;
  --surface: #EEEEF1;            /* Karten, Tafeln */
  --bg: #FFFFFF;
  --hairline: rgba(0, 0, 0, 0.08);
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --container: 1040px;
}

• Nur helles Farbschema. Eine Akzentfarbe (--brand); alles andere ist schwarz, grau und weiß.
• Schriftart: Inter von Google Fonts (Gewichte 400, 500, 600, 700, 800).
• Symbole: Phosphor Icons über https://unpkg.com/@phosphor-icons/[email protected] (festgelegte Version).

Abschnitts-Header (gemeinsam für Funktionen, "Wie es funktioniert", Preise)

• H2: clamp(32px, 5vw, 48px), Gewicht 800, letter-spacing: -0.03em, line-height: 1.05, --text, linksbündig.
• Optionaler Untertitel: 18px, normal, --text-muted, max-width ~540px, 12px darunter.

Abstände und Rhythmus

• Inhaltscontainer: max-width: var(--container), Seitenabstand 24px (16px auf mobilen Geräten).
• Vertikaler Abstand zwischen Abschnitten: clamp(80px, 12vw, 140px).
• Wechsle schwere und leichte Abschnitte ab. Verwende niemals zwei interaktive Abschnitte hintereinander.

Text

• Einfach, konkret, menschlich. Kurze Sätze. Echte Nomen und Zahlen.
• Verbotene Wörter: nahtlos, leistungsstark, revolutionär, freischalten, superaufladen, mühelos, hochmodern.
• Der gesamte Seitentext in der Sprache, die der Benutzer gewünscht hat (Standard: die Sprache der Produktbeschreibung).

Bewegung

• Nur dezent: Hover-Lifts, 150–250ms Übergänge, optionales einmaliges Einblenden beim Scrollen.
• Alles respektiert prefers-reduced-motion.
• Die einzige Endlosschleifen-Animation auf der Seite ist der Puls des Markenlogos im Heldenbereich (siehe references/hero.md). Keine anderen unendlichen Animationen.

Globale Checkliste

• Nur die in Schritt 3 aufgeführten Abschnitte, in dieser Reihenfolge.
• Nur Farben aus den Tokens; eine Akzentfarbe.
• Keine erfundenen Geschäftsdaten; alle Platzhalter dem Benutzer gemeldet.
• Helden-CTA, Navbar-CTA und finale CTA sind die gleiche Aktion.
• Kein horizontales Scrollen der Seite bei 375px; alles auf mobilen Geräten lesbar.
• Grundlagen der Tastatur- und Screenreader-Bedienung: echte Buttons, Alt-Texte, sichtbare Fokus-Zustände.
• Jedes Inline-<script> endet nur mit seinem tatsächlichen schließenden Tag: kein </script innerhalb von JS-Code, Kommentaren oder Strings.
• Dateien: index.html, css/styles.css, js/main.js, js/feature-showcase.js – nichts anderes, kein Inline-CSS/JS.
• js/feature-showcase.js ist identisch mit assets/feature-showcase.js.
• Der JSON-Beispiele-Block enthält keinen </script-Text.
• Die Seite funktioniert, wenn index.html direkt von der Festplatte geöffnet wird.