83.3K+Télécharger
Aller au guide d’utilisation
ui-ux-pro-maxpar nextlevelbuilder

UI UX Pro Max Skill.

Un skill Claude Code et Codex pour le design UI : intelligence de design UI/UX pour web, mobile et desktop : mise en page, couleur, typographie et règles UX.

  • Web et UI
  • Code UI
Télécharger OpenDesignVoir le guide d'utilisation
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-ux-pro-max/SKILL.mdSKILL.md
--- name: ui-ux-pro-max description: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, … --- ## When to Apply ## Rule Categories by Priority ## Running the search tool ## Workflow ## Query Contract ## If a search returns 0 results
En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 15 922 caractères au total

01 Ce qu'il fait

Ce que fait le Skill ui-ux-pro-max dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

UI/UX Pro Max est un skill d'intelligence design consultable pour les interfaces web, mobiles et desktop. Il interroge 79 styles (50 actifs), 192 palettes produit avec profils de raisonnement, 74 associations de polices, 119 recommandations UX, 105 icônes, 17 presets GSAP, 25 types de graphiques et 22 stacks technologiques. Utilisez-le pour concevoir des pages, choisir les couleurs et la typographie, vérifier l'accessibilité et la cohérence de l'UI, mettre en œuvre la navigation et l'animation, ou améliorer l'utilisabilité.

Il détecte automatiquement la stack à partir de package.json, pubspec.yaml ou xcodeproj et génère un design system avec persistance optionnelle pour une récupération inter-sessions. Trois curseurs de design (variance, mouvement, densité) ajustent le résultat. Le skill fournit des recherches spécifiques par domaine pour l'UX, les couleurs, la typographie, les icônes, GSAP et les recommandations d'implémentation par stack.

