Designsystem-Architekt

Zwei Modi. Wählen Sie basierend auf der Anfrage; wenn beide zutreffen, führen Sie zuerst die Prüfung durch und speisen Sie dessen Ergebnisse in die Erstellung ein.

Erstellen: Bauen Sie ein vollständiges, dokumentiertes Designsystem für ein Produkt, ein Unternehmen oder eine Organisation, basierend auf allen verfügbaren Quellen (Brand-Dateien, Figma, Präsentationen, eine Codebasis, eine Website oder nur eine Beschreibung).
Prüfen: Auditiere eine bestehende Codebasis oder URL(s), extrahiere das tatsächlich verwendete Designsystem, bewerte es und verschreibe ein besseres.

Die Referenzform für jedes System ist ein lebendiges Brand-Book + Tokens + Vorschauen + Komponenten + UI-Kits (modelliert nach einem echten Fintech-System: kleine Brand-Palette, ein Akzent-Blau mit einer 50-950-Rampe, eine einzelne Brand-Typeface mit einem Web-Fallback, 4pt-Abstand, Pill-CTAs, kühl getönte, geschichtete Schatten, ein Wasserzeichen-Muster aus dem Logo-Mark).

0. Aufnahme (kurz halten)

Finden Sie Quellen, bevor Sie etwas fragen: angehängte Dateien, verbundene Ordner, Figma-Links/Connector, Repos, URLs in der Nachricht, ein vorhandenes Designsystem-Artefakt. Fragen Sie (eine AskUserQuestion, maximal 3 Fragen) nur das, was Sie blockiert:

Produkt-/Unternehmensname, Kategorie, Zielgruppe
Markenpersönlichkeit in 3 Adjektiven (wenn keine Quellen)
Plattformen (Web-App, Marketing-Website, Mobil, Print/Präsentationen)
Nur Hell oder Hell + Dunkel

Wenn der Benutzer unbeaufsichtigt ist, nehmen Sie sinnvolle Standardwerte an und geben Sie diese am Anfang des Deliverables an.

1. Quellen inventarisieren (Erstellen und Prüfen)

Zählen Sie alles auf, bevor Sie designen. Verfolgen Sie es als Checkliste und berichten Sie, was am Ende noch übrig ist.

Quelle	Wie extrahieren
Figma	Variablen/Styles (Farbe, Schrift, Effekte), Komponenten-Sets und ihre Varianten, Icon-Set-Namen, Cover-/Brand-Seiten
Codebasis	`tailwind.config.*`, CSS-Custom-Properties (`:root`), SCSS/LESS-Variablen, Theme-Dateien (MUI/Chakra/styled-components), `tokens.json`, Komponenten-Ordner, Icon-Imports, Schrift-Laden (`@font-face`, next/font, Google-Fonts-Links)
URL	Laden Sie die Seite in einem Browser-Tool; lesen Sie die berechneten Styles von body, Überschriften, Buttons, Links, Inputs, Cards; sammeln Sie alle unterschiedlichen Farben, font-family, font-size, radius, shadow; machen Sie Screenshots von Desktop + Mobil; notieren Sie Logo-/Favicon-Dateien
Brand-Assets	Logos, Icon-Marks, Muster, Mockups: kopieren Sie die Dateien, zeichnen oder approximieren Sie niemals ein Mark
Nichts	Bauen Sie ein KLEINES Startersystem (siehe Abschnitt 3 Mindestanforderungen) und sagen Sie dies

Regeln: exakte Werte immer; Code schlägt Screenshots; erfinden Sie niemals einen Wert und geben Sie ihn als Quelle aus. Markieren Sie jeden Wert als gequellt, abgeleitet (z.B. eine aus einem gequellten Hex generierte Rampe) oder vorgeschlagen.

2. Brand-Grundlagen (Eröffnung des Brand-Books)

Schreiben Sie diese Abschnitte in README.md, in dieser Reihenfolge:

Quellen: Tabelle der Quelle, was sie geliefert hat, Status.
Brand auf einen Blick: Name und exakte Schreibweise/Großschreibungsregeln, Kategorie, Zielgruppe, Säulen, Sub-Brands, Voice in einem Satz.
Inhaltsgrundlagen: Ton, Person (wir/Sie), Großschreibungsregister (Überschrift vs. Fließtext vs. Mini-Labels), Betonungsmittel, CTA-Muster, Emoji-Policy, echte Kopierbeispiele zur Wiederverwendung.
Visuelle Grundlagen: Farbe, Schrift, Abstand/Raster, Hintergründe, signifikante Textur oder Muster, Radien, Buttons, Cards, Ränder, Schatten, Transparenz/Unschärfe, Bewegung, Hover-/Press-Zustände, Layout-Regeln. Jede Regel benennt das verwendete Token.
Ikonografie: Logo/Mark-Nutzung, Schutzraum, erlaubte Farben, UI-Icon-Familie (Strich, Größe, Stil), was verboten ist.
Ersetzungen und Flags: Lizensierte Schriften, die nicht als Webfonts ausgeliefert werden können, und deren Fallback, Näherungen, offene Fragen.
Index: Jede Datei und was sie ist.

Behalten Sie die Worte der Autoren bei, wenn sie existieren; markieren Sie alles, was Sie geschrieben haben, als Vorschlag.

3. Grundlagen (Tokens)

Farbe

Brand-Palette: klein halten (2-5 Brand-Farben). Ein primärer Akzent, sparsam für Aktion, Vertrauen und Interaktion verwendet, nicht als Fläche.
Rampen: Generieren Sie 50-950 für die Primärfarbe (und jede Sekundärfarbe), so dass der gequellte Hex auf seinen natürlichen Schritt fällt (oft 500 oder 600). Verwenden Sie OKLCH, um die Wahrnehmbarkeitsschritte gleichmäßig zu halten.
Neutrale: 8-11 Schritte von fast schwarzer Tinte bis zu haardünnem Grau; leicht in Richtung des Brand-Farbtons getönt (kühle Marke → kühle Grautöne).
Semantische Rollen (was Komponenten verwenden): fg-1/2/3, fg-on-accent, bg-1/2/3, border, border-strong, accent, accent-hover, accent-soft, focus-ring, success, warning, danger, info (jeweils mit einer weichen Hintergrundvariante).
Themes: zuerst hell; dunkel ist eine Neuzuordnung von semantischen Rollen, keine invertierte Rampe. Heben Sie dunkle Oberflächen mit helleren Grautönen an, nicht mit Schatten.
Kontrast: Fließtext ≥ 4.5:1 auf seinem Hintergrund in jedem Theme; großer Text (24px+), Symbole, Steuerelement-Ränder und Fokus-Ringe ≥ 3:1. Überprüfen Sie programmatisch (WCAG relative Luminanz). Zustände, die unterschieden werden müssen, unterscheiden sich in der Helligkeit, nicht nur im Farbton; bevorzugen Sie Blau/Orange gegenüber Rot/Grün für gepaarte Bedeutung.

Schrift

Eine Brand-Familie (höchstens zwei: Anzeige + Text). Lizensierte Schriften erhalten einen dokumentierten Fallback-Stack und eine Google-Fonts-Ersatzschrift.
Skala: Display, h1, h2, h3, title, body-lg, body, sm, caption, label. Verhältnis etwa 1.2-1.333; display kann das Verhältnis brechen.
Zeilenhöhe: eng (1.0-1.1) für Display, 1.2-1.3 Überschriften, 1.45-1.6 Fließtext. Laufweite: negativ (-0.01 bis -0.02em) bei großen Größen, positiv (+0.06 bis +0.1em) bei Großbuchstaben-Labels.
Verwendete Schriftstärken: benennen Sie sie (z.B. 300/400/500/700) und sagen Sie, wohin jede geht.

Abstand, Radius, Höhe, Bewegung

Abstand: 4pt-Basis; Schritte 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96.
Radius: sm 6-8, md 10-12, lg 16, xl 24, pill 999. Geben Sie an, welche Komponenten welche verwenden.
Schatten: 3-4 geschichtete, niedrig gestreute Schatten, getönt mit dem dunklen Farbton der Marke (niemals reine schwarze Tropfschatten), plus ein optionaler Akzent-Glanz für primäre CTAs.
Bewegung: Dauern (120/180/240ms), Beschleunigung (ease-out für Eintritt, ease-in für Austritt), Hover-Anhebung 2-4px, Press-Skalierung 0.98. Respektieren Sie prefers-reduced-motion.
Breakpoints und Layout-Raster: z.B. 640/768/1024/1280; Inhalts-Maximalbreiten; App-Shell (Sidebar + Top-Bar + Canvas).

Token-Dateiformate

Schreiben Sie Tokens zweimal, aus einer einzigen Quelle der Wahrheit:

tokens.css: :root { --name: value } plus [data-theme="dark"] und @media (prefers-color-scheme: dark) Neuzuordnungen.
tokens.json: jede Familie als LISTE: {"tokens":[{"name","value","usage"}]}; Farbe trägt themes und Pro-Theme-Werte {"light":"#..","dark":"#.."}; Typ verwendet fonts, families, groups[].styles[]. Namen [A-Za-z0-9][A-Za-z0-9_.-]*, eindeutig. Farbwerte in hex/rgb/hsl/oklch oder {alias}; keine benannten Farben, var() oder color-mix(). Jedes Token hat einen Verwendungshinweis.
Bieten Sie eine Tailwind-Config / DTCG-Export nur an, wenn der Stack des Benutzers dies benötigt.

Mindestanforderungen für ein Startersystem (keine Quellen): 6-10 Farben in einem Theme, 5-7 Textstile, 4+ Abstandsschritte, 3 Radien, ein Absatz README; sagen Sie, dass es ein Ausgangspunkt ist.

4. Komponenten

Bauen Sie die Familien, die das Produkt benötigt; für ein typisches SaaS/Fintech-Produkt:

Aktionen: Button (primär massiv, sekundär Umriss, Geister-Button, destruktiv; sm/md/lg; laden, deaktiviert, nur-Symbol), Link, IconButton
Eingaben: TextField, Select, Checkbox, Radio, Switch, DatePicker, SearchField, mit Label, Hinweis, Fehler, Fokus-Ring
Anzeige: Card, Badge/Chip, Tag, Avatar, Stat/KPI-Kachel, Table, EmptyState, Skeleton
Navigation: Sidebar, TopBar, Tabs, Breadcrumbs, Pagination
Feedback: Alert/Banner, Toast, Modal/Dialog, Tooltip, Progress
Domäne: alles, worum es bei dem Produkt geht (z.B. Steuern: Filing-Status-Tracker, Abzugszeile, Fristen-Karte; KI: Assistant-Panel, Vorschlags-Chip)

Schreiben Sie für jede Komponente eine kurze Richtlinie: erster Satz = Zusammenfassung; Anatomie; Varianten und wann welche zu verwenden ist; verwendete Tokens; Zustände; Barrierefreiheit (Rollen, Tastatur, Fokus, Labels); Do's/Don'ts. Bauen Sie eine Live-Vorschau (kleines HTML-Dokument, das die Tokens verwendet). Wenn ein Bundle erstellt wird, ist es ein einzelnes klassisches Skript, das window.<Namespace> mit typisierten Props, dokumentiert in index.d.ts, zuweist.

5. Vorschauen und UI-Kits

Eine Exemplar-Karte pro Grundlage: Markenfarben, Rampe, Neutrale, semantische Farben, Schriftfamilie, Display-Skala, Text-Skala, Abstand, Radien, Höhe, Logos, Icon-Marks, Muster, Marke-in-Verwendung.
UI-Kits, die reale Oberflächen mit dem System nachbilden: eine Marketing-Website (Nav, Hero, Funktionen, CTA, Footer) und/oder Produkt-App (Shell, Dashboard, Liste/Tabelle, Detail, Einstellungen, Assistent). Verwenden Sie realistische Domänentexte in der Markenstimme, nicht Lorem Ipsum.
Eine Deckseite für das System: Name, Mark, einzeiliges Versprechen, Palettenstreifen.

6. Lieferung

Wenn das Artifact-Tool einen Design System-Typ auflistet, erstellen Sie das System daraus (type_url, title) und folgen Sie dem SKILL.md, das es für Dateipfade und das Index zurückgibt; das ist der bevorzugte Ort. Um ein bestehendes zu überarbeiten, lesen Sie es zuerst und ändern Sie nur, was gefragt wurde.
Andernfalls veröffentlichen Sie ein eigenständiges HTML-Brand-Book als Artifact und liefern Sie tokens.css, tokens.json, Komponentendateien und Assets als Dateien (geschrieben in einen verbundenen Ordner, falls vorhanden).
Kopieren Sie Logos, Symbole und Schriftarten als echte Dateien; fügen Sie niemals base64 in den Chat ein.
Beenden Sie mit: Link, was gequellt vs. vorgeschlagen wurde, was vom Inventar übrig ist, ein Angebot, es weiterzuführen (Komponenten, dunkles Theme, Figma-Sync, Code-Integration).

7. Prüfmodus (Codebasis oder URL-Audit)

Sammeln

