Design-System für AI-Agenten: Vorbereitung und Umsetzung

Die Vorbereitung einer Design-System für AI-Agenten umfasst die Umwandlung statischer visueller Elemente in strukturierte, benannte Daten und klare Regeln, die künstliche Intelligenz verstehen und anwenden kann. So kann AI Designs generieren, die zur Marke, zur Funktionalität und zur Barrierefreiheit passen und den Bedarf an manuellen Eingriffen verringern.

Wie interpretieren AI-Agenten Design-Systeme?

AI-Agenten benötigen klar definierte Daten, um effektiv zu arbeiten. Im Gegensatz zu Menschen, die visuelle Hinweise und Kontext intuitiv verstehen können, benötigt AI strukturierte Informationen. Eine Design-System wird zur Sprache, mit der Designer mit AI kommunizieren und ihr die notwendigen “Bausteine” sowie Regeln für deren Einsatz bereitstellen.

Warum sind Design-Tokens die Grundlage für AI?

Design-Tokens sind atomare Einheiten der visuellen Sprache: Farben, Typografie, Abstände, Radien, Schatten, Animationen. Wenn sie benannt werden, zum Beispiel color.primary.600 oder space.4, kann AI Designelemente präzise identifizieren und anwenden. AI-Tools können zuverlässig mit benannten Werten arbeiten, im Gegensatz zum Versuch, Paletten aus Screenshots zu analysieren, was oft zu Ungenauigkeiten führt.

• Verwendung von Tokens:

  • Farbe: color.background.default, color.text.primary;
  • Typografie: font.family.heading, font.size.body;
  • Abstände: space.xs, space.md;
  • Radius: radius.sm, radius.lg;
  • Schatten: shadow.medium;
  • Animation: motion.duration.fast.

