Skills UI UX Pro Max : usages pour les designers

La version courte

Brief réel → Composant et états → Vérifications de clavier et d’affichage.
Conserver les preuves et vérifier le résultat avant de l’utiliser.

UI UX Pro Max associe des instructions d’agent à des ressources de design consultables. Il peut aider Claude Code à choisir une direction, préparer la typographie et les couleurs, réaliser un composant ou examiner l’UX. Vous devez encore fournir le brief produit, les contraintes de marque et une méthode de vérification.

Utiliser le catalogue avec un objectif

Le projet documente des styles, palettes, associations de polices, recommandations UX, graphiques et technologies. Ces entrées servent à comparer des options, pas à remplacer votre design system existant. Les comptes et la version cités par la source sont datés : vérifiez le dépôt avant de vous appuyer sur un nombre actuel.

Pour une nouvelle interface, décrivez le public et la tâche puis demandez deux directions avec leurs compromis. Pour un produit établi, fournissez couleurs, espacements, typographie, bordures et rayons. Demandez quel token s’applique à l’action principale, au texte atténué et au focus clavier.

Commencer par un composant et ses états

Une carte, un champ de recherche ou un élément de tarifs est plus facile à examiner qu’un tableau de bord complet. Donnez des données réalistes, des libellés longs et les états de chargement, d’erreur, d’indisponibilité et de vide. Vérifiez à des largeurs étroites et larges avant de répéter le composant.

Sur une interface existante, demandez d’abord un audit lié à la tâche principale. Un constat doit nommer l’élément, l’effet utilisateur et la modification proposée. « Le menu n’a pas de nom accessible et ne s’ouvre pas au clavier » est vérifiable ; « améliorer l’accessibilité » reste trop vague.

Installer puis vérifier l’usage réel

Choisissez une seule voie d’installation : plugin Claude Code ou installation locale par CLI. Les commandes originales ci-dessous sont conservées. Vérifiez le périmètre et l’activation du plugin ; son rechargement dépend des instructions actuelles de Claude Code.

Le package documenté est ui-ux-pro-max-cli et l’exécutable uipro. Un exécutable npm global et un skill global sont deux choix différents. Le script de recherche nécessite Python 3. Son emplacement dépend de la méthode d’installation ; utilisez le chemin indiqué plutôt que de supposer le même dossier partout.

Testez le script, puis demandez à l’assistant de rapporter sa requête de recherche et les recommandations reçues. Voir le fichier d’instructions ne prouve pas que le catalogue a été interrogé. En cas d’échec, contrôlez dossier de travail, Python, cible et éventuel dossier imbriqué.

Préparer la transmission et la validation

Fournissez les tokens Figma sous forme de fichiers JSON ou CSS s’ils existent, en précisant leur autorité et le traitement des valeurs manquantes. Mentionner Figma dans un prompt ne donne pas accès au document ou aux fichiers.

La transmission doit contenir le brief, les décisions de design, le code avec ses états et le compte rendu de revue. Les prompts React et Vue conservés sont des exemples à adapter à votre pile, pas des commandes intégrées garantissant un résultat.

Vérifiez les tokens, les petits écrans, le texte agrandi, les libellés longs, la navigation clavier et le focus. Contrôlez les noms accessibles, les erreurs, les contrastes, les requêtes échouées et la préférence de réduction des animations. Un build réussi ne prouve ni accessibilité ni fidélité visuelle.

Utilisez le projet GitHub comme source canonique, conservez sa notice MIT et vérifiez séparément les licences des polices et icônes ajoutées. Documentez la version d’équipe et testez une mise à jour sur un composant avant sa généralisation. Ce skill ne remplace pas le jugement produit, la recherche utilisateur ou un audit d’accessibilité.

Exemples et visuels d’origine

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

npx ui-ux-pro-max-cli init --ai claude

npm install -g ui-ux-pro-max-cli
uipro init --ai claude

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS project dashboard" --design-system -p "Thrive"

Use UI UX Pro Max to design a ProjectCard for Thrive's workspace.
First inspect our existing components, tokens, and package versions.
Query the skill for project-management UI guidance and report the query.

Users need to identify project status and open the right project quickly.
Use React, TypeScript, our existing Tailwind setup, and our icon library.
Keep the current brand colors and typeface. Do not add dependencies.

Include title, owner, updated date, status, and an overflow menu.
Cover loading, empty collection, long title, disabled action, and error states.
Use one column on narrow screens and adapt to the existing grid breakpoints.
Provide visible keyboard focus and accessible names for icon-only controls.

Deliver the component, example states, a short design rationale,
and the checks needed to verify behavior in this repository.

Use UI UX Pro Max to implement PricingCard.vue in our Vue 3 project.
Inspect the current Composition API conventions and design tokens first.
Use the project's existing styling and icon libraries.

Show plan name, price, billing period, features, and a select action.
Support monthly/yearly billing, a highlighted plan, and a current-plan state.
Use supplied prices only; do not invent savings or plan features.
Define props and emit a select event with the plan ID.
Keep the billing control and action usable with the keyboard.
Check narrow screens, long feature text, and unavailable plans.

Return the component, usage example, state coverage, and verification notes.
Explain any design decision that differs from our existing system.