Guide, Design web pro avec Claude Code

Claude Code produit par défaut des interfaces génériques : polices banales, dégradés violets sur fond blanc, mises en page prévisibles. Trois outils corrigent ça, et ils s'empilent.

Étape 1, le skill officiel d'Anthropic

Deux commandes dans Claude Code, l'une après l'autre :

/plugin marketplace add anthropics/claude-code
/plugin install frontend-design@claude-code-plugins

Il s'active tout seul dès que vous demandez une interface. Rien à lancer.

Ce qu'il interdit à Claude : les polices génériques (Inter, Roboto, Open Sans, Arial), le dégradé violet sur fond blanc, les mises en page sans caractère.

Ce qu'il pousse à la place : des polices qui ont une personnalité (JetBrains Mono, Playfair Display, Crimson Pro, IBM Plex), une police d'affichage associée à une police de lecture, et une couleur dominante forte avec des accents tranchés.

Étape 2, ui-ux-pro-max

Le skill communautaire le plus populaire du domaine. Il donne accès à plus de cinquante styles de design, cent soixante et une palettes, cinquante-sept associations de polices et près de deux mille Google Fonts.

npx skills add nextlevelbuilder/ui-ux-pro-max-skill@ui-ux-pro-max -g -y

Pour vérifier l'installation, demandez à Claude quels skills de design il a.

Il applique aussi une liste de contrôle avant livraison : icônes en SVG et non en émoji, aucun décalage visuel au survol, curseur adapté sur ce qui se clique, animations entre 150 et 300 millisecondes, états de chargement présents, contraste correct en clair comme en sombre, et les bases d'accessibilité.

Étape 3, le MCP 21st.dev, facultatif

Il génère des composants prêts à l'emploi directement dans votre projet. Créez un compte sur 21st.dev, récupérez votre clé, puis demandez à Claude d'ajouter le serveur MCP avec cette clé. Il s'occupe de la configuration.

Ensuite, tapez /ui suivi de ce que vous voulez : une barre de navigation, une carte de statistiques, une section d'accueil.

L'ordre qui donne le meilleur résultat

1. Demandez d'abord un système de design pour votre projet, avant d'écrire la moindre page. C'est l'étape qui décide de tout le reste.
2. Décrivez ensuite votre page, le skill de design s'active seul.
3. Utilisez /ui pour les éléments précis.
4. Itérez : « rends ça plus moderne », « change la palette », « ajoute une animation ».

L'étape 1 est celle qu'on saute et qu'il ne faut pas sauter. Sans système de design établi d'abord, chaque page repart d'un choix neuf et le site finit cohérent nulle part.

Pour aller plus loin

Demandez à Claude d'installer shadcn-ui pour des composants prêts, web-accessibility pour l'accessibilité, web-design-guidelines de Vercel pour les bonnes pratiques, et ui-animation pour les finitions. Pour les maintenir, demandez-lui simplement de vérifier et mettre à jour vos skills.

Où ça se trouve

Cette ressource vit chez son auteur, et c'est mieux ainsi : elle y reste à jour. https://github.com/nextlevelbuilder/ui-ux-pro-max-skill