Nachdem wir im ersten Teil besprochen haben, warum Designer sich wandeln müssen, wird es jetzt konkret: Wie sieht dieser Wandel technisch aus? Welche Tools gibt es bereits? Wie funktionieren sie? Und vor allem: Wie verändert sich der tägliche Workflow?

Die gute Nachricht: KI-gestützte Design-Tools sind längst keine Science-Fiction mehr. Sie sind da, sie funktionieren – und sie werden gerade zur neuen Normalität.

“Die Frage ist nicht mehr, ob KI ins Design kommt. Sondern wie gut man sie nutzt.”

1. Figma AI: Der neue Co-Designer im vertrauten Tool

Figma war schon vor KI das dominante Design-Tool. Mit der Integration von Figma AI wird es zur Plattform für KI-gestütztes Design.

Was Figma Make kann

Figma Make ist das Herzstück der KI-Integration. Es funktioniert nach dem Prinzip “describe, don’t draw”:

• Man gibt einen Text-Prompt ein: “Erstelle eine Produktseite mit Hero-Bereich, drei Feature-Karten und einem CTA-Button”
• Figma generiert ein vollständiges Layout – mit Komponenten aus dem bestehenden Designsystem
• Das Ergebnis ist sofort editierbar, keine “schwarze Box”

Was das bedeutet:

• Wireframes entstehen in Sekunden statt Minuten
• Erste Design-Iterationen sind sofort verfügbar
• Folgeprompts ermöglichen präzise Anpassungen: “Mach den Hero-Bereich voller” oder “Nutze unser Primary-Button-Komponent”

Kontextsensitives Arbeiten

Das Besondere: Figma AI versteht den Kontext des Projekts. Es greift auf:

• Bestehende Designsysteme und Komponenten zu
• Farben, Typografie, Spacing-Regeln
• Bereits vorhandene Screens und Layouts

Das heißt: KI generiert nicht irgendwas – sondern etwas, das zum Projekt passt. Als würde ein neuer Designer ins Team kommen, der die Brand Guidelines schon kennt.

Kollaborativer Workflow

Ein oft übersehener Vorteil: Figma AI arbeitet im selben File wie das Team.

• Designer und Entwickler sehen KI-Vorschläge in Echtzeit
• Man kann gemeinsam promoten, kommentieren, iterieren
• Versionierung und Feedback-Loops bleiben intakt

Das ist nicht nur effizienter – es verändert auch die Art der Zusammenarbeit. Design wird weniger hierarchisch, mehr explorativ. Man probiert Dinge aus, verwirft sie, entwickelt sie weiter – gemeinsam mit der KI als drittem Teammitglied.

2. Generative UI: Wenn Komponenten sich selbst anpassen

Ein noch tiefgreifenderer Wandel kommt durch Generative UI – also Interfaces, die sich dynamisch an Nutzer und Kontext anpassen.

Was ist Generative UI?

Traditionell sind UI-Komponenten statisch: Ein Button sieht immer gleich aus, eine Card hat feste Abstände. Generative UI dreht das um:

• Komponenten passen sich automatisch an Inhalte an
• Layouts verändern sich basierend auf Nutzerverhalten
• KI generiert zur Laufzeit personalisierte Varianten

Beispiel:

• Ein E-Commerce-Shop zeigt verschiedenen Nutzern unterschiedliche Layouts
• Basierend auf Präferenzen, bisherigem Verhalten, Tageszeit
• Die UI “wächst” mit der Interaktion

Technische Grundlage

Generative UI basiert auf:

• Parametergesteuerten Designsystemen: Komponenten haben variable Eigenschaften
• KI-Modellen: Die entscheiden, welche Variante wann gezeigt wird
• Echtzeit-Rendering: Interfaces werden on-the-fly zusammengesetzt

Tools wie v0.dev (von Vercel) oder ChatGPT Canvas zeigen, wie das aussehen kann:

• Man beschreibt ein Interface in natürlicher Sprache
• KI generiert lauffähigen Code – React, Vue, HTML/CSS
• Das Ergebnis ist sofort interaktiv, anpassbar, einsetzbar

Vorteile für Designer

• Personalisierung at scale: Individuelle Erlebnisse ohne manuellen Aufwand
• Adaptive Interfaces: UIs, die auf verschiedene Geräte, Sprachen, Kontexte reagieren
• Schnellere Iteration: Von Idee zu Prototyp in Minuten

Herausforderungen

• Kontrollverlust: Designer können nicht mehr jede Variante kontrollieren
• Testing-Komplexität: Wie testet man ein Interface, das sich ständig ändert?
• Ethik: Wer entscheidet, was “personalisiert” bedeutet?

Generative UI ist mächtig – aber sie fordert auch ein Umdenken in der Design-Philosophie. Weg von “pixel-perfect”, hin zu “regelbasiert”.

3. Code-Generierung: Von Design zu Development in Sekunden

Eine der größten Reibungsstellen im Design-Prozess war immer der Übergang von Design zu Code. KI macht diesen Schritt nahezu nahtlos.

