UX-Design-System – UX-Expertise und KI

Wer digitale Produkte entwickelt, kennt das Problem: Ein Button sieht auf einer Seite anders aus als auf der nächsten. Ein Formularfeld hat einen anderen Abstand, eine Fehlermeldung eine andere Formulierung. Jede Abweichung wirkt klein. Zusammen führen sie zu Oberflächen, die schwer verständlich sind, und zu Teams, die viel Zeit mit Nacharbeit verbringen. Genau hier setzt ein UX-Design-System an. Es bündelt Regeln, Bausteine und Dokumentation an einer Stelle. Wer ein UX-Design-System erstellen will, braucht dafür mehr als Gestaltungswissen allein. Gleichzeitig stellt sich eine Frage, die viele Teams aktuell beschäftigt: Wenn KI Oberflächen und Code erzeugen kann, braucht es dann noch UX-Designer:innen für den Aufbau eines UX-Design-Systems? Die kurze Antwort lautet: ja. Die längere Antwort zeigt, welche Aufgaben bei Menschen bleiben und wo KI sinnvoll unterstützen kann.

‍

Was ein UX-Design-System leistet

Ein UX-Design-System ist mehr als eine Sammlung von Farben und Schriften. Es beschreibt, wie ein Produkt aussieht, wie es sich verhält und warum es so gestaltet ist. Dazu gehören wiederverwendbare Bausteine, Richtlinien für ihre Nutzung und eine Dokumentation, die Entscheidungen nachvollziehbar macht. Teams greifen darauf zurück, wenn sie neue Funktionen bauen. Sie müssen nicht bei jeder Seite von vorn beginnen. Das spart Zeit und verringert Abweichungen zwischen Produkten und Teams.

Zwei Begriffe sind dabei zentral: Design Tokens und Komponentenbibliothek. Design Tokens sind benannte Werte, zum Beispiel für Farben, Abstände oder Schriftgrößen. Sie sind unabhängig von einer konkreten Technik und lassen sich in Figma ebenso verwenden wie im Code. Eine Komponentenbibliothek ist die Sammlung wiederverwendbarer UI-Bausteine, etwa Buttons, Eingabefelder oder Dialoge. Beide Begriffe fallen im Alltag oft zusammen, sind aber nicht dasselbe. Die Tokens bilden die Basis, die Komponenten bauen darauf auf. Bevor Teams UX-Design Tokens definieren, sollten sie bestehende Werte sichten und Dubletten auflösen.

Die Bausteine im Überblick

• Design Tokens: benannte Werte für Farben, Abstände und Typografie
• Komponentenbibliothek: UI-Bausteine mit festgelegten Varianten
• Muster und Richtlinien: Regeln, wann welcher Baustein passt
• Dokumentation: Zweck, Verhalten, Barrierefreiheit und Beispiele je Komponente
• Governance: Festlegung, wer Änderungen prüft und freigibt

‍

Ein Design-System erstellen: der Ablauf

Der Aufbau beginnt selten mit einer leeren Datei. Meist gibt es bereits Oberflächen, die über Jahre gewachsen sind. Die ersten Schritte sind deshalb die Absprache mit dem Kunden und eine Bestandsaufnahme: Welche Anforderungen und Bedürfnisse hat der Kunde mit dem Design-System? Welche Bausteine kommen wie oft vor und wo unterscheiden sie sich ohne erkennbaren Grund? Daraus leitet sich ab, welche Tokens und Komponenten zuerst festgelegt werden sollten. Oft entsteht das System zunächst in Figma, bevor es in den Code übertragen wird. Ein Figma-Design-System ist für viele Teams der Ausgangspunkt, weil das Werkzeug ihren Arbeitsalltag bestimmt.

Diese Reihenfolge hat einen Grund. Wer Komponenten baut, ohne vorher die Bedürfnisse der Kunden zu kennen, dokumentiert später nur Zufälle. Der Aufbau ist deshalb eine fachliche Aufgabe und keine rein technische. Danach können Teams die Komponentenbibliothek erstellen, die auf diesen Werten aufbaut.

Außerdem braucht der Aufbau eine Abstimmung mit der Entwicklung. Designer:innen und Entwickler:innen müssen sich auf Namen, Zustände und Varianten einigen. Stimmen sie nicht überein, entstehen zwei Systeme. Hier zeigt sich, dass ein UX-Design-System ein gemeinsames Arbeitsmittel ist und kein Dokument, das man nur ein Mal übergibt.

‍

Warum Entscheidungen Menschen brauchen

Jede Komponente ist eine Entscheidung. Ein Button braucht Varianten für primäre und sekundäre Aktionen. Ein Eingabefeld braucht eine Fehlermeldung, die erklärt, was zu tun ist. Solche Entscheidungen hängen davon ab, wer die Oberfläche nutzt, in welcher Situation und mit welchem Ziel. UX-Designer:innen erheben diesen Kontext durch Research, Interviews und Beobachtung. Eine KI kann Varianten vorschlagen. Ob eine Variante für bestimmte Nutzer:innen in einer konkreten Aufgabe funktioniert, muss das Team jedoch durch Tests klären. Ohne diesen Schritt bleibt jede Komponente eine Annahme.

