SaaS-Landingpage-Vorlage.
Eine vollständige Website für ein SaaS-Produkt: acht responsive Seiten für ein Beispiel-Planungstool für Teams namens Fjordly, von der Startseite und den Preisen bis zu einer Kundengeschichte, dem Changelog, einem Blogartikel, der Registrierung und dem Kontakt zum Vertrieb. Die Texte lesen sich wie ein echtes Produkt, Preise und Zahlen stimmen seitenübergreifend überein, und jede Seite ist einfaches HTML mit Tailwind, sodass Codex oder Claude Code sie klonen und zu deiner Website machen kann.
Aktualisiert am 7. November 2026
Website · 8 Seiten · Kostenlos und Open Source
01Startseite 
02Funktionen 
03Preise 
04Kunden 
05Changelog 
06Blogartikel 
07Registrierung 
08Vertrieb kontaktieren
Klonen
npx degit ummydev/ui-templates/sites/saas my-app
Kopiert nur diese Vorlage in einen neuen Ordner, ohne den Rest des Repositorys.
Mach sie zu deiner
Das ist die Vorlage SaaS-Landingpage von codexdesign.io. Benenne sie in [dein Produkt] um, ersetze die Beispieldaten durch [deine Funktionen] und halte jeden Screen am Designsystem in DESIGN.md.
Füge das im neuen Ordner in Codex oder Claude Code ein.
- Gebaut mit
- HTML · Tailwind CSS v4 · Lucide icons
Was in der Vorlage steckt
| Seite | Was darauf ist |
|---|---|
| Startseite | Ein Versprechen in einer Zeile, ein in HTML gezeichneter Produkt-Screen, Funktionen, Kunden, Preise |
| Funktionen | Fünf Abschnitte (planen, erledigen, terminieren, berichten, abstimmen) mit je einem Produkt-Screen |
| Preise | Free, Team und Enterprise, Umschalter für monatlich und jährlich, Vergleichstabelle und Fragen |
| Kunden | Eine vollständige Kundengeschichte mit Zahlen vorher und nachher, dazu weitere Geschichten |
| Changelog | Datierte Releases mit den Labels Neu, Verbessert und Behoben |
| Blogartikel | Ein Artikel mit Autorin, Inhaltsverzeichnis, Listen, Zitat, Code und verwandten Beiträgen |
| Registrierung | Anmeldung mit Google oder E-Mail, daneben die Vorteile und ein Kundenzitat |
| Vertrieb kontaktieren | Ein Formular für eine Demo mit Teamgröße und Bedarf, dazu Fragen vor der Buchung |
Die Inhalte stimmen seitenübergreifend überein. Der Preis ist kostenlos für bis zu 10 Personen, 8 US-Dollar pro Person und Monat im Team-Tarif bei jährlicher Zahlung oder 10 US-Dollar monatlich, und individuell für Enterprise. Der Kunde auf der Startseite und in der Kundengeschichte ist dieselbe Spedition: Ihr Montagsmeeting schrumpfte von 90 auf 25 Minuten, ihr Wochenbericht von 3 Stunden auf 20 Minuten. Der neueste Changelog-Eintrag ist die Funktion, die die Startseite als neu markiert. Die Kundennamen sind erfunden, und es gibt keine Platzhalter-Personen oder Lorem ipsum.
Jede Seite ist eine HTML-Datei, gestaltet mit Tailwind CSS v4 und einer gemeinsamen tokens.css. Alle Seiten funktionieren vom 390 Pixel breiten Smartphone bis zum breiten Desktop-Bildschirm, und das Menü auf dem Smartphone braucht kein JavaScript. Die Produkt-Screens sind in HTML gezeichnet statt als Bilder eingefügt, sodass dein Agent sie mit dem Rest der Website umgestalten kann. Öffne einfach eine Datei im Browser; es gibt nichts zu installieren oder zu bauen.
Mit Codex oder Claude Code nutzen
Kopiere nur diese Vorlage aus dem ui-templates-Repository:
npx degit ummydev/ui-templates/sites/saas my-saas-site
Dann bitte deinen Agenten, sie zu deiner zu machen:
Dieser Ordner ist eine SaaS-Website-Vorlage. Mach daraus die Website für [dein Produkt], das [was es tut] für [Zielgruppe]. Behalte DESIGN.md und tokens.css als Designsystem, ersetze Produkt-Screens, Funktionen, Preise, Kundengeschichte und Changelog durch [deine Inhalte] und sorge dafür, dass Preise und Zahlen auf allen Seiten übereinstimmen. Baue sie danach in [Next.js / Astro / deinem Stack].
Weil das Designsystem in DESIGN.md festgehalten ist, passen neue Seiten, die dein Agent hinzufügt, etwa eine Dokumentation, eine Über-uns-Seite oder ein Vergleich, zu den acht vorhandenen.
Gebaut auf dem Designsystem Nordic
Die Vorlage nutzt Nordic, ein ruhiges Designsystem für Produktivitätstools: Manrope, ein gedämpftes Fjordblau, 12px-Ecken und weiche Schatten. Seine Seite zeigt eine Live-Vorschau, die vollständige DESIGN.md und ein shadcn-Theme.
Häufige Fragen
Ist diese SaaS-Landingpage-Vorlage kostenlos?
Ja. Sie ist Open Source unter der MIT-Lizenz, für private und kommerzielle Projekte.
Kann ich sie mit Next.js, Astro oder React nutzen?
Ja. Die Seiten sind einfaches HTML mit Tailwind-Klassen, sodass dein Agent sie in Komponenten jedes Frameworks überführen kann. Bitte ihn, tokens.css und DESIGN.md unverändert zu lassen, damit das Design den Umzug übersteht.
Gibt es ein dunkles Theme?
Ja. Füge dem <html>-Tag einer Seite class="dark" hinzu, um auf das dunkle Theme von Nordic umzuschalten.