Testée sur une vraie tâcheCommunauté, vérifiéeDesign et front-end

UI/UX Pro Max

Une page de réservation, un formulaire ou un écran d'application vérifié selon des règles claires d'ergonomie mobile et d'accessibilité avant la mise en ligne.

Voir ce qu'elle a produit

Installez UI/UX Pro Max gratuitement

Laissez votre email et les étapes d'installation s'ouvrent ici même : un prompt à coller dans votre outil d'IA. Valable pour les 149 skills.

Notre note: 5/10
Fonctionne dans: Claude Code, Codex+6 autres
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf et plus de 60 autres outils d'IA qui lisent les skills.
Faut-il coder ?: Non
Temps jusqu'au résultat: 15 min
Créé par: Next Level Builder
Testée le: 19 oct. 2026

Sans la skill — Les deux premiers écrans sont presque identiques, avec le même titre et la même photo de l'atelier ; avec la skill, les ateliers sont sous une barre de progression en 4 étapes au lieu de panneaux numérotés.

Avec la skill — Les deux premiers écrans sont presque identiques, avec le même titre et la même photo de l'atelier ; avec la skill, les ateliers sont sous une barre de progression en 4 étapes au lieu de panneaux numérotés.

La réponse courte

UI/UX Pro Max est une skill Claude Code qui donne à Claude une bibliothèque locale consultable de styles de design, palettes de couleurs, associations de polices et 119 règles UX, plus une checklist à dérouler avant la livraison. Elle convient aux fondateurs et petites équipes qui créent des parcours de réservation, formulaires et écrans d'application devant bien fonctionner sur téléphone et pour tous. Notre verdict est de 5/10 : avec le même prompt, Claude seul a construit une page de réservation accessible presque identique, et la skill a surtout ajouté un parcours mobile étape par étape et une checklist plus stricte, tandis que son générateur de design system a raté deux fois.

Idéal pour : Vérifier un parcours de réservation ou de paiement selon des règles d'accessibilité et d'ergonomie mobile avant le lancement.

Envie de ce résultat dans votre propre travail ?

Inscrivez-vous gratuitement et installez UI/UX Pro Max en une minute environ. Un seul email ouvre les étapes d'installation de toutes les skills du site.

Quand l'utiliser

Un parcours de réservation qui marche sur téléphone

Vous prenez des réservations pour des cours ou des rendez-vous et la plupart des visiteurs sont sur téléphone. Lors de notre test, elle a construit un parcours en 4 étapes avec barre de progression, une barre fixe en bas avec votre choix et le prix, et une date complète signalée par du texte, pas seulement par la couleur.

Vérification d'accessibilité avant le lancement

Votre formulaire ou votre page est presque terminé et vous voulez qu'il soit utilisable par tous. Demandez à Claude de dérouler la checklist de la skill : contraste de texte de 4.5 pour 1, zones tactiles de 44 pixels, focus visible, erreurs claires et un test à 200% de taille de texte.

Polices et couleurs pour une application

Vous démarrez un écran d'application ou un tableau de bord et avez besoin d'une palette et d'une paire de polices. La skill cherche dans sa bibliothèque de 192 palettes et 74 associations de polices par type de produit, ce qui marche mieux pour les types de produits courants.

Comment obtenir un excellent résultat

Installez-la (étapes ci-dessous)
Utilisez-la dans Claude Code avec Python 3 sur votre ordinateur. L'outil de recherche n'utilise que Python standard, donc rien d'autre à installer.
Décrivez le parcours et les utilisateurs
Dites ce que les gens doivent faire étape par étape, sur quel appareil, et les vraies contraintes comme les dates ou les créneaux complets. La skill commence par noter le type de produit, le public, les mots de style et votre stack technique, et elle ne devine pas la stack.
Vérifiez le design system choisi
Claude lance une recherche de design system, réessaie une fois si le résultat ne convient pas, et vous dit si rien ne correspond. Lors de notre test, les deux essais ont raté (une palette de coworking, puis du noir et blanc), il a donc choisi style, palette et polices par des recherches séparées.
Laissez-la dérouler la checklist
Après la construction, Claude parcourt la checklist avant livraison de la skill et, si possible, prend des captures en taille téléphone, paysage et ordinateur, en mode clair et sombre. Lors de notre test, cela a repéré une zone tactile de 36 pixels de large et une barre récapitulative qui passait sur quatre lignes.
Connectez la vraie réservation
Complétez chaque [placeholder], comme les heures de début et la politique d'annulation. Le bouton de confirmation ne fait que simuler une réservation, demandez donc à la personne qui gère votre site de le relier à votre système de réservation ou d'e-mail.

