Design Systems

Nutze das design-system Skill, um ein UI-System zu erstellen oder zu prüfen, Tokens aus bestehendem Code zu extrahieren und Styling-Konsistenz in realen Repos zu bewerten.

Nutze den shadcn-Skill, um den Projektkontext zu prüfen, die passenden CLI-Befehle auszuführen, Komponenten zu installieren und UI anhand dokumentierter Muster für base vs radix, Formulare, Theming und Registries zusammenzustellen.

design-consultation ist ein design-consultation-Skill, der aus einer groben Produktidee eine vollständige Design-Richtung entwickelt. Er erstellt eine DESIGN.md als zentrale Referenz, Vorschauen und systemweite Leitlinien für Typografie, Farbe, Abstände, Layout und Motion. Besonders geeignet für neue Produkte und UI-Flächen, die einen stimmigen Ausgangspunkt brauchen.

ui-ux-pro-max ist eine umfassende KI-Unterstützung für UI/UX-Design. Die Skill bietet strukturierte Empfehlungen zu Layouts, Stilen, Farbsystemen, Typografie und UX-Regeln für Web- und Mobile-Projekte. Ideal für Entwickler und Teams, die praxisnahe Designentscheidungen für React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter und HTML/CSS treffen möchten. Perfekt zum Planen, Überprüfen und Optimieren von UIs mit kuratiertem Designwissen.

ckm:design-system unterstützt dich beim Aufbau dreistufiger Tokens, Component Specs, CSS-Variablen, Tailwind-Mappings und markenkonsistenter Slides auf Basis einer klaren Token-Architektur.

ckm:design ist eine strukturierte Design-Skill für die Steuerung und Erstellung von Logos, CIP-Mockups, Bannern, Slides und SVG-Icons. Enthalten sind praxisnahe Referenzen, CSV-gestützte Optionen und Python-Skripte für wiederholbare Design-Workflows statt generischer Prompt-Ausgaben.

ckm:brand ist ein Skill für Branding-Workflows zum Erstellen, Aktualisieren und Prüfen von Markenrichtlinien, Messaging, Tonalität, visueller Identität und Design-Token-Sync mit praxisnahen Skripten und Checklisten.

design-system-patterns unterstützt Teams dabei, skalierbare UI-Grundlagen mit Token-Struktur, Theming-Architektur und wiederverwendbaren Component-API-Patterns für Design-Systeme und Komponentenbibliotheken zu entwickeln.

visual-design-foundations unterstützt Teams dabei, praxistaugliche UI-Systeme mit Typografie-Skalen, Farb-Token, Abstandsregeln und Richtlinien für Ikonografie aufzubauen. Nutzen Sie die Skill, um eine belastbare Design-Basis zu schaffen, Styleguides zu erstellen, Hierarchien zu prüfen und aus klaren Designvorgaben CSS-Variablen für die Implementierung abzuleiten.

Die Skill web-component-design unterstützt Teams beim Entwurf wiederverwendbarer UI-Komponenten für React, Vue und Svelte – mit starken API-Mustern, Hinweisen zur Barrierefreiheit und Referenzen zu Styling-Abwägungen für Designsysteme.

Nutze die tailwind-design-system Skill, um Designsysteme mit Tailwind CSS v4 zu erstellen – mit Tokens, Theming, Varianten, Barrierefreiheit und Hinweisen zur Migration von v3 auf v4.

polish ist ein Skill für den finalen UI-Check, um vor dem Release Ausrichtung, Abstände, Konsistenz, Token-Nutzung und kleine Detailfehler aufzudecken. Er eignet sich am besten für Screens, Flows oder Komponenten, die grundsätzlich funktionieren, aber noch nicht ganz stimmig oder ausgereift wirken. Nutze ihn, um die Launch-Bereitschaft, die Abstimmung mit dem Design System und die Gesamtqualität zu verbessern, ohne unnötig neu zu gestalten.

figma-create-design-system-rules hilft dir dabei, projektspezifische Design-System-Regeln für Figma-zu-Code-Workflows zu erstellen. Nutze es, um Konventionen für Komponenten, Benennung, Tokens, Dateipfade und Dinge festzuhalten, die nicht hart codiert werden sollten, damit AI-Coding-Agents im gesamten Repo konsistent bleiben. Erfordert eine Verbindung zu einem Figma-MCP-Server.

