Design zuerst, dann bauen

Etabliere deine visuelle Sprache bevor du Features baust:

Bevor wir mit dem Bauen beginnen, lass uns das Design-System festlegen: Dunkles Theme, Inter-Font, blaue Akzentfarbe #3b82f6, 8px Eckenradius, subtile Schatten und großzügige Abstände.

Du promptest dich nicht zu gutem Design. Du promptest von gutem Design aus.

User Journey abbilden

Denke in Übergängen zwischen Screens, nicht in einzelnen Screens. Frage dich:

Was sieht der User zuerst?
Was baut Vertrauen auf?
Was gibt Sicherheit zum Handeln?
Wohin führt die Aktion?

Komponentenweise bauen

Statt eine ganze Seite auf einmal zu prompten, baue Bereich für Bereich:

1. "Erstelle die Navigation mit Logo und Menü-Links"

2. "Füge einen Hero-Bereich mit Headline und CTA-Button hinzu"

3. "Füge ein Feature-Raster mit 3 Karten unter dem Hero hinzu"

4. "Füge eine Preistabelle mit 3 Tarifen hinzu"

Echte Inhalte von Anfang an

Generischer Platzhaltertext führt zu generischen Layouts. Verwende echte Texte — echte Headlines zeigen ob das Layout funktioniert.

Frühzeitig an Zustände denken

Erstelle die Dashboard-Seite. Berücksichtige Zustände für: Laden (Skeleton-Platzhalter), Leer-Zustand ("Noch keine Daten"), Fehler-Zustand (Wiederholen-Button) und die normale Datenansicht.

Leitplanken setzen

Sage der KI immer was sie NICHT ändern soll:

Füge das neue Feature zur Einstellungsseite hinzu. Ändere nicht die Navigation, Sidebar oder gemeinsam genutzte Komponenten.

Features in Schritte aufteilen

Für komplexe Features, arbeite Schritt für Schritt:

1. Seite und Layout erstellen

2. UI-Komponenten hinzufügen

3. Daten verbinden

4. Logik und Grenzfälle hinzufügen

5. Jede Benutzerrolle testen

Plan-Bestätigung nutzen

Für neue Projekte zeigt XAIO einen Plan bevor gebaut wird. Für komplexe Änderungen, bitte die KI zuerst zu planen:

Ich möchte einen mehrstufigen Checkout-Flow hinzufügen. Bevor du baust, beschreibe den Ansatz: welche Dateien du erstellen wirst und wie der Datenfluss aussieht. Schreibe noch keinen Code.

Meilensteine versionieren

Denke in Meilensteinen: Layout fixiert ✓, Inhalte eingefügt ✓, Logik verdrahtet ✓, Feinschliff fertig ✓

Die goldene Regel

Nimm dir Zeit mit Prompts. Je präziser deine Eingaben, desto besser die Ergebnisse. Ein gut formulierter Prompt spart zehn Iterationen.

Best Practices