Figma to Code

Tools wie Figma Dev Mode generieren automatisch Code aus Designs:

• React, Vue, Swift, Kotlin
• Mit korrekten Komponenten-Namen, Props, Styling
• Entwickler können Code direkt kopieren oder anpassen

Das verändert:

• Designer können selbst funktionale Prototypen bauen
• Entwickler bekommen sauberen Code, nicht nur Screenshots
• Die “Übersetzungsarbeit” entfällt

KI-gestützte Code-Assistenten

Tools wie GitHub Copilot, Cursor oder v0.dev gehen noch weiter:

• Man beschreibt eine Komponente in natürlicher Sprache
• KI generiert nicht nur das Design, sondern auch den lauffähigen Code
• Inklusive Interaktionen, States, Accessibility

Beispiel:

Prompt: "Erstelle eine Produktkarte mit Bild, Titel, Preis und Add-to-Cart-Button. 
Hover-Effekt auf dem Button, responsive für Mobile."

KI generiert:

• HTML/CSS oder React-Komponente
• Mit Hover-States, Media Queries, semantischem Markup
• Sofort einsetzbar

Der neue Workflow

Früher:

1. Designer erstellt Mockup in Figma
2. Entwickler interpretiert Design, schreibt Code
3. Hin und Her bei Anpassungen

Heute:

1. Designer oder Entwickler beschreibt gewünschtes Ergebnis
2. KI generiert Design + Code
3. Team verfeinert gemeinsam

Das ist nicht nur schneller – es ist auch kollaborativer. Die Grenze zwischen Design und Development verschwimmt.

4. Dynamische Layouts und personalisierte Inhalte

KI ermöglicht nicht nur statische Generierung, sondern auch dynamische Anpassung zur Laufzeit.

Content-Aware Layouts

Moderne KI-Systeme können:

• Text automatisch kürzen oder verlängern, um ins Layout zu passen
• Bilder intelligent zuschneiden (Fokus auf Gesichter, wichtige Elemente)
• Spacing und Hierarchie basierend auf Inhaltstyp anpassen

Beispiel:

• Eine News-Seite mit wechselnden Artikellängen
• KI passt Layout automatisch an: Lange Artikel bekommen mehr Platz, kurze werden kompakter dargestellt
• Ohne dass Designer jede Variante manuell anlegen müssen

KI-gesteuerte Chatbots und Assistenten

Embedded Chat-Interfaces werden intelligenter:

• Sie verstehen Kontext und Nutzerintention
• Schlagen relevante Inhalte vor
• Passen Sprache und Tonalität an

Technisch bedeutet das:

• Integration von GPT, Claude oder lokalen Modellen
• Anbindung an bestehende Datenbanken und APIs
• UI/UX, die sich an Chat-Kontext anpasst

Designer müssen hier neu denken: Nicht mehr “Wie sieht der Screen aus?”, sondern “Wie fühlt sich die Konversation an?“

5. Tools und Plattformen im Überblick

Die Landschaft entwickelt sich rasant. Hier ein Überblick über die wichtigsten Akteure:

Design-Tools mit KI-Integration

Tool	KI-Features	Einsatzbereich
Figma AI	Layout-Generierung, Auto-Layout, Designsystem-Integration	Vollwertiges Design-Tool mit KI-Co-Creation
Adobe Firefly	Bild-Generierung, Stil-Transfer, Content-Aware Fill	Grafik- und visuelles Design
Framer AI	Text-to-Website, responsive Layouts, Animationen	Landing Pages, Marketing-Sites
Uizard	Screenshot-to-Design, Wireframe-Generierung	Rapid Prototyping

Code-Generierung und Development

Tool	KI-Features	Einsatzbereich
v0.dev	Text-to-UI, React-Code-Generierung, Live-Preview	Schnelle Prototypen, funktionale Komponenten
GitHub Copilot	Code-Completion, Komponentenvorschläge	Entwicklung mit KI-Unterstützung
Cursor	KI-Editor mit Code-Generierung und Refactoring	Vollständiger Development-Workflow
Builder.io	Visual CMS mit KI-Optimierung	Content-Management und A/B-Testing

Spezialisierte KI-Tools

Tool	KI-Features	Einsatzbereich
Midjourney / DALL-E	Bild-Generierung aus Text	Visual Assets, Moodboards
ChatGPT / Claude	Text-Generierung, Ideation, Strukturierung	Copywriting, Konzeption
Relume AI	Sitemap- und Wireframe-Generierung	Website-Struktur, IA

Wichtig zu verstehen:

Diese Tools ersetzen sich nicht – sie ergänzen sich. Ein typischer Workflow könnte sein:

1. Relume AI: Sitemap und Wireframes generieren
2. Figma AI: High-Fidelity-Designs erstellen
3. Midjourney: Individuelle Visuals generieren
4. v0.dev: Code-Komponenten bauen
5. GitHub Copilot: Code verfeinern und anpassen

6. Wie verändert sich der Design-Workflow konkret?

Die Integration von KI verändert nicht nur einzelne Tools – sondern den gesamten Prozess.