Ce qu'il produit

  • Design system avec pattern, style, couleurs, typographie, effets et anti-patterns au format ASCII, markdown ou JSON
  • design-system/project-slug/pages/page-name.md pour les surcharges spécifiques à une page lorsque --page est passé
  • Résultats spécifiques par domaine (recommandations UX, palettes de couleurs, associations de polices, icônes, presets GSAP, recommandations de graphiques, guidance d'implémentation par stack)
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Analyser les exigences

    Extraire le type de produit (SaaS, e-commerce, dashboard), le public cible, les mots-clés de style (ludique, minimal, mode sombre) et détecter la stack à partir de package.json, pubspec.yaml, xcodeproj ou app.json.

  2. 02
    Générer le design system

    Exécuter search.py avec --design-system pour les nouvelles pages ou projets.

  3. 03
    Persister en tant que master avec surcharges

    Ajoutez --persist et --output-dir pointant vers la racine du projet pour écrire design-system/project-slug/MASTER.md. Les surcharges spécifiques à une page vont dans pages/page-name.md.

  4. 04
    Compléter avec des recherches par domaine

    Interrogez un seul domaine (ux, color, typography, icons, gsap, chart, landing, google-fonts) avec 2 à 5 termes pertinents et une contrainte.

  5. 05
    Directives de requête sur la stack

    Utilisez --stack avec la stack détectée (react, nextjs, vue, swiftui, flutter, etc.) pour des indications spécifiques à l'implémentation.

  6. 06
    Vérifier les règles de pré-livraison

    Avant de livrer une UI d'application, lisez references/pro-rules.md et parcourez sa checklist canonique de pré-livraison couvrant la discipline des icônes, le retour d'interaction, le contraste clair/sombre, la mise en page en zone sûre et l'accessibilité pour l'UI d'application native/mobile.

02 Trouvez celui qui vous convient

Quand utiliser le skill ui-ux-pro-max

Utilisez la compétence ui-ux-pro-max dans Claude Code ou Codex lorsque le travail concerne la conception UI de ce type. Les capacités et limites ci-dessous sont extraites du fichier de la compétence.

Bon choix

  • Concevoir de nouvelles pages ou créer et refactoriser des composants d'UI
  • Choisir la couleur, la typographie, l'espacement ou les systèmes de mise en page
  • Revoir l'UI pour l'UX, l'accessibilité ou la cohérence
  • Implémenter la navigation, l'animation ou le comportement responsive
  • Améliorer la qualité perçue et l'utilisabilité d'une interface

Connaître les limites

  • Logique backend pure, conception d'API ou de base de données
  • Travail de performance non visuel, infrastructure ou DevOps
  • Scripts non visuels, sauf si la tâche modifie l'apparence, le ressenti, le mouvement ou l'interaction

Quoi fournir

  • Type de produit et audienceSaaS, e-commerce, portfolio, tableau de bord, divertissement, outil ou productivité, ainsi que la tranche d'âge et le contexte d'utilisation (trajet, loisir, travail)
  • Mots-clés de styleLudique, vibrant, minimal, mode sombre, orienté contenu, immersif, ou autres adjectifs décrivant la direction visuelle souhaitée
  • Nom du projet pour la persistancePassez -p "Project Name" à --design-system pour nommer le sous-répertoire du design system et le fichier MASTER.md
  • Curseurs de conception (optionnel)Trois curseurs de 1 à 10 : --variance (centré à audacieux/asymétrique), --motion (subtil à chorégraphie complexe), --density (aéré à dense/échelle d'espacement type dashboard)

03 Dans le skill

Règles que le skill ui-ux-pro-max donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. L'accessibilité avant tout

    Priorité 1 (CRITIQUE). Assurez un contraste de 4,5:1, du texte alternatif, la navigation au clavier et des aria-labels. Ne retirez jamais les anneaux de focus et n'utilisez jamais de boutons icône seule sans libellé.

  2. Zones tactiles de 44×44px minimum

    Priorité 2 (CRITIQUE). Le tactile et l'interaction doivent avoir une taille minimale de 44×44px, un espacement de 8px ou plus, et un retour de chargement. Évitez de dépendre uniquement du survol et des changements d'état instantanés (0ms).

  3. Réessayer une fois en cas de résultats vides

    Si la recherche renvoie 0 résultat, réessayez une fois avec une requête plus restreinte ou un domaine/stack explicite.

  4. Utiliser le mode de recherche le plus restreint

    Choisissez --design-system pour un nouveau projet ou une nouvelle page, un --domain explicite pour une préoccupation ciblée ou un bug de composant, --stack pour une stack d'implémentation connue.

  5. Ne jamais supposer une stack

    Détectez la stack à partir de package.json, pubspec.yaml, xcodeproj, Package.swift, composer.json ou app.json. Si rien n'est détectable et que les recommandations de stack importent, demandez à l'utilisateur.

  6. Invoquer la recherche par chemin complet

    Exécutez toujours python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" avec le chemin complet, pas un chemin relatif.

  7. Ne pas écraser le master sans autorisation

    Si design-system/project-slug/MASTER.md existe, --persist ignore l'écriture et le laisse intact, sauf si --force est passé.

  8. Interroger le résultat sémantique avant la stack

    Pour les bugs de mise en page de texte et de composants compacts, recherchez d'abord le résultat UX sémantique (équilibre des lignes de titre orphelines, retour à la ligne des libellés de badge/chip), puis la stack détectée pour l'implémentation.

04 Mettez-le en pratique

Installer ui-ux-pro-max dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter ui-ux-pro-max à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

Forme générique de la CLI skills pour .claude/skills/ui-ux-pro-max/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt
Design a dashboard page for a SaaS analytics product targeting data teams. The interface should feel modern and minimal with good dark mode support. Use the detected Next.js stack for implementation guidance. Persist the design system so the team can reference it across sessions.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Vérifiez le domaine renvoyé, l'identité du meilleur résultat et l'adéquation avec le produit et la plateforme de l'utilisateur avant d'appliquer les résultats de recherche
  • Réessayez une fois avec une reformulation plus ciblée ou un domaine/stack explicite lorsque le résultat est vide ou hors sujet.
  • Lisez un MASTER.md existant avant de décider si --force est justifié pour le régénérer
  • Pour le travail d'accessibilité, interrogez un résultat observable à la fois en utilisant des termes de résultat d'accessibilité explicites et vérifiez que le résultat correspond à l'interaction spécifique ou au critère WCAG

Dans OpenDesign ui-ux-pro-max est intégré : Plugins → Skills, sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
nextlevelbuilder
Repository
github.com/nextlevelbuilder/ui-ux-pro-max-skill Branche main
Fichier du skill
.claude/skills/ui-ux-pro-max/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 7f69fed
License
MIT Extrait de LICENSE.
Étoiles du dépôt
127 450 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt nextlevelbuilder/ui-ux-pro-max-skill, qui contient 7 skills dans ce catalogue. Pas un classement ni un décompte d'utilisation pour ui-ux-pro-max.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. Quand l'appliquerÀ utiliser pour la structure d'interface, le design visuel, l'interaction, la qualité UX. À éviter pour le backend, l'API, l'infrastructure.
  2. Catégories de règles par priorité10 catégories, de l'accessibilité (CRITIQUE) aux graphiques (FAIBLE), avec les vérifications clés et les anti-patterns
  3. Exécuter l'outil de rechercheInvoquez search.py par chemin complet depuis le répertoire du skill. Nécessite Python 3.x, sans dépendances externes.
  4. Contrat de requêteChoisissez le mode de recherche le plus restreint. Une intention dominante, 2 à 5 termes, vérifiez le domaine/l'adéquation, réessayez une fois si vide.
  5. Étape 1 : analyser les exigences de l'utilisateurExtrayez le type de produit, l'audience, les mots-clés de style, et détectez la stack à partir de package.json ou équivalent.
  6. Étape 2 : générer le design systemUtilisez --design-system pour les nouvelles pages/projets. Agrège les correspondances produit/style/couleur/landing/typographie.
  7. Étape 2b : persister le design systemAjoutez --persist et --output-dir pour écrire MASTER.md. Le Master existant est ignoré sauf si --force est autorisé.
  8. Étape 2c : réglages de designCurseurs optionnels de 1 à 10 pour la variance, le mouvement, la densité afin d'ajuster le résultat de --design-system.
  9. Étape 3 : compléter avec des recherches détailléesInterrogez les domaines produit, style, couleur, typographie, google-fonts, chart, ux, landing, icons, gsap, react, web.
  10. Étape 4 : Directives de stackUtilisez --stack avec la stack détectée pour des conseils d'implémentation spécifiques. 22 stacks disponibles.
  11. Si une recherche renvoie 0 résultatRéessayez une fois avec une requête plus ciblée. Si toujours vide, revenez au tableau de priorités et informez l'utilisateur.
  12. Conseils pour de meilleurs résultatsUne intention, 2 à 5 termes par requête. Réessayez une fois. Utilisez --design-system pour du nouveau, --domain pour du ciblé.
Description du skill lui-même
« Intelligence de conception UI/UX pour le web, le mobile et le bureau. Cette compétence doit être utilisée lors de la conception, de la construction, de la révision ou de la correction d'interfaces, y compris les pages, les composants, les systèmes de design, l'accessibilité, l'interaction, la mise en page responsive, la typographie, la couleur, les graphiques et l'implémentation UI spécifique à la stack. Données locales consultables : 79 styles consultables (50 actifs), 192 palettes de produits et profils de raisonnement, 74 paires de polices, 119 directives UX, 105 icônes, 17 préréglages GSAP, 25 types de graphiques et 22 stacks. »

Description en front-matter de SKILL.md. Le fichier complet fait environ 15 922 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill ui-ux-pro-max

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

De quoi le skill a-t-il besoin pour fonctionner ?

Le script de recherche nécessite Python 3.x sans dépendance externe. Il doit être invoqué par son chemin complet depuis le répertoire du skill à l'aide de python, python3, ou py -3. Le README contient les instructions d'installation si Python est manquant.

Comment puis-je remplacer le design system pour une page spécifique ?

Passez --page "page-name" lors de la persistance pour créer design-system/project-slug/pages/page-name.md. Lors de la construction de cette page, l'agent lit d'abord MASTER.md, puis vérifie si pages/page-name.md existe. Si c'est le cas, ses règles remplacent celles du Master. Sinon, les règles du Master sont utilisées exclusivement.

UI UX Pro Max

Exécuter ui-ux-pro-max sur une vraie tâche de conception d'interface.

Le skill ui-ux-pro-max est inclus dans OpenDesign. Téléchargez l'app, sélectionnez le skill dans Plugins → Skills, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max