Tipp Nr. 13 · Frontend & Design
Gib der KI dein Design-System als Leitplanke
Ohne Vorgaben entsteht generisches „KI-Standard“-Design. Tokens, Typografie und Komponenten in den Prompt – dann passt das Ergebnis zur Marke.
Problem Die generierte Oberfläche sieht beliebig aus und trifft die Markenidentität nicht.
So geht’s
- Gib Design-Tokens (Farben, Abstände, Eckradien), Schrift und gewünschte Komponenten direkt im Prompt mit – als Text oder als Datei.
- Nutze Werkzeuge, die ein bestehendes Design-System einlesen können: Bolt und Figma Make übernehmen Stile aus Figma bzw. GitHub.
- Häng ein, zwei Beispiel-Komponenten an, an denen sich das Werkzeug orientieren soll – es ahmt vorhandene Muster nach.
Beispiel
Eher schwach
Bau mir eine schöne Preis-Sektion. Besser
Bau eine Preis-Sektion mit unseren Tokens aus tokens.css (Akzent --signal, Radius 20px, Schrift „Rubik“), mobile-first, WCAG-AA-Kontraste.Weitere Tipps
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.Frontend & DesignBeschreibe Zustände, Breakpoints und Grenzfälle mitEin vager Prompt liefert den Idealfall im Desktop-Look. Sag, was bei wenig Platz, vielen Daten oder Fehlern passieren soll.