Frontend Landings

Erstelle atemberaubende, build-freie, HTML-Landingpages in einer einzigen Datei mit kuratierten Style-Presets, flüssigen Animationen, responsivem Design und Dunkelmodus – alles in einer eigenständigen Datei.

Bevor du startest

Lies die Referenzdatei für die Style-Presets, um die verfügbaren Ästhetiken zu verstehen:

references/STYLE_PRESETS.md

Zwei Betriebsmodi

Modus 1: Von Grund auf neu

Der Benutzer gibt Produktdetails an → generiere eine vollständige Landingpage.

Erfasse diese Eingaben (frage nach, falls nicht angegeben):

Produkt-/Markenname (erforderlich)
Slogan / Hero-Überschrift (erforderlich)
3–6 Hauptfunktionen oder Vorteile (erforderlich)
Zielgruppe (hilfreich)
Primärer CTA (z. B. „Kostenlose Testversion starten", „Auf die Warteliste setzen") – Standard: „Loslegen"
Farbpräferenzen (optional – das Preset erledigt dies)
Style-Preset (zeige das Preset-Menü, falls nicht angegeben)

Modus 2: Verbessern / Konvertieren

Der Benutzer gibt bestehendes HTML, eine Beschreibung, einen Screenshot oder eine URL an → verbessere mit besserem Design, Animationen und Reaktionsfähigkeit.

Workflow:

Analysiere das bestehende Design (Struktur, Farben, Typografie, Layout)
Identifiziere Verbesserungen (Animationen, Reaktionsfähigkeit, Zugänglichkeit, visuelle Hierarchie)
Frage, welches Style-Preset angewendet werden soll (oder bestehende Ästhetik beibehalten)
Regeneriere als einzelne HTML-Datei mit allen Verbesserungen

Style-Preset-System

BIETE IMMER das Preset-Menü an zu Beginn jeder Landingpage-Aufgabe, es sei denn, der Benutzer hat bereits eines ausgewählt oder explizit eine bestimmte Ästhetik beschrieben.

Präsentiere die Presets wie folgt:

Wähle einen visuellen Stil für deine Landingpage (Nummer oder Name eingeben):

 1. ☁️  Clean SaaS Minimal      — Klare Weißtöne, dezente Schatten, systemnahes Gefühl
 2. 🔮  Glassmorphic Modern      — Milchglas-Paneele, Farbverläufe, Transluzenz
 3. 🏗️  Bold Brutalist           — Rohe Betonstrukturen, Schreibmaschinenschrift, harte Kontraste
 4. 🌆  Cyberpunk Neon           — Dunkle Hintergründe, elektrisches Leuchten, Scanline-Effekte
 5. ✒️  Elegant Serif Premium     — Redaktioneller Luxus, Serifen-Überschriften, Goldakzente
 6. 🎨  Playful Gradients        — Verspielte Animationen, Mesh-Farbverläufe, abgerundete Ecken
 7. 🌙  Dark Mode First          — Tiefes Schwarz, Neon-Akzente, OLED-optimiert
 8. 📻  Vintage Retro            — Warme Sepiatöne, Retro-Schriftarten, nostalgische Texturen
 9. 🌿  Organic Nature           — Erdtöne, organische Formen, botanische Illustrationen
10. 🏢  Corporate Professional   — Marineblau/Schieferfarben-Palette, strukturiertes Raster, vertrauensbildend

Oder beschreibe deine eigene individuelle Ästhetik!

Nachdem der Benutzer ausgewählt hat, lies references/STYLE_PRESETS.md für die detaillierten CSS-Variablen, Schriftfamilien, Animationsstile und Design-Tokens für dieses Preset.

Ausgabeanforderungen

Single-File-HTML-Architektur

Jede Ausgabe MUSS eine vollständige, eigenständige HTML-Datei sein. Aufbau:

<!DOCTYPE html>
<html lang="de" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- SEO Meta Tags -->
  <title>{Produktname} — {Slogan}</title>
  <meta name="description" content="{Prägnante Produktbeschreibung}">
  <meta property="og:title" content="{Produktname}">
  <meta property="og:description" content="{Beschreibung}">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- Anime.js für Animationen -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
  
  <!-- Google Fonts (presetspezifisch) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family={Preset+Fonts}&display=swap" rel="stylesheet">
  
  <!-- Tailwind-Konfiguration + Benutzerdefiniertes Theme -->
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          // Presetspezifische Erweiterungen
          fontFamily: { /* vom Preset */ },
          colors: { /* vom Preset */ },
        }
      }
    }
  </script>
  
  <style>
    /* CSS-Custom-Propertys vom Preset */
    :root { /* Light-Theme-Variablen */ }
    .dark { /* Dark-Theme-Variablen */ }
    
    /* Basis-Klassen für Scroll-Animationen */
    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal.active { opacity: 1; transform: translateY(0); }
    
    /* Presetspezifische benutzerdefinierte Stile */
  </style>
