Design mit KI

KI verändert den Designprozess grundlegend: Aus ersten Ideen entstehen schneller UI-Varianten, Layouts und interaktive Prototypen. KI-basierte Werkzeuge erweitern den kreativen Spielraum, indem sie Entwürfe generieren, Varianten vorschlagen und Strukturen sichtbar machen. Gleichzeitig rücken Fragen nach Qualität, Konsistenz, Usability und technischer Anschlussfähigkeit stärker in den Mittelpunkt.

Dieser Teil der Artikelserie „UX goes Dev“ ergänzt den gleichnamigen Leitartikel und richtet sich bewusst an Entwickler, die User Experience nicht nur implementieren, sondern nachvollziehen möchten.

KI-gestützte Generierung und Variation von UI-Elementen

Die Integration künstlicher Intelligenz in Designwerkzeuge verändert die Art und Weise, wie digitale Benutzeroberflächen entstehen. Mit Figma Make hält ein Ansatz Einzug, der Designprozesse stärker automatisiert und Designerinnen und Designer bei der kreativen Exploration unterstützt. Ein zentraler Bestandteil ist die KI-gestützte Generierung und Variation von UI-Elementen. Anstatt jedes Element manuell zu entwerfen, können Designer auf Basis von Textbeschreibungen, bestehenden Layouts oder Designsystemen automatisch generierte Vorschläge erhalten. Designer können beispielsweise eine Eingabe formulieren wie „Erstelle eine moderne Login-Maske für eine mobile Banking-App“ und erhalten daraufhin mehrere visuelle Vorschläge, die unterschiedliche Layouts, Farbvarianten und Interaktionsmöglichkeiten zeigen. Dadurch wird der kreative Suchraum deutlich erweitert. Besonders in frühen Projektphasen ermöglicht dies eine schnelle Exploration unterschiedlicher Designrichtungen.

Ein weiterer Vorteil liegt in der Variation bestehender Elemente. Statt ein UI-Element vollständig neu zu gestalten, kann die KI bestehende Designs analysieren und alternative Varianten erzeugen. So lassen sich etwa unterschiedliche Button-Stile, Kartenlayouts oder Navigationsstrukturen generieren, die weiterhin den Vorgaben eines Designsystems folgen. Designer können diese Varianten vergleichen, verfeinern und anschließend in ihre Designbibliothek übernehmen.

Auch im Kontext von Designsystemen entfaltet die KI ihre Stärke. Wenn Komponenten bereits definierte Eigenschaften besitzen – etwa Farben, Typografie oder Abstände –, kann die KI neue UI-Elemente erzeugen, die diese Regeln automatisch berücksichtigen. Dadurch bleibt die visuelle Konsistenz erhalten, während gleichzeitig neue Ideen entstehen.

Trotz dieser Automatisierung bleibt der Mensch im Zentrum des kreativen Prozesses. Die KI liefert Vorschläge, bewertet jedoch nicht zwingend deren Usability oder Kontextangemessenheit. Designer müssen daher weiterhin entscheiden, welche Varianten sinnvoll sind und wie sie zur Gesamtstrategie eines Produkts passen. KI fungiert damit eher als kreativer Co-Designer, der neue Perspektiven eröffnet und monotone Designaufgaben reduziert.

Unterstützung bei Layout, Struktur und Komponentenbildung

Neben der Generierung einzelner UI-Elemente unterstützt KI zunehmend auch bei der Gestaltung kompletter Layoutstrukturen. Werkzeuge wie Figma Make analysieren dabei sowohl vorhandene Inhalte als auch typische Gestaltungsprinzipien moderner Benutzeroberflächen. Auf dieser Grundlage können automatisch strukturierte Layoutvorschläge entstehen, die Designer anschließend anpassen und verfeinern.

Ein häufiges Problem im Interface-Design besteht darin, Inhalte sinnvoll zu strukturieren und visuell zu priorisieren. KI-gestützte Funktionen können hier helfen, indem sie Inhalte analysieren und Vorschläge für Hierarchien, Rasterstrukturen oder Anordnungen liefern. Beispielsweise kann aus einer Sammlung von Texten, Bildern und Funktionen automatisch ein Dashboard-Layout entstehen, das wichtige Informationen prominent darstellt und sekundäre Inhalte in weniger dominanten Bereichen platziert. Besonders wertvoll ist diese Unterstützung bei der Komponentenbildung. In modernen Designsystemen werden Interfaces aus wiederverwendbaren Komponenten aufgebaut. KI kann dabei Muster erkennen und automatisch vorschlagen, welche Elemente als Komponenten organisiert werden sollten. Darüber hinaus kann KI bei der Konsistenzprüfung helfen. Sie erkennt etwa, wenn ähnliche UI-Elemente unterschiedlich gestaltet sind oder wenn Abstände und Größen nicht den Designrichtlinien entsprechen. Dadurch wird es einfacher, konsistente Interfaces zu entwickeln, insbesondere in großen Projekten mit vielen Beteiligten.

Auch die Kombination aus Layout-Automatisierung und responsivem Design ist relevant. KI-gestützte Funktionen können Vorschläge machen, wie sich ein Layout auf verschiedene Bildschirmgrößen übertragen lässt. Ein Desktop-Dashboard kann beispielsweise automatisch in eine mobile Ansicht transformiert werden, wobei wichtige Inhalte priorisiert und sekundäre Funktionen in Menüs verschoben werden.

