Tipp Nr. 16 · Frontend & Design
Beschreibe Zustände, Breakpoints und Grenzfälle mit
Ein vager Prompt liefert den Idealfall im Desktop-Look. Sag, was bei wenig Platz, vielen Daten oder Fehlern passieren soll.
Problem Die KI baut nur den Happy Path – mobil, leer, überlang oder im Fehlerfall fällt die Oberfläche auseinander.
So geht’s
- Nenne das Responsive-Verhalten explizit (mobile-first, Breakpoints), statt es zu erhoffen.
- Liste die Komponenten-Zustände auf: Hover, Fokus, aktiv, deaktiviert, Laden, leer, Fehler.
- Gib Inhalts-Grenzfälle vor – sehr langer Text, fehlende Daten, viele Einträge –, damit das Layout nicht nur mit Musterdaten hält.
Beispiel
Eher schwach
Mach eine Nutzer-Tabelle. Besser
Nutzer-Tabelle, mobile-first; Zustände für Laden/leer/Fehler; lange Namen umbrechen; Paginierung ab 25 Zeilen.Weitere Tipps
Frontend & DesignGib der KI dein Design-System als LeitplankeOhne Vorgaben entsteht generisches „KI-Standard“-Design. Tokens, Typografie und Komponenten in den Prompt – dann passt das Ergebnis zur Marke.Frontend & DesignBehandle generiertes UI als Entwurf, nicht als EndstandKI liefert schnell rund 70 % – Gerüst und Look. Die letzten 30 % (Randfälle, Integration, Wartbarkeit) bleiben deine Arbeit.Frontend & DesignBarrierefreiheit nie annehmen – immer prüfenGenerierter Code ist nicht automatisch zugänglich. Modelle liefern solide Strukturen, produzieren aber auch neue Fehler.