</head>
<body>
  <!-- Der gesamte Inhalt hier -->
  
  <script>
    // Dunkelmodus-Umschalter
    // Scroll-Reveal-Observer
    // Anime.js-Eingangsanimationen
    // Interaktive Komponenten (FAQ-Akkordeon, Preisschalter usw.)
  </script>
</body>
</html>

CDN-Stack (keine anderen erlaubt)

Tailwind CSS: https://cdn.tailwindcss.com (mit Inline-Konfiguration)
Anime.js: https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js
Google Fonts: Nur presetspezifische Schriftarten
Icons: Nur Inline-SVG (Heroicons-Stil). NIE Icon-Font-CDN verwenden.

Pflichtfunktionen in jeder Ausgabe

Responsives Design — Mobile-First. Gedanklich bei 375px, 768px, 1280px testen.
Dunkel-/Hell-Modus — prefers-color-scheme-Autoerkennung + manueller Umschaltbutton in der Navigation.
Scroll-Animationen — IntersectionObserver-basierte Einblendeanimationen für alle Abschnitte.
Sanftes Scrollen — scroll-smooth am HTML-Element + JS für Navigationsanker.
Barrierefreiheit — Semantisches HTML5, ARIA-Labels für interaktive Elemente, Focus-Visible-Stile, Skip-to-Content-Link, ausreichender Farbkontrast.
SEO-Meta-Tags — title, description, og:title, og:description, og:type, twitter:card.
Leistung — Lazy-Load-Bilder, effizientes CSS, minimales JS.

Abschnittserstellung

Basierend auf Benutzereingaben intelligent diese Abschnitte einbeziehen. Nicht alle sind erforderlich – an den Produktkontext anpassen:

Immer einbeziehen:

Navigation — Sticky/Fixed-Nav mit Logo, Links, Dunkelmodus-Umschalter, primärem CTA-Button
Hero — Große Überschrift + Unterüberschrift + CTA-Button(s) + visuelles Element (Farbverlauf, abstrakte Form oder Bildplatzhalter)
Features — 3–6 Feature-Karten/Raster mit Inline-SVG-Icons
Abschließender CTA — Breiter Call-to-Action-Banner mit Überschrift + Button
Footer — Links, Copyright, Social-Icons (Inline-SVG)

Einbeziehen, wenn relevant:

Sozialer Beweis / Logos — „Vertrauen von"-Logo-Leiste (Platzhalterboxen mit unternehmensähnlichen Namen verwenden)
Testimonials — 2–3 Zitate-Karten mit Avatar-Platzhaltern
Preisgestaltung — 3 Stufen mit monatlichem/jährlichem Umschalter (JS-gesteuert)
FAQ — Akkordeon mit sanften Öffnungs-/Schließ-Animationen
So funktioniert's — 3-Schritte-Prozess mit nummerierten Schritten
Statistiken / Metriken — Animierte Zähler (z. B. „10k+ Nutzer", „99,9 % Verfügbarkeit")

Animations-Playbook

Nutze diese Animationsmuster konsistent:

Scroll-Reveal (IntersectionObserver)

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('active');
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

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

Gestaffelter Eingang (Anime.js)

anime({
  targets: '.feature-card',
  opacity: [0, 1],
  translateY: [40, 0],
  delay: anime.stagger(100, { start: 300 }),
  easing: 'easeOutCubic',
  duration: 800
});

Hero-Text-Animation

anime({
  targets: '.hero-title .word',
  opacity: [0, 1],
  translateY: [20, 0],
  delay: anime.stagger(80),
  easing: 'easeOutExpo',
  duration: 1200
});

Hover-Mikrointeraktionen

Verwende CSS-Übergänge für Hover-Effekte – Anime.js nur für komplexe Sequenzen:

.card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); }

Zähler-Animation