Dennoch ersetzt die KI nicht die konzeptionelle Arbeit des Designers. Entscheidungen über Informationsarchitektur, Interaktionskonzepte oder Nutzerbedürfnisse erfordern weiterhin menschliche Expertise. Die KI liefert lediglich strukturelle Vorschläge, die als Ausgangspunkt dienen können.

Auswirkungen von KI-Entscheidungen auf die spätere Implementierung

Der Einsatz von KI-gestützten Designwerkzeugen verändert nicht nur den Entwurfsprozess, sondern beeinflusst zunehmend auch die spätere Softwareentwicklung. Funktionen wie Figma Make gehen über die reine Visualisierung von Benutzeroberflächen hinaus, da sie aus Designentwürfen teilweise bereits lauffähigen Code generieren können. Dadurch verschiebt sich die Grenze zwischen Design und Implementierung: Entscheidungen, die im Designprozess getroffen werden, haben unmittelbare Auswirkungen auf die technische Umsetzung. Wenn KI aus Layouts und Komponenten Code erzeugt, werden Designentscheidungen automatisch in eine bestimmte technische Struktur übersetzt. Beispielsweise können aus einer visuellen Kartenkomponente HTML-, CSS- oder Framework-spezifische Strukturen entstehen. Diese automatische Generierung kann den Entwicklungsprozess beschleunigen, da Entwickler nicht mehr jedes Interface-Element manuell implementieren müssen.

Ein weiterer wichtiger Aspekt betrifft die Architektur der Benutzeroberfläche. Wenn KI Layouts generiert, orientiert sie sich häufig an visuellen Mustern und weniger an softwaretechnischen Prinzipien wie Wiederverwendbarkeit, Modularität oder Performance. Entwickler müssen daher häufig prüfen, ob der generierte Code tatsächlich zu den verwendeten Frameworks und Architekturkonzepten passt. Besonders bei komplexeren Anwendungen kann eine direkte Übernahme KI-generierten Codes problematisch sein.

Gleichzeitig eröffnet die KI-basierte Codegenerierung neue Chancen für die Zusammenarbeit zwischen Design und Entwicklung. Da Designwerkzeuge zunehmend strukturelle Informationen über Komponenten, Zustände und Interaktionen enthalten, können daraus automatisiert Codefragmente entstehen, die als Grundlage für die Implementierung dienen. Dies reduziert Missverständnisse zwischen Design- und Entwicklungsteams und beschleunigt den Übergang vom Prototyp zur produktiven Anwendung.

Langfristig könnte sich dadurch ein stärker integrierter Workflow entwickeln, in dem Designsysteme nicht nur visuelle Richtlinien definieren, sondern auch technische Komponenten direkt abbilden. Voraussetzung dafür ist jedoch, dass Designer stärker auf strukturierte, komponentenbasierte Modelle achten und Entwickler die generierten Artefakte kritisch prüfen und weiterentwickeln (Bild 1).

Chancen und Grenzen von KI im UX- und UI-Design

Der Einsatz künstlicher Intelligenz im Designprozess eröffnet zahlreiche neue Möglichkeiten, bringt jedoch auch Herausforderungen mit sich. Werkzeuge wie Figma Make zeigen, wie stark KI kreative Arbeitsprozesse unterstützen kann – gleichzeitig wird deutlich, dass sie menschliche Expertise nicht ersetzen kann. Zu den größten Chancen gehört die Beschleunigung von Designprozessen. Ein Beispiel zeigt Bild 2: Aus einer textuellen Beschreibung wird ein erster sogenannter Low-Fidelity-Prototyp mittels KI-Werkzeug (hier Figma Make) generiert.

KI kann repetitive Aufgaben automatisieren, Varianten generieren und Layoutvorschläge erstellen. Dadurch bleibt Designteams mehr Zeit für strategische Fragen, etwa die Analyse von Nutzerbedürfnissen oder die Entwicklung innovativer Produktkonzepte. Ein weiterer Vorteil liegt in der Erweiterung des kreativen Suchraums. KI kann Vorschläge generieren, auf die Designer möglicherweise nicht sofort gekommen wären. Dadurch entstehen neue Perspektiven und ungewöhnliche Lösungsansätze, die den kreativen Prozess bereichern können.

Den Chancen stehen jedoch auch Grenzen gegenüber. KI basiert auf bestehenden Daten und Mustern. Sie kann daher nur Variationen bereits bekannter Designkonzepte erzeugen, jedoch selten wirklich radikal neue Ideen entwickeln. Kreative Innovation bleibt daher weiterhin eine menschliche Stärke. Ein weiteres Problem betrifft die Qualität und Kontextsensibilität von KI-Vorschlägen. Ein Design kann visuell ansprechend sein, aber dennoch nicht den Bedürfnissen der Zielgruppe entsprechen oder wichtige Usability-Prinzipien verletzen. Ohne kritische Bewertung durch Designer besteht die Gefahr, dass solche Vorschläge unreflektiert übernommen werden. Auch ethische Fragen spielen eine Rolle. KI-Modelle basieren auf Trainingsdaten, die bestimmte Designstile oder kulturelle Perspektiven bevorzugen können. Dadurch besteht die Gefahr von Bias oder einer zunehmenden Vereinheitlichung digitaler Produkte.

Fazit

Künstliche Intelligenz verändert den Designprozess digitaler Produkte, indem Werkzeuge die Generierung von UI-Elementen, Layouts und Prototypen deutlich beschleunigen. Dadurch können Designteams schneller Ideen entwickeln, Varianten vergleichen und iterative Prozesse effizienter gestalten. Dennoch bleibt menschliche Expertise entscheidend, um Nutzerbedürfnisse, Usability und technische Umsetzbarkeit kritisch zu bewerten.