Design Systems

Nutze frontend-design, um markante Frontend-Oberflächen in Produktionsqualität mit einer klaren visuellen Haltung zu gestalten. Diese Skill ist für Landingpages, Dashboards, App-Shells und Komponenten gedacht, bei denen Hierarchie, Typografie, Bewegung und Feinschliff genauso wichtig sind wie die Implementierung. Enthalten sind Installations- und Nutzungshinweise für designorientierte UI-Arbeit.

compose-multiplatform-patterns ist ein praxisnaher Leitfaden für Compose Multiplatform und Jetpack Compose in KMP-Apps. Er behandelt State-Management, Navigation, Theming, Performance und wiederverwendbare UI-Patterns für Android, iOS, Desktop und Web und hilft Frontend-Teams dabei, wartbare gemeinsame Screens zu entwickeln.

frontend-design verwandelt vage UI-Ideen in markante, produktionsreife Interfaces mit echtem Frontend-Code, klarer Designrichtung und weniger generischem AI-Look.

brand-guidelines liefert Agents Anthropic-Markenfarben und Typografie für die Neugestaltung von Doku, Folien, HTML und anderen textlastigen Artefakten. Nutzen Sie es, um nach der Inhaltserstellung konsistentes markenkonformes Formatieren, klare Schrifthierarchien und passende Farbpaletten anzuwenden.

ux-designer ist eine strukturierte UX-Design-Skill für Research, Accessibility, Informationsarchitektur, Interaktions-Flows, Wireframe-Leitlinien und UX Copy. Sie hilft Teams, aus groben Produktideen klarere, kriterienbasierte Designentscheidungen zu machen – mit `AGENTS.md` und fokussierten Regeldateien.

vercel-react-native-skills ist ein React-Native- und Expo-Skill für performanceorientierte Frontend-Entwicklung. Nutze ihn, um Listen-Rendering, Animationen, Navigation, UI-Patterns, State Management und das Setup nativer Module zu verbessern. Er bietet praxisnahe Regeln, Installationshinweise und Nutzungsmuster, um Mobile-App-Engpässe mit weniger Rätselraten zu lösen.

Die Layout-Skill hilft dabei, Abstände, Hierarchie und Komposition zu verbessern, wenn eine UI flach, überladen oder mechanisch angeordnet wirkt. Verwende sie bei Problemen mit Layout, Ausrichtung und visuellem Rhythmus; sie bietet einen praktischen Layout-Leitfaden für UI-Design statt allgemeiner Stilhinweise. Besonders sinnvoll ist sie, wenn strukturelle Korrekturen, klarere Gruppierungen und eine bessere Leserichtung gefragt sind.

impeccable hilft dir, markante, produktionsreife Frontend-UIs zu bauen statt generischer, nach KI aussehender Interfaces. Es unterstützt die Workflows craft, teach und extract für Seiten, Web Components, App-Oberflächen, Poster und andere designintensive Frontends. Damit ist das Skill nützlich für UI-Design, das Einrichten von Design-Kontext und die Extraktion wiederverwendbarer Muster.

figma-code-connect-components hilft dabei, Figma-Design-Komponenten mit Figma Code Connect passenden Code-Komponenten zuzuordnen. Verwende es für die Abstimmung von Design und Implementierung, für Variant- und Prop-Matching sowie um die richtige lokale Komponente zu finden, bevor du Mappings anlegst. Am besten geeignet für connect-, map- oder link-to-code-Workflows, nicht für Canvas-Editing oder die Generierung kompletter Seiten.

Nutze figma, um Design-Kontext, Screenshots, Variablen und Assets vom Figma-MCP-Server abzurufen und Figma-Nodes in umsetzbare UI-Entscheidungen zu übersetzen. Diese figma skill ist ideal, wenn du eine Figma-URL oder eine Node-ID hast und präzise figma-Nutzung für Design-to-Code-Arbeiten, Setup oder Troubleshooting brauchst.

brandkit ist eine Premium-Skill zur Bildgenerierung für Branding-Arbeit – inklusive Logo-Systemen, Identity-Decks, visuellen Guideline-Boards und art-directed Markenpräsentationen. Der Skill ist auf kohärente, studioähnliche Ergebnisse ausgelegt, von Start-ups über Developer Tools, Security und Gaming bis hin zu Consumer Apps und Luxuskonzepten. Nutze brandkit, wenn du eine ausgearbeitete Markenwelt statt eines generischen KI-Moodboards willst.

teach-impeccable ist eine einmalige Skill-Einrichtung für UI-Design: Das Repo wird gescannt, gezielte UX-Fragen gestellt und dauerhaft nutzbare Design-Vorgaben für künftige Sessions gespeichert.

Das Skill react:components wandelt Stitch-Designs in modulare Vite- und React-Komponenten für die Frontend-Entwicklung um. Es nutzt Retrieval, lokale Dateiprüfungen und AST-basierte Validierung, damit die Ausgabe zu Design Tokens, vorhandenen Dateien und Projektvorgaben passt. Verwenden Sie diesen react:components-Guide, wenn Sie strukturierten Komponenten-Code brauchen und keinen einmaligen JSX-Dump.