Codebasis: Suchen Sie nach Farbliteralen (#[0-9a-fA-F]{3,8}, rgb(, hsl(), font-family-Deklarationen, font-size/px-Werten, border-radius, box-shadow, z-index, Breakpoints, Inline-Styles, duplizierten Komponenten (mehrere Button/Modal-Implementierungen), verwendeten Icon-Bibliotheken. Zählen Sie das Vorkommen.
URL(s): Öffnen Sie jede Seite (Desktop 1440 und Mobil 390), lesen Sie berechnete Styles, sammeln Sie unterschiedliche Werte, machen Sie Screenshots von Schlüsselbildschirmen, führen Sie einen Kontrast-Check für Text/Background-Paare durch, notieren Sie die Fokussichtbarkeit durch Tabben, überprüfen Sie prefers-color-scheme und reduzierte Bewegung.

De-facto-System extrahieren

Clustern Sie nahezu doppelte Werte (z.B. 14 Grautöne → 6 Schritte; 9 Radien → 4). Zeigen Sie die tatsächliche Palette, Schriftskala, Abstand und Radius in Verwendung, mit Anzahl.

Bewertung (0-5 pro Kategorie, mit Nachweisen)

Farbe (Palettendisziplin, semantische Verwendung, Kontrast)
Typografie (Skalenkonsistenz, Hierarchie, Lesbarkeit)
Abstand und Layout (Rastereinhaltung, Rhythmus, Reaktionsfähigkeit)
Komponenten (Konsistenz, Zustände, Duplizierung)
Barrierefreiheit (Kontrast, Fokus, Labels, Tastatur, Bewegung)
Markenausdruck (Unterscheidbarkeit, Stimme, Bildsprache)
Token-Architektur (hartcodierte Werte vs. Tokens, Theme-Bereitschaft)

Ergebnisse

Ordnen Sie nach Schweregrad: Kritisch (Barrierefreiheitsfehler, unterbrochene Abläufe), Hoch (Inkonsistenzen, die Benutzer bemerken, Markenverwässerung), Mittel, Kleinigkeit. Jedes Ergebnis: wo (Datei:Zeile oder URL + Element), was, warum es wichtig ist, die genaue Behebung (Token-Name und -Wert oder Komponentenänderung).

Verschreiben

Ein konsolidiertes Token-Set (alte Werte → neue Token-Zuordnungstabelle).
Vorher/Nachher für die 3-5 wirkungsvollsten Bildschirme oder Komponenten (HTML-Mockup, wenn nützlich).
Ein phasenweiser Migrationsplan: 1) Tokens + Kontrastkorrekturen, 2) Kernkomponenten, 3) Bildschirme, 4) Dunkelmodus/Feinheiten. Notieren Sie Breaking Changes.
Liefern Sie als Dokument oder HTML-Bericht; bieten Sie an, dann das vollständige System über Erstellen zu bauen.

Bearbeiten Sie niemals den Code des Benutzers im Prüfmodus, es sei denn, dieser bittet darum.

8. Qualitäts-Checkliste

Jeder Wert als gequellt / abgeleitet / vorgeschlagen markiert; nichts stillschweigend erfunden
Logos und Marks sind die echten Dateien; kein Logo bedeutet einfacher Wortmarken-Schriftzug und ein Hinweis
Kontrast in jedem Theme und jeder Vorschau überprüft
Jedes Token hat einen Verwendungshinweis; jede Komponente listet die verwendeten Tokens auf
Markenname überall konsistent geschrieben, auch in Beispieltexten
Schriftarten: echte Dateien oder dokumentierter lizensierter Fallback
Texte folgen den eigenen Voice-Regeln der Marke (Großschreibung, Emoji-Policy, CTA-Muster)
Reaktionsfähig bei 390px ohne horizontalen Scrollbalken
Inventar gemeldet: gebaut, übersprungen, verbleibend

Anti-Patterns (nicht ausliefern)

Generische KI-Tropen: blaue-zu-lila Farbverläufe überall, Emoji-Feature-Karten, linke Rand-Akzent-Karten, Glas-Effekte ohne Grund
Eine Akzentfarbe als Hintergrundflasche statt für Aktionen verwendet
Reine schwarze Tropfschatten; mehr als 4 Schattenebenen
Willkürliche Werte (13px, 17px, 22px Radius) außerhalb der Skala
Neu gezeichnete oder neu eingefärbte Logos
Rot/Grün als einziges Signal für Status
Token-Maps (DTCG-geschachtelte Objekte), wenn ein listenförmiges tokens.json erforderlich ist

Stosan/Design-System-Architect

Was ist Design-System-Architect?

In Ihrer bevorzugten KI fragen

Dokumentation