Alter Workflow

1. Research & Ideation (Manual)
2. Wireframing (Sketch, Figma)
3. Visual Design (Figma, Illustrator)
4. Prototyping (Figma, InVision)
5. Handoff to Dev (Zeplin, Figma Inspect)
6. Development (Code schreiben)
7. Testing & Iteration

Neuer Workflow mit KI

1. Research & Ideation (KI-gestützt: ChatGPT für Brainstorming, Relume für Struktur)
2. Rapid Prototyping (Figma AI generiert erste Layouts)
3. Visual Refinement (Designer kuratiert und verfeinert KI-Vorschläge)
4. Interactive Prototype (v0.dev generiert funktionalen Code)
5. Collaborative Testing (Team testet direkt im Browser)
6. Continuous Iteration (KI passt basierend auf Feedback an)

Was sich ändert:

• Geschwindigkeit: Von Wochen zu Tagen
• Iteration: Mehr Varianten, schnelleres Feedback
• Kollaboration: Designer und Entwickler arbeiten näher zusammen
• Fokus: Weniger Zeit für Handwerk, mehr für Strategie

Der iterative Loop

KI macht Design iterativer. Statt eines linearen Prozesses entsteht ein Loop:

Prompt → Generierung → Bewertung → Anpassung → Repeat

Designer werden zu Kuratoren und Direktoren:

• Sie geben die Richtung vor
• Bewerten KI-Vorschläge
• Wählen die besten aus
• Verfeinern und kombinieren

Das ist effizienter – aber auch anspruchsvoller. Man braucht ein gutes Auge, Urteilsvermögen und die Fähigkeit, KI präzise zu steuern.

7. Herausforderungen und Best Practices

Trotz aller Vorteile gibt es auch Stolpersteine:

Herausforderung 1: Overreliance auf KI

Problem: Designer verlassen sich zu sehr auf KI und verlieren eigene Fähigkeiten.

Best Practice:

• KI als Werkzeug, nicht als Ersatz
• Eigenes Design-Denken weiter schärfen
• KI für erste Entwürfe nutzen, selbst verfeinern

Herausforderung 2: Einheitsbrei

Problem: Wenn alle dieselben KI-Tools nutzen, sehen alle Designs gleich aus.

Best Practice:

• Eigene Designsysteme und Komponenten trainieren
• KI-Vorschläge als Ausgangspunkt, nicht als Endresultat
• Mut zu eigenen, unkonventionellen Entscheidungen

Herausforderung 3: Datenschutz und Urheberrecht

Problem: KI-generierte Inhalte können Rechte verletzen oder Daten preisgeben.

Best Practice:

• Lokale KI-Modelle für sensible Projekte
• Lizenzen und Nutzungsrechte prüfen
• Transparenz gegenüber Kunden

Herausforderung 4: Qualitätskontrolle

Problem: KI macht Fehler – falsche Abstände, ungültige Farben, schlechte Accessibility.

Best Practice:

• Immer manuell prüfen
• Automated Testing einsetzen (Lighthouse, axe)
• Design-Reviews im Team

8. Ein Blick in die Zukunft: Was kommt als Nächstes?

Die Entwicklung steht noch am Anfang. Was in den nächsten Jahren zu erwarten ist:

Echtzeit-Personalisierung

Websites passen sich individuell an jeden Nutzer an:

• Basierend auf Verhalten, Präferenzen, Kontext
• Ohne dass Designer jede Variante manuell erstellen

Multimodale Interfaces

KI wird über Text hinausgehen:

• Voice-to-Design: “Erstelle mir eine…” per Sprachbefehl
• Sketch-to-UI: Handskizze → funktionales Interface
• Bild-zu-Code: Screenshot → lauffähige App

KI-gestützte Accessibility

KI wird automatisch:

• Alt-Texte generieren
• Kontrastverhältnisse optimieren
• Screen-Reader-freundliche Strukturen erstellen

Dezentralisierung von Design-Tools

Design passiert nicht mehr nur in Figma:

• Direkt im Browser
• In Coding-Editoren
• In Chat-Interfaces

Die Grenzen zwischen Tools verschwimmen.

KI als Partner, nicht als Ersatz

Die technische Perspektive zeigt: KI-Tools sind bereits da und funktionieren. Sie sind keine Zukunftsmusik mehr, sondern Teil des täglichen Workflows.

Was Designer jetzt tun sollten:

1. Experimentieren: Tools wie Figma AI, v0.dev, Midjourney ausprobieren
2. Lernen: Verstehen, wie KI funktioniert und wo ihre Grenzen liegen
3. Integrieren: KI in den eigenen Workflow einbauen – aber nicht blind vertrauen
4. Weiterentwickeln: Die gewonnene Zeit für kreative und strategische Arbeit nutzen

KI ist nicht der Feind des Designers. Sie ist der Katalysator für eine neue Art des Designs – schneller, kollaborativer, aber auch anspruchsvoller.

Die Zukunft gehört denen, die KI nicht fürchten, sondern beherrschen.