SaaS-Website-Vorlagen. Erstelle deine Produktwebsite und präsentiere sie deinen ersten Kunden.
Stelle dein Produkt öffentlich vor: Ablauf, Nachweise und nächster Schritt. Passe die Marketingwebsite an und verlinke deine echte App, Demo oder Testphase.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
AI ChatBeispielablauf
Produktablauf
Du
Erkläre meine Software mit Aufgabe, Eingabe und Ergebnis vor der Funktionsliste.
KI · Beispielantwort
Schicke Eingabe, Produktschritt und Ergebnis sowie Screenshot oder Video. Ich kann daraus eine kurze Erklärung im Template erstellen und echte Demo oder Test verlinken.
Produkt mit echtem Beispiel erklären
Einen Ablauf wählen
Nutze eine Aufgabe, die Kunden tatsächlich im Produkt erledigen können.
Eingabe und Ergebnis zeigen
Gib echte Ansicht oder Video und eine kurze Erklärung dazu.
Demo oder Test verbinden
Leite von der Erklärung zum funktionierenden Produkt.
Danach: prüfen, ob die Seite die Nutzung deiner Software erklärt.
Beispieldialog, keine Live-KI-Sitzung.
01 / Produktablauf
Was muss ein Besucher vor dem Softwaretest verstehen?
Besucher müssen die Aufgabe, ihre Eingaben und das Ergebnis verstehen. Zeige einen echten Ablauf mit Screenshot oder kurzem Video und verlinke dann Test oder Demo. Die Vorlage bietet den Aufbau für diese Erklärung.
01
Eingabe
Zeige, was der Nutzer liefert und welche Umgebung nötig ist.
02
Produktaktion
Zeige mit freigegebener Aufnahme oder Ansicht, was die echte App tut.
03
Ergebnis
Erkläre die beobachtete Ausgabe ohne erfundene Zeit- oder Umsatzvorteile.
02 / SaaS-Designs
Welche Erzählstruktur passt zu deinem Produkt?
Wähle eine kurze Produkterklärung wie Veyra, Ablaufszenarien wie Relayline, Rollenperspektiven wie Velora oder eine Projektpräsentation wie Draftwell. Passe den Aufbau an die Nutzung deiner Software an und ergänze eigene Screenshots und Beispiele.
Relayline
Workflow-Szenarien und Prinzipien für eine Aufgabenübergabe-Präsentation.
Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.
index.html
RECREATE.md
assets/paper-detail.webp
assets/print-project.webp
assets/studio-review.webp
Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
Quelldateien und technische Details ansehen
Relayline: Reihenfolge im Original
04-relayline/ index.html · main section order
Exakte Reihenfolge im aktuellen HTML. Englische Originalüberschriften, kein vorgeschlagener Neuaufbau.
01 #unnamed — Give every handoffa clear next step
02 #unnamed — (visual section)
03 #overview — Keep the contextwith the next step
04 #features — Small details. Clearer handoffs. Explore the building blocks of this fictional workspace.
05 #unnamed — The next person should be able to pick up the work without piecing together the whole story.
06 #scenarios — Different work.The same clear handoff.
07 #principles — Built around the personwho picks up next
08 #faq — FAQ
09 #try — A clear next step.Ready when you are.
Veyra: Reihenfolge im Original
12-veyra/ index.html · main section order
Exakte Reihenfolge im aktuellen HTML. Englische Originalüberschriften, kein vorgeschlagener Neuaufbau.
01 #unnamed — Thoughts intoa first draft.
02 #steps — Choose your sample
03 #unnamed — (visual section)
04 #unnamed — (visual section)
05 #features — From spoken thoughtto something clear
06 #examples — A useful draft starts with what you mean. “I’ve checked the first two screens. The last one still needs a second look.”
07 #workflows — One thought.A few ways to use it.
08 #notes — Notes for a clearer draft
09 #faq — Frequently asked questions
10 #unnamed — Give an idea a first draft.
Velora: Reihenfolge im Original
15-velora/ index.html · main section order
Exakte Reihenfolge im aktuellen HTML. Englische Originalüberschriften, kein vorgeschlagener Neuaufbau.
01 #unnamed — Make room fora better review.
02 #workflow — A place for each step.
03 #features — Less searching.More reviewing.
04 #plans — A workspace foryour way of reviewing.
05 #faq — Questions, answered.
06 #integrations — Room for the toolsaround your code.
07 #perspectives — Different roles.A shared review.
08 #workspace — Keep the reviewin view.
09 #unnamed — Your next review,in a different light.
Frage des Besuchers
Stelle im Original
Was die Originalseite zeigt
Was Ihre Website braucht
Wie wird Arbeit übergeben?
Relayline #overview / #scenarios / #try
Erst Kontext, dann drei Übergabe-Szenarien und ein lokaler Review-Dialog.
Echte Ansichten, Berechtigungen, gespeicherter Zustand und unterstützte Ziele.
Wie wird aus einer Eingabe ein Entwurf?
Veyra #steps / #examples / #workflows
Beispiel wählen → bearbeiten/prüfen → kopieren; lokale Text-Interaktion und kurze/lange Beispiele.
Echte Sprachverarbeitung, Eingaben, Prüfregeln und Ausgaben belegen, falls Sie diese Funktionen anbieten.
Vier Prüfschritte führen zu Funktionen, Beispielplänen und Workspace-Tabs.
Echte Repository-Verbindung, Berechtigungen, gespeicherte Diskussion und Planbedingungen.
Relayline
Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.Ganze Vorschau öffnen ↗
Veyra
Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.Ganze Vorschau öffnen ↗
Velora
Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.Ganze Vorschau öffnen ↗
AI ChatBeispielablauf
Website und App
Du
Präsentiere mein SaaS und verlinke Test- sowie Preisbuttons mit diesen App-Seiten.
KI · Beispielantwort
Gib mir echte Test-, Login- und Planlinks aus deiner App. Ich kann die Beispielziele ersetzen, damit Besucher von der Website zur App wechseln. Konten und Zahlung bleiben Aufgabe der App.
Website mit deiner App verlinken
App-Links sammeln
Nutze echte Anmelde-, Demo- und Planadressen deines Produkts.
Beispielaktionen ersetzen
Lass die entsprechenden Buttons mit diesen Adressen verbinden.
Links öffnen
Prüfe das richtige Test-, Anmelde- oder Zahlungsziel.
Danach: Übergang von öffentlicher Website in die echte App testen.
Beispieldialog, keine Live-KI-Sitzung.
03 / Website und App
Welchen Teil der Software liefert das Template?
Die Vorlage liefert die Marketingwebsite: Erklärung, Screenshots, Funktionsabschnitte und Links zur App. Konten, Kundendaten und Zahlungen bleiben in deiner Software. Lass KI jeden Anmelde- oder Preisbutton mit der richtigen Stelle deiner App verknüpfen.
Marketingwebsite
Freigegebene Texte, Produktbilder, Ablaufserklärung und Links zu deiner App.
Dein funktionierendes Produkt
Die echten Testphasen, Konten, Dienste und Abrechnung, auf die Nutzer separat zugreifen.
Der echte Clearstead14-Handler prüft nur, zeigt eine lokale Nachricht und setzt zurück. Workspace- und Plan-Dialog sagen: kein Konto, keine verbundenen, gespeicherten oder gesendeten Daten. Eine echte Anwendung bleibt separat.
form.addEventListener('submit',event=>{event.preventDefault();if(!email.validity.valid){status.textContent='Enter a valid email address to test this form.';email.setAttribute('aria-invalid','true');email.focus();return}email.removeAttribute('aria-invalid');status.textContent='Demo complete. Your address was not sent or saved.';form.reset()});
Clearstead
Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.Ganze Vorschau öffnen ↗
Tatsächlicher lokaler Clearstead14-Dialog, Desktop-Chrome 1118×958. Konto- und Datengrenze sichtbar.
AI ChatBeispielablauf
Nachweise und Pläne
Du
Ersetze Beispielpläne durch echte Preise, Limits und verfügbare Funktionen.
KI · Beispielantwort
Öffne den heruntergeladenen Template-Ordner und schicke Preise, Limits, verfügbare Funktionen und Screenshots. Ich kann Beispiele bei gleichem Design durch diese Angaben ersetzen. Danach prüfen wir die lokale Vorschau vor der Veröffentlichung.
Beispielpläne und Funktionen ersetzen
Heruntergeladenes Projekt öffnen
Entpacke die Vorlage und öffne den vollständigen Ordner im KI-Agenten mit Dateizugriff. Behalte die Asset-Pfade bei.
Echte Produktangaben ergänzen
Gib Preise, Planlimits, verfügbare Funktionen, Screenshots und echte Anmelde- oder Zahlungslinks dazu.
Lokale Vorschau prüfen
Vergleiche Pläne und Funktionsbeschreibungen vor der Veröffentlichung mit den aktuellen Produktangaben.
Danach: echte Produktangaben prüfen und den Veröffentlichungsweg wählen.
Beispieldialog, keine Live-KI-Sitzung.
04 / Nachweise und Pläne
Was ersetzt Beispielaussagen und Plankarten?
Nutze App-Screenshots, aktuelle Funktionen, echte Preise und Limits. Gib der KI die Informationen zum Ersetzen der Beispiele. Eine spätere Funktion kennzeichnest du als geplant oder lässt sie weg, damit Kunden wissen, was heute verfügbar ist.
Lokal auf diesem Gerät markiert; nichts wird übermittelt.
AI ChatBeispielablauf
Aktuell zum Produkt
Du
Hier sind neue Funktionen und Screenshots. Aktualisiere die Marketingwebsite, nicht die App.
KI · Beispielantwort
Gib mir Release-Notizen, aktuelle Screenshots und Nutzerlinks. Ich kann Funktionsbeschreibungen und Buttons aktualisieren, ohne das Webdesign neu aufzubauen.
Produktwebsite aktualisieren
Aktuellen Ordner nutzen
Arbeite mit den zuletzt veröffentlichten Dateien, damit bisherige Änderungen erhalten bleiben.
Änderung beschreiben
Gib KI die neuen Angaben und nenne Abschnitt oder Element.
Prüfen und veröffentlichen
Öffne die geänderte Seite und lade das aktualisierte Projekt auf dem bisherigen Hosting hoch.
Danach: Beschreibungen und App-Links mit dem aktuellen Produkt vergleichen.
Beispieldialog, keine Live-KI-Sitzung.
05 / Aktuell zum Produkt
Wie bleibt die Website aktuell, wenn sich die App ändert?
Gib KI den aktuellen Website-Ordner und eine kurze Liste der Produktänderungen. Lass Texte, Screenshots und Links bei gleichem Design aktualisieren. Prüfe die Vorschau und veröffentliche die Dateien, wenn ein Release die Kundeninformationen verändert.
Vorbereitetes Template-Beispiel ansehen
›_ Beispiel für KI-BearbeitungFormwell
Du
Ersetze Beispielintro und Leistungen durch meine freigegebenen Inhalte und behalte das Layout.
KI · Beispielantwort
Das vorbereitete Formwell-Beispiel zeigt eine Textaktualisierung. Eine Softwareversion benötigt außerdem echte App-Bilder, Anforderungen und geprüfte Links.
Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.
AI ChatBeispielablauf
Dateien und Start
Du
Bereite die Produktwebsite für Cloudflare vor und behalte die echten App-Links.
KI · Beispielantwort
Ich kann den vollständigen Ordner vorbereiten und ihn mit Cloudflares CLI oder API hochladen, sobald du Kontozugriff freigibst. index.html und Asset-Pfade bleiben zusammen. Danach können wir die Adresse öffnen und deine Domain verbinden.
Fertige Website veröffentlichen
Ordner vorbereiten
Behalte fertiges HTML, Skripte und Assets an ihren ursprünglichen relativen Stellen.
Veröffentlichung freigeben
Nutze dein Cloudflare- oder Vercel-Konto und erlaube dem Agenten die Veröffentlichung über CLI oder API.
Öffentliche Adresse öffnen
Prüfe die Website online, verbinde die Domain und teste Links, Bilder sowie Kontakt.
Alternative: Vollständige ZIP an Hosting-Support oder IT geben und nach Upload sowie Domain-Anbindung fragen.
Beispieldialog, keine Live-KI-Sitzung.
06 / Dateien und Start
Was kaufe ich und was bleibt bis zum Start?
Du kaufst Website-Dateien und Anleitung. Ergänze die SaaS-Inhalte und Links zur App. Dein autorisierter KI-Agent mit Dateizugriff kann den Ordner auf Cloudflare oder Vercel veröffentlichen. Alternativ gib die ZIP an Hosting-Support oder IT weiter.
Website-Dateien + Designanweisungen
KI-Agenten beauftragen
Lass das fertige Projekt mit deinem autorisierten Kontozugang auf Cloudflare oder Vercel veröffentlichen.
Oder ZIP weitergeben
Sende den vollständigen Ordner als ZIP an Hosting-Support oder IT und frage nach Unterstützung beim Hochladen.
Öffentliche Website öffnen
Verbinde bei Bedarf deine Domain und prüfe Bilder, Handyansicht, Links sowie Kontakt unter der öffentlichen Adresse.
Ja, wenn du eine öffentliche Website zur Erklärung und Präsentation deines SaaS brauchst. Vor dem Launch kannst du Warteliste oder Demo-Anfrage anbinden. Für die App selbst brauchst du eine eigene Umsetzung von Konten, Daten und Abrechnung.
Funktionieren die Tarifpläne?⌃
Die Beispielkarten zeigen Pläne. Gib KI Preise und Anmelde- oder Zahlungslinks und lasse Buttons verbinden. Abrechnung passiert in App oder Zahlungsdienst.
Kann ich vor App-Verfügbarkeit starten?⌃
Ja. Zeige Idee oder Prototyp mit Warteliste oder Demo-Anfrage. Nach dem Launch lässt du KI diesen Weg durch den echten Produktlink ersetzen.
Teste ein echtes Template, bevor du dich entscheidest.
Lade das originale Formwell-Projekt herunter. Gib die Dateien und RECREATE.md an ein geeignetes KI-Tool, probiere eine kleine Änderung und prüfe das Ergebnis.
Das kostenlose Beispiel ist Formwell. Originaldesign und Anleitung sind auf Englisch. Die Produktpreise bleiben unverändert.
OneDollarStock setzt ein Projekt zur Vorbereitung der Plattform auf den Eintritt in den deutschen Markt im Rahmen des Akzelerationspfads „Go Global“ des Programms „Unicorn Hub Startup Booster“ um (Projektnr. FENG.02.28-IP.02-0013/23). Das Projekt wird aus Mitteln des Programms European Funds for Smart Economy 2021–2027 im Rahmen der Priorität „Innovation-friendly environment“, Maßnahme FENG.2.28 Startup Booster Poland, kofinanziert.
Mehr über das Projekt erfahren →
Soma Vale
Template ansehen
Cirra Flow
Template ansehen
Tandemly
Template ansehen
Stillform Studio
Template ansehen
Morrow Studio
Template ansehen
Serein
Template ansehen
Kintara Workflow Template
Template ansehen
Morrow Care
Template ansehen
Aster People Studio
Template ansehen
Morrow Field
Template ansehen
Numae Practice
Template ansehen
Rallymere
Template ansehen
Soma Vale
Template ansehen
Cirra Flow
Template ansehen
Tandemly
Template ansehen
Stillform Studio
Template ansehen
Morrow Studio
Template ansehen
Serein
Template ansehen
Kintara Workflow Template
Template ansehen
Morrow Care
Template ansehen
Aster People Studio
Template ansehen
Morrow Field
Template ansehen
Numae Practice
Template ansehen
Rallymere
Template ansehen
