ui-ux-pro-max
Générer des designs UI/UX professionnels avec l'intelligence du système de design
Également disponible depuis: DCjanus,nextlevelbuilder
La création de designs UI/UX professionnels nécessite une connaissance approfondie de l'accessibilité, de la théorie des couleurs, de la typographie et des modèles spécifiques à chaque pile technologique. Cette compétence fournit une base de données searchable de plus de 50 styles de design, palettes de couleurs, associations de polices et directives d'implémentation pour vous aider à créer des interfaces raffinées plus rapidement.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "ui-ux-pro-max". Rechercher le système de design 'beauty spa wellness elegant'
Résultat attendu:
Système de design généré :
- Modèle de produit : Entreprise de services avec focus sur la réservation
- Style UI : Minimalisme doux avec formes organiques
- Palette de couleurs : Vert sauge primaire, fond crème, accents or rose
- Typographie : Playfair Display (titres) + Lato (corps)
- Effets : Ombres subtiles, dégradés doux, transitions fluides
Utilisation de "ui-ux-pro-max". Obtenir les directives UX pour l'accessibilité de l'animation
Résultat attendu:
Directives UX trouvées :
1. prefers-reduced-motion : Vérifier la requête média et fournir une alternative statique
2. Limites de durée : Utiliser 150-300ms pour les micro-interactions
3. Performance des transformations : Animer transform/opacity, pas width/height
4. États de chargement : Afficher des écrans squelettes ou spinners pour les opérations asynchrones
Audit de sécurité
SûrStatic 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.
Score de qualité
Ce que vous pouvez construire
Développeur frontend construisant un nouveau tableau de bord
Un développeur doit créer un tableau de bord administrateur pour un produit SaaS. Il utilise la compétence pour obtenir des recommandations de système de design pour 'tableau de bord SaaS', récupérer des palettes de couleurs accessibles pour les interfaces riches en données et obtenir des directives spécifiques à React pour l'optimisation de la performance.
Fondateur solo créant une page d'atterrissage
Un fondateur nonDesigner a besoin d'une page d'atterrissage professionnelle pour sa startup. Il recherche 'beauty spa wellness service' pour obtenir un système de design complet avec style, couleurs, typographie et modèles de page d'atterrissage, puis utilise les directives Tailwind CSS pour l'implémenter.
Designer assurant la conformité à l'accessibilité
Un designer veut s'assurer que son UI respecte les directives WCAG. Il interroge le domaine ux pour 'accessibility contrast focus' pour obtenir des règles spécifiques sur les ratios de contraste des couleurs, les états de focus et la navigation au clavier avec des exemples de code.
Essayez ces prompts
Rechercher des styles de design correspondant à 'minimalist dark mode dashboard'. Montrez-moi les 3 meilleures recommandations de style avec leurs schémas de couleurs et caractéristiques clés.
Générer un système de design complet pour un 'fintech crypto trading dashboard'. Incluez le modèle de produit, le style UI, la palette de couleurs, la typographie et les effets. Nommez le projet 'CryptoVault'.
Revoir ce composant bouton pour les problèmes d'accessibilité : [coller le code]. Vérifier selon les directives WCAG pour le contraste des couleurs, les états de focus et la taille de la zone tactile. Fournir des corrections spécifiques.
Je construis une barre de navigation responsive avec Tailwind CSS. Rechercher les directives 'navbar responsive floating' dans la pile html-tailwind et fournir du code d'implémentation avec les attributs aria appropriés.
Bonnes pratiques
- Commencez toujours avec le flag --design-system pour obtenir des recommandations complètes avec raisonnement avant d'implémenter
- Vérifiez d'abord les directives d'accessibilité - contraste des couleurs (4.5:1), états de focus et zones tactiles (minimum 44x44px)
- Utilisez les recherches spécifiques à chaque pile pour obtenir des modèles d'implémentation qui suivent les conventions du framework
Éviter
- Utiliser des émojis comme icônes UI au lieu de bibliothèques d'icônes SVG appropriées comme Heroicons ou Lucide
- Implémenter des états hover avec des transformations scale qui provoquent un décalage de mise en page
- Utiliser des cartes en verre transparent (bg-white/10) en mode clair où elles deviennent invisibles