• Organisation der Tokens:

  • Primitive Tokens: Grundwerte (z. B. ein bestimmter Grauton #CCCCCC).
  • Semantische Tokens: Beschreiben den Zweck (z. B. color.border.disabled, color.background.interactive).

Die Organisation von Tokens in primitive und semantische Ebenen sorgt für Flexibilität und Skalierbarkeit. Semantische Tokens binden primitive Werte an einen konkreten Nutzungskontext und erleichtern es, das Erscheinungsbild einer Marke zu ändern, indem nur die primitiven Tokens aktualisiert werden. Die Synchronisierung der Tokens zwischen Designdateien (z. B. Figma Variables) und Code (CSS Variables) ist entscheidend für die Wahrung der Konsistenz.

Wie strukturiert man Komponenten für AI-Agenten?

Die Strukturierung von Komponenten sollte sowohl für Designer als auch für AI intuitiv sein. Dazu gehören konsistente Benennungen, die Darstellung von Varianten über Varianten statt über separate Kopien sowie der Aufbau mit Auto Layout für eine klare Struktur.

• Benennung: Verwenden Sie klare, universelle Namen für Komponenten und ihre Varianten, die ihrer Rolle entsprechen (z. B. Button, TextField, Card).
• Varianten: Stellen Sie verschiedene Zustände (hover, focus, disabled, loading) und Eigenschaften (size, color, shape) einer Komponente als Varianten innerhalb einer Master-Komponente dar, nicht als separate Kopien. So kann AI die richtige Variante auswählen, statt eine neue zu erstellen.
• Struktur: Verwenden Sie Auto Layout in Figma, um explizite Beziehungen zwischen den Elementen innerhalb einer Komponente festzulegen. Das hilft AI, die innere Logik und den Raum zu verstehen.
• Vollständigkeit: Schließen Sie alle möglichen Zustände einer Komponente ein (hover, focus, disabled, loading, error, empty). Wenn ein Zustand nicht definiert ist, kann AI ihn erfinden, was zu einer Design-Abweichung führt.
• Vermeidung von Overrides: Erstellen Sie keine einzigartigen, einmaligen Overrides für Komponenten, da dies die eigentliche Komponente und ihre Varianten vor AI verbirgt.

Wie verbindet man Design-Komponenten mit Code?

Tools wie Figma’s Code Connect ermöglichen es, jede Design-Komponente mit ihrem Gegenstück im Code zu verknüpfen. Wenn ein AI-Agent ein Design über Figma MCP (Multi-Component Platform) liest, weiß er, welche Komponente aus der Codebasis verwendet werden soll, anstatt zu versuchen, sie von Grund auf neu zu schreiben.

• Automatisierung der Verknüpfung: Tools, die Design-Komponenten mit ihrer Code-Darstellung abgleichen, sind entscheidend. So kann AI vorhandene Komponenten “sehen” und nutzen.
• Aktualität sicherstellen: Die Verbindung zwischen Design und Code muss aktuell bleiben. Aktualisieren Sie die Komponenten-Mappings regelmäßig, wenn sich Komponenten ändern.
• Testen: Prüfen Sie die Verknüpfung, indem Sie dem AI-Agenten eine Aufgabe geben, einen Screen oder eine Funktion zu erstellen. So lassen sich Abweichungen erkennen.

Wie schreibt man Regeln für AI-Agenten?

Regeln sollten für AI zugänglich sein und dort gespeichert werden, wo sie leicht gelesen werden können. Das können Markdown-Dateien im Repository oder spezielle Abschnitte in der Dokumentation des Design-Systems sein.

• Speicherort:

  • Code-Repository (z. B. CLAUDE.md, AGENTS.md).
  • Figma (in speziellen Komponenten-Sets oder in der Dokumentation).
  • Dokumentationsseiten (Textseiten).

• Format:

  • Verwenden Sie kurze, konkrete Regeln.

  • Geben Sie Beispiele für „Do“ und „Do not“ in Textform an, nicht nur visuell.

  • Beispielregel:
    markdown

    UI-Regeln

    • Komponenten werden aus @/components/ui importiert. Erstellen Sie niemals Buttons, Eingabefelder oder Dialoge von Grund auf neu.
    • Farben, Abstände, Radien und Typografie verwenden Tokens aus src/styles/tokens.css.
    • Keine „rohen“ hex-, rgb- oder px-Werte in Komponenten.
    • Wenn das Design-System das Benötigte nicht enthält, halten Sie an und fragen Sie nach. Erstellen Sie keine Einzellösung.

Wie macht man ein bestehendes Design-System AI-ready?

Der Übergang zur AI-Bereitschaft erfordert eine Prüfung und Weiterentwicklung des bestehenden Systems.

1. Audit und Tokenisierung fest codierter Werte

• Identifikation: Prüfen Sie Design-Dateien und Code auf Farben, Größen und Abstände, die nicht an Design-Tokens gebunden sind. Das sind „fest codierte“ Werte.
• Tokenisierung: Ersetzen Sie diese Werte im Design und im Code durch benannte Tokens. Das ist die Grundlage für die konsistente Anwendung von Stilen durch AI.

2. Bereinigung und Ergänzung von Komponenten

• Zusammenführen von Duplikaten: Finden und konsolidieren Sie Komponenten, die Funktion oder Aussehen duplizieren.
• Zustände ergänzen: Stellen Sie sicher, dass alle Komponenten definierte Zustände haben (hover, focus, disabled, error).
• Varianten verwenden: Nutzen Sie statt separater Komponenten für verschiedene Größen oder Farben ein Variantensystem.

3. Design mit Code abgleichen

• Verknüpfung: Stellen Sie eine klare Verbindung zwischen jeder Design-Komponente und ihrem entsprechenden Code-Äquivalent her.
• Automatisierung: Verwenden Sie Tools, die dieses Mapping vereinfachen und aktuell halten.

4. Regeln in Text überführen

• Dokumentation: Wandeln Sie statt komplexer Diagramme oder langer Beschreibungen die wichtigsten Empfehlungen des Design-Systems in kurze, klare Textdateien um (z. B. im Markdown-Format).
• Zugänglichkeit: Speichern Sie diese Dateien an Orten, an denen AI-Agenten sie leicht finden können (Repository, Dokumentation).

5. Testen mit AI-Tools

• Praktische Prüfung: Verwenden Sie AI-Tools (z. B. Figma Make, Code-Agenten), um Screens oder Prototypen auf Basis Ihres vorbereiteten Design-Systems zu erstellen.
• Ergebnisanalyse: Prüfen Sie die Ergebnisse sorgfältig, um Abweichungen, Inkonsistenzen oder Fehler zu erkennen, die AI aufgrund unklarer Regeln oder Daten gemacht haben könnte.

Wie hilft AI, die „Absicht“ des Nutzers zu verstehen?

AI kann helfen, die Absichten des Nutzers zu verstehen, aber dafür braucht es eine korrekte Aufgabenstellung und Kontext. AI kann Absichten nicht so „fühlen“ oder „erraten“ wie ein Mensch.

1. Anforderungen durch Dialog präzisieren

• Fragen von AI: AI kann dem Nutzer klärende Fragen stellen, um ihm zu helfen, seine Bedürfnisse besser zu formulieren. Das ist besonders nützlich, wenn der Nutzer selbst noch nicht genau weiß, was er möchte.
• Iterative Verfeinerung: Statt eine vollständige und präzise Aufgabenstellung auf Anhieb zu erwarten, sollte der Prozess iterativ sein, damit der Nutzer seine Anforderungen schrittweise konkretisieren kann.

2. Varianten vergleichen

• Visuelle Auswahl: Wenn der Nutzer seine Wünsche nicht klar beschreiben kann, kann AI mehrere Design-Optionen vorschlagen. Durch den Vergleich erkennt der Nutzer seine Präferenzen besser.
• Feedback: Die Möglichkeit, verschiedene Lösungen zu vergleichen, hilft zu vermeiden, dass AI etwas generiert, das den Erwartungen stark widerspricht.

3. Feedback zu konkreten Elementen

• Selektives Feedback: Die Möglichkeit, auf einen bestimmten Bereich des Screens zu zeigen und Feedback zu geben (z. B. „ändere die Farbe dieser Schaltfläche“) sorgt dafür, dass AI und Nutzer „über dasselbe sprechen“.
• Kontextualität: Dadurch versteht AI, auf welches Element sich die Anweisungen genau beziehen.

4. Visueller Ausdruck von Absichten

• Skizzen: Nutzer können Skizzen oder einfache visuelle Prototypen zeichnen, um ihre Ideen zu vermitteln.
• Schnelle Iteration: Ein schneller Zyklus aus Generierung und Überprüfung der Ergebnisse (Streaming) ermöglicht es dem Nutzer, die Design-Richtung in Echtzeit anzupassen.

Welchen Kontext benötigt AI für Design?

AI benötigt unterschiedliche Informationen, um erfolgreich Designs zu generieren.

1. Wissensmanagement für AI

• Allgemeine Prinzipien: Design-Systeme, Barrierefreiheitsstandards, Markenrichtlinien. Das sind „Grundlagenwissen“, das AI immer verfügbar haben sollte.
• Projektspezifische Anforderungen: Konkrete Aufgaben, Einschränkungen und Zielgruppe des Projekts. Diese Daten werden bei Bedarf bereitgestellt.
• Aktueller Kontext: Aktive Dialoge, Änderungen auf dem Screen, letzte Anweisungen. Das ist temporäre Information, die für eine bestimmte Sitzung relevant ist.

Die Wirksamkeit von AI hängt nicht von der Datenmenge ab, sondern von der Fähigkeit, das richtige Wissen zum richtigen Zeitpunkt auszuwählen.

2. Reale Produkte als Referenzen nutzen

• Wert von Referenzen: Statt verbaler Beschreibungen ist das Zeigen ähnlicher Screens oder Komponenten aus einem realen Produkt ein deutlich effektiverer Weg, das gewünschte Ergebnis zu vermitteln.
• Automatisierte Erfassung: Systeme, die während des CI-Prozesses automatisch Screenshots von Interfaces sammeln, ermöglichen eine aktuelle Referenzbasis.
• Zusätzliche Informationen: Nicht nur Bilder, sondern auch Daten zu verwendeten Komponenten, Text, Tokens, DOM-Struktur und Barrierefreiheitsinformationen machen Referenzen für AI wertvoller.
• Suche nach Kriterien: AI sollte in der Lage sein, benötigte Screens anhand von Komponenten, Text oder anderen Attributen zu suchen.

3. Design-System als „Komprimierung von Entscheidungen“

• Entscheidungen treffen: Die Komponenten eines Design-Systems enthalten bereits die Ergebnisse zahlreicher Designentscheidungen (Größe, Farbe, Zustand, Abstand). AI kann diese „Erfahrung“ nutzen, anstatt diese Entscheidungen jedes Mal neu zu treffen.
• Erweiterung zu Patterns: Eine effektive Nutzung des Design-Systems durch AI erfordert den Übergang von Komponenten zu umfassenderen Patterns. Patterns umfassen:

  • Nutzungskontext: Wann und warum dieses Pattern verwendet werden sollte.
  • Struktur: Welche Komponenten, Zustände und welcher visuelle Stil verwendet werden.
  • Beispiele: Reale Screens und Abläufe, die das Pattern veranschaulichen.

So versteht AI nicht nur, „wie ein Button aussieht“, sondern auch „wie man ein Anmeldeformular zusammensetzt“ oder „wie man einen Ladezustand behandelt“.

Wie baut man Patterns für AI aus Design-System-Komponenten auf?

AI generiert oft zufällige Komponenten, wenn ihr keine klare Struktur für ein Pattern gegeben wird.

1. Struktur des Patterns definieren

• Spezifikation: Erstellen Sie ein Dokument, das die benötigten Komponenten und ihre Organisation beschreibt.

• Beispiel für eine Spezifikation:

  Pattern: Feedback-Formular

  Zu verwendende Komponenten:

  • Input (Ordner XY)
  • Checkbox (Ordner XY)
  • Button (Ordner XY)
  • Dropdown (Ordner XY)

  Funktionalität:

  • Datenerfassung: Name, E-Mail, Zustimmung.
  • Validierung des E-Mail-Formats.
  • Anzeigen von Fehlern in Echtzeit.
  • Senden der Daten an einen Endpoint.
  • Anzeigen eines Erfolgszustands.

  Einschränkungen:

  • Keine neuen Komponenten erstellen.
  • Vorhandene Komponenten nicht modifizieren.
  • Nur die im System definierten Abstände verwenden.

2. Alle Zustände des Patterns darstellen

• Vollständigkeit: AI sollte alle möglichen Zustände verstehen, in denen sich das Pattern befinden kann.

• Beispielzustände:

  • ✅ Leer: Formular bei der ersten Anzeige.
  • ✅ Eingabe: Der Nutzer gibt Daten ein.
  • ✅ Validierung: Das System prüft die Daten.
  • ✅ Fehler: Es gibt ungültige Daten.
  • ✅ Übermittlung: Die Daten werden gesendet.
  • ✅ Erfolg: Die Daten wurden erfolgreich gesendet.

Für jeden Zustand sollte beschrieben werden: visuelle Darstellung, Zustand der Buttons, Fokus und Fehlermeldungen.

3. Interaktionsflüsse definieren

• Szenario: Beschreiben Sie detailliert, was passiert, wenn der Nutzer mit dem Pattern interagiert.

• Beispielablauf:

  Beim Klick auf die Schaltfläche „Senden“:

  1. Alle Felder validieren.
  2. Wenn Fehler vorhanden sind:

     • Rote Rahmen um ungültige Felder anzeigen.
     • Fehlermeldungen unter den Feldern anzeigen.
     • Den Fokus auf das erste Feld mit Fehler setzen.
     • Die Schaltfläche „Senden“ bleibt aktiv.

  3. Wenn die Daten gültig sind:

     • Die Schaltfläche „Senden“ deaktivieren.
     • Einen Ladeindikator auf der Schaltfläche anzeigen.
     • Die Daten an den Endpoint senden.
     • Auf eine Antwort warten.

  4. Bei Erfolg:

     • Das Formular ausblenden.
     • Eine Erfolgsmeldung anzeigen.
     • Eine Schaltfläche „Erneut senden“ hinzufügen.

  5. Bei einem Serverfehler:

     • Eine Fehlermeldung oben auf der Seite anzeigen.
     • Die Schaltfläche „Senden“ für einen erneuten Versuch aktivieren.

4. Spezifikation des responsiven Verhaltens

• Geräteanpassung: Beschreiben Sie, wie das Pattern auf verschiedenen Geräten aussehen und funktionieren soll.

• Beispiel:

  Mobil (bis 640px):

  • Formular über volle Breite.
  • Alle Felder vertikal angeordnet.
  • Schaltfläche über volle Breite.
  • Minimale Tap-Target-Größe 48px.

  Desktop (über 640px):

  • Maximale Breite 480px.
  • Zentrierte Position.
  • Schaltfläche rechts ausgerichtet.
  • Standardabstände.

Gibt es eine „Designsprache“ für AI?

AI kann von einer stärker formalisierten Darstellung von Design profitieren als nur von visuellen Elementen.

1. Überflüssige Informationen vermeiden

• Problem: Die Übergabe des gesamten Canvas-Inhalts an AI führt dazu, dass unnötige Informationen verarbeitet werden, was die Last auf AI und die Verarbeitungszeit erhöht.
• Lösung: Es wird ein Weg benötigt, nur relevante Informationen zu übermitteln und die Datenmenge zu reduzieren.

2. Änderungen nachverfolgen

• Problem: Im Code werden Änderungen mit Versionskontrollsystemen nachverfolgt. Im Design reicht ein visueller Vergleich nicht aus, um genau zu bestimmen, welche Informationen sich geändert haben.
• Lösung: Die Entwicklung einer „Designsprache“, die Änderungen ähnlich einem „Diff“ im Code nachverfolgen kann, ist ein wichtiger Schritt. Dazu kann die Darstellung von Designänderungen in einem für AI verständlichen Format gehören, was Iteration und Zusammenarbeit erleichtert.

Die Vorbereitung eines Design-Systems für AI-Agenten ist der Prozess, Design von einer visuellen Kunstform in ein strukturiertes, maschinenlesbares System zu verwandeln, das Konsistenz, Effizienz und Zugänglichkeit im Design-Generierungsprozess sicherstellt.