Die enhance-prompt Skill verwandelt vage UI-Ideen in klarere, Stitch-taugliche Prompts mit stärkerer Struktur, UI/UX-Vokabular und Design-System-Kontext. Nutze diesen enhance-prompt-Leitfaden, um Prompts präziser zu machen, Rätselraten zu reduzieren und konsistentere Ergebnisse beim Prompting und bei der UI-Generierung zu erzielen.

vue-best-practices ist ein Vue-3-Skill für Codegenerierung, Reviews und Refactoring. Er lenkt Agents in Richtung Composition API, `<script setup lang="ts">`, explizitem Datenfluss, SSR-tauglichen Entscheidungen und zentralen Referenzen zu Reaktivität, SFCs, Composables, Router, Pinia und Vite-basierten Apps.

fireworks-tech-graph ist ein Diagramm-Skill, mit dem sich Systembeschreibungen in produktionsreife SVG- und PNG-Diagramme umwandeln lassen. Enthalten sind Installationshinweise, Hilfsskripte, Validierung, Vorlagen und Stilreferenzen für technische Diagramme, Architektur-Flussdiagramme, Sequenzdarstellungen und ähnliche visuelle Workflows.

infocard hilft dir dabei, redaktionell wirkende Informationskarten in Markdown zu erstellen, indem HTML und CSS direkt in die Seite eingebettet werden. Das ist nützlich für Zusammenfassungen, Themen-Snippets, Highlight-Panels, Event-Karten, Vergleichsblöcke und andere UI-Design-taugliche Inhalte, die bewusst gestaltet wirken sollen. Es ist nicht für Diagramme oder Datenvisualisierungen gedacht; dafür solltest du stattdessen einen spezialisierten Diagramm- oder Chart-Skill verwenden.

architecture ist ein Diagramm-Skill zum Erstellen geschichteter Systemansichten in HTML und CSS mit farbcodierten Bereichen, Grid-Layouts und klarer Komponenten-Hierarchie. Er eignet sich besonders für User-, Anwendungs-, Daten- und Infrastrukturdiagramme, Microservice-Übersichten und Enterprise-Architecture. Verwende ihn statt generischer Prompts, wenn du für Diagramming schnell bearbeitbare Architektur-Ausgaben erstellen willst.

makepad-2.0-design-judgment ist die erste Makepad-2.0-Skill, die für Designbewertung, Architektur, Komponentengrenzen, Datenfluss und Rendering-Strategie geladen werden sollte. Verwenden Sie die makepad-2.0-design-judgment-Skill, um Anfragen an die passende Makepad-Compliance-Skill weiterzuleiten und vor der Implementierung bessere Designentscheidungen zu treffen.

Erstelle hochwertige Architekturdiagramme im dunklen Stil als eigenständige HTML-Dateien mit inline SVG. Die architecture-diagram skill ist für Systemarchitektur-, Infrastruktur-, Cloud-, Sicherheits- und Netzwerktopologie-Diagramme gedacht und liefert eine browserfertige Visualisierung mit semantischen Farben, klaren Komponentenbeziehungen und einem konsistenten technischen Stil.

hig-components-menus ist ein Apple-HIG-Leitfaden-Skill für Menüs und befehlsbasierte Oberflächen mit Buttons. Verwenden Sie den hig-components-menus-Skill für UI-Design-Entscheidungen zu Menüs, Kontextmenüs, Werkzeugleisten, Menüleisten und verwandten Steuerelementen, wenn Sie Apple-spezifische Hinweise zu Platzierung, Gruppierung und Verhalten von Befehlen benötigen.

hig-components-layout ist ein Apple-HIG-Skill für Navigation und Layout, um Sidebars, Split Views, Tab Bars, Listen, Tabellen, Outline Views, Spalten, Panels, Fenster, Scroll Views, Boxen und Ornamente auszuwählen. Nutze ihn für UI-Design und Entscheidungen zur App-Struktur, wenn du klare, plattformgerechte Orientierung statt allgemeiner responsiver Layout-Tipps brauchst.

hig-components-dialogs ist die Apple-HIG-Skill für Präsentationskomponenten zur Auswahl von Alerts, Action Sheets, Popovers, Sheets und Eingabeflächen für Ziffern. Nutzen Sie diesen hig-components-dialogs-Guide, wenn Sie eine klare, Apple-konforme Auswahl für Bestätigungsabläufe, destruktive Aktionen, nichtmodale Inhalte und UI-Designentscheidungen über iOS, iPadOS, macOS, watchOS und visionOS hinweg benötigen.

hig-components-content hilft dir, Apple-HIG-Content-Display-Komponenten mit weniger Rätselraten auszuwählen und präzise zu beschreiben. Nutze diesen hig-components-content-Leitfaden für UI-Design-Entscheidungen zu Charts, Collections, Image Views, Image Wells, Color Wells, Activity Views, Lockups und Web Views – mit Installations- und Nutzungshinweisen für eine Apple-konforme Komponentenauswahl.