Wo UX-Expertise unverzichtbar ist

• Zielgruppen und Aufgaben: Welche Nutzer:innen arbeiten mit dem System, und welche Ziele verfolgen sie?
• Barrierefreiheit: Welche Kontraste, Fokuszustände und Beschriftungen sind nötig?
• Passung zu Abläufen: Fügt sich eine Komponente in bestehende Nutzungsmuster ein?
• Ausnahmen: Wann ist eine Abweichung vom System sinnvoll und wie wird sie dokumentiert?

Diese Fragen lassen sich nicht aus einem Bestand an Oberflächen ableiten. Sie erfordern Wissen über Menschen und deren Kontext. Genau dieses Wissen macht den Unterschied zwischen einer Bibliothek, die viele Teams nutzen, und einer, die sie umgehen.

‍

Dokumentation als Grundlage für KI

KI-Modelle arbeiten mit den Informationen, die ihnen vorliegen. Sind Tokens, Komponenten und Regeln klar benannt und beschrieben, können sie Oberflächen konsistenter erzeugen. Fehlt diese Grundlage, erfinden sie Werte, die im System nicht existieren, oder wählen Komponenten, die nicht zum Kontext passen. Die Qualität der Ergebnisse hängt damit direkt von der Qualität der Dokumentation ab. Ein UX-Design-System dokumentieren heißt deshalb, Entscheidungen so festzuhalten, dass Menschen und Modelle sie gleichermaßen nachvollziehen können.

Eine gute Dokumentation beantwortet drei Fragen: Wofür ist ein Baustein gedacht, wie verhält er sich und wann sollte man ihn nicht verwenden? Eine saubere Dokumentation ist keine Pflichtübung am Ende des Projekts. Sie ist die Voraussetzung dafür, dass KI sinnvoll mitarbeiten kann.

Fehler aufdecken und ordnen

KI kann bei der Pflege helfen. Sie findet zum Beispiel Farbwerte, die nicht aus den Tokens stammen oder doppelte Komponenten mit ähnlichen Namen. Solche Abweichungen lassen sich sortieren und in Gruppen zusammenfassen, sodass Teams schneller sehen, wo Handlungsbedarf besteht. Entscheiden müssen jedoch Menschen: Ist die Abweichung ein Fehler oder eine bewusste Ausnahme? Dafür sind Wissen über das Produkt, die Nutzer:innen und die Gründe früherer Entscheidungen nötig. Die Prüfung durch KI ist damit ein Vorschlag, keine abschließende Kontrolle.

‍

Pflege und Governance

Ein UX-Design-System ist nie fertig. Produkte entwickeln sich weiter, neue Anforderungen entstehen und Komponenten brauchen Anpassungen. Ein UX-Design-System pflegen heißt, Änderungen geordnet zu prüfen, zu dokumentieren und zu veröffentlichen. Dafür braucht es klare Zuständigkeiten. In der Praxis hilft ein fester Turnus, etwa ein regelmäßiges Review, in dem offene Änderungen gesichtet werden. Wie oft dieser Rhythmus sinnvoll ist, hängt von der Größe des Teams und der Zahl der Produkte ab. Eine verbindliche Zahl lässt sich dafür nicht pauschal nennen.

Hier kommt die Governance ins Spiel. Sie legt fest, wer Vorschläge einreicht, wer sie fachlich bewertet und wer die endgültige Freigabe erteilt. Ohne diese Regeln entstehen parallele Varianten, die sich nach einiger Zeit kaum noch unterscheiden lassen. Eine schlanke Governance des UX-Design-Systems mit festen Abläufen verhindert das und hält das System auch bei wechselnden Teams stabil.

‍

Anforderungen in regulierten Umfeldern

In der Medizintechnik kommen zusätzliche Anforderungen hinzu. Die Norm IEC 62366-1 beschreibt den Prozess des Usability-Engineerings für Medizinprodukte. ISO 14971 regelt das Risikomanagement, ISO 13485 die Anforderungen an das Qualitätsmanagement. Ein Design-System berührt diese Bereiche, sobald Komponenten die Bedienung beeinflussen. Dann müssen Änderungen nachvollziehbar, freigegeben und dokumentiert sein. Welche Anforderungen im Einzelfall gelten, hängt vom Produkt und von der Organisation ab.

‍

Fazit

Ein UX-Design-System entsteht nicht durch Werkzeuge allein. Es braucht klare Entscheidungen, die auf Nutzer:innen, Aufgaben und Barrierefreiheit beruhen. UX-Design und UX-Research liefern diese Grundlage und prüfen sie durch Tests und Design-Expertise. Eine sauber dokumentierte Basis hilft außerdem KI-Modellen, verlässlicher zu arbeiten. KI kann Abweichungen finden und ordnen. Die Verantwortung für die Entscheidungen bleibt jedoch bei den Designer:innen im Team.