Voici le prompt exact avec lequel nous avons commencé notre test :

Le prompt utilisé

Conçois et construis une page de réservation d'ateliers pour Clay & Co, en un seul fichier HTML responsive, out/index.html (CSS et JS dedans). Parcours : choisir un atelier, choisir l'une des prochaines dates, saisir nom et e-mail, confirmer, voir une confirmation. Prochaines dates pour chaque atelier : jeudi 5 novembre, samedi 7 novembre, jeudi 12 novembre et samedi 14 novembre 2026. Le samedi 7 novembre est complet. Elle doit très bien fonctionner sur téléphone et être accessible.

Tout ce qu'elle a produit

Chaque élément ci-dessous est un vrai résultat de notre test, ouvert comme vous l'ouvririez.

Avec la skill, sur téléphone — Avec la skill : une étape à la fois avec une barre de progression, les prix sur chaque fiche d'atelier et un récapitulatif de réservation à côté du parcours ; sur téléphone, une barre fixe en bas porte Retour et Continuer.

Sans la skill, sur téléphone — Sans la skill : atelier, date et formulaire de contact sur une seule page, avec le samedi 7 novembre barré comme complet et le total avec le bouton de confirmation dans un panneau latéral.

Le déroulé de la session

La conversation de notre test, raccourcie. Environ 15 minutes entre le premier prompt et le résultat final.

Vous: Conçois et construis une page de réservation d'ateliers pour Clay & Co, en un seul fichier HTML responsive (CSS et JS dedans). Parcours : choisir un atelier, choisir l'une des prochaines dates, saisir nom et e-mail, confirmer, voir une confirmation. Prochaines dates pour chaque atelier : jeudi 5 novembre, samedi 7 novembre, jeudi 12 novembre et samedi 14 novembre 2026. Le samedi 7 novembre est complet. Elle doit très bien fonctionner sur téléphone et être accessible. [Fiche d'informations et 8 photos de l'atelier jointes.]
AI: C'est une petite boutique artisanale avec un parcours de réservation, utilisé surtout sur téléphone. Mots de style : artisanal, chaleureux, calme. La stack est HTML, CSS et JS simples, comme demandé.
AI: Aucune correspondance produit. Elle a suggéré du minimalisme suisse, une palette ambre et « booking blue » issue d'un profil de coworking, et les polices Amatic SC. Ça ne convient pas.
AI: Cela correspondait à un studio photo : noir et blanc, Plus Jakarta Sans. Pas adapté non plus. La skill dit d'arrêter après un nouvel essai, donc aucun design system vérifié n'a été trouvé et je ne l'enregistre pas.
AI: Choix : le style « Nature Distilled » pour les produits artisanaux, une palette terre cuite chaleureuse sur fond avoine, Lora avec Raleway. Règles UX : un résumé d'erreurs focalisable, des erreurs en ligne, une progression par étapes avec Retour, des options indisponibles signalées par du texte et pas seulement par la couleur, le focus déplacé à chaque étape.
AI: 7 problèmes corrigés : un bouton masqué toujours visible, un lien d'en-tête de 36px, des puces d'erreur mal alignées, une barre récapitulative sur 4 lignes, un espace sous les images des fiches sur téléphone, des libellés d'étapes masqués sur téléphone et une photo d'introduction qui poussait le parcours sous la ligne de flottaison.
AI: Terminé : out/index.html. Le bouton de confirmation simule la demande, puisqu'il n'y a pas de système de réservation. Champs à compléter : heures de début, une ligne par atelier sur ce qu'on y fabrique, conditions de paiement et d'annulation, ce que l'atelier envoie après la réservation. Une place par réservation. Environ 15 minutes.

Ce qui a marché et ce qui a coincé