site-architecture unterstützt bei der Planung oder Neuordnung von Seitenhierarchie, Navigation, URL-Mustern und interner Verlinkung einer Website. Nutzen Sie die Skill, um Sitemaps, Navigationsspezifikationen, URL-Maps sowie Mermaid- oder ASCII-Site-Diagramme für Marketing- und UI/UX-Planung zu erstellen.

Die Skill normalize prüft ein UI-Feature und richtet es an Ihrem Design System aus. Erfahren Sie mehr über normalize-Installationsoptionen, notwendige frontend-design-Vorbereitung und den praktischen Einsatz für Seiten, Routen und Komponenten.

Die extract Skill hilft Teams dabei, wiederkehrende UI-Muster, Tokens und Komponenten zu erkennen und anschließend die Konsolidierung in ein bestehendes Design System zu planen oder umzusetzen – mit einem sichereren Migrationspfad.

Die normalize Skill prüft ein UI-Feature und richtet es wieder an Ihrem Design System aus. Erfahren Sie, in welchem Kontext sich normalize installieren lässt, welche Vorbereitung mit /frontend-design nötig ist und wie die Skill praktisch für Seiten, Routen und Komponenten eingesetzt wird.

Die extract Skill hilft Teams dabei, wiederkehrende UI-Muster, Tokens und Komponenten zu finden und sie anschließend mit einem sichereren Migrationsplan in ein bestehendes Designsystem zu überführen.

Die design-md-Skill analysiert Stitch-Projekte und macht aus ihren Screens eine semantische DESIGN.md als Single Source of Truth für konsistentes Layout, konsistenten Ton, Farben und die Komponentensprache. Verwende design-md für Design Systems, wenn du promptbare Orientierung für künftige Stitch-Generierungen brauchst – nicht nur eine visuelle Zusammenfassung.

Nutze die wpds-Skill, um WordPress-UI mit dem WordPress Design System (WPDS) zu erstellen oder zu prüfen. Sie hilft dir dabei, Komponenten, Tokens, Patterns und die Paketpassung mit dem WPDS-MCP-Server zu verifizieren, damit dein wpds-Guide auf kanonischen Dokumentationen statt auf Vermutungen basiert. Ideal für wpds in Design-Systems-Arbeit rund um Gutenberg, WooCommerce, WordPress.com, Jetpack und verwandte Oberflächen.

figma-use ist der Skill, den du vor jedem `use_figma`-Aufruf installieren solltest, damit JavaScript sicher im Kontext einer Figma-Datei ausgeführt wird. Er unterstützt Aufgaben der Design-Umsetzung wie das Erstellen und Bearbeiten von Knoten, das Verknüpfen von Variablen und Stilen, das Aufbauen von Komponenten und Varianten sowie das programmgesteuerte Prüfen der Dateistruktur. Das Repo enthält Nutzungshinweise, Stolperfallen und Muster, mit denen sich typische Automatisierungsfehler in Figma reduzieren lassen.

mui ist ein fokussierter Leitfaden für Material UI v7 in React und behandelt `sx`-Styling, Theme-Anpassung, responsive Layouts und wichtige Migrationsänderungen in v7. Nutzen Sie ihn, um den Skill zu installieren, die zentralen Dateien nachzuvollziehen und MUI-Komponenten mit aktuellen Mustern aus `@mui/material` zu erzeugen.

makepad-2.0-theme ist ein Makepad-2.0-Theme-Skill zum Anwenden von `theme.*`-Variablen, zum Umschalten zwischen dunklen und hellen Themes und für konsistentes Design-Token-Styling. Dieser Leitfaden hilft dir, die Installation und Nutzung von makepad-2.0-theme für produktive UIs und Designsysteme einzuordnen.

figma-generate-library hilft dir, ein Figma-Designsystem aus einer Codebasis aufzubauen oder zu aktualisieren – mit einem klaren, abgestuften Workflow für Tokens, Component Libraries, Dokumentation sowie Light/Dark-Theming. Nutze den figma-generate-library Skill, wenn du einen praxisnahen Leitfaden für Design Systems brauchst und nicht nur ein einmaliges Mockup. Er ergänzt figma-use für Plugin-API-Aufrufe.