SaaS Landingpage – Skill (splatstudio)
Erstelle eine vollständige, in sich geschlossene Landingpage für ein SaaS‑Produkt, die genau ein Produkt mit einer zentralen Idee verkauft.
Arbeitsablauf
- Lies das aktive
DESIGN.md(wird oben eingefügt). Hero, Karten und CTAs übernehmen Farbe, Schriftart, Abstände und Radien aus den dort definierten Tokens. Erfinde keine eigenen Werte – verwende ausschließlichvar(--token). - Lege Produktnamen und Versprechen fest. Leite aus der Aufgabenstellung einen konkreten Produktnamen, ein einzeiliges Versprechen und die einzelne primäre Handlungsaufforderung ab („Test starten“ / „Demo buchen“ / „Loslegen“). Schreibe echten Text – keine Platzhalter wie „Funktion Eins“ oder „Ihr Unternehmen hier“.
- Baue die Abschnitte in dieser Reihenfolge auf:
- Klebende Navigation: Wortmarke links, 4-5 Links, primärer CTA‑Button rechts.
- Hero: eine H1‑Überschrift (max. ~8 Wörter), ein unterstützender Absatz, zwei Buttons (primär + sekundär) und ein eingerahmter Platzhalter für ein Produktbild.
- Logo‑Leiste: 5-6 Kundennamen, zurückhaltend, gleichmäßig verteilt.
- Feature‑Grid: 6 Karten, jede mit kurzem Titel (max. 5 Wörter) und einem 1-2‑Satzigen Nutzen – keine technischen Merkmalslisten.
- Testimonial: ein Zitat mit Name, Rolle und Unternehmen.
- Pricing‑Teaser: 2-3 Plankarten, Preise in der in der Aufgabenstellung genannten Währung, Aufzählungspunkte zu Funktionen (max. 5 pro Karte), ein hervorgehobener Plan.
- Abschließendes CTA‑Band + schmaler Footer (Spalten: Produkt / Unternehmen / Rechtliches).
- Halte die Qualität hoch:
- Eine einzige H1 auf der Seite; H2 pro Abschnitt; Hierarchie durch Schriftgröße, nicht durch Farbe.
- Primärfarbe ausschließlich für Aktionen – niemals als Dekoration.
- Rhythmus der Abschnitte folgt der Abstandsskala (
--section-y-*oder Abstands‑Tokens); wechsle zwischen Oberflächen- und Hintergrundfarben für visuelle Atmung. - Jedes interaktive Element erhält einen sichtbaren Fokus‑Zustand; Buttons sind mindestens 44 px hoch; der Kontrast von dezentem Text auf dem Hintergrund des Bandes beträgt mindestens 4,5:1.
- Responsiv: unter 768 px wird eine einzige Spalte angezeigt; die Navigation reduziert sich auf eine einfache, gestapelte oder hamburgerfreie Zeile mit Links.
- Gib eine einzige eigenständige
index.htmlaus –<style>eingebettet, keine externen Anfragen, kein JavaScript, es sei denn, die Aufgabenstellung fordert dies ausdrücklich.
Anti‑Patterns
- Vorgefertigte Verläufe hinter dem Hero mit unleserlichem Overlay‑Text.
- Sechs gleich große Funktionen, die alle behaupten „leistungsstark“ zu sein.
- Mehr als eine Akzentfarbe pro Bildschirm; Ember/Rot ist für Fehler reserviert.
- Lorem ipsum, „Entfesseln Sie die Kraft von …“, „Revolutionieren Sie …“.