hamzacakmakk/design-system-generator

Was macht design-system-generator?

Baue das kleinste System, das das Produkt konsistent macht. Ein Designsystem ist eine Sammlung von Entscheidungen, nicht eine große Menge an Werten: Wenige, gut benannte Tokens schlagen umfangreiche Skalen, die niemand nutzt.

Wenn das Skill frontend-design installiert ist, enthält frontend-design/references/tokens.md einen vollständigen, kontrastgeprüften Startersatz. Beginne damit und passe ihn an.

1. Eingaben

• Lies, was bereits existiert: aktuelles CSS, Tailwind-Konfiguration, Theme-Dateien, Komponentenbibliothek, Marken-Assets. Erfasse die tatsächlich verwendeten Werte (Farben, Schriftgrößen, Abstände, Radien) und wie oft sie vorkommen.
• Kläre (oder leite ab und lege fest) den Ton des Produkts, die Plattformen (Web, iOS, Android), die Dichte und ob Dark Mode und High-Contrast-Modus erforderlich sind.

2. Architektur: drei Schichten

1. Primitive Tokens: Rohwerte mit neutralen Namen. --gray-50 ... --gray-950, --blue-600, --space-4, --radius-md. Niemals direkt in Komponenten verwenden.
2. Semantische Tokens: zweckbasierte Aliase. --bg, --surface, --surface-sunken, --border, --border-strong, --text, --text-muted, --text-subtle, --accent, --accent-fg, --accent-subtle, --focus-ring, --success, --warning, --danger, --info (+ -subtle-Varianten). Themes tauschen diese aus.
3. Komponenten-Tokens (nur bei Bedarf): --button-height-md, --input-border, --card-padding. Füge sie hinzu, wenn eine Komponente unabhängig thematisiert werden muss.

Namensgebung: kategorie-rolle-variante-zustand (--text-muted, --accent-hover). Keine Farbnamen in semantischen Tokens (--accent, nicht --blue).

3. Entscheidungen, die zu treffen sind

• Abstände: 4px-Basis. Skala 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128. (Fluent 2 und Material bauen beide auf 4px auf; die Standard-Skala von Tailwind basiert auf 4px.)
• Schrift: eine oder zwei Familien; eine modulare Skala (1.2 dicht, 1.25 Produkt, 1.333+ editorial); Rollen statt Größen (Display, Titel, Überschrift, Fließtext, Label, Beschriftung, Code); Zeilenhöhen pro Rolle; fließendes clamp() nur für Display-Größen.
• Farbe: neutrale Rampe mit 10–12 Stufen (leicht warm oder kühl, bewusst gewählt), eine Akzent- Rampe, vier semantische Farbtöne. Generiere Rampen in OKLCH für gleichmäßige Wahrnehmungsschritte.
• Ecken: eine Familie (scharf, weich oder rund) mit 3–4 Stufen plus full.
• Höhen: maximal 3 Stufen (angehoben, schwebend, overlay), zweischichtige neutrale Schatten; im Dark Mode hellere Oberflächen statt schwerere Schatten bevorzugen.
• Bewegung: 3 Dauern (schnell ~140ms, Basis ~220ms, langsam ~320ms), 3 Übergänge (out, in, in-out) und eine Regel für reduzierte Bewegung.
• Ebenen: eine kleine Z-Index-Skala (sticky, dropdown, overlay, dialog, toast, tooltip).
• Breakpoints: inhaltsgetrieben; ein üblicher Satz ist 640, 768, 1024, 1280, 1536.

4. Themes und Kontraste

• Definiere hell und dunkel gemeinsam. Dark Mode: fast schwarzer Hintergrund (nicht #000), fast weißer Text (nicht #fff), hellere Oberflächen für Höhen, Akzent aufgehellt und leicht entsättigt.
• Füge eine prefers-contrast: more-Variante hinzu, die Rahmen und gedämpften Text verstärkt.
• Überprüfe jede Text-/Hintergrund-Paarung mit der WCAG-2-Formel und veröffentliche die Kontrastverhältnisse: Text 4.5:1, großer Text und bedeutungsvolle UI (Eingaberänder, Symbole, Fokusringe) 3:1. Gib die Zahlen in der Dokumentation an; behaupte nicht "AA-konform", ohne es berechnet zu haben.

5. Ausgaben

Erzeuge, im Stack des Projekts:

1. tokens.css (CSS-Custom-Properties, hell + dunkel + hoher Kontrast), und/oder das Tailwind- Theme-Mapping (@theme in v4, theme.extend in v3), und/oder tokens.json im W3C-Format Design Tokens Community Group, falls eine Pipeline (Style Dictionary) verwendet wird.
2. Eine kurze DESIGN.md mit: Prinzipien (3–5 Zeilen), den Token-Tabellen mit Kontrastverhältnissen, Schriftrollen, Abstandsnutzungsregeln und Do's/Don'ts für die Kernkomponenten (Button, Input, Card, Dialog, Tabelle, Toast).
3. Optional eine einzelne styleguide.html / Story-Seite, die jeden Token und Komponentenzustand in beiden Themes darstellt, damit das System visuell überprüft werden kann.

6. Migration (bestehende Produkte)

• Ordne vorhandene Werte dem nächstgelegenen Token zu; liste Werte auf, die verschwinden, und warum.
• Ersetze in der Reihenfolge: zuerst Farben, dann Abstände, dann Schrift, dann Radien und Schatten.
• Behalte eine temporäre Alias-Schicht für alte Namen bei, wenn die Codebasis groß ist.

Checkliste

• Primitive, semantische und (nur bei Bedarf) Komponenten-Ebenen sind getrennt.
• Komponenten referenzieren ausschließlich semantische Tokens.
• Helle, dunkle und kontrastreiche Themes existieren, und jede Paarung hat ein berechnetes Verhältnis.
• Abstände basieren auf 4px; eine Ecken-Familie; maximal drei Höhenstufen.
• Schriftrollen decken Display bis Beschriftung ab; maximal zwei Familien, drei Schnitte.
• Bewegungs-Tokens enthalten eine Regel für reduzierte Bewegung.
• Die Dokumentation erklärt, wann jeder Token zu verwenden ist, nicht nur seinen Wert.