67% Zeitersparnis durch Design-Token-Prozess
Herausforderung
Bei Website-Projekten wie „SisterStyle Events“, einem kleinen Unternehmen für Blumendekorationen und den Verleih von Deko-Artikeln, entstand eine besondere Anforderung: Das umfangreiche Farbsystem sollte sich saisonal automatisch anpassen können.
Die Grundlage dafür war bereits vorhanden. Das Problem lag jedoch in der Pflege: Jede Änderung musste bisher manuell auf zahlreiche Komponenten übertragen werden. Gerade bei vielen Farbabstufungen und unterschiedlichen UI-Zuständen steigt dabei nicht nur der Aufwand, sondern auch die Gefahr, einzelne Stellen zu übersehen.
Ein strukturiertes Design-Token-System sollte deshalb die Gestaltung zentralisieren und gleichzeitig die Grundlage für einen automatisierten saisonalen Farbwechsel schaffen.
User Research
Die eigentliche Research fand bereits im Rahmen des Website-Projekts statt und musste für die Entwicklung des Token-Systems nicht erneut durchgeführt werden.
Eine wichtige Erkenntnis war, dass der saisonale Farbwechsel nicht nur technisch interessant ist, sondern auch einen sichtbaren Mehrwert für die Website bietet: Die wechselnden Farbwelten erzeugen einen visuellen Überraschungseffekt und machen neugierig.
Damit dieser Wechsel zuverlässig funktioniert, mussten Farben, Abstufungen und ihre Verwendung in den Komponenten systematisch über Tokens abgebildet werden.
Konzeption und Umsetzung
Design & Struktur
Als Grundlage dienten die bereits definierten Gestaltungsregeln des Projekts – unter anderem Farben und deren Abstufungen, Typografie, Größen, Abstände und weitere visuelle Eigenschaften.
Aus diesen Vorgaben ließ sich eine hierarchische Token-Struktur ableiten:
- Primitive Tokens für grundlegende Werte wie Farben, Schriftgrößen oder Abstände
- Semantische Tokens für deren konkrete Bedeutung im Interface
- Component Tokens für die Verwendung innerhalb einzelner UI-Komponenten
Die zentrale Quelle bildet eine tokens.json mit aktuell 152 Design Tokens:
| Kategorie | Anzahl |
|---|---|
| Farb-Tokens | 99 |
| Schriftgrößen | 21 |
| Typografie-Tokens | 12 |
| Spacing-Tokens | 9 |
| Border-Radius-Tokens | 5 |
| Dimension-Tokens | 2 |
| Font-Families | 2 |
| Font-Weights | 2 |
| Gesamt | 152 |
Davon sind 55 Alias-Tokens. Sie bilden semantische Rollen ab, anstatt Rohwerte zu duplizieren. Dadurch kann beispielsweise eine Farbe an einer zentralen Stelle geändert werden, ohne alle Verwendungen einzeln anpassen zu müssen.
Die Tokens wurden zunächst in Penpot angelegt. Allerdings nicht vollständig manuell: Gerade bei einer großen Anzahl von Tints und Shades wäre das unnötig zeitaufwendig gewesen.
Da die Token-Struktur als JSON vorlag, konnten KI-Tools codeseitig große Mengen an Tokens schnell generieren, optimieren und erweitern. So wurde aus einer potenziell sehr repetitiven Aufgabe ein deutlich effizienterer Prozess.
Entwicklung
Für die technische Umsetzung wurde ein React-Projekt aufgesetzt und Style Dictionary integriert. Damit konnten die definierten Tokens automatisiert in CSS Custom Properties überführt werden.
Eine Herausforderung bestand darin, dass die vorhandene Verschachtelung des token.json nicht direkt mit dem gewünschten Build-Prozess kompatibel war. Die ersten Set-Ebenen mussten entfernt werden, sodass Style Dictionary mit den eigentlichen Primitive-, Semantic- und Component-Ebenen arbeiten konnte.
Dafür entstand ein KI-unterstütztes Script, das vor dem eigentlichen Build-Prozess die Verschachtelung des JSON automatisch abflacht.
Die daraus generierten CSS Custom Properties wurden anschließend in eine schreibgeschützte CSS-Datei geschrieben und validiert.
KI-gestützte Optimierung
Die Optimierung war kein nachgelagerter Schritt, sondern Bestandteil des gesamten Token-Prozesses.
Um die KI gezielt und konsistent einsetzen zu können, wurden eigene Skills und Copilot-Instruktionen definiert. Sie geben der KI den notwendigen Kontext über das Projekt und beschreiben die Regeln für die unterschiedlichen Token-Bereiche, ohne jeden einzelnen Token vorab festlegen zu müssen.
Dadurch konnte ich Copilot gezielt Aufgaben wie diese übernehmen lassen:
- fehlende States ergänzen
- Farbabstufungen generieren
- typische UI-Elemente berücksichtigen
- Token-Strukturen überprüfen und optimieren
- Inkonsistenzen erkennen
- bestehende Tokens erweitern oder anpassen
Die KI konnte dabei anhand der Aufgabe selbst entscheiden, welcher Skill benötigt wird – beispielsweise für Farben, Typografie oder Abstände.
Das reduziert den Overhead bei einzelnen Prompts erheblich. Statt jede Anweisung mit allen relevanten Regeln zu versehen, steht der benötigte Kontext bereits projektweit zur Verfügung.
Das Ergebnis ist ein deutlich effizienterer Workflow: Wiederkehrende Aufgaben können schneller erledigt werden, während gleichzeitig die Konsistenz des Systems verbessert wird.
Test & Validierung
Der Token-Prozess wurde nicht nur automatisiert, sondern auch mit Validierungsschritten versehen.
Nach dem Build-Prozess werden die generierten Tokens überprüft. Dabei können fehlende oder inkonsistente Definitionen erkannt und anschließend gezielt nachgebessert werden.
Auch die definierten Skills und Instruktionen wurden iterativ von mir überprüft und optimiert. So konnte ich den KI-gestützten Workflow schrittweise verbessern und die Ergebnisse besser auf die Anforderungen des Design-Systems abstimmen.
Barrierefreiheit
Barrierefreiheit wurde ebenfalls in den KI-gestützten Workflow integriert.
Da nicht jedes Projekt wirklich vollständig barrierefrei vom Design umgesetzt wird, wurden entsprechende Regeln in die Instruktionen aufgenommen. Die KI soll dadurch bei der Bearbeitung der Tokens beispielsweise auf problematische Farbkombinationen, kritische Schriftgrößen oder andere relevante Aspekte aufmerksam machen.
Diese Prüfung wird bewusst auf der Ebene des Design- und Token-Prozesses durchgeführt. Der Build-Prozess selbst führt keine vollständige Barrierefreiheitsprüfung durch.
Ergebnis
Das System umfasst aktuell 152 Design Tokens, davon 55 semantische Alias-Tokens.
Der entscheidende Vorteil zeigt sich beim Aufwand für vergleichbare Token-Sets. Auf Basis einer definierten Aufwandsschätzung ergibt sich folgende Gegenüberstellung:
| Arbeitsweise | Aufwand pro Token | Aufwand für 152 Tokens |
|---|---|---|
| Manuell, ohne definierten Prozess | ca. 5,5 Min. | ca. 13,9 Std. |
| Skill-Workflow + automatisierter Build | ca. 1,8 Min. | ca. 4,6 Std. |
| Ersparnis | ca. 3,7 Min. | ca. 9,3 Std. / 67 % |
Damit reduziert der skill-gestützte Workflow den geschätzten Pflege- und Bearbeitungsaufwand um rund 67 % – bei einem vergleichbaren Token-Set entspricht das einer Ersparnis von etwa 9 Stunden.
Zusätzlich ergeben sich weitere Vorteile:
- Tokens können wesentlich schneller erstellt, erweitert und angepasst werden.
- Große Mengen an Farbvarianten, States und Abstufungen lassen sich automatisiert erzeugen.
- Änderungen können zentral über die Token-Struktur gesteuert werden.
- Wiederkehrende Aufgaben werden durch KI-Unterstützung deutlich reduziert.
- Die strukturierte Token-Basis schafft die Grundlage für einen automatisierten saisonalen Farbwechsel.
- Das Token-JSON kann als zentrale Datenbasis genutzt und anschließend wieder in Design-Tools wie Penpot oder Figma überführt werden.
Dadurch entsteht ein Workflow, bei dem Design und Entwicklung deutlich enger miteinander verbunden sind – ohne jedes Element mehrfach und manuell pflegen zu müssen.
Fazit
Design Tokens haben sich in diesem Projekt nicht nur als Strukturierungswerkzeug, sondern als konkreter Produktivitätshebel erwiesen.
Die Kombination aus einem strukturierten Token-System, automatisierten Build-Prozessen und KI-Unterstützung reduziert den geschätzten Bearbeitungsaufwand um rund 67 % und schafft gleichzeitig eine konsistentere Grundlage für Design und Entwicklung.
Besonders spannend war für mich dabei die Erkenntnis, dass KI nicht nur zur Generierung einzelner Tokens eingesetzt werden kann. Mit gut definierten Skills und Projektinstruktionen lässt sich ein kompletter Workflow aufbauen, in dem die KI wiederkehrende Aufgaben übernimmt und gleichzeitig definierte Qualitäts- und Accessibility-Regeln berücksichtigt.
Neben dem konkreten Ergebnis für das Projekt konnte ich dadurch auch wesentlich tiefer in die praktische Arbeit mit KI-gestützten Design- und Entwicklungsprozessen einsteigen – eine Erfahrung, die ich künftig gezielt in weiteren UX-Engineering-Projekten einsetzen möchte.