Design System — Visuelle Systeme generieren & prüfen
Wann verwenden
- Sie starten ein neues Projekt, das ein Designsystem benötigt
- Sie prüfen eine bestehende Codebasis auf visuelle Konsistenz
- Vor einem Redesign — verstehen, was Sie haben
- Wenn die UI „komisch“ aussieht, Sie aber nicht genau sagen können, warum
- Sie bewerten PRs, die das Styling betreffen
Funktionsweise
Modus 1: Designsystem generieren
Analysiert Ihre Codebasis und generiert ein stimmiges Designsystem:
1. Durchsuchen von CSS/Tailwind/styled-components nach vorhandenen Mustern
2. Extrahieren von: Farben, Typografie, Abständen, Border-Radius, Schatten, Breakpoints
3. Recherche von 3 Wettbewerberseiten zur Inspiration (über Browser-MCP)
4. Vorschlag eines Design-Token-Sets (JSON + CSS Custom Properties)
5. Erstellen einer DESIGN.md mit Begründung für jede Entscheidung
6. Erstellen einer interaktiven HTML-Vorschauseite (eigenständig, keine Abhängigkeiten)
Ausgabe: DESIGN.md + design-tokens.json + design-preview.html
Modus 2: Visuelle Prüfung
Bewertet Ihre UI entlang zehn Dimensionen (jeweils 0-10):
1. Farbkonsistenz — verwenden Sie Ihre Palette oder zufällige Hex-Werte?
2. Typografie-Hierarchie — 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 kaputt an Breakpoints?
6. Dunkler Modus — vollständig oder halb umgesetzt?
7. Animation — zielgerichtet oder übertrieben?
8. Barrierefreiheit — Kontrastverhältnisse, Fokus-Zustände, Touch-Ziele
9. Informationsdichte — überladen oder aufgeräumt?
10. Feinschliff — Hover-Zustände, Übergänge, Ladezustände, Leere-Zustände
Jede Dimension erhält eine Bewertung, konkrete Beispiele und einen Korrekturvorschlag mit genauer Datei:Zeile.
Modus 3: KI-Schwachstellenerkennung (AI Slop Detection)
Erkennt generische, KI-generierte Designmuster:
- Unnötige Verläufe auf allem
- Standardmäßige Lila-zu-Blau-Verläufe
- „Glass-Morphism“-Karten ohne Zweck
- Abgerundete Ecken an Dingen, die nicht abgerundet sein sollten
- Übermäßige Animationen beim Scrollen
- Generischer Heldenbereich mit zentriertem Text über Standardverlauf
- Serifenlose Schriftfamilie ohne Persönlichkeit
Beispiele
Für eine SaaS-App generieren:
/design-system generate --style minimal --palette earth-tones
Vorhandene UI prüfen:
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
Auf KI-Schwachstellen prüfen:
/design-system slop-check