Design System — Visuelle Systeme generieren & auditieren
Wann verwenden
- Wenn ein neues Projekt ein Designsystem benötigt
- Bei der Überprüfung einer bestehenden Codebasis auf visuelle Konsistenz
- Vor einem Redesign — verstehen, was vorhanden ist
- Wenn die UI „irgendwie falsch aussieht“, aber die Ursache unklar ist
- Beim Reviewen von Pull Requests, die Styling-Änderungen enthalten
Funktionsweise
Modus 1: Designsystem generieren
Analysiert Ihre Codebasis und generiert ein kohärentes Designsystem:
1. Scannt CSS/Tailwind/styled-components nach vorhandenen Mustern
2. Extrahiert: Farben, Typografie, Abstände, Border-Radius, Schatten, Breakpoints
3. Recherchiert 3 Wettbewerber-Seiten als Inspiration (via Browser MCP)
4. Schlägt ein Design-Token-Set vor (JSON + CSS Custom Properties)
5. Generiert DESIGN.md mit Begründung für jede Entscheidung
6. Erstellt eine interaktive HTML-Vorschauseite (eigenständig, keine Abhängigkeiten)
Ausgabe: DESIGN.md + design-tokens.json + design-preview.html
Modus 2: Visuelles Audit
Bewertet Ihre UI in 10 Dimensionen (jeweils 0-10 Punkte):
1. Farbkonsistenz — Verwenden Sie Ihre Palette oder zufällige Hex-Werte?
2. Typografiestruktur — Klare h1 > h2 > h3 > body > caption?
3. Abstandsrhythmus — Konsistente Skala (4px/8px/16px) oder willkürlich?
4. Komponentenkonsistenz — Sehen ähnliche Elemente ähnlich aus?
5. Responsives Verhalten — Fließend oder an Breakpoints kaputt?
6. Dark Mode — Vollständig oder halb umgesetzt?
7. Animation — Zweckmäßig oder übertrieben?
8. Barrierefreiheit — Kontrastverhältnisse, Fokus-Zustände, Touch-Targets
9. Informationsdichte — Überladen oder klar?
10. Feinschliff — Hover-Zustände, Übergänge, Ladezustände, Leerzustände
Jede Dimension erhält eine Punktzahl, konkrete Beispiele und einen Fix mit exakter Datei:Zeile.
Modus 3: KI-„Slop“-Erkennung
Identifiziert generische KI-generierte Designmuster:
- Übertriebene Verläufe auf allem
- Standard-Lila-zu-Blau-Farbverläufe
- „Glasmorphismus“-Karten ohne Zweck
- Abgerundete Ecken an Elementen, die nicht rund sein sollten
- Übermäßige Animationen beim Scrollen
- Generische Helden mit zentriertem Text über Standardverlauf
- Serifenlose Schriftarten-Stacks ohne Persönlichkeit
Beispiele
Für eine SaaS-App generieren:
/design-system generate --style minimal --palette earth-tones
Bestehende UI auditieren:
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
Auf KI-„Slop“ prüfen:
/design-system slop-check