# AI SaaS Landing Page Template: 4 Abschnitte, die es braucht > Ein AI SaaS Landing Page Template braucht vier Abschnitte, die normale SaaS-Seiten weglassen: eine Demo, die antwortet, Datenschutz, Nutzungspreise und Modelle. - Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI - Veröffentlicht: 6. Nov. 2026 - Kategorie: [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build) - Lesezeit: 9 Min. - Kanonische URL: https://wingo-ui.com/de/blog/ai-saas-landing-page-template - Englische Fassung: https://wingo-ui.com/blog/ai-saas-landing-page-template ## Kurz gesagt Eine KI-SaaS-Landing-Page braucht vier Dinge, auf die eine normale SaaS-Seite verzichten kann: eine Demo, die vor den Augen des Besuchers auf einen Prompt antwortet, eine klare Antwort auf die Frage, ob Kundendaten das Modell trainieren, Preise, die Seats, Credits oder Nutzungslimits erklären, und eine ehrliche Antwort darauf, welche Modelle das Produkt antreiben. Die Vorlage AI Product Page von Wingo UI hat für jeden Punkt einen Abschnitt, gefüllt über Props. Du ersetzt also die Beispieldaten, statt die Abschnitte zu bauen. Auf einem 390px-Smartphone bleibt das Assistenz-Panel lesbar, die Prompt-Chips scrollen in einer Reihe, und die übrigen Abschnitte stapeln sich in einer Spalte. Wer nach einem AI SaaS Landing Page Template sucht, landet auf Marktplätzen. Am 6. November 2026 bestanden die Treffer, die wir gesehen haben, vor allem aus Angeboten auf Gumroad, Product Hunt, Monster One, dem Marktplatz von Framer und Getly. Ein [Angebot auf Getly](https://www.getly.store/product/saas-landing-page-template-html-dark-mode-responsive) ist typisch: $34 für eine einzelne HTML-Datei mit einer Aufgaben-Demo im Hero, einem Bento mit Features, Social Proof von Kunden, einer Preistabelle mit monatlicher und jährlicher Abrechnung, einem FAQ und einem Call to Action am Ende. Eine gute generische SaaS-Seite. Nur gibt es keinen Abschnitt, der einem Käufer sagt, ob seine Daten ein Modell trainieren, und in den Preisen ist kein Platz für Credits oder Nutzungslimits. Genau diese Fragen entscheiden über einen KI-Kauf. Dieser Guide zeigt, was eine KI-Produktseite über die üblichen Abschnitte hinaus braucht und wie die [Vorlage AI Product Page](https://wingo-ui.com/templates/ai-page) von Wingo UI, der Bibliothek, die wir bauen, jeden Punkt abdeckt, inklusive der Ansicht bei 390px. Willst du zuerst die generische Version, lies, [was jeder Abschnitt einer SaaS Landing Page beweisen muss](https://wingo-ui.com/de/blog/nextjs-saas-landing-page). ## Was braucht eine KI-Landing-Page, was eine normale SaaS-Seite nicht braucht? Die Abschnitte überschneiden sich mit denen jeder SaaS-Seite. Ihre Aufgaben ändern sich. Sieh dir ein paar AI SaaS Landing Page Beispiele von Produkten an, denen du vertraust, und du triffst immer wieder auf dieselben zusätzlichen Abschnitte. Wer eine KI-Produktseite besucht, hat schon hundert Headlines vom Typ „Intelligenz in Gedankenschnelle“ gelesen. Er will sehen, wie das Produkt etwas beantwortet, wissen, wohin seine Daten gehen, und wissen, was ein intensiver Monat kostet. | Abschnitt | Generische SaaS-Seite | KI-Produktseite | In der Vorlage AI Product Page | Bei 390px | |---|---|---|---|---| | Hero | Screenshot der App | Eine Demo, die auf einen Prompt antwortet | Mockup eines streamenden Assistenten mit Prompt-Chips und Composer | Nur das Assistenz-Panel, Chips scrollen in einer Reihe | | Features | Feature-Raster | Was das Modell kann, vorgeführt | Bento mit gezeichneten Visuals zu den Fähigkeiten (schreiben, zusammenfassen, automatisieren, fragen, übersetzen) | Eine Spalte | | Ablauf | Optional | Quellen, Begründung, Freigabe | Drei Schritte: Kontext, Begründung, Aktionen zur Freigabe | Schritte stapeln sich | | Vertrauen | Logos | Training, Datenstandort, Berechtigungen | Datenschutz-Versprechen, Admin-Schalter, hochzählende Zahlen | Zahlen in einem 2 x 2-Raster | | Preise | Pläne pro Seat | Seats plus Limits oder Nutzung | Add-on-Karte mit Seat-Slider neben einem Paket-Plan | Karten stapeln sich | | FAQ | Abrechnung und Kündigung | Training, Modelle, Zugriff | Sechs KI-Fragen in den Beispielinhalten | Immer nur eine Antwort offen | ## Wie zeige ich die KI bei der Arbeit, ohne Video? Ein Video ist ein Versprechen. Eine Demo, die antwortet, ist ein Beweis. Der Hero der Vorlage enthält einen gezeichneten Workspace mit einem Assistenz-Panel. Beim Laden tippt sich die erste Antwort einmal von selbst aus. Danach wählt der Besucher einen von vier Prompt-Chips (Zusammenfassung, Plan, Blocker, Release Notes) oder tippt eine Frage und drückt Enter. Während eine Antwort streamt, wird der Senden-Button zu Stop, und fertige Antworten zeigen ihre Quellen als Chips. > Live-Demo (AI Product Page): Wähl Find blockers: Der Assistent denkt nach und streamt dann Aufgabenkarten mit den Pills Blocked und At risk. Tippst du eine Frage mit dem Wort plan, bekommst du stattdessen die Plantabelle. Probier sie unter [AI Product Page](https://wingo-ui.com/templates/ai-page) aus und installier sie mit `npx wingo-ui@latest add ai-page`. Installier sie mit der CLI. Sie holt die Abschnitte mit, aus denen die Vorlage besteht, darunter die [Hero Section](https://wingo-ui.com/components/hero-section) für den Browser-Rahmen und die [FAQ Section](https://wingo-ui.com/components/faq-section): ```bash npx wingo-ui@latest add ai-page ``` Die Prompts sind Daten. Jeder hat ein Chip-Label, den Text, den der Nutzer „getippt“ hat, eine Zeile für die Denkphase, Keywords, die getippte Fragen zu ihm leiten, und eine Antwort aus Blöcken der Arten text, heading, bullets, table und tasks. ```tsx // app/(marketing)/ai/prompts.ts import type { AiPrompt } from "@/components/templates/ai-page-data"; export const prompts: AiPrompt[] = [ { id: "invoice", label: "Rechnung lesen", prompt: "Lies die Summen aus dieser Rechnung aus", thinking: "invoice-1042.pdf wird gelesen", keywords: ["rechnung", "summe", "pdf"], answer: { blocks: [ { kind: "text", text: "Rechnung 1042 von Northwind ist am 1. Dezember fällig." }, { kind: "table", columns: ["Position", "Betrag"], rows: [ ["Designarbeit, 12 Stunden", "$1.440"], ["Hosting, November", "$120"], ["Summe", "$1.560"], ], }, ], sources: ["invoice-1042.pdf"], action: "Eingangsrechnung anlegen", }, }, ]; ``` ### Sollte die Demo im Hero ein echtes Modell aufrufen? Nicht am ersten Tag. Jeder Besucher, der tippt, kostet dich einen Modellaufruf, und in ein öffentliches Textfeld wird alles Mögliche eingefügt. Aufgezeichnete Antworten auf drei oder vier Prompts, die deine besten Fälle zeigen, leisten dasselbe wie eine Demo, nur kostenlos. Willst du Live-Antworten, übergib `onAsk`. Die Funktion bekommt die getippte Frage und gibt eine Antwort oder ein Promise darauf zurück. Solange das Promise offen ist, denkt der Assistent weiter nach, dann tippt sich die Antwort Wort für Wort aus. Ein abgelehntes Promise fällt schon von selbst auf `aiPageFallbackAnswer` zurück, die eingebaute Workspace-Antwort. Das Beispiel unten gibt sie zusätzlich zurück, wenn der Server nicht mit OK antwortet. So erscheint ein 429 von deinem Rate Limiter nie als Fehler. ```tsx // app/(marketing)/ai/ai-route.tsx "use client"; import Link from "next/link"; import { AiPage } from "@/components/templates/ai-page"; import { aiPageFallbackAnswer, type AiAnswer } from "@/components/templates/ai-page-data"; import { prompts } from "./prompts"; export function AiRoute() { return ( { // dein route handler: mit rate limit, kurze antworten, gibt eine AiAnswer zurück const response = await fetch("/api/demo-answer", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ question: question.slice(0, 300) }), }); if (!response.ok) return aiPageFallbackAnswer(question); return (await response.json()) as AiAnswer; }} /> ); } ``` Die Antwort erscheint in einem Bereich mit `role="log"` und `aria-live="polite"`, Screenreader lesen sie also vor, und bei reduzierter Bewegung steht sie sofort da, statt sich auszutippen. Brauchst du einen vollständigen Chat-Screen statt eines Marketing-Mockups, ist das eine andere Aufgabe: Sieh dir den Guide zum [Bau einer React AI Chat UI](https://wingo-ui.com/de/blog/react-ai-chat-ui) an. ## Wie beantworte ich „Werden meine Daten fürs Training genutzt?“ Schreib es auf die Seite, weit oben im Vertrauens-Abschnitt, in den Worten deiner Leser. Security-Prüfer und die IT-Leitung des Käufers fragen das vor allem anderen. Ein AI Landing Page Template ohne Platz für die Antwort schickt sie in deine Doku oder gleich weg. Die Vorlage hat dafür drei Teile: `trustPoints` (Versprechen mit Icon), `adminSettings` (Schalter in einem gezeichneten Admin-Panel) und `trustStats` (Zahlen, die hochzählen, sobald sie ins Bild scrollen). Die Beispielinhalte sagen, dass Acme nie mit deinen Daten trainiert, durch SOC 2 Type II und die DSGVO abgedeckt ist, und zeigen 99,95% Uptime und 12.000+ Teams. Das sind Beispielaussagen von Acme, nicht deine. Ersetz jede davon durch ein Versprechen, das du mit einem Vertrag oder einer Statusseite belegen kannst, und streich, was du nicht belegen kannst: ```tsx // app/(marketing)/ai/trust.ts import type { AiTrustPoint, AiTrustStat } from "@/components/templates/ai-page-data"; export const trustPoints: AiTrustPoint[] = [ { title: "Kein Training mit deinen Daten", description: "Prompts und Dateien trainieren nie ein Modell, weder unseres noch das unserer Anbieter." }, { title: "Nach 30 Tagen gelöscht", description: "Request-Logs bleiben 30 Tage zur Missbrauchsprüfung gespeichert und werden dann gelöscht." }, { title: "Du wählst die Region", description: "Wähl pro Workspace die Verarbeitung in den USA oder in der EU." }, ]; // nur zahlen, für die du eine quelle zeigen kannst export const trustStats: AiTrustStat[] = [ { value: 0, suffix: "%", label: "deiner Daten fürs Modelltraining genutzt" }, ]; ``` Übergib sie als `trustPoints={trustPoints}` und `trustStats={trustStats}`. Ein leeres `adminSettings={[]}` blendet das Admin-Panel aus, solange dein Produkt keine Admin-Einstellungen hat, und `showQuote={false}` entfernt das Kundenzitat, bis du ein echtes hast. Für die Logo-Reihe unter dem Hero gilt dieselbe Regel: `showLogos={false}`, bis echte Kunden zustimmen. ## Wie sollte ein KI-Produkt seine Preise zeigen? KI-Kosten wachsen mit der Nutzung. Ein fester Preis pro Seat verliert also bei Vielnutzern Geld oder verlangt von Wenignutzern zu viel. Deine Seite muss sagen, für welches Preismodell du dich entschieden hast. Das Preisband der Vorlage ist für eine häufige Form gebaut: ein KI-Add-on pro Seat auf einem bestehenden Plan, mit einem Seat-Slider, der die monatliche Summe hochzählt, neben einem Paket-Plan, der es enthält. Das Beispiel-Add-on kostet $8 pro Nutzer und Monat bei jährlicher Abrechnung und listet „1,000 AI automation runs a month“. So liest sich ein Limit auf einem Seat-Plan. Rechnest du stattdessen nach Nutzung, Credits oder Tokens ab, passt die [Pricing Section](https://wingo-ui.com/components/pricing-section) (ebenfalls Pro) besser. Preise sind Zahlen pro Monat, die enthaltene Nutzung und die Mehrnutzung stehen in der Feature-Liste, und die Labels mit „pro Nutzer“ sind Props: ```tsx // app/(marketing)/ai/pricing.tsx // eine server component reicht: die pläne sind reine daten import { PricingSection, type PricingSectionPlan } from "@/components/blocks/pricing-section"; const plans: PricingSectionPlan[] = [ { id: "free", name: "Free", price: 0, features: ["500 Credits pro Monat", "Community-Support"], cta: { label: "Kostenlos starten", href: "/sign-up" } }, { id: "pro", name: "Pro", price: { monthly: 20, yearly: 16 }, featured: true, features: ["10.000 Credits inklusive", "Danach $2 pro 1.000 Credits", "Ausgabenlimit, das du festlegst"], cta: { label: "Pro starten", href: "/sign-up?plan=pro" } }, { id: "scale", name: "Scale", price: { monthly: 99, yearly: 79 }, features: ["100.000 Credits inklusive", "Danach $1,50 pro 1.000 Credits", "Verarbeitung in der EU"], cta: { label: "Scale starten", href: "/sign-up?plan=scale" } }, ]; export function AiPricing() { return ( ); } ``` Sag immer in einfachen Worten, was man für einen Credit bekommt. „10.000 Credits“ bedeutet nichts, bis die Fußnote sagt, dass ein Credit eine kurze Antwort ist. > Live-Demo (Pricing Section): Schalte zwischen Monthly und Yearly um, und die Preise rollen auf den neuen Wert. Unter 768px werden die Pläne zu einer wischbaren Leiste, die beim hervorgehobenen Plan startet. Probier sie unter [Pricing Section](https://wingo-ui.com/components/pricing-section) aus und installier sie mit `npx wingo-ui@latest add pricing-section`. Für eine komplette Preisseite mit Vergleichstabelle deckt der [Guide zur shadcn Pricing Page](https://wingo-ui.com/de/blog/shadcn-pricing-page) den Rest ab. ## Wie belege ich, welche Modelle und Fähigkeiten du nutzt? Nenn sie beim Namen. „Angetrieben von führenden Modellen“ klingt für ein Entwicklerpublikum nach Ausflucht. Das Beispiel-FAQ beantwortet „Which models power Acme AI?“ mit einer allgemeinen Zeile, und genau diese Antwort schreibst du als Erstes neu: Sag, welche Anbieter du nutzt, wo Anfragen laufen und wie du einen Modellwechsel testest. Das Bento zeigt dann jede Fähigkeit mit einer kleinen Zeichnung, und die Schritte im Ablauf zeigen die drei Dinge, die Käufer einen Assistenten tun sehen wollen: die richtigen Quellen lesen, seine Begründung zeigen und auf eine Freigabe warten, bevor er handelt (die Buttons Approve wechseln zu Approved). Das FAQ ist eine normale `FaqSection`. Mit `faqProps={{ jsonLd: true }}` kommt ein FAQPage-JSON-LD-Script mit dem reinen Text jeder Antwort dazu. Crawler bekommen so jede Frage und Antwort als strukturierte Daten neben dem sichtbaren Accordion. ## Wie sieht die AI Page bei 390px aus? Am gezeichneten Produkt scheitern die meisten KI-Landing-Page-Vorlagen auf dem Smartphone: ein breiter App-Screenshot, auf ein Drittel geschrumpft. Das Mockup hier nutzt stattdessen Container Queries. Das Dokument neben dem Assistenten erscheint erst, wenn der Rahmen etwa 42rem breit ist, die Workspace-Sidebar ab etwa 64rem. Auf einem 390px-Smartphone sieht der Besucher also das Assistenz-Panel in lesbarer Größe. Die Prompt-Chips werden zu einer horizontalen Reihe, die Chip für Chip einrastet, Chips und Inline-Links wachsen auf Touchscreens auf 44px, und der Composer nutzt 16px-Text, damit iOS Safari beim Fokus nicht hineinzoomt. Unter dem Hero stapelt sich alles: die Karten zu den Fähigkeiten in einer Spalte, die drei Schritte untereinander, die Vertrauenszahlen in einem Zwei-mal-zwei-Raster, die Add-on-Karte über dem Paket-Plan und das FAQ mit immer nur einer offenen Antwort. Der Seat-Slider funktioniert per Ziehen oder mit den Pfeiltasten, über den [Slider](https://wingo-ui.com/components/slider). ## Soll ich die AI Page oder die Vorlage Landing Page nehmen? Nimm die AI Product Page, wenn KI eine Produktlinie oder ein Add-on in etwas ist, das Leute schon nutzen. Genau so sind ihre Beispieltexte geschrieben. Die [Vorlage Landing Page](https://wingo-ui.com/templates/landing-page) ist das bessere AI Startup Landing Page Template, wenn du ein junges Unternehmen mit einem Produkt und einer Warteliste oder einem Free-Plan bist: Ersetz das Hero-Medium durch deine eigene Demo (unser Beitrag zur [Shadcn Hero Section](https://wingo-ui.com/de/blog/shadcn-hero-section) vergleicht sechs Layouts) und ergänz einen Datenschutz-Abschnitt nach den Ideen der AI Page. Beide sind Seitenvorlagen in der [Kategorie Build it](https://wingo-ui.com/de/blog/category/build), und der [Guide zum SaaS Website Template](https://wingo-ui.com/de/blog/saas-website-template) listet die Seiten, die ein vollständiges AI SaaS Website Template als Nächstes braucht, von den Preisen bis zum Changelog. ## Wie geht es weiter? Öffne die [Vorlage AI Product Page](https://wingo-ui.com/templates/ai-page), wähl einen Prompt-Chip und mach das Fenster schmaler, um das Smartphone-Layout zu sehen. Beide Vorlagen gehören zu [Wingo UI Pro](https://wingo-ui.com/de/pricing) ($8 im Monat, $80 im Jahr oder $150 einmalig), während FAQ Section, CTA Section und Logo Cloud mit einem kostenlosen Konto kommen. Du kannst also heute mit den Vertrauensfragen anfangen und die Demo später ergänzen. ## Komponenten in diesem Artikel - [AI Product Page](https://wingo-ui.com/templates/ai-page) (Pro): A React AI product page template: a streaming assistant mockup, a capability bento, how it works, privacy, add-on pricing and an FAQ. Installation: `npx wingo-ui@latest add ai-page` - [Landing Page](https://wingo-ui.com/templates/landing-page) (Pro): A SaaS home page: hero with a drawn product shot, logos, bento features, product tour, numbers, quotes, pricing teaser, FAQ and CTA. Installation: `npx wingo-ui@latest add landing-page` - [Hero Section](https://wingo-ui.com/components/hero-section) (Pro): A React hero section for a landing or product page: an announcement pill, a big title, two actions, social proof and a product shot drawn in code. Installation: `npx wingo-ui@latest add hero-section` - [Pricing Section](https://wingo-ui.com/components/pricing-section) (Pro): A compact plans section for a landing page: plans with a Monthly / Yearly switch, a highlighted plan, checklists and a button each. Installation: `npx wingo-ui@latest add pricing-section` - [FAQ Section](https://wingo-ui.com/components/faq-section) (Free): A React FAQ section for marketing pages: an accordion, a split layout, an open grid or expandable cards, with topics and live search. Installation: `npx wingo-ui@latest add faq-section` ## Häufige Fragen ### Was gehört auf eine AI SaaS Landing Page? Ein Hero mit einer funktionierenden Demo, Social Proof direkt darunter, ein Abschnitt zu den Fähigkeiten, ein Ablauf, ein Abschnitt zu Datenschutz und Daten, Preise, die Limits oder Nutzung erklären, ein FAQ und ein abschließender Call to Action. Den Datenschutz-Abschnitt und die Demo lassen die meisten generischen SaaS-Vorlagen weg. ### Sollte die Demo im Hero ein echtes KI-Modell aufrufen? Fang mit aufgezeichneten Antworten auf drei oder vier Prompts an. Ein Live-Modell auf einer öffentlichen Seite kostet pro Besucher Geld und lädt zum Missbrauch ein. Schließ es also nur hinter einem Rate Limit und mit einer kurzen Längengrenze für Antworten an. ### Wie zeige ich nutzungsbasierte Preise auf einer KI-Landing-Page? Zeig pro Plan einen Grundpreis, schreib die enthaltene Nutzung und den Preis für die Mehrnutzung in die Feature-Liste und benenn die Zeile zur Abrechnung pro Nutzer um. Die Pricing Section nimmt all das über die Props plans und labels an. ### Gibt es ein kostenloses AI SaaS Landing Page Template? Bei Wingo UI gehören die Vorlagen AI Product Page und Landing Page zu Pro, während FAQ Section, CTA Section, Logo Cloud und Marketing Header mit einem kostenlosen Konto verfügbar sind. Die kostenpflichtigen Angebote, die wir am 6. November 2026 auf Gumroad und Getly geprüft haben, begannen bei $10, die meisten kosteten $34 bis $39. ### Passt die AI-Page-Vorlage auch für ein AI-native Startup? Ja, aber ihre Beispieltexte sind für KI als Zusatzfunktion in einem bestehenden Workspace-Produkt geschrieben. Ist die KI das ganze Produkt, passt die Vorlage Landing Page mit einem eigenen Hero oft besser. --- Quelle: https://wingo-ui.com/de/blog/ai-saas-landing-page-template