Was macht design-system-generator-skill?
🎨 Eine Farbe rein → Vollständiges Designsystem raus. KI-Agenten-Skill zur Generierung produktionsreifer Designsysteme.
Überblick
Dieser Skill verwandelt eine einzelne Primärfarbe in ein umfassendes Designsystem. Er eignet sich perfekt für schnelles Prototyping, Branding und die Sicherstellung von Designkonsistenz über Projekte hinweg.
Funktionen
- Farbpaletten-Generierung: Erzeugt Farbabstufungen, Sekundärfarben und Akzentfarben aus einer Primärfarbe.
- Typografie-Skala: Schlägt eine harmonische Schriftgrößenskala vor.
- Abstandssystem: Definiert ein konsistentes Abstandsraster (4px-Basis).
- Schatten und Elevation: Erzeugt Schlagschatten-Regeln basierend auf der Farbpalette.
- UI-Komponenten-Styles: Stellt grundlegende Komponentenstile wie Buttons, Karten und Eingabefelder bereit.
Verwendung
- Gib eine Primärfarbe im Hex-, RGB- oder HSL-Format an.
- Der Skill generiert ein strukturiertes Designsystem als JSON- oder CSS-Variablen.
- Integriere die Ausgabe direkt in dein Projekt.
Unterstützte Plattformen
- Claude Code
- Cursor
- Codex
- Andere KI-Agenten, die Skills unterstützen
Beispiel-Eingabe
Primärfarbe: #6366F1 (Indigo)
Beispiel-Ausgabe (Auszug)
:root {
--color-primary: #6366F1;
--color-primary-light: #A5B4FC;
--color-primary-dark: #4338CA;
--font-size-h1: 2.5rem;
--spacing-unit: 4px;
--shadow-sm: 0 1px 2px rgba(99, 102, 241, 0.1);
}
Lizenz
MIT