Gewinne:
- Fähigkeit, mit künstlicher Intelligenz einheitliche Design-Tokens, Komponentenbenennungen und Nutzungsregeln zu entwerfen und zu erstellen
- Fähigkeit zur schnellen Erstellung von Komponentendokumentationen, Do/Don't-Beispielen und Anwendungstexten mit künstlicher Intelligenz
- Möglichkeit, Vorschläge der künstlichen Intelligenz auf Konflikte mit dem bestehenden Designsystem zu prüfen und die Einzigartigkeit zu bewahren
Ein Designsystem ist die gemeinsame Sprache, die dafür sorgt, dass eine Produktfamilie konsistent aussieht und sich verhält: wiederverwendbare Komponenten (Schaltfläche, Karte, Formularfeld), Design-Tokens (benannte Definitionen von Werten wie Farbe, Abstand, Typografie) und Dokumentation, die ihre Verwendung erklärt. Ein gutes Designsystem ermöglicht es zehn Designern, dasselbe Produkt zu entwerfen, als ob es von einer einzigen Quelle hergestellt worden wäre. Die Installation und Wartung dieses Systems ist eine ermüdende, sich wiederholende und textintensive Arbeit. Genau hier punktet die künstliche Intelligenz. Aber das Wesentliche des Systems ist Einzigartigkeit und Konsistenz; Die Empfehlungen von AI können nicht akzeptiert werden, ohne dass sie auf Konflikte mit dem aktuellen System überprüft werden.
Token und Benennung: die Grundlage für Konsistenz
Ein Design-Token ist ein benannter, wiederverwendbarer Wert einer Design-Entscheidung: Farbe-Primärfarbe, Raum-Mitte, Text-Titel-Großbuchstaben. Dank Token können Sie eine Farbe an einer Stelle ändern und sie im gesamten Produkt aktualisieren. Aber die Macht von Token hängt von der Konsistenz der Benennung ab; Wenn Blue-1, Main-Blue und PrimaryBlue gemischt verwendet werden, stürzt das System ab.
KI ist hier in zwei Dingen gut: Sie überprüft Ihren vorhandenen Token-Satz anhand eines konsistenten Benennungsschemas und schlägt schemakonforme Namen für neue Token vor. Eine Anfrage wie „Übersetzen Sie diese Tokenliste in semantische (bedeutungsbasierte) Benennung“ hilft Ihnen bei der Generierung von Namen, die eine Bedeutung vermitteln, z. B. „color-action-primary“ anstelle von „blue-500“. Aber die endgültige Namensentscheidung ist der Vertrag des Teams; Das Modell gibt nur einen Überblick.
Tipp: Geben Sie bei der Benennung von Tokens für AI 5-6 Beispiele Ihres aktuellen Schemas und sagen Sie „behalten Sie das gleiche Muster bei“. Die stichprobenlose Anfrage erzeugt Namen, die Ihrem System fremd sind.
Komponentendokumentation: der produktivste Bereich der KI
Die Dokumentation einer Komponente umfasst Folgendes: Was sie tut, wann sie verwendet werden soll und wann nicht, ihre Varianten, Zustände (Standard, Hover, Passiv, Fehler), Hinweise zur Barrierefreiheit und Beispiele für „Do/Don't“. Das Schreiben dieser Texte per Hand nimmt Stunden in Anspruch, weshalb viele Teams die Dokumentation vernachlässigen.
KI füllt diese Lücke: Wenn Sie eine Komponente beschreiben, erstellt sie Dokumentationsentwürfe, Nutzungsregeln und Do/Don't-Beispiele in einem einheitlichen Format. Somit geht die Dokumentation von „es gibt keinen“ zu „es gibt einen Entwurf, er wird behoben“ über, was ein großer Gewinn ist. Allerdings kennt das Modell nicht das tatsächliche Verhalten der Komponente; Es ist Ihre Aufgabe, die von ihm erstellten Regeln mit der Realität des Systems in Einklang zu bringen.
Dokumentfragment
Beitrag künstlicher Intelligenz
menschliche Verifizierung
Was macht es?
Klare Umrissdefinition
Wahre Zweckmäßigkeit
Wann zu verwenden
Allgemeine Szenarien
Produktspezifische Regeln
Do/Don't-Beispiele
Schnelle Draft-Paare
Tatsächliche Missbräuche
Hinweis zur Barrierefreiheit
Standarderinnerungen
Durch echten Test bestätigt
Varianten-/Fallliste
mögliche Liste
Diejenigen, die tatsächlich im System existieren
Widerspruchsprüfung: Singularität bewahren
Der Erzfeind des Designsystems ist die Duplizierung: zwei Knöpfe, die die gleiche Aufgabe erfüllen, zwei unterschiedliche Raumskalen, zwei widersprüchliche Regeln. Wenn KI eine neue Komponente oder Regel vorschlägt, kann es sein, dass dieser Vorschlag mit dem bestehenden System in Konflikt steht – es berücksichtigt nicht Ihr gesamtes Modellsystem. Deshalb bewerte ich jeden Vorschlag, indem ich frage: „Steht dies im Widerspruch zu etwas, das bereits existiert?“ Filtern Sie mit der Frage. Auch beim Konflikt-Scanning können Sie künstliche Intelligenz nutzen: Sie können die aktuelle Systemzusammenfassung und die neue Empfehlung abgeben und sich die Konflikte auflisten lassen. Aber die endgültige „einzig richtige“ Entscheidung liegt beim Team.
drei Mini-Koffer
Fall 1 – Dokumentationsschuld beglichen. Nur 6 der 24 Komponenten eines Teams verfügten über eine Dokumentation. Für die restlichen 18 Komponenten wurden mit künstlicher Intelligenz Entwurfsdokumente erstellt; Das Team hat jedes Problem innerhalb von 10–15 Minuten behoben. Der um Wochen verschobene Auftrag wurde in zwei Tagen abgeschlossen.
Fall 2 – Die Token-Benennung wurde konsistent. In einem System wurden die Farben wie Blau1, Hauptblau und Markenblau gemischt. KI übersetzte vorhandene 40 Token in ein semantisches Schema; Das Team überarbeitete es und stellte auf einen einzigen Standard um. Farbfehler wurden in späteren Designs deutlich reduziert.
Fall 3 – Widersprüchliche Komponente wurde abgelehnt. AI hat eine neue Komponente namens „Sekundäre Aktionsschaltfläche“ vorgeschlagen. Als das Team nach Widersprüchen suchte, stellte es fest, dass es die gleiche Funktion wie der vorhandene „Geisterknopf“ erfüllte, und lehnte den Vorschlag ab. Lektion: Nicht jeder Vorschlag fügt dem System eine neue Komponente hinzu; Manchmal ist es richtig, das Vorhandene zu nutzen.
Kopierbare Eingabeaufforderungen
Ihre Rolle: Design-Systemadministrator. Dokumentieren Sie diese Komponente: <<Komponente und ihr Verhalten>>. Format: Was macht sie? | Wann sollte | verwendet werden? Wann |Varianten | NICHT verwendet werden sollten Situationen | Hinweise zur Barrierefreiheit | 2 Tue / 2 Tue kein Beispiel. Erfinden Sie ein Verhalten, das Sie nicht kennen; Schreiben Sie „Team muss ausfüllen“.
Übersetzen Sie diese Liste von Token in ein semantisches (bedeutungsbasiertes) Benennungsschema. Meine aktuellen Schemabeispiele: <<5-6 Beispiele>>. Fahren Sie im gleichen Muster fort. Geben Sie für jedes Token den alten Namen -> neuen Namen -> Begründungstabelle ein. Liste: <<Tokens>>
Nach Widersprüchen suchen: Zusammenfassung meines aktuellen Designsystems: <<summary>>. Neue vorgeschlagene Komponente/Regel: <<Vorschlag>>. Steht dieser Vorschlag im Widerspruch zum bestehenden System (Komponente, die die gleiche Aufgabe erfüllt, widersprüchliche Regel, doppeltes Token)? Listen Sie die Konflikte und Ihren Vorschlag auf.
Generieren Sie „Do/Don’t“-Beispielpaare für diese Komponente: realistische korrekte Verwendung und realistische falsche Verwendungsszenarien. Erklären Sie für jedes Paar in einem Satz, warum es wahr/falsch ist. Komponente: <<Name und Zweck>>
Schwache Eingabeaufforderung / Starke Eingabeaufforderung
Schwach: „Dokumentation für diese Schaltfläche schreiben.“
Ergebnis: Ein allgemeiner, formatierter Text ohne Verbindung zum System.
Stark: „Dokumentieren Sie diese Schaltfläche im folgenden Format (was sie bewirkt/wann nicht zu verwenden ist/Varianten/Fälle/Zugänglichkeit/nicht tun); überdenken Sie Verhalten, das Sie nicht kennen, und schreiben Sie „Team muss ausfüllen“.“
Ergebnis: Konsistent formatiertes, richtig platziertes und bearbeitbares Manuskript.
Unterschied: starkes Eingabeaufforderungsformat + Fabrikationsverbot + „Do/Don't“-Eingabeaufforderungen.
Häufige Fehler
- Anforderung einer Token-Benennung ohne Beispiel. Das Modell generiert Namen, die Ihrem System fremd sind; die Konsistenz ist gebrochen.
- Komponenten hinzufügen, ohne nach Widersprüchen zu suchen. Duplikation ist der Erzfeind des Systems.
- Vorausgesetzt, dass das vom Modell erfundene Verhalten korrekt ist. KI kennt das tatsächliche Verhalten der Komponente nicht.
- Akzeptieren der Barrierefreiheitsbewertung ohne Prüfung. Eine Standarderinnerung ist kein Ersatz für tatsächliche Tests.
- Die Dokumentation einmal schreiben und nicht aktualisieren. Das Dokument sollte aktualisiert werden, wenn sich das System ändert.
Zusammenfassend
Das Designsystem ist die Infrastruktur für Konsistenz und Skalierbarkeit; Ihre Pflege wird jedoch oft vernachlässigt, da sie textintensiv und repetitiv ist. AI begegnet diesem Problem durch die schnelle Erstellung von Komponentendokumentationen, Do/Don't-Beispielen, Nutzungsskripten und Token-Benennungsentwürfen. Aber das Wesentliche des Systems ist Singularität und Konsistenz: Jeder Token-Name muss anhand des Beispielschemas überprüft werden, jeder Komponentenvorschlag muss widersprüchlich gescannt werden, jede Verhaltensbeschreibung muss anhand der Realität überprüft werden. Nutzen Sie das Modell als effizienten Zeichner; Das Team trifft die individuell richtige Entscheidung.
Anwendungsaufgabe
- Wählen Sie eine Komponente mit fehlender Dokumentation aus und erstellen Sie bei der ersten Eingabeaufforderung ein Entwurfsdokument.
- Füllen Sie die mit „Team muss ausfüllen“ gekennzeichneten Felder mit tatsächlichem Verhalten aus.
- Konvertieren Sie mit der zweiten Eingabeaufforderung Ihre 8–10 Token in das semantische Schema und erstellen Sie eine alte/neue Namenstabelle.
- Suchen Sie bei einer neuen Komponentenidee mit der dritten Eingabeaufforderung nach Widersprüchen.
- Generieren Sie mit der vierten Eingabeaufforderung Do/Don't-Beispielpaare für eine Komponente und fügen Sie sie dem System hinzu.
Checkliste
- [ ] Ich habe die Token-Benennung mit dem Beispielschema verknüpft.
- [ ] Ich habe die neuen Komponenten auf Konflikte überprüft.
- [ ] Ich habe die modellierten Verhaltensweisen anhand der Realität überprüft.
- [ ] Ich hatte vor, die Hinweise zur Barrierefreiheit durch tatsächliche Tests zu bestätigen.
- [ ] Ich habe die Dokumentation in einem einheitlichen Format gehalten.
- [ ] Ich habe die Singularität bewahrt und Duplikate verhindert.