📦

ui-ux-pro-max

Name: ui-ux-pro-max
Author: ZhanlinCui

Sicher

Professionelle UI/UX-Designs mit Design-System-Intelligenz erstellen

Auch verfügbar von: DCjanus,nextlevelbuilder

Das Erstellen professioneller UI/UX-Designs erfordert tiefes Wissen über Barrierefreiheit, Farbtheorie, Typografie und stackspezifische Muster. Diese Skill bietet eine durchsuchbare Datenbank mit über 50 Designstilen, Farbpaletten, Schriftkombinationen und Implementierungsrichtlinien, um Ihnen zu helfen, polished Interfaces schneller zu erstellen.

Unterstützt: Claude Codex Code(CC)

🥉 75 Bronze

Die Skill-ZIP herunterladen

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

Einschalten und loslegen

Teste es

Verwendung von "ui-ux-pro-max". Search for 'beauty spa wellness elegant' design system

Erwartetes Ergebnis:

Design System Generated:
- Product Pattern: Service-based business with booking focus
- UI Style: Soft minimalism with organic shapes
- Color Palette: Sage green primary, cream background, rose gold accents
- Typography: Playfair Display (headings) + Lato (body)
- Effects: Subtle shadows, gentle gradients, smooth transitions

Verwendung von "ui-ux-pro-max". Get UX guidelines for animation accessibility

Erwartetes Ergebnis:

UX Guidelines Found:
1. prefers-reduced-motion: Check media query and provide static fallback
2. Duration limits: Use 150-300ms for micro-interactions
3. Transform performance: Animate transform/opacity, not width/height
4. Loading states: Show skeleton screens or spinners for async operations

Sicherheitsaudit

Sicher

v1 • 2/24/2026

Static analysis flagged 1395 patterns across 28 files, but all findings are false positives. The 'weak cryptographic algorithm' detections are triggered by BM25 scoring math (log functions) in a text search engine, not actual cryptography. 'Hardcoded URL' findings are documentation URLs in CSV data files. 'External commands' are bash examples in documentation showing how to run the Python search tool. The skill performs local file operations on its own data files with no network calls, no dynamic code execution, and no user input processing.

Gescannte Dateien

3,254

Analysierte Zeilen

befunde

Gesamtzahl Audits

Keine Sicherheitsprobleme gefunden

Auditiert von: claude

Qualitätsbewertung

Architektur

100

Wartbarkeit

Inhalt

Community

100

Sicherheit

Spezifikationskonformität

Was du bauen kannst

Frontend-Entwickler erstellt ein neues Dashboard

Ein Entwickler muss ein Admin-Dashboard für ein SaaS-Produkt erstellen. Er nutzt die Skill, um Designsystem-Empfehlungen für 'SaaS-Dashboard' zu erhalten, barrierefreie Farbpaletten für datenintensive Interfaces abzurufen und React-spezifische Richtlinien für Performance-Optimierung zu bekommen.

Solo-Gründer erstellt eine Landingpage

Ein nicht-designerischer Gründer benötigt eine professionelle Landingpage für sein Startup. Er sucht nach 'beauty spa wellness service', um ein vollständiges Designsystem mit Stil, Farben, Typografie und Landingpage-Mustern zu erhalten, und nutzt dann Tailwind-CSS-Richtlinien zur Implementierung.

Designer sorgt für Barrierefreiheits-Konformität

Ein Designer möchte sicherstellen, dass sein UI WCAG-Richtlinien entspricht. Er fragt die ux-Domäne nach 'accessibility contrast focus', um spezifische Regeln zu Farbkontrastverhältnissen, Fokus-Zuständen und Tastaturnavigation mit Code-Beispielen zu erhalten.

Probiere diese Prompts

Grundlegende Stilsuche

Durchsuchen Sie Designstile nach 'minimalist dark mode dashboard'. Zeigen Sie mir die Top-3-Stilempfehlungen mit ihren Farbschemata und wichtigsten Eigenschaften.

Vollständiges Designsystem generieren

Generieren Sie ein vollständiges Designsystem für ein 'fintech crypto trading dashboard'. Einschließlich Produktmuster, UI-Stil, Farbpalette, Typografie und Effekte. Benennen Sie das Projekt 'CryptoVault'.

Barrierefreiheits-Überprüfung

Überprüfen Sie diese Button-Komponente auf Barrierefreiheitsprobleme: [Code einfügen]. Prüfen Sie gegen WCAG-Richtlinien für Farbkontrast, Fokus-Zustände und Touch-Zielgröße. Geben Sie spezifische Fixes.

Stackspezifische Implementierung

Ich erstelle eine responsive Navbar mit Tailwind CSS. Suchen Sie nach 'navbar responsive floating' Richtlinien im html-tailwind Stack und geben Sie Implementierungscode mit proper aria-Attributen.

Bewährte Verfahren

Beginnen Sie immer mit dem --design-system Flag, um umfassende Empfehlungen mit Begründung zu erhalten, bevor Sie implementieren
Überprüfen Sie zuerst Barrierefreiheits-Richtlinien - Farbkontrast (4.5:1), Fokus-Zustände und Touch-Ziele (mindestens 44x44px)
Verwenden Sie stackspezifische Suchen, um Implementierungsmuster zu erhalten, die Framework-Konventionen folgen

Vermeiden

Verwenden von Emoji als UI-Symbole anstatt proper SVG-Symbolbibliotheken wie Heroicons oder Lucide
Implementieren von Hover-Zuständen mit Scale-Transforms, die Layout-Shift verursachen
Verwenden von transparenten Glaskarten (bg-white/10) im Light-Modus, wo sie unsichtbar werden

Häufig gestellte Fragen

Muss ich Abhängigkeiten installieren, um diese Skill zu nutzen?

Ja, Sie müssen Python 3.x installiert haben. Die Skill verwendet ein Python-CLI-Tool zum Durchsuchen ihrer CSV-Datenbank. Es werden keine zusätzlichen Python-Pakete benötigt, da nur Standard-Bibliotheksmodule verwendet werden.

Kann diese Skill eigentlichen UI-Code generieren?

Nein, diese Skill bietet Designrichtlinien, Empfehlungen und Muster. Sie generiert keinen Produktionscode. Verwenden Sie die Empfehlungen, um Ihre Implementierung in Ihrem bevorzugten Framework zu informieren.

Welche Technologie-Stacks werden unterstützt?

Die Skill deckt 9 Stacks ab: html-tailwind (Standard), React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, shadcn/ui und Jetpack Compose. Jeder hat spezifische Richtlinien für Muster, Performance und Best Practices.

Wie speichere ich ein Designsystem zur späteren Verwendung?

Verwenden Sie das --persist Flag mit --design-system, um eine MASTER.md-Datei mit Ihrem Designsystem zu erstellen. Sie können auch seitenspezifische Overrides mit dem --Flag für hierarchische Sitzungsübergreifende Abrufe erstellen.

Kann ich nach spezifischen Designelementen wie Diagrammen oder Symbolen suchen?

Ja, verwenden Sie das --domain Flag mit Werten wie 'chart' für Diagrammtypen, 'icons' für Symbolempfehlungen, 'typography' für Schriftkombinationen, 'color' für Paletten oder 'ux' für Nutzbarkeitsrichtlinien.

Werden die Design-Daten regelmäßig aktualisiert?

Die Skill verwendet statische CSV-Dateien, die mit dem Repository gebündelt sind. Für die neuesten Design-Trends müssen Sie möglicherweise das Skill-Repository aktualisieren oder mit zusätzlicher Recherche ergänzen.