Pourquoi Claude produit un design générique par défaut, les 5 compétences qui corrigent cela en pratique, et le pas-à-pas pour créer la vôtre quand aucune ne correspond à votre marque.
Vous savez déjà la reconnaître. Dégradé violet sur fond blanc, police Inter, ombre portée douce sur la carte, un emoji perdu au milieu de la section. Vous la regardez et vous pensez : Claude a fait ça.
Ce n’est pas la faute du modèle. C’est son comportement par défaut.
Quand vous demandez de « construire une page d’accueil » sans aucune instruction supplémentaire, le modèle ne va pas chercher le choix le plus intéressant. Il va chercher le plus probable. Et le choix le plus probable est la moyenne de tout ce qu’il a vu pendant l’entraînement : des millions de pages sûres, génériques, oubliables. Le résultat est un design qui ressemble à du design IA parce que c’est littéralement le centre statistique de ce qui existe sur le web.
Anthropic a un nom pour ça, ils appellent ça la convergence distributionnelle. En pratique, ça signifie une chose : sans direction, Claude tombe toujours dans le banal.
Une compétence est ce qui permet de l’en sortir.
Qu’est-ce qu’une compétence, rapidement
Pensez à un fichier markdown (texte) que Claude lit avant de commencer à travailler. Au lieu de répéter vos préférences, votre système de design et votre ton dans chaque prompt, vous l’écrivez une fois et il se charge automatiquement. C’est une description de poste que vous lui transmettez avant de lui confier la tâche.
La différence dans le résultat est énorme. Même prompt, même Claude, mais avec la bonne compétence chargée, il cesse d’être un designer générique et devient un collaborateur qui connaît votre travail.
J’en ai testé un paquet, avec des avant-après sur le même prompt pour voir ce qui fait vraiment la différence. On peut en isoler 5 qui font vraiment bouger l’aiguille pour le design web.
1. Frontend Design (la compétence officielle d’Anthropic)
C’est la plus populaire de l’écosystème, et pour une bonne raison : elle a été publiée par Anthropic elle-même. Elle a dépassé les 277 000 installations.
Son secret n’est pas d’apprendre à Claude à dessiner joliment ; c’est de lui apprendre ce qu’il ne faut pas faire. Le fichier liste explicitement les clichés à éviter : les polices trop utilisées, les schémas de couleurs habituels, cette structure d’ombre portée sur les cartes que tout le monde reconnaît. C’est une petite leçon de bon goût intégrée au modèle.
Dans le test avant-après, ça devient évident. La même page d’accueil qui sortait avec un dégradé violet et un emoji se transforme en quelque chose d’éditorial, avec un élégant mélange de serif et de sans-serif propres, des animations de fondu au défilement et des états de survol réfléchis. À partir d’un seul prompt.
Quand l’utiliser : Quand vous démarrez un projet de zéro et que vous voulez échapper au défaut dès le premier essai. C’est votre base.
Et elle ne vous enferme pas dans son style. Si vous voulez le reste des règles mais seulement des polices sans-serif, modifiez le markdown et dites-lui : « utilise uniquement Geist, Google Sans ou DM Sans. » Claude ajuste le fichier.
2. Impeccable (la boîte à outils)
Créée par Paul Bakaus, elle est devenue l’une des préférées de la communauté, dépassant les 45,9k étoiles sur GitHub en peu de temps. Et on comprend pourquoi.
Ce qui est cool, ce sont les commandes. Il y a le /impeccable pur, mais il est accompagné d’environ 20 sous-commandes que vous appelez selon le contexte :
- /impeccable animate ajoute des animations d’introduction et du mouvement de façon cohérente, d’une manière qui a du sens pour la page
- /impeccable quieter effectue un audit du « bruit » dans le design (trop de dégradés, poids de police lourd sur chaque titre, emojis dispersés) et coupe le superflu, apportant de l’élégance au lieu de crier
- /impeccable audit fait une vérification de qualité et d’accessibilité
- /impeccable document génère un design.md qui capture l’intégralité de votre système de design pour que n’importe quel agent puisse le lire plus tard
En dessous, il y a 46 règles déterministes pour la détection de « slop » — celles qui s’exécutent sans dépendre des suppositions du modèle. Il repère les motifs générés par l’IA avec précision.
Quand l’utiliser : Pour itérer sur ce que vous avez déjà. Vous avez une page prête et vous voulez calmer l’exagération ? quieter. Manque de vie ? animate. En deux prompts, le site change de niveau.
Un détail qui va au-delà de l’outil : Impeccable a un onglet « slop » qui montre les motifs qu’il apprend à l’IA à éviter. Regardez cette liste vous-même. Apprendre à reconnaître qu’une bordure d’accent sur le côté d’une carte est devenue un cliché IA vous rend meilleur en design même manuellement.
3. UIUX Pro Max (celle qui force Claude à réfléchir)
C’est une base de données de design surpuissante, et la plus étoilée de la liste : elle a dépassé les 105k étoiles sur GitHub. Il y a 67 styles d’UI, 161 palettes de couleurs, 57 paires de polices, 99 directives UX et 16 stacks techniques pour qu’il sache comment implémenter dans chaque framework.
Son intérêt n’est pas de vous donner du code rapidement ; c’est l’inverse. Elle force Claude à raisonner avant d’écrire une ligne. Elle passe votre mise en page à travers une recherche dans cinq domaines en parallèle (produit, style, couleur, landing, typographie), applique des règles de raisonnement, et seulement ensuite renvoie un système de design complet, avec les anti-motifs à éviter déjà marqués.
https://x.com/nett0eth/status/2073490435066982554
Le résultat est des sections intentionnelles, pas décoratives. Dans le test, elle a fait des choses comme une transition clair-sombre juste dans le bloc de KPI, spécifiquement pour mettre en évidence le nombre qui doit ressortir. C’est le genre de décision que vous attendez d’un humain, pas d’un générateur.
Quand l’utiliser : Quand vous avez une idée claire du contenu et que vous voulez de la profondeur de design. Et un conseil qui vaut de l’or : plus vous êtes précis sur ce que vous voulez dans chaque section, mieux c’est. Une compétence ne lit pas dans vos pensées ; elle amplifie votre direction. Envoyer « utilise la compétence et fais un redesign plus radical, explore les palettes et les paires de polices » change complètement ce qui revient.
4. Web Design Guidelines (l’auditeur, de Vercel Labs)
Celle-ci est pour la fin du projet, pas le début. Elle vient de Vercel Labs, a 29k étoiles sur GitHub, et audite votre code par rapport à la liste de directives d’interface web de Vercel, plus de 100 règles : focus clavier fonctionnel, zoom jamais désactivé, ne pas bloquer le collage, indicateur de chargement sur les boutons, hiérarchie des titres, ARIA, etc.
Et elle a une astuce que j’aime : vous pouvez demander à Claude d’annoter les problèmes directement sur l’écran de prévisualisation. Au lieu de lire une liste, vous voyez sur le site, en orange, où il manque un aria-label, où la navigation au clavier casse, où le CTA manque de focus. Ça devient visuel.
Quand l’utiliser : Quand le design est déjà bon et que vous voulez vous assurer qu’il est accessible et qu’il n’embarrassera personne utilisant un clavier ou un lecteur d’écran. C’est le QA avant la mise en ligne.
5. Astryx (le système de design prêt pour les agents, de Meta)
https://x.com/nett0eth/status/2073826299789889884
La cinquième est dans une autre catégorie : ce n’est pas une compétence de goût, c’est un système de design entier. Les 4 ci-dessus apprennent à Claude à mieux designer, un écran à la fois. Meta a parié sur le chemin inverse et a ouvert Astryx, le système de design qui a grandi pendant 8 ans en interne, est devenu le plus grand et le plus utilisé dans l’entreprise, et tourne dans plus de 13 000 apps. Maintenant il est open source et, le détail qui compte ici, prêt pour les agents.
L’astuce est la suivante : au lieu d’espérer que le modèle ait du bon sens pour chaque composant, vous lui donnez un système où tout est déjà né accessible et cohérent. Il y a plus de 150 composants, 7 thèmes prêts à l’emploi, le mode sombre, et une CLI que la personne et l’agent utilisent de la même manière, en lisant la même doc. Il y a même un CLAUDE.md dans le dépôt pour que Claude comprenne la maison avant d’écrire la première ligne.
Il tourne sur React et StyleX, est en bêta, et a déjà 8,2k étoiles.
Quand l’utiliser : Quand vous voulez de la cohérence système, pas seulement un joli écran. Les compétences affinent le goût du modèle ; Astryx garantit que la fondation est déjà solide avant tout prompt. Les deux se complètent.
Où trouver plus de compétences
Ces 5 couvrent environ 90 % de ce qu’un designer web fait avec Claude. Mais si vous voulez explorer, il y a de bons répertoires :
- UI Skills est axé sur les ingénieurs design mais sert aussi pour le design web. Il liste plusieurs de ces 4 et a des trucs sur l’accessibilité et Shadcn.
- Type UI est mon préféré pour ceux qui pensent d’abord visuel. Vous défiles et voyez un aperçu de chaque esthétique (minimaliste, néo-brutalisme, corporate sophistiqué) et vous appelez celle que vous voulez sans écrire un paragraphe d’instructions.
- MCP Market est un grand dépôt communautaire ; allez dans Agent Skills > Categories > Design Tools et il y a une liste sans fin.
- skills.sh est l’endroit où Vercel et d’autres publient officiellement, bien pour l’avoir directement de la source.
Comment créer votre propre compétence
Quand aucune d’entre elles ne correspond à 100 % à votre marque ou à votre stack. C’est là que vous créez la vôtre.
Dans l’app Claude ou Claude Code, allez dans Customize > Skills > Create Skill > Create with Claude. Il commence par vous demander ce que la compétence doit faire.
La partie qui sépare une compétence utile d’une inutile, c’est à quel point vous êtes précis ici. Au lieu de « faire un joli design », donnez des règles de raisonnement. Par exemple :
- Identifie toujours d’abord le type de produit (dashboard, landing, app), car le design change selon le contexte.
- Infère toujours l’objectif de l’écran avant de dessiner : quelle action est la plus importante et ce que l’utilisateur doit remarquer en premier.
- Par défaut, utilise une palette contenue, un fond et une surface plus neutres.
- Une police de corps principale et, si nécessaire, une police d’affichage pour les grands titres.
Claude démarre une conversation et vous interroge sur votre stack (Tailwind tokens, par exemple), vos proportions d’espacement, vos limites de mise en page. Soyez détaillé ; c’est ce qui rend la compétence valable. À la fin, il empaquette tout dans un .md avec des dossiers de référence, et vous y accédez via votre propre commande slash.
Mais créer la compétence est la partie facile. La partie difficile est de s’assurer qu’elle ne casse pas à la session suivante, et c’est là qu’intervient l’axe que beaucoup de gens sautent. J’ai déjà décomposé le framework en 8 étapes de Matt Pocock pour écrire des compétences qui tiennent la route (déclencheur, structure, direction, élagage) dans un article séparé, et ça vaut plus que n’importe quelle compétence de design que vous installez :
https://x.com/nett0eth/status/2075976597513830727
Ça vaut le coup de lire ensemble ; c’est le même raisonnement de « donner la bonne règle au modèle » appliqué un niveau au-dessus. Le guide officiel d’Anthropic, The Complete Guide to Building Skills for Claude, décompose aussi les principes.
Ce qu’il reste
Claude n’est pas un designer impressionnant par défaut. Ce n’est une nouveauté pour personne qui a demandé une page d’accueil et reçu le dégradé violet habituel.
La compétence est ce qui comble cet écart. Pas parce que le modèle est devenu plus intelligent, mais parce que vous lui avez donné la règle qu’un vrai designer a dans la tête. Le modèle compte moins que la boucle que vous construisez autour de lui.
Configurez-la une fois. Le bond dans le résultat est suffisamment grand pour que vous ne vouliez plus travailler sans.
La question demeure : combien de vos projets sortent encore avec le dégradé violet habituel simplement parce que vous n’avez jamais chargé une compétence avant de demander ? Enregistrez et partagez 👍
Sources / liens :
- Frontend Design (Anthropic)
- Impeccable (Paul Bakaus)
- Web Design Guidelines (Vercel Labs)
- UIUX Pro Max
- Astryx (système de design prêt pour les agents, de Meta)
- The Complete Guide to Building Skills for Claude
- Mon dernier article (framework en 8 étapes pour créer des compétences) :
