SaaS-Landingpage mit klarer Conversion

Kopierbare Prompt-Vorlage

Die technische Vorlage bleibt auf Englisch, damit sie direkt mit den unterstützten Coding-Agenten funktioniert. Erklärung, Auswahlhilfe und Prüfschritte sind lokalisiert.

Build a polished, responsive SaaS landing page for [PRODUCT NAME], a product that helps [TARGET USER] achieve [PRIMARY OUTCOME].

Before coding, translate the brief into a clear page hierarchy. Then implement the page as a complete, working experience.

Page structure:
1. A compact navigation with logo, Product, Use cases, Pricing, and one primary CTA.
2. A hero that states the concrete outcome in one sentence, supports it with a short explanation, and includes primary and secondary actions.
3. A product preview that looks like a believable interface—not a decorative empty frame.
4. Three outcome-led benefits with specific supporting details.
5. A simple “how it works” sequence with three steps.
6. Social proof using realistic placeholder companies and quantified results clearly marked as sample data.
7. A pricing preview with [NUMBER OF PLANS] plans and an obvious recommended option.
8. A concise FAQ and final CTA.

Visual direction:
- Brand personality: [BRAND PERSONALITY]
- Primary color: [PRIMARY COLOR]
- Use strong typography, generous whitespace, and restrained motion.
- Avoid excessive gradients, glass cards, floating blobs, and repetitive rounded boxes.
- Make every section visually distinct while keeping one coherent design system.

Quality requirements:
- Mobile-first and accessible: semantic landmarks, visible focus states, sufficient contrast, descriptive labels.
- Include hover, loading, empty, and error states where relevant.
- Use meaningful product copy instead of lorem ipsum.
- Keep the main CTA consistent across the page.
- Verify the layout at mobile, tablet, and desktop widths before finishing.