Ce qui a marché

Un parcours mobile plus soigné que celui de Claude seul : une étape à la fois avec une barre de progression, une barre fixe en bas affichant votre choix et le prix (« Make a Mug, Thu, Nov 12, $80 ») et le bouton Retour du navigateur qui ramène à l'étape précédente.
Sa checklist a repéré de petits défauts que Claude seul n'avait pas testés : un lien d'en-tête de 36px de large, sous la taille tactile de 44px, un bouton masqué qui restait visible et une barre récapitulative qui passait sur quatre lignes.
Le samedi 7 novembre est affiché « Fully booked » avec une icône et une bordure en pointillés, pas seulement par la couleur, et les dates ouvertes indiquent « Seats available » dans un vert dont le contraste a été vérifié.
Elle a été honnête quand sa propre base de données a raté : elle a signalé les deux résultats de design system inadaptés au lieu de les utiliser.

Ce qui a coincé

La différence est faible : Claude seul, avec le même prompt, a construit presque la même page (même titre sombre, même photo de l'atelier, fiches photo, résumé d'erreurs, date complète, mode sombre) en environ 12 minutes.
La fonction phare de la skill, le générateur de design system, a raté deux fois pour un atelier de poterie, donc le style final a été choisi à la main à partir de recherches séparées.
L'assistant cache les dates derrière un appui sur Continue, alors que la version de Claude seul montre atelier, dates et formulaire sur un seul écran ; la carte d'avis affiche cinq étoiles pleines pour une note de 4.9.

Envie de ce résultat dans votre propre travail ?

Inscrivez-vous gratuitement et installez UI/UX Pro Max en une minute environ. Un seul email ouvre les étapes d'installation de toutes les skills du site.

Des prompts qui marchent

Remplacez les parties entre crochets par vos propres informations. Inutile de nommer la skill : demandez la tâche et votre outil d'IA l'utilise tout seul.

Page de réservation d'ateliers ou de cours

