Prompt-Beispiele für eine Web-App: 10 Prompts für SaaS, interne Tools und Kundenportale
Zehn vollständige Prompts für eine Web-App, je ein Absatz, bereit zum Einfügen in einen KI-App-Baukasten. Jeder nennt die Rollen und wer was sieht, den Login, die Haupt-Listenansicht, die Status, die E-Mails und die Zahlungen, dazu die Folge-Prompts für danach.
Hier sind 10 Prompt-Beispiele für eine Web-App, zum Kopieren in einen KI-App-Baukasten: drei SaaS-Produkte, drei interne Tools, zwei Kundenportale und zwei Dashboards. Jedes ist ein Absatz und lässt sich als erste Nachricht senden. Ersetzen Sie die Teile in [eckigen Klammern] und behalten Sie den Rest. Ein Web-App-Prompt unterscheidet sich von einem Website-Prompt vor allem in einem Punkt: Er sagt, wer sich anmeldet, was jede Rolle sehen und ändern darf und was passiert, wenn ein Datensatz seinen Status wechselt.
Die Prompts folgen den sieben Blöcken (Kontext, Ziel, Nutzer, Screens, Daten, Rahmenbedingungen, Ton) aus unseren Prompt-Beispielen für Apps und ergänzen die fünf Zeilen, die eine Web-App mit echten Nutzern braucht. Für eine App, die auf dem Telefon lebt, nutzen Sie stattdessen unsere Prompt-Beispiele für eine mobile App.
Was ein Web-App-Prompt sagen muss, ein Website-Prompt aber nicht
Eine Website zeigt allen dieselben Seiten. Eine Web-App zeigt jedem Nutzer seine eigenen Daten, lässt manche Nutzer sie ändern und andere nur lesen und schiebt Datensätze von einem Status zum nächsten. Fünf Zeilen decken den Unterschied ab:
Zeile
Was Sie schreiben
Warum es wichtig ist
Rollen und Rechte
Jede Rolle und was sie sehen und ändern darf: „Ein Kunde sieht nur seine eigenen Rechnungen“
Ohne diesen Satz baut die KI einen Screen, der jedem Nutzer jeden Datensatz zeigt
Login
Wer sich registriert, wie, und wer eingeladen wird: „E-Mail und Google, Kunden nur per Einladung“
Offene Registrierung und Registrierung nur per Einladung sind zwei verschiedene Apps
Haupt-Listenansicht
Die Spalten, Filter und die Suche des Screens, mit dem man den ganzen Tag arbeitet
In einer Business-App verbringt man die meiste Zeit in einer einzigen Tabelle
Status
Die Schritte eines Datensatzes, in Reihenfolge: „neu, in Bearbeitung, wartet, erledigt“
Status steuern die Filter, das Dashboard und die E-Mails
E-Mails und Zahlungen
Welches Ereignis welche E-Mail auslöst und was wie oft bezahlt wird
Eine E-Mail ohne Auslöser wird zu Spam; ein Preis ohne Regel wird zum Fehler
Die erste Zeile überspringen die meisten, und sie ist die wichtigste. Fehlerhafte Zugriffskontrolle, bei der ein Nutzer Daten lesen oder ändern kann, die ihm nicht gehören, steht ganz oben in den OWASP Top 10 der Risiken für Webanwendungen. In einer App auf Supabase werden diese Regeln zu Row-Level-Security-Richtlinien in der Datenbank, wie in der Dokumentation von Supabase beschrieben. Ein klarer Satz im Prompt ermöglicht es der KI, sie zu schreiben.
Prompts für SaaS
Ein SaaS hat Kunden, die sich selbst registrieren, ein Abo bezahlen und jeweils in ihrem eigenen Bereich arbeiten. Der Prompt muss sagen, was ein Konto enthält, was kostenlos und was kostenpflichtig ist und was die öffentliche Seite vor der Registrierung zeigt.
Feedback-Board für Kunden
SaaS · Produkt
Erstelle eine SaaS-Web-App, mit der [Softwareunternehmen] Feature-Wünsche ihrer Nutzer sammeln. Rollen: Workspace-Inhaber, Teammitglied, Endnutzer (stimmt ab und kommentiert, kein Zugriff auf den Admin-Bereich). Login: Inhaber und Teammitglieder registrieren sich mit E-Mail oder Google; Endnutzer melden sich mit E-Mail auf dem öffentlichen Board an. Screens: öffentliches Board mit nach Stimmen sortierten Wünschen, Wunschdetail mit Kommentaren, öffentliche Roadmap in drei Spalten, Admin-Liste aller Wünsche mit Filtern nach Status und Tag, Workspace-Einstellungen mit Logo und Farbe des Boards. Daten: ein Workspace hat mehrere Boards; ein Wunsch hat einen Titel, eine Beschreibung, Tags, eine Stimmenzahl und einen Status (in Prüfung, geplant, in Arbeit, ausgeliefert). Rahmenbedingungen: eine Stimme pro Endnutzer und Wunsch, eine E-Mail an die Abstimmenden, wenn ein Wunsch auf ausgeliefert wechselt, ein kostenloser Plan mit [1 Board] und ein bezahlter Plan für [19 $ im Monat] über Stripe mit unbegrenzten Boards. Klarer Stil: Weiß, Indigo, kompakte Tabellen.
Bewerbermanagement für eine kleine Agentur
SaaS · Recruiting
Erstelle eine Web-App für [eine Personalagentur mit 8 Recruitern], um Kandidaten zu verfolgen. Rollen: Admin, Recruiter, Kunde (sieht nur die Shortlist seiner eigenen Stellen). Login: Mitarbeitende per E-Mail, Kunden über einen Einladungslink. Screens: Liste der Stellen, Pipeline einer Stelle als Kanban-Board (gesichtet, vorselektiert, Interview, Angebot, eingestellt, abgelehnt), Kandidatenprofil mit Lebenslauf-Upload, Notizen und Verlauf, Kundenansicht der Shortlist mit Buttons zum Bestätigen oder Ablehnen. Daten: ein Kundenunternehmen hat mehrere Stellen; eine Stelle hat mehrere Bewerbungen; eine Bewerbung verknüpft einen Kandidaten mit einer Stelle und hat eine Phase. Rahmenbedingungen: Lebenslauf-Dateien privat gespeichert und nur für das Team und den zugehörigen Kunden sichtbar, eine E-Mail an den Recruiter, wenn ein Kunde einen Kandidaten bestätigt, Suche nach Name und Fähigkeit, Import bestehender Kandidaten aus einer CSV-Datei. Professioneller Stil: Weiß, Dunkelgrün, dichte Listen.
KI-Besprechungsnotizen
SaaS · KI-Tool
Erstelle eine Web-App für [Beratungsteams], die aus dem Transkript einer Besprechung eine Zusammenfassung und eine Aufgabenliste macht. Rollen: Team-Admin, Mitglied. Login: E-Mail oder Google; der Admin lädt Mitglieder ein. Screens: Transkript einfügen oder hochladen (Text oder .vtt-Datei), KI-Ergebnis (Zusammenfassung, Entscheidungen, Aufgaben mit Verantwortlichem und Fälligkeit), das der Nutzer vor dem Speichern bearbeitet, Besprechungsliste mit Suche, besprechungsübergreifende Aufgabenliste mit Filtern nach Verantwortlichem und Status. KI-Schritt: das Transkript geht über eine serverseitige Funktion an ein Sprachmodell; der API-Schlüssel erreicht nie den Browser; der Nutzer prüft immer vor dem Speichern. Daten: ein Team hat mehrere Besprechungen; eine Besprechung hat eine Zusammenfassung und mehrere Aufgaben; eine Aufgabe hat einen Verantwortlichen, eine Fälligkeit und einen Status (offen, erledigt). Rahmenbedingungen: Mitglieder sehen nur die Besprechungen ihres Teams, wöchentlich eine E-Mail an jedes Mitglied mit seinen offenen Aufgaben, [50 Besprechungen im Monat] im bezahlten Plan. Ruhiger Stil: Cremeweiß, Graphit, ein türkiser Akzent.
Prompts für interne Tools
Ein internes Tool ersetzt eine Tabelle, die zu groß geworden ist. Niemand registriert sich selbst: Der Admin lädt das Team ein. Der Prompt verwendet seine Worte auf die Haupttabelle, die Status und darauf, wer was ändern darf. Mehr zum Vorgehen finden Sie bei unserem Baukasten für interne Tools.
Lager- und Bestandsverwaltung
Internes Tool · Betrieb
Erstelle eine interne Web-App für [einen Ersatzteilhandel mit 2 Lagern], um den Bestand zu verfolgen. Rollen: Admin, Lagerpersonal (erfasst Bewegungen, darf keine Preise ändern), Vertrieb (nur lesen). Login: E-Mail, nur per Einladung. Screens: Produktliste mit Bestand pro Lager, Filter nach Kategorie und Lieferant sowie ein Filter „unter Mindestbestand“, Produktdetail mit dem Bewegungsverlauf, Formular zum Erfassen einer Bewegung (Eingang, Ausgang, Umlagerung zwischen Lagern), Lieferantenliste, Bestellentwurf aus den Produkten unter Mindestbestand. Daten: ein Produkt hat eine Artikelnummer, einen Lieferanten, einen Mindestbestand und einen Bestand pro Lager; eine Bewegung hat einen Typ, eine Menge, ein Datum und die Person, die sie erfasst hat. Rahmenbedingungen: der Bestand wird nie negativ, jede Änderung wird mit ihrem Urheber protokolliert, CSV-Import des aktuellen Katalogs, täglich eine E-Mail an den Admin mit den Produkten unter Mindestbestand. Praktischer Stil: Weiß, Marineblau, große Tabellen.
CRM für die Vertriebspipeline
Internes Tool · Vertrieb
Erstelle eine einfache CRM-Web-App für [ein B2B-Team mit 5 Vertriebsmitarbeitenden], das [Schulungsprogramme] verkauft. Rollen: Vertriebsleiter, Vertriebsmitarbeiter. Login: E-Mail, nur per Einladung. Screens: Pipeline als Kanban-Board (Lead, kontaktiert, Termin, Angebot, gewonnen, verloren) mit Drag and Drop, Dealdetail mit Kontakten, Notizen, nächster Aktion und Betrag, Firmenliste, meine Aufgaben für heute, Dashboard des Leiters mit dem Pipeline-Wert pro Phase und pro Mitarbeiter. Daten: eine Firma hat mehrere Kontakte und Deals; ein Deal hat einen Verantwortlichen, einen Betrag, eine Phase und ein Datum der nächsten Aktion. Rahmenbedingungen: Mitarbeitende sehen alle Deals, bearbeiten aber nur ihre eigenen, der Leiter bearbeitet alles, morgens eine Erinnerungs-E-Mail für überfällige nächste Aktionen, CSV-Import bestehender Kontakte, ein Grund ist Pflicht, wenn ein Deal auf verloren wechselt. Scharfer Stil: Weiß, Schwarz, ein oranger Akzent.
Onboarding-Checkliste für neue Mitarbeitende
Internes Tool · HR
Erstelle eine interne Web-App für [ein Unternehmen mit 60 Beschäftigten], um das Onboarding neuer Mitarbeitender zu steuern. Rollen: HR-Admin, Führungskraft, neue Mitarbeitende. Login: E-Mail; der HR-Admin legt die Konten an. Screens: Onboarding-Vorlagen (eine Aufgabenliste mit dem zuständigen Team: HR, IT, Führungskraft), laufende Onboardings mit Fortschrittsbalken, Onboarding-Detail mit nach Wochen gruppierten Aufgaben, die eigene Seite der neuen Mitarbeitenden mit ihren Aufgaben, zu unterschreibenden Dokumenten und Ansprechpartnern. Daten: eine Vorlage hat mehrere Aufgaben mit einem zuständigen Team und einem Tagesversatz zum Startdatum; ein Onboarding kopiert eine Vorlage für eine Person und ein Startdatum; eine Aufgabe hat einen Status (offen, erledigt) und ein Erledigungsdatum. Rahmenbedingungen: neue Mitarbeitende sehen nur ihr eigenes Onboarding, Führungskräfte sehen die Onboardings ihres Teams, eine E-Mail an das zuständige Team, wenn eine Aufgabe fällig ist, hochgeladene Dokumente privat gespeichert. Warmer Stil: Creme, Tiefblau, abgerundete Karten.
Prompts für Kundenportale
Ein Kundenportal ist ein internes Tool mit einer Tür nach draußen: Auf der einen Seite arbeitet das Team, auf der anderen sieht jeder Kunde nur seine eigenen Datensätze. Der Satz zu den Rechten ist hier das ganze Produkt. Mehr Beispiele in unserem Guide zum Kundenportal.
Portal einer Steuerkanzlei
Kundenportal · Buchhaltung
Erstelle eine Kundenportal-Web-App für [eine Steuerkanzlei mit 4 Steuerberatern und 150 kleinen Firmenkunden]. Rollen: Kanzlei-Admin, Steuerberater, Kunde. Login: Mitarbeitende per E-Mail; Kunden per Einladung ihres Steuerberaters. Screens für Kunden: Unterlagen, die diesen Monat einzureichen sind, mit Upload-Button, ihre hochgeladenen Unterlagen nach Jahr, Nachrichten mit ihrem Steuerberater, ihre Rechnungen der Kanzlei. Screens für das Team: Kundenliste mit der Anzahl fehlender Unterlagen, Kundendetail, Unterlage anfordern (Titel, Fälligkeit), Nachrichtenverläufe. Daten: eine Kundenfirma hat einen Steuerberater und mehrere Unterlagenanfragen; eine Anfrage hat eine Fälligkeit und einen Status (angefordert, eingegangen, geprüft); eine Unterlage gehört zu einer Anfrage. Rahmenbedingungen: ein Kunde sieht nur seine eigene Firma, Dateien privat gespeichert, eine E-Mail an den Kunden, wenn eine Anfrage angelegt wird, und eine Erinnerung [3 Tage] vor der Fälligkeit. Vertrauenswürdiger Stil: Weiß, Dunkelblau, ohne Schnörkel.
Projekt- und Freigabeportal einer Agentur
Kundenportal · Agentur
Erstelle eine Portal-Web-App für [eine Designagentur], um Arbeiten mit Kunden zu teilen und Freigaben einzuholen. Rollen: Agentur-Admin, Designer, Kunde. Login: Mitarbeitende per E-Mail; Kunden über einen Einladungslink pro Projekt. Screens für Kunden: ihre Projekte, Lieferobjekte, die auf Freigabe warten, mit Vorschau, freigeben oder Änderungen mit Kommentar anfordern, Projekt-Timeline. Screens für das Team: Projektboard, eine Version eines Lieferobjekts hochladen, Kommentarverlauf pro Lieferobjekt, erfasste Stunden pro Projekt. Daten: ein Projekt gehört zu einem Kunden und hat mehrere Lieferobjekte; ein Lieferobjekt hat mehrere Versionen und einen Status (Entwurf, gesendet, Änderungen angefordert, freigegeben). Rahmenbedingungen: Kunden sehen nur ihre Projekte und nur als gesendet markierte Versionen, eine E-Mail an den Kunden, wenn eine Version gesendet wird, und an den Designer, wenn der Kunde antwortet, Freigabedatum und Freigebender werden für jede Version gespeichert. Redaktioneller Stil: Weiß, Schwarz, großzügige Abstände.
Prompts für Dashboards und Back-Offices
Ein Dashboard liest Daten mehr, als es sie schreibt. Sagen Sie, woher die Zahlen kommen, welche zählen, über welchen Zeitraum und wer sie sehen darf.
Umsatz-Dashboard für eine kleine Kette
Dashboard · Einzelhandel
Erstelle ein Dashboard als Web-App für [eine Kette mit 6 Cafés]. Rollen: Inhaber (alle Filialen), Filialleiter (nur die eigene Filiale). Login: E-Mail, nur per Einladung. Datenquelle: eine tägliche Umsatz-CSV pro Filiale, vom jeweiligen Leiter hochgeladen, mit Datum, Produkt, Menge und Betrag. Screens: Übersicht mit Umsatz, Anzahl der Verkäufe und durchschnittlichem Warenkorb für den gewählten Zeitraum, verglichen mit dem Vorzeitraum; Umsatz pro Filiale und pro Tag als Diagramme; Top 10 der Produkte; Upload-Seite mit dem Verlauf der importierten Dateien; Einstellungen mit den Öffnungszeiten jeder Filiale. Rahmenbedingungen: ein Leiter sieht nur seine eigene Filiale, eine Datei für ein bereits importiertes Datum ersetzt die alten Daten nach einer Bestätigung, Zeitraumfilter (diese Woche, dieser Monat, benutzerdefiniert), Export jeder Tabelle als CSV. Klarer Stil: Weiß, Kaffeebraun, gut lesbare Diagramme ohne 3D.
Admin-Back-Office für einen Marktplatz
Back-Office · Marktplatz
Erstelle eine Admin-Back-Office-Web-App für [einen Marktplatz für gebrauchte Möbel]. Rollen: Admin, Moderator (prüft Anzeigen und Meldungen, darf keine Erstattungen auslösen). Login: E-Mail, nur Team-Konten, vom Admin angelegt. Screens: Anzeigen in Prüfung mit Freigeben und Ablehnen (Grund Pflicht), Meldungen von Nutzern mit der gemeldeten Anzeige oder dem gemeldeten Mitglied, Mitgliedsdetail mit Anzeigen, Bestellungen und Verwarnungen, Bestellliste mit Filtern nach Status, Erstattungsformular für Admins. Daten: ein Mitglied hat mehrere Anzeigen und Bestellungen; eine Anzeige hat einen Status (in Prüfung, online, abgelehnt, verkauft); eine Meldung verknüpft einen Melder, ein Ziel und einen Grund; jede Admin-Aktion wird mit Urheber und Datum gespeichert. Rahmenbedingungen: eine abgelehnte Anzeige löst eine E-Mail an den Verkäufer mit dem Grund aus, ein Mitglied mit [3 Verwarnungen] wird automatisch gesperrt, alle Tabellen durchsuch- und sortierbar. Funktionaler Stil: Hellgrau, weiße Panels, Rot für destruktive Aktionen.
Folge-Prompts für eine Web-App
Der erste Prompt baut das Gerüst. Melden Sie sich dann mit jeder Rolle an und prüfen Sie, was sie sieht, bevor Sie etwas hinzufügen. Jede weitere Nachricht sollte genau eine Sache ändern: eine Rolle, eine Spalte, einen Status, eine E-Mail, einen Fehler. Sagen Sie, was gebaut werden soll, wohin es kommt und was unangetastet bleiben muss.
Wann
Folge-Prompt zum Anpassen
Eine Rolle hinzufügen
Füge eine Rolle [Betrachter] hinzu, die [alle Projekte] nur lesend sieht, ohne Bearbeiten-Buttons und ohne Zugriff auf [Einstellungen]. Die anderen Rollen bleiben unverändert.
Ein Recht korrigieren
Ein [Kunde] kann derzeit die [Rechnung] eines anderen Kunden öffnen, indem er die URL ändert. Beschränke [Rechnungen] in der Datenbank auf ihren Eigentümer, nicht nur in der Oberfläche.
Eine Spalte oder einen Filter hinzufügen
Füge in der Liste der [Deals] eine sortierbare Spalte [Datum der nächsten Aktion] und einen Filter [nur überfällige] hinzu. Ändere die anderen Spalten nicht.
Zahlungen hinzufügen
Füge einen Plan [Pro] für [19 $ im Monat] mit Stripe Checkout hinzu. Kostenlose Konten behalten [1 Board]; Pro schaltet unbegrenzte Boards frei. Der geheime Stripe-Schlüssel bleibt auf dem Server.
Einen Fehler beheben
Im [Formular für Lagerbewegungen] zieht eine Umlagerung die Menge vom ersten Lager ab, schreibt sie dem zweiten aber nicht gut. Erwartet: beide werden gemeinsam aktualisiert. Behebe nur das.
Im KI-App-Baukasten von Cadrant erzeugen diese Prompts eine React-Web-App mit Supabase-Backend: Datenbank, Login, Dateispeicher und serverseitige Funktionen, verbunden mit einem auf Ihren Namen eröffneten Supabase-Konto, damit die Daten Ihnen gehören. Sie testen jede Rolle in der Live-Vorschau, iterieren im Gespräch und veröffentlichen dann auf einer Cadrant-URL oder Ihrer eigenen Domain. Wenn Sie Tools vergleichen, stellt unser Guide zu den Alternativen zu Lovable die wichtigsten Baukästen nebeneinander. Der Prompt selbst funktioniert in jedem davon: fünf Web-Zeilen, ein Absatz und die Klammern mit Ihrem Projekt gefüllt.
Prompt-Beispiele für eine Web-App: 10 Vorlagen | Cadrant