KI im Frontend & Design: vom Mockup zum Prompt

Vom Mockup zum Prompt

Lange lief Gestaltung über Zwischenschritte: Wireframe, Mockup, klickbarer Prototyp, dann die Übergabe an die Entwicklung. KI verkürzt diese Kette – aus einer Beschreibung entsteht direkt eine bedienbare Oberfläche, oft schon mit echtem Code statt nur einem Bild. Damit rückt das Gestalten näher an das fertige Produkt heran.

Dass das kein Nischenthema mehr ist, zeigt Figmas Branchenreport 2025: 85 % der befragten Designerinnen und Entwickler halten den Umgang mit KI für essenziell für ihren künftigen Erfolg, 78 % sagen, KI steigere ihre Effizienz. Auffällig ist ein Gefälle: Bei der Kern-Entwicklung (Code-Generierung) setzen 59 % der Entwickler KI ein, bei der Kern-Gestaltung (Asset-Erzeugung) nur 31 % der Designer – im Frontend ist die Technik also weiter als im klassischen Design.

„KI-Kompetenz essenziell für den Erfolg“

85 % (Figma 2025)

„KI steigert meine Effizienz“

78 %

Merksatz Die Frage verschiebt sich von „Wie zeichne ich das?“ zu „Wie beschreibe ich es so, dass es richtig gebaut wird?“.

Prompt zu Oberfläche: Design-to-Code

Den Kern bilden Werkzeuge, die aus einer Beschreibung eine bedienbare Oberfläche bauen – meist als modernen Frontend-Code (React, Tailwind, fertige Komponenten). v0 (Vercel) und Lovable erzeugen UIs und ganze Web-Apps aus Prompt oder Screenshot; Bolt (StackBlitz) baut im Browser und kann Design-Systeme aus Figma oder GitHub übernehmen; Figma Make erzeugt aus einer Beschreibung Prototyp und Code und greift dabei auf die eigenen Figma-Bibliotheken zu, damit das Ergebnis zum Design-System passt. Framer bringt denselben Gedanken in einen visuellen No-Code-Builder.

Für das lockere Drauflos-Bauen per Prompt – ohne den erzeugten Code Zeile für Zeile zu lesen – hat sich der Begriff „Vibe Coding“ etabliert (Anfang 2025 von Andrej Karpathy geprägt, 2025 sogar Wort des Jahres im Collins-Wörterbuch). Für schnelle Prototypen ist das stark; je näher es ans Produktiv-Frontend geht, desto wichtiger wird, was der Prompt vorgibt – wie im Beispiel:

Baue eine Preis-Sektion mit drei Tarif-Karten (Basis, Pro, Team).
Nutze unser Design-System: Tokens aus tokens.css, Schrift „Rubik“,
Eckradius 20px, Akzentfarbe --signal. Mobile-first, WCAG-AA-Kontraste,
sichtbare Fokus-Ringe. Pro-Karte hervorgehoben. Ausgabe: React + Tailwind.

Die Werkzeuge im Katalog (Frontend & Design) →

Bilder, Icons & Assets

Neben der Oberfläche selbst hilft KI bei dem, was sie füllt: Bildmodelle erzeugen Illustrationen, Hintergründe, Moodboards oder Platzhalter-Grafiken und bearbeiten vorhandene Assets per Anweisung. Für Webdesignerinnen ersetzt das nicht die Bildsprache einer Marke, beschleunigt aber Entwürfe und Varianten.

Gerade hier ist der Abstand zum Frontend aber noch groß: Laut Figma-Report nutzen nur 31 % der Designer KI in der Kern-Gestaltung (Asset-Erzeugung). Wie diese Bildmodelle funktionieren – und woran man generierte Bilder erkennt – steht im Artikel zur multimodalen KI.

Wie Bild-, Audio- und Video-KI funktioniert →

Wo es heute klemmt

Der schnelle Anfang täuscht über den schweren Rest hinweg. Addy Osmani (Chrome-Team bei Google) nennt es das „70-%-Problem“: KI liefert rasch etwa 70 % – Gerüst, naheliegende Muster, eine Oberfläche, die funktioniert aussieht –, doch die letzten 30 % (Randfälle, Integration, Sicherheit, Wartbarkeit) bleiben so hart wie zuvor. Sein Bild dazu: Es könne „hinter den Kulissen mit Klebeband zusammengehalten“ sein.

Zwei Fallstricke sind für Oberflächen besonders relevant. Erstens Barrierefreiheit: Generierter Code ist nicht automatisch zugänglich. Vergleichsstudien finden gemischte Ergebnisse – Modelle können solide Strukturen liefern, produzieren aber auch neue Fehler (etwa nicht-eindeutige ARIA-Attribute); Zugänglichkeit muss geprüft, nicht angenommen werden. Zweitens der Einheitslook und das Abdriften vom Design-System: Ohne klare Vorgaben entsteht generisches „KI-Standard“-Design, das die Markenidentität verfehlt.

KI liefert schnell …

~ 70 % – der Rest bleibt hart

Merksatz Die letzten 30 % – Randfälle, Barrierefreiheit, Wartbarkeit – sind die eigentliche Arbeit. Eine hübsche Oberfläche ist noch kein fertiges Frontend.

Praxis: das Design-System als Leitplanke

Aus der Praxis hat sich eine Handvoll Faustregeln herausgebildet (Erfahrungswissen, kein hartes Studienergebnis). Die wichtigste: Gib der KI dein Design-System als Leitplanke. Tokens (Farben, Abstände, Radien), Typografie, Komponenten und Beispiele im Prompt halten das Ergebnis konsistent – Werkzeuge wie Bolt oder Figma Make können bestehende Systeme sogar direkt einlesen.

Zweitens: Behandle die Ausgabe als Entwurf, nicht als Endstand. Sie ist ein schneller Startpunkt zum Verfeinern – Barrierefreiheit, Responsive-Verhalten und Markentreue prüft und verantwortet weiterhin der Mensch. Drittens: Je klarer und enger der Auftrag, desto besser das Ergebnis. So wird KI zum Beschleuniger der gestalterischen Arbeit, nicht zu ihrem Ersatz.

/* Auszug aus dem Design-System, das man dem Werkzeug mitgibt */
:root {
  --signal: #6647cf;       /* Primärakzent (CTA, Marke) */
  --radius: 20px;          /* Eckradius der Karten */
  --font: "Rubik", system-ui, sans-serif;
}

Merksatz Design-System rein, Entwurf raus, Mensch prüft. KI beschleunigt das Gestalten – verantworten muss es weiter der Mensch.

Das Gegenstück: KI-Coding mit Agenten →Frontend- & Design-Werkzeuge ansehen →