Startup Landing Skill
Kategorie: SaaS / Startup Erstellt eine konversionsstarke einseitige Startup-Landingpage: Hero, Features, sozialer Beweis, Preise und CTA. Das Ziel ist es, den Wert in 30 Sekunden zu vermitteln und die E-Mail zu erhalten.
Metadaten
Name: startup-landing Beschreibung: Einseitige Startup-Landingpage: Hero, Features, sozialer Beweis, Preise und CTA. Trigger-Keywords: "startup landing", "marketing page", "product launch", "SaaS landing", "landing page"
Eingaben & Parameter
| Parameter | Typ | Erforderlich | Standard |
|---|---|---|---|
product_name | string | ✓ | — |
tagline | string | ✓ | — |
description | string | ✓ | — |
has_pricing | boolean | ✓ | true |
has_testimonials | boolean | — | true |
proof_count | integer | — | 4 |
pricing_tiers | array | — | [3 Standard-Stufen] |
primary_color | string | — | DESIGN.md Akzent |
Preisstufe:
{ name: string; price: string; period: string; features: string[]; cta: string; highlighted?: boolean }
Erforderliche Abschnitte (in Reihenfolge)
- Navigation — Logo + Navigationslinks + "Get Started" CTA-Button
- Hero — Produktname, Tagline, Beschreibung, duale CTAs (primär: "Get Started Free", sekundär: "See Demo"), optionaler Produkt-Screenshot/Mockup
- Social Proof Strip — Logoreihe (graustufen, max. 6)
- Features — 3-Spalten-Grid, Icon + Titel + Beschreibung je
- Funktionsweise — 3-stufiger horizontaler Ablauf mit nummerierten Schritten
- Preise — 3 Stufenkarten (Starter / Pro / Enterprise)
- Testimonials — 2-3 Zitate mit Name, Rolle, Unternehmen, Avatar
- CTA-Bereich — Dunkler Abschnitt: Überschrift + E-Mail-Eingabe + Button
- Footer — Links + Copyright
Design-Regeln
- Mobile-First responsiv
- Alle CTAs müssen funktionierende href- oder Formular-Action haben
- Preiskarten: hervorgehobene Karte hat deutlichen Rand + Schatten
- Testimonial-Avatare: verwende
https://i.pravatar.cc/60?img=[n]für konsistente Platzhalter - Kein externes JS
- All CSS inline im
<style>-Block - Keine erfundenen Farben – nur DESIGN.md-Token verwenden
Ausgabe
Einzelne Datei: index.html (eigenständig)
Selbstprüfung
- Kein Lorem Ipsum an irgendeiner Stelle
- Mindestens 4 Features aufgelistet
- Preisstufen sind in der Höhe konsistent
- Alle CTAs sind klar beschriftet und gestylt
- Mobil: wird auf eine einzelne Spalte reduziert
- E-Mail-Eingabe im CTA-Bereich hat
type="email"undrequired