Conçois et construis une page de réservation pour [nom de l'entreprise], en un seul fichier HTML responsive. Parcours : choisir un [cours / atelier / service], choisir l'une des prochaines dates, saisir nom et e-mail, confirmer, voir une confirmation. Prochaines dates : [liste]. Le [date] est complet. Elle doit très bien fonctionner sur téléphone et être accessible. Utilise uniquement ces informations et marque le reste en [placeholder] : [collez les informations].

Revue d'accessibilité d'une page

Passe cette page en revue selon tes règles d'accessibilité et tactiles : contraste, taille des zones tactiles, focus, libellés et erreurs de formulaire. Liste ce qui échoue avec la mesure, puis corrige. Voici la page : [collez le HTML ou le fichier].

Palette et polices pour une application

Propose une palette de couleurs et une association de polices pour une application de [type, par ex. méditation / fitness / facturation] destinée à [public]. Dis-moi si ta recherche a trouvé une vraie correspondance ou s'il s'agit de conseils généraux, puis construis l'écran d'accueil.

Réparer un paiement ou un formulaire laborieux

Mon formulaire de [paiement / inscription / contact] est confus sur téléphone. Reconstruis-le avec des étapes claires, des libellés visibles, des erreurs en ligne et un récapitulatif de ce que la personne a choisi. Garde mes champs : [liste des champs]. Voici le formulaire actuel : [collez].

Conseils tirés de notre test

Donnez-lui les vraies contraintes de votre réservation : dates, créneaux complets, places par réservation. Lors de notre test, cela lui a permis de signaler la date complète par du texte et une icône, pas seulement par la couleur.
Demandez à Claude si sa recherche de design system a trouvé une correspondance vérifiée. La skill lui demande de le dire quand une recherche rate, et lors de notre test les deux essais ont raté pour un atelier de poterie.
Nommez votre stack technique, ou dites « un seul fichier HTML ». La skill refuse de supposer une stack, et ses conseils couvrent 22 options comme React, Next.js, Vue et Flutter, mais pas Shopify ni WordPress.
Demandez le déroulé de la checklist avec des captures en taille téléphone, paysage, ordinateur et à 200% de taille de texte. C'est là qu'elle a trouvé de vrais défauts lors de notre test.
Décidez si vous voulez une étape à la fois ou tout sur une seule page. La skill a construit un assistant en 4 étapes, alors que Claude seul a gardé toutes les étapes visibles, ce qui demande moins d'appuis pour un formulaire court.

Ce qu'il vous faut : Les skills de l'application Claude fonctionnent avec toutes les offres Claude, Free comprise, avec l'exécution de code et la création de fichiers activées ; Claude Code demande Pro ou plus. L'outil de recherche de cette skill demande Python 3, et l'installation dans Claude.ai n'est pas documentée, donc en pratique elle tourne dans Claude Code..

Comment l'installer

Les skills suivent le standard ouvert Agent Skills, celle-ci n'est donc pas liée à une seule entreprise. Choisissez l'outil d'IA que vous utilisez. Vous hésitez ? Le premier onglet couvre la plupart d'entre eux en une étape.

Le plus simple : collez ceci dans votre outil d'IA

Installe cette skill pour qu'elle fonctionne dans tous mes projets : exécute `npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-ux-pro-max -g -y` dans mon terminal. S'il manque Node.js, explique-moi d'abord comment l'installer. Une fois terminé, confirme que la skill est installée et dis-moi comment commencer à l'utiliser.

Ou faites-le vous-même :

Une seule commande installe la skill dans les outils d'IA de votre ordinateur. Elle détecte ceux que vous avez et vous demande où l'ajouter : Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode et plus de 60 autres.

$npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-ux-pro-max -g

Node.js doit être installé (gratuit, sur nodejs.org). L'option -g rend la skill disponible dans tous vos projets.

Bon à savoir : Un CLI compagnon (uipro) peut aussi l'installer.

Débloquez les étapes d'installation

Gratuit. Laissez votre email une seule fois pour ouvrir les étapes d'installation des 149 skills, et recevez chaque mois les meilleures nouvelles skills.

Comment nous l'avons vérifié

Nous avons vérifié la skill à sa source d'origine le 18 octobre 2026 : le SKILL.md est au bon endroit, les fichiers ont été mis à jour au cours de l'année et la licence (MIT) autorise son usage. Puis, le 19 octobre 2026, nous l'avons installée, utilisée sur la tâche ci-dessus sans la modifier, et noté ce qui s'est passé, y compris ce qui n'a pas marché.

Questions fréquentes

Faut-il coder pour utiliser UI/UX Pro Max ?

Non. Claude lance l'outil de recherche et écrit le code. Vous devez en revanche juger ses suggestions de design, car lors de notre test ses résultats de design system ne convenaient pas à l'activité.

Quelle offre ou quels outils demande-t-elle ?

Les skills de l'application Claude fonctionnent avec toutes les offres Claude, Free comprise, avec l'exécution de code et la création de fichiers activées ; Claude Code demande Pro ou plus. L'outil de recherche de cette skill demande aussi Python 3 sur votre ordinateur, sans paquet supplémentaire.

Fonctionne-t-elle dans Claude.ai ou seulement dans Claude Code ?

Elle est conçue pour Claude Code, où vous l'ajoutez comme plugin, et un installateur en ligne de commande associé peut aussi la configurer. L'installation dans Claude.ai n'est pas documentée, et le projet prévient que son téléchargement complet est trop gros pour la limite d'import de 200 fichiers de Claude.ai.

Est-elle meilleure qu'une simple demande à Claude ?

À peine, lors de notre test. Avec le même prompt de réservation, Claude seul a construit presque la même page, avec le même titre, les fiches photo, le résumé d'erreurs, la date complète et le mode sombre. La skill en a fait un parcours en 4 étapes avec une barre fixe sur téléphone, et sa checklist a repéré quelques petits défauts, comme une zone tactile trop petite, mais son générateur de design system a raté deux fois.

Fonctionne-t-elle avec mon créateur de site ou mon framework ?

Elle a des conseils adaptés pour 22 stacks techniques, dont React, Next.js, Vue, Svelte, Astro, Laravel, SwiftUI, Flutter et HTML simple avec Tailwind. Shopify et WordPress ne figurent pas dans cette liste, vous n'obtenez donc pour eux que ses règles générales d'UX et d'accessibilité.