TL;DRClaude Opus 5.5 sait écrire du code, mais un design réussi demande une méthode : un parti pris visuel, une palette, une typographie, des règles d'accessibilité. Deux skills Claude Code apportent cette méthode : frontend-design et, surtout, ui-ux-pro-max. Voici comment les installer, comment les utiliser, et pourquoi notre propre site a été réalisé avec le second.
Pourquoi un modèle seul ne suffit pas pour le web design#
Demandez une page d'accueil à un modèle sans consigne de design : vous obtenez une page correcte, mais générique. Mêmes cartes arrondies, mêmes dégradés, même hiérarchie que sur des milliers d'autres sites. Nous l'avons constaté en testant Claude Opus 5.5 sur de vrais projets web : le modèle est très bon pour exécuter, à condition de lui donner une direction.
C'est le rôle des skills. Un skill est un dossier d'instructions (et parfois de données ou de scripts) que Claude Code charge quand la tâche le justifie. Pour le design, il transforme « fais-moi une belle page » en une démarche : comprendre le sujet, choisir un style, fixer des jetons de design, construire, puis se relire.
Étape 1 : installer frontend-design#
frontend-design est le plugin officiel publié dans la marketplace d'Anthropic (dépôt claude-plugins-official, dossier plugins/frontend-design). Dans Claude Code, une seule commande suffit :
/plugin install frontend-design@claude-plugins-officialCe skill se déclenche tout seul dès que vous demandez une interface. Il pousse Claude à travailler en deux passes : d'abord un plan de design (palette de 4 à 6 couleurs nommées, typographies et leurs rôles, concept de mise en page), relu contre votre brief, puis seulement le code. Il liste aussi les réflexes « typiques d'une page générée par IA » à éviter, ce qui limite l'effet de déjà-vu.
Étape 2 : installer ui-ux-pro-max#
ui-ux-pro-max est celui qui fait la différence. Son dépôt : github.com/nextlevelbuilder/ui-ux-pro-max-skill (licence MIT). Il embarque une base de connaissances interrogeable : des styles visuels, 192 palettes associées à des types de produits, 74 associations de polices, 25 types de graphiques, des guides UX et des recommandations pour 22 stacks (HTML + Tailwind par défaut, React, Next.js, Vue, Laravel, Svelte, SwiftUI, Flutter...).
Deux façons de l'installer. La plus simple, directement dans Claude Code :
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skillOu avec le CLI du projet, si vous préférez installer le skill dans un projet précis, ou globalement :
npm install -g ui-ux-pro-max-cli
cd /chemin/vers/votre/projet
uipro init --ai claude
# ou pour tous vos projets
uipro init --ai claude --globalUn prérequis à connaître : Python 3 doit être disponible sur la machine, car le moteur de recherche du skill est un script Python (bibliothèque standard uniquement, sans appel réseau). Vérifiez avec python3 --version. Si le skill n'apparaît pas après l'installation, relancez Claude Code.
Étape 3 : travailler avec Claude Opus 5.5#
Sélectionnez le modèle avec la commande /model, puis décrivez simplement ce que vous voulez, comme vous le diriez à un designer :
Crée la page d'accueil d'un cabinet d'expertise comptable à Aix-en-Provence :
public de dirigeants de TPE, ton rassurant, stack HTML + Tailwind,
mode sombre, accessibilité AA.Le fonctionnement décrit par le projet est le suivant :
- Vous demandez une page, un composant ou une revue d'interface.
- Le skill génère un système de design à partir de votre type de produit : style, palette, typographies, effets.
- Claude implémente l'interface avec ces choix, dans la stack indiquée.
- Des vérifications avant livraison contrôlent les erreurs classiques : contraste, cibles tactiles, focus clavier, mouvement réduit.
Le détail qui compte pour un vrai site : l'option --persist du script de recherche enregistre le système de design dans un fichier design-system/MASTER.md, avec d'éventuels fichiers de surcharge par page. Claude relit ce fichier à chaque session, ce qui garde la cohérence d'une page à l'autre au lieu de réinventer une charte à chaque demande.
Notre site est réalisé avec ui-ux-pro-max#
Ce n'est pas un test de laboratoire : le site websource.fr que vous lisez a été réalisé avec le skill ui-ux-pro-max, piloté par Claude. Palette, typographies, composants, mode sombre, cohérence entre les pages du site : c'est ce cadre de design qui nous a évité de repartir de zéro à chaque nouvelle page, et qui nous permet de le faire évoluer sans casser l'ensemble. Le code, lui, reste celui d'un projet Symfony avec Tailwind, que nous relisons et maintenons comme n'importe quel autre.
Pour les visuels d'articles, nous nous appuyons sur un autre skill, décrit dans notre avis sur Remotion. Et pour l'audit SEO/GEO du résultat, sur les skills présentés dans notre article sur l'analyse SEO avec Claude.
frontend-design ou ui-ux-pro-max ?#
| Critère | frontend-design | ui-ux-pro-max |
|---|---|---|
| Origine | Plugin officiel Anthropic | Projet open source (MIT) |
| Apport principal | Méthode et exigence créative : plan de design, refus des choix par défaut | Base de connaissances : styles, palettes, polices, graphiques, UX, stacks |
| Cohérence multi-pages | Par le plan de design de la session | Par un fichier MASTER.md persistant |
| Prérequis | Aucun | Python 3 |
| Installation | 1 commande | 2 commandes ou CLI npm |
Les deux ne s'excluent pas : frontend-design pousse Claude à prendre un parti pris, ui-ux-pro-max lui fournit la matière et les garde-fous pour l'exécuter proprement. Si vous ne devez en installer qu'un pour un site complet, prenez ui-ux-pro-max.
Notre note : 5/5#
Note : 5/5. C'est un avis d'agence qui l'utilise en production, pas un classement comparatif. Ce qui justifie la note : un système de design réutilisable et versionnable, des recommandations concrètes plutôt que des généralités, une couverture de stacks large, une installation en deux commandes, et des contrôles d'accessibilité intégrés à la démarche.
Pour rester honnête sur les limites :
- Le skill n'a pas de goût à votre place : la qualité du résultat dépend de la précision de votre brief et de votre relecture.
- Il ne remplace ni de vrais contenus, ni de vraies photos, ni un travail de marque.
- Python 3 est indispensable pour profiter de la recherche dans la base de connaissances.
- Le code produit doit être testé et relu comme celui d'un développeur, surtout sur une stack de production.
À lire aussi#
- Claude Opus 5.5 : nous l'avons testé, voici notre avis
- Remotion, le skill Claude pour vos images
- Comment analyser le SEO de mon site web avec Claude
Questions fréquentes#
Faut-il installer frontend-design et ui-ux-pro-max ensemble ?#
Non, ce n'est pas obligatoire. frontend-design apporte une méthode créative et le refus des choix par défaut, ui-ux-pro-max apporte une base de styles, de palettes, de polices et de règles UX. Ils se complètent, mais pour un site complet, ui-ux-pro-max est le plus utile des deux.
Que faut-il installer avant ui-ux-pro-max ?#
Claude Code, et Python 3 disponible sur la machine, car le moteur de recherche du skill est un script Python qui n'utilise que la bibliothèque standard. Vous pouvez vérifier avec la commande python3 --version.
Peut-on utiliser ces skills avec un autre modèle que Claude Opus 5.5 ?#
Oui, les skills se chargent dans Claude Code quel que soit le modèle choisi. Nous les utilisons avec Claude Opus 5.5 parce qu'il suit bien des consignes de design longues et produit un code propre, mais la méthode reste la même.
Quelle stack technique le skill ui-ux-pro-max prend-il en charge ?#
HTML avec Tailwind par défaut, ainsi que React, Next.js, shadcn/ui, Vue, Nuxt, Angular, Laravel, Svelte, Astro, SwiftUI, Jetpack Compose, React Native et Flutter, entre autres. Il suffit d'indiquer la stack dans votre demande.
Article rédigé le 28/09/2026 par l'équipe Websource à partir des sources citées ci-dessus, puis relu avant publication. Une information vous semble inexacte ou datée ? Signalez-le nous, nous corrigeons.
