Gute Prompts schreiben

Die Qualität deines Prompts bestimmt direkt die Qualität des Ergebnisses. Hier sind bewährte Muster der besten XAIO-Nutzer.

Plane bevor du schreibst

Beantworte vier Fragen bevor du tippst:

Was ist dieses Produkt oder Feature?
Für wen ist es?
Warum werden sie es nutzen?
Was ist die eine Hauptaktion, die der User ausführen soll?

Klares Denken erzeugt präzise Prompts. Vage Ideen erzeugen vage Ergebnisse.

Lass die KI Rückfragen stellen

Füge diese Zeile zu jedem Prompt hinzu um versteckte Anforderungen aufzudecken:

Erstelle ein Buchungssystem für ein Yoga-Studio. Stelle mir alle Fragen, die du brauchst, um vollständig zu verstehen, was ich von diesem Feature erwarte.

Beispiel-Prompts

Kopiere und passe diese bewährten Prompts an:

Website SaaS Landing Page

Erstelle eine moderne SaaS-Landingpage für ein Projektmanagement-Tool namens "TaskFlow". Dunkles Theme mit blauen Akzenten. Beinhaltet: Hero-Bereich mit Headline und CTA, 3 Feature-Karten mit Icons, Testimonials-Karussell, Preistabelle mit Free/Pro/Enterprise, FAQ-Bereich und Footer.

Website Restaurant-Website

Baue eine Restaurant-Website für ein italienisches Restaurant namens "Bella Cucina". Warmes, elegantes Design mit dunklen Holztönen. Bereiche: Hero mit Food-Foto, Menü mit Kategorien, Über-uns-Bereich, Reservierungsformular, Standortkarte und Öffnungszeiten.

Website Portfolio

Erstelle ein persönliches Portfolio für einen UX-Designer. Minimalistisch, sauberes Design mit viel Weißraum. Beinhaltet: Hero mit Name und Titel, Projekt-Galerie mit Kategorie-Filter, Skills-Liste, Kunden-Testimonials und Kontaktformular.

Web App CRM-System

Baue ein CRM-System für ein kleines Vertriebsteam. Saubere, professionelle UI mit Sidebar. Beinhaltet: Kontaktliste mit Suche und Filtern (Status, Firma, letzter Kontakt), Kontakt-Detailseite mit Aktivitäts-Timeline und Notizen, Deal-Pipeline als Kanban-Board mit Drag-and-Drop zwischen Phasen (Lead, Qualifiziert, Angebot, Gewonnen, Verloren), einfaches Dashboard mit Gesamtdeals, Konversionsrate und Umsatz-Chart.

Web App Lagerverwaltung

Erstelle eine Lagerverwaltungs-App für ein kleines Lager. Beinhaltet: Produktkatalog mit Kategorien, Lagerbeständen und Warnungen bei niedrigem Bestand, Ein-/Ausgangsformulare die Mengen automatisch aktualisieren, Barcode-Suchfeld, Lieferantenverzeichnis mit Kontaktdaten und ein Dashboard mit Gesamtartikeln, Artikeln unter Nachbestellpunkt und Lieferungen dieser Woche.

Web App Projekt-Zeiterfassung

Baue ein Zeiterfassungs-Tool für Freelancer. Beinhaltet: Timer mit Start/Stop und manuellem Eintrag, Projektliste mit Stundensatz und Kundenname, Wochen-Timesheet als Tabelle (Zeilen = Projekte, Spalten = Tage), Monatsbericht mit Gesamtstunden, abrechenbarem Betrag pro Projekt und Chart der Stunden pro Woche, sowie Export-Button für CSV-Download.

Design-Buzzwords verwenden

Bestimmte Stil-Begriffe beeinflussen Typografie, Abstände und Farbpalette:

minimal — viel Weißraum, dünne Rahmen, subtile Schatten
premium — dunkle Hintergründe, Gold/Silber-Akzente, große Typografie
cinematic — geschichtete Tiefe, dramatischer Kontrast
playful — abgerundete Ecken, leuchtende Farben, federnde Animationen

Gestalte einen Landingpage-Hero, der sich premium und cinematic anfühlt. Verwende geschichtete Tiefe, durchscheinende Flächen und dramatischen Kontrast zwischen Headline und Hintergrund.

Fortgeschrittene Beispiele

Komplexe Prompts die mehrere Features und detaillierte Spezifikationen kombinieren:

Web App SaaS Analytics-Plattform