function animateCounter(el) {
  const target = parseInt(el.dataset.target);
  anime({
    targets: el,
    innerHTML: [0, target],
    round: 1,
    easing: 'easeInOutExpo',
    duration: 2000
  });
}

Dunkelmodus-Implementierung

// Systempräferenz und gespeicherte Präferenz prüfen
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const saved = localStorage.getItem('theme');
if (saved === 'dark' || (!saved && prefersDark)) {
  document.documentElement.classList.add('dark');
}

// Umschaltfunktion (an Button binden)
function toggleDark() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme',
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}

Umschaltbutton in der Navigation:

<button onclick="toggleDark()" aria-label="Dunkelmodus umschalten" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
  <!-- Sonnen-Symbol (wird im Dunkelmodus angezeigt) -->
  <svg class="hidden dark:block w-5 h-5" ...>...</svg>
  <!-- Mondsymbol (wird im Hellmodus angezeigt) -->
  <svg class="block dark:hidden w-5 h-5" ...>...</svg>
</button>

Typografie & Anti-Generic-Regeln

NIEMALS diese Schriften verwenden: Inter, Roboto, Arial, Helvetica, Open Sans, system-ui-Standardschriften.

Jedes Preset gibt eine eigene unverwechselbare Schriftkombination vor. Immer über das Google Fonts CDN laden.

NIEMALS Standard-Tailwind-Farben ohne Anpassung verwenden. Jedes Preset definiert eine benutzerdefinierte Palette über CSS-Variablen UND den tailwind.config.extend.

NIEMALS eine Seite ausgeben, die wie jede andere KI-generierte Landingpage aussieht. Jedes Preset hat spezifische Unterscheidungsmerkmale – diese respektieren.

Inline-SVG-Icons

Verwende Inline-SVGs im Heroicons-Stil. Hier das Muster:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="..." />
</svg>

Füge 6–8 häufig benötigte Icons direkt in das HTML ein. Wähle kontextuell relevante Icons für die Produktfunktionen.

FAQ-Akkordeon-Implementierung

document.querySelectorAll('.faq-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const content = btn.nextElementSibling;
    const icon = btn.querySelector('.faq-icon');
    const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';
    
    // Alle anderen schließen
    document.querySelectorAll('.faq-content').forEach(c => { c.style.maxHeight = '0px'; });
    document.querySelectorAll('.faq-icon').forEach(i => { i.style.transform = 'rotate(0deg)'; });
    
    if (!isOpen) {
      content.style.maxHeight = content.scrollHeight + 'px';
      icon.style.transform = 'rotate(45deg)';
    }
  });
});

Preis-Umschalter-Implementierung

const toggle = document.getElementById('pricing-toggle');
const monthlyPrices = document.querySelectorAll('.price-monthly');
const annualPrices = document.querySelectorAll('.price-annual');

toggle.addEventListener('change', () => {
  const isAnnual = toggle.checked;
  monthlyPrices.forEach(el => el.classList.toggle('hidden', isAnnual));
  annualPrices.forEach(el => el.classList.toggle('hidden', !isAnnual));
});

Abschließende Ausgabeanweisungen

Nach dem Generieren des HTML IMMER diese Anleitung anhängen:

✅ Deine Landingpage ist fertig!

So verwendest du sie:
1. Kopiere den gesamten obigen Code in eine Datei namens `index.html`
2. Öffne sie in einem beliebigen Browser – sie funktioniert eigenständig, kein Build-Schritt erforderlich

So stellst du sie kostenlos bereit:
• Vercel: vercel.com → Neues Projekt → index.html per Drag & Drop hochladen
• Netlify: app.netlify.com → index.html per Drag & Drop hochladen
• GitHub Pages: In ein Repository pushen → Einstellungen → Pages → Von Main bereitstellen

So passt du sie weiter an:
• Farben: Bearbeite die CSS-Variablen in :root { } und .dark { }
• Inhalt: Der gesamte Text befindet sich direkt im HTML – suchen und ersetzen
• Schriftarten: Tausche den Google-Fonts-Link und die font-family-Werte aus
• Animationen: Passe die Zeitsteuerung in den Anime.js-Aufrufen und CSS-Übergängen an

Qualitätscheckliste

Vor der Ausgabe gedanklich überprüfen:

hemsurendranath/frontend-landings-claude-skill

Was ist frontend-landings-claude-skill?

In Ihrer bevorzugten KI fragen

Dokumentation