Baue ein Analytics-Dashboard für ein SaaS-Produkt. Dunkles Theme, Inter-Font, Akzentfarbe #6366f1, Border-Radius 12px, dezenter Glasmorphismus auf Karten.

Layout: einklappbare Sidebar die sich beim Hover automatisch ausklappt (nur Icons wenn eingeklappt, volle Labels wenn ausgeklappt, sanfte 200ms Transition). Sidebar-Einträge: Dashboard, Kunden, Berichte, Einstellungen. Aktiver Eintrag mit Akzentfarbe hervorgehoben.

Seiten:
- Dashboard: KPI-Karten (MRR, Churn-Rate, aktive Nutzer, NPS) mit Sparkline-Charts, großer Flächen-Chart für Umsatz über 12 Monate, Activity-Feed
- Kunden: Datentabelle mit Suche, Sortierung, Statusfilter (Aktiv/Abgewandert/Trial), Klick auf Zeile öffnet Detail-Drawer von rechts
- Berichte: Datumsbereich-Picker, PDF/CSV-Export-Buttons, Chart-Typ-Toggle (Balken/Linie/Kreis)
- Einstellungen: Profil-Formular, Teammitglieder-Liste mit Rollen-Badges (Admin/Mitglied/Betrachter), Einladungs-Modal

Auth: Login-Seite mit E-Mail/Passwort + Google OAuth Button, geschützte Routen leiten zu /login weiter, User-Avatar + Name im Sidebar-Footer.

Responsive: Sidebar wird zur Bottom-Tab-Bar auf Mobile, Karten stapeln sich vertikal, Tabellen wechseln zu Karten-Layout unter 768px.

Web App Projektmanagement-Board

Baue ein Projektmanagement-Tool inspiriert von Linear. Helles Theme mit Dark-Mode-Toggle. Design: clean, viel Weißraum, Inter-Font, dezente graue Rahmen, Akzent #2563eb, abgerundete Ecken.

Sidebar: automatisches Ein-/Ausklappen beim Hover — eingeklappt nur Icons (24px), ausgeklappt Icon + Label. Bereiche: Projekte, Meine Aufgaben, Posteingang, Einstellungen. Unten: User-Avatar mit Dropdown (Profil, Theme-Wechsel, Logout).

Hauptansichten:
- Board-Ansicht: Kanban-Spalten (Backlog, Todo, In Arbeit, Review, Fertig) mit Drag-and-Drop-Karten. Jede Karte: Titel, Prioritäts-Badge (Dringend/Hoch/Mittel/Niedrig mit Farbe), Bearbeiter-Avatar, Fälligkeitsdatum. Quick-Add am Spaltenende
- Listen-Ansicht: sortierbare Tabelle mit Inline-Editing für Titel und Status, Mehrfachauswahl mit Bulk-Aktionen (verschieben, zuweisen, löschen)
- Timeline-Ansicht: horizontaler Gantt-Chart, ziehbare Balken zur Datumsanpassung

Auth: E-Mail/Passwort-Login, rollenbasierter Zugriff (Owner kann Projekt löschen, Member kann Tasks bearbeiten, Viewer ist read-only). Berechtigungsfehler als Toast anzeigen.

Responsive: Board scrollt horizontal auf Tablet, wechselt zu gestapelter Liste auf Mobile. Sidebar wird zum Slide-Out-Drawer mit Hamburger-Menü unter 1024px.

Web App Agentur-Portfolio mit Kundenportal

Baue eine Website für eine Digital-Agentur mit integriertem Kundenportal. Design: premium, dunkle Basis (#0a0a0f), Akzent-Gradient von #8b5cf6 nach #ec4899, große fette Überschriften in Inter, Bodytext in hellem Grau, großzügige Abstände (py-20 pro Sektion), sanfte Scroll-Animationen.

Öffentliche Seiten (ohne Auth):
- Home: Fullscreen-Hero mit animiertem Gradient-Hintergrund, Headline + Subtext + CTA, Logo-Karussell der Kunden, 3 Service-Karten mit Hover-Lift-Effekt, ausgewählte Case Studies als Grid, Team-Bereich, Kontaktformular mit Validierung
- Work: filterbares Portfolio-Grid (Alle/Branding/Web/Mobile), Klick öffnet Case-Study-Detail mit Bildergalerie
- Über uns: Agentur-Story, Team-Grid mit Hover-Overlay (Rolle + LinkedIn-Link)

Kundenportal (Auth erforderlich):
- Login mit E-Mail/Passwort, "Passwort vergessen"-Flow
- Dashboard: aktive Projekte mit Fortschrittsbalken, letzte Datei-Uploads, anstehende Meilensteine
- Projekt-Detail: Datei-Upload (Drag-and-Drop), Kommentar-Thread pro Deliverable, Freigabe-Buttons (Genehmigen/Änderungen anfordern)
- Rechnungen: Liste mit Status-Badges (Bezahlt/Offen/Überfällig), PDF-Download

Sidebar im Portal: automatisches Ein-/Ausklappen beim Hover, nur Icons wenn eingeklappt, sanftes Ausklappen. Einträge: Dashboard, Projekte, Dateien, Rechnungen, Support.

Responsive: Hero-Text skaliert auf Mobile herunter, Portfolio-Grid von 3 auf 1 Spalte, Sidebar wird zum Bottom-Sheet auf Mobile, Tabellen werden zu Karten-Stacks.

Bekannte Seiten referenzieren

Website Stripe-Style Preisseite

Gestalte eine Preisseite ähnlich wie Stripe. Drei Stufen nebeneinander, die mittlere hervorgehoben. Saubere Typografie, viel Weißraum, Feature-Vergleichstabelle darunter.

In Komponenten denken

Baue modulare Teile statt ganzer Seiten. Jeder Prompt sollte einen klaren Zweck haben:

Web App Navigation

Erstelle eine schwebende Navigationsleiste mit Glasmorphismus-Effekt. Beinhaltet Home, Features, Preise und Kontakt-Links. Füge sanfte Hover-Interaktionen und ein mobiles Hamburger-Menü hinzu.

Leitplanken setzen

Sage der KI was sie NICHT ändern soll:

Füge einen neuen Testimonials-Bereich unter den Features hinzu. Ändere nicht den bestehenden Hero-Bereich, die Navigation oder den Footer.

In kleinen Schritten iterieren

Nach der Erstgenerierung eine Änderung pro Nachricht:

Mache den Hero-Bereich höher und ändere den Hintergrund zu einem dunklen Gradient von #0f172a zu #1e293b

Debugging-Prompts

Wenn etwas nicht funktioniert:

Die Seite zeigt einen leeren Bildschirm nach der letzten Änderung. Prüfe die Browser-Konsolen-Fehler und behebe das Problem.

Der API-Endpunkt /api/users gibt 500 zurück. Lies die Backend-Logs, finde den Fehler und behebe ihn.

Prompt-Vorlagen

Wiederverwendbare Muster für häufige Aufgaben:

Web App CRUD-Oberfläche

Erstelle eine CRUD-Oberfläche für Kundenkontakte. Beinhaltet: Listenansicht mit Suche und Paginierung, Erstellen/Bearbeiten-Formular in einem Modal, Lösch-Bestätigungsdialog und Ladezustände.

Stufenweise Erweiterung

Baue in Schichten für beste Ergebnisse:

1. Kern: "Erstelle eine einfache Todo-Liste mit Hinzufügen und Löschen"

2. Persistenz: "Speichere Todos in localStorage"

3. UX: "Füge Checkboxen, Drag-to-Reorder und Filter hinzu"

4. Feinschliff: "Füge sanfte Animationen hinzu"

XAIO.md — Das Gedächtnis deines Projekts

XAIO.md ist eine Datei, die die KI automatisch erstellt und pflegt. Sie speichert dein Design-System, Konventionen und Entscheidungen — und gilt für alle Chats.

Du kannst sie proaktiv nutzen:

Bevor wir anfangen zu bauen, lass uns das Design-System festlegen: dunkles Theme, Inter-Font, Akzentfarbe #3b82f6, 8px Eckenradius, subtile Schatten, großzügige Abstände. Speichere das in XAIO.md.

Update XAIO.md: wir haben von Tailwinds Standardfarben zu einer eigenen Palette gewechselt. Primär: #1e40af, Sekundär: #059669, Hintergrund: #0f172a.

Lies XAIO.md und sage mir welches Design-System und welche Konventionen für dieses Projekt definiert sind.

Die KI liest XAIO.md zu Beginn jedes Chats. Sieh dir XAIO.md im Files-Tab (XAIO.md Unter-Tab) oder in den Projekteinstellungen an. Um sie zu ändern, bitte die KI im Chat.

Sprache

Schreibe in der Sprache die dir am natürlichsten ist. Die KI antwortet in deiner Sprache. Generierter Code ist immer auf Englisch.

Prompting & Best Practices