42 skills Claude pour tuer le « look IA »
Un dégradé violet, la font Inter, quatre cartes en grille, un hover mou : tous les sites générés par IA se ressemblent. La parade tient dans des fichiers de quelques Ko qui réécrivent le goût par défaut du modèle avant la première ligne de CSS.
Pourquoi tout ce que génère un agent se ressemble
Un modèle génératif ne choisit pas, il converge. Laissé à lui-même, il produit la médiane statistique de tout ce qu'il a vu : le layout le plus fréquent, la palette la plus consensuelle, la typo la plus neutre. C'est exactement ce qu'on appelle le slop, et j'en parlais déjà dans mon article sur la DA sans « look IA » : le problème n'est pas la puissance brute du modèle, c'est son absence d'opinion.
Un skill change ça. C'est un fichier SKILL.md : des règles de design injectées dans le contexte de l'agent, qui écrasent son goût par défaut avant qu'il ne produise quoi que ce soit. Fonts bannies, grille imposée, motion cadrée, tokens obligatoires. Artem Novitckii en a recensé 42, rangés en six couches, et c'est la meilleure cartographie du sujet que j'aie lue. Ce qui suit est ma lecture de ce catalogue, passée au filtre de ma pratique : j'en utilise plusieurs au quotidien, sur ce book comme sur mes design systems.
Quatre skills, pas quarante-deux.
Chaque skill installé consomme du contexte et dilue les autres. Empiler les 42 ne donne pas 42 fois plus de goût, ça donne un agent confus. La stack qui change réellement la sortie tient en quatre rôles, un skill par rôle.
frontend-design
Le plancher esthétique. Un seul des trois candidats, jamais deux : ils se contredisent.
ou impeccable · ou design-taste-frontendanimate
De l'animation qui ne fait pas cheap : sorties plus rapides que les entrées, 60 fps, reduced-motion respecté.
Emil Kowalski · via delphi-aitheme-factory
Un vrai système de tokens en variables CSS. Fin des hex inventés à la volée composant par composant.
Composio · awesome-codex-skillsplaywright-mcp
La boucle de feedback. Sans elle, vous croyez un modèle aveugle sur parole. Avec, il note son propre travail.
Microsoft · le plus haut levier de la listeLes six couches, fiche par fiche.
Chaque fiche porte sa commande d'installation, copiable en un clic, et le lien vers le dépôt de son créateur. Filtrez par couche ou cherchez par nom.
Frontend & UI
10 skillsC'est ici que meurt l'essentiel du slop. On prend une seule couche de goût de base parmi les trois premières, puis on ajoute le motion et la boucle de feedback.
frontend-design
Anthropic
Le socle consensuel. Force l'agent à s'engager sur une direction esthétique assumée et à répondre aux questions d'usage, de ton et de contraintes avant d'écrire du CSS. Bannit les fonts par défaut.
npx skills add anthropics/skills --skill frontend-designimpeccable
Paul Bakaus
23 commandes d'un mot (polish, critique, animate) qui déroulent une passe qualité déterministe : grille 4 px, couleur OKLCH, typo fluide, contraste AA. Deux modes, marque et produit.
npx impeccable install && /impeccable initdesign-taste-frontend
Leonxlnx
Trois curseurs (variance, motion, densité) qui poussent l'agent à appliquer un vrai parti pris par défaut : layouts asymétriques, animation, stack opinionée. Il arrête de demander la permission.
npx skills add Leonxlnx/taste-skill --skill design-taste-frontendanimate
Emil Kowalski · delphi-ai
Les règles de motion d'Emil Kowalski en dur : sorties plus rapides que les entrées, transform et opacity uniquement pour tenir les 60 fps, respect du reduced-motion.
npx skills add delphi-ai/animate-skill --skill animatedesign-motion-principles
kylezantos
Un auditeur de motion qui dose retenue, polish et espièglerie selon le contexte. Flague les départs en scale(0), les easings nus et le reduced-motion manquant.
npx skills add kylezantos/design-motion-principlestheme-factory
Composio
Génère un vrai système de tokens (couleurs, spacing, échelles typo) en variables CSS. Fini le hex inventé à la volée pour chaque composant.
/plugin marketplace add ComposioHQ/awesome-codex-skillsfigma → code
GLips · Figma MCP
Quand le fichier Figma existe déjà : traduction fidèle vers du code de production qui respecte le design system, tous les états générés en une seule passe.
claude mcp add figma -- npx figma-developer-mcp --stdioplaywright-mcp
Microsoft
Le levier le plus puissant de toute la liste : des yeux. L'agent ouvre un vrai navigateur, capture chaque page sur plusieurs viewports, compare à la référence et corrige.
claude mcp add playwright -s user -- npx @playwright/mcp@latestbrandkit
Leonxlnx
Des brand boards en un shot : pistes de logo, palette, typographie, mockups par catégorie. Des frames de référence qu'on tend ensuite à Claude Code pour le vrai code.
npx skills add Leonxlnx/taste-skill --skill brandkitdesigner-skills
Owl Listener
Tout le travail de process que les juniors sautent : discovery, stratégie UX, specs de handoff, checklists QA. Fort sur la méthode, à coupler avec une couche de goût.
/plugin marketplace add Owl-Listener/designer-skillsImage, graphisme, 3D & vidéo
8 skillsGénérer les assets (visuels, graphiques sociaux, art génératif, vidéo programmatique, 3D, After Effects) sans jamais sortir de l'agent.
nano-banana
Devon Jones
Générer et retoucher des images dans le terminal via Gemini : headers, thumbnails, mockups, redesign de pièce. Raffinement multi-tours, environ 0,04 $ l'image.
/plugin install nano-banana@devon-claude-skillsbanana-claude
Daniel Agrici
Le wrapper d'image plus malin : Claude interprète l'intention et construit le prompt à votre place avec une formule en cinq parties. 13 modes et une grosse bibliothèque de prompts.
/plugin marketplace add AgriciDaniel/banana-claudecanvas-design
Anthropic
De vrais PNG et PDF éditables (carrousels, quote cards, infographies) construits en code, donc fonts, couleurs et logos restent justes.
npx skills add anthropics/skills --skill canvas-designalgorithmic-art
Anthropic
Visuels génératifs pilotés par le code : flow fields, bruit, particules. Unique à chaque rendu, parfait pour les fonds et textures de hero. Jamais un air de banque d'images.
npx skills add anthropics/skills --skill algorithmic-artremotion-superpowers
Dojo Coding
Un studio vidéo complet dans Claude Code : voix off, musique, footage, sous-titres, transitions, et une boucle render → review → fix. Du React en entrée, un MP4 en sortie.
/plugin marketplace add DojoCodingLabs/remotion-superpowersclaude-remotion
Remotion
La porte d'entrée légère vers la vidéo programmatique. On décrit en langage naturel, Claude écrit le TypeScript, Remotion rend image par image. Idéal explainers et format court.
npx create-video@latestblender-motion
LobzyJay · MCP ahujasid
Piloter Blender en texte (objets, matériaux, lumières, caméras, rendus) via le MCP Blender. Claude écrit le Python bpy, vous dirigez. Aucune compétence 3D requise.
npx skills add LobzyJay/motion-design-with-claude --skill blender-motionaftereffects-motion
LobzyJay · MCP TheLlamainator
Animer dans After Effects depuis un prompt : commandes MCP en direct ou JSX généré avec expressions ExtendScript et catalogue d'effets.
npx skills add LobzyJay/motion-design-with-claude --skill aftereffects-motionClaude Design, le canvas
4 usagesPas des skills à installer mais quatre façons d'exploiter le produit design de claude.ai : le chat à gauche, un canvas basé code à droite, donc fonts, couleurs et logos restent éditables. Plan payant, web uniquement.
Mockups haute fidélité
Anthropic · Claude Design
Des écrans web et app finis, qu'on itère élément par élément dans la conversation, ce qu'un générateur d'images plat ne sait pas faire.
Design systems
Anthropic · Claude Design
Entraîner le canvas sur sa marque (logo, fonts, couleurs) pour qu'il applique le système partout. On en garde plusieurs et on bascule par projet.
Templates
Anthropic · Claude Design
Construire une version parfaite, la sauver, la coupler à n'importe quel design system. Le truc central pour du contenu répétable qui reste propre.
Slide decks
Anthropic · Claude Design
Des présentations depuis un template et vos couleurs de marque, exportables, ou reprises dans Claude Code pour finir en vrai site.
Interaction produit IA
8 skillsChangement de registre : ces skills ne stylent pas des pixels, ils font designer à Claude le comportement d'un produit IA. Tous viennent du dépôt open source Owl-Listener/ai-design-skills (MIT).
context-window-design
Owl Listener
Traiter la fenêtre de contexte comme un matériau de design : budgets de tokens, résumer ou récupérer, ordre de priorité, dégradation gracieuse quand elle sature.
npx skills add Owl-Listener/ai-design-skills --skill context-window-designconversation-patterns
Owl Listener
Designer les tours de parole, les séquences de réparation et les points d'ancrage pour qu'un bot se remette d'un malentendu au lieu d'improviser.
npx skills add Owl-Listener/ai-design-skills --skill conversation-patternsgenerative-ui
Owl Listener
Quand rendre un composant d'interface (date picker, carte, graphique) plutôt que du texte, et comment retomber proprement en repli.
npx skills add Owl-Listener/ai-design-skills --skill generative-uiprogressive-disclosure
Owl Listener
Doser la révélation des capacités de l'IA pour ne pas noyer l'utilisateur au tour 1 ni le laisser sous-exploiter l'outil au tour 50.
npx skills add Owl-Listener/ai-design-skills --skill progressive-disclosuremultimodal-orchestration
Owl Listener
Séquencer texte, image et appels d'outils dans un même flux : quand regarder, quand appeler un outil, quand parler.
npx skills add Owl-Listener/ai-design-skills --skill multimodal-orchestrationmixed-initiative-flow
Owl Listener
Définir quand l'agent mène et quand l'utilisateur reprend la main, avec des signaux de passage de relais propres pour qu'aucun des deux ne se fige.
npx skills add Owl-Listener/ai-design-skills --skill mixed-initiative-flowfrustration-detection
Owl Listener
Lire la frustration dans les majuscules, la ponctuation, les répétitions et la latence, puis s'adapter (simplifier, ralentir, proposer un humain) avant le rage-quit.
npx skills add Owl-Listener/ai-design-skills --skill frustration-detectionfeedback-loops
Owl Listener
Des mécanismes de correction et de notation qui changent vraiment le comportement : signaux ambiants d'abord, notes explicites avec parcimonie.
npx skills add Owl-Listener/ai-design-skills --skill feedback-loopsArchitecture de prompt
8 skillsMême dépôt, autre étage : structurer le system prompt et le comportement pour qu'ils tiennent sur la durée et sur les cas limites.
system-prompt-structure
Owl Listener
Une anatomie propre (identité, contexte, règles, format de sortie, exemples) avec l'essentiel en premier et en dernier, là où le modèle est le plus attentif.
npx skills add Owl-Listener/ai-design-skills --skill system-prompt-structurepersona-architecture
Owl Listener
Définir une fois un personnage, une voix et des limites cohérents, pour que le comportement tienne entre les sessions au lieu de dériver à chaque réponse.
npx skills add Owl-Listener/ai-design-skills --skill persona-architecturetone-calibration
Owl Listener
Des curseurs de formalité, chaleur et assurance par contexte, pour que le même modèle sonne juste dans un ticket de crise comme dans un onboarding.
npx skills add Owl-Listener/ai-design-skills --skill tone-calibrationemotional-design
Owl Listener
Une carte de réponses pour la frustration, la confusion, l'enthousiasme et la détresse : valider sans amplifier, désescalader, passer la main quand il faut.
npx skills add Owl-Listener/ai-design-skills --skill emotional-designtemplate-design
Owl Listener
Des templates de prompts paramétrés : variables nommées, typées et bornées, sections conditionnelles. Une source, une sortie cohérente à l'échelle.
npx skills add Owl-Listener/ai-design-skills --skill template-designfew-shot-patterns
Owl Listener
Des jeux d'exemples qui ciblent les cas que le modèle rate systématiquement : un cas piège déplace plus le comportement que dix lignes d'instructions.
npx skills add Owl-Listener/ai-design-skills --skill few-shot-patternschain-of-thought-design
Owl Listener
Des chaînes de raisonnement délibérées pour les tâches multi-étapes, structurées plutôt que laissées à l'improvisation du modèle.
npx skills add Owl-Listener/ai-design-skills --skill chain-of-thought-designconstraint-specification
Owl Listener
Des limites testables (format, longueur, ton, contenu interdit) écrites de façon à pouvoir vérifier que le modèle les a réellement suivies.
npx skills add Owl-Listener/ai-design-skills --skill constraint-specificationConfiance & transparence
3 skillsLes trois derniers du dépôt : signaux de confiance, refus explicites, incertitude assumée. La couche que tout le monde saute et qui décide de la crédibilité du produit.
guardrail-design
Owl Listener
Des limites comportementales et des patterns de refus explicites : les do et don't en lignes applicables, pas en intentions vagues.
npx skills add Owl-Listener/ai-design-skills --skill guardrail-designtrust-calibration
Owl Listener
Des signaux de confiance et de source pour que l'utilisateur ne sur-fasse ni ne sous-fasse confiance : signaler l'incertitude plutôt que bluffer.
npx skills add Owl-Listener/ai-design-skills --skill trust-calibrationtransparency-patterns
Owl Listener
Rendre visible ce que le modèle sait, ne sait pas, et à quel point il en est sûr, pour que chacun calibre sa propre confiance.
npx skills add Owl-Listener/ai-design-skills --skill transparency-patternsDonnez des yeux à votre agent.
S'il ne fallait garder qu'un outil de toute cette liste, ce serait playwright-mcp. Sans lui, vous croyez sur parole un modèle aveugle qui affirme que « c'est corrigé » sans avoir rien vu.
Avec lui, l'agent ouvre un vrai navigateur, capture chaque page sur plusieurs viewports, compare à votre référence et refactore le CSS jusqu'à ce que ça corresponde. Il note son propre travail. C'est exactement la boucle que j'impose sur mes projets Figma : jamais de « c'est fait » sans capture de validation.
Un skill ne donne pas du goût à un modèle. Il lui interdit d'être médiocre par défaut. Le goût, lui, reste dans le choix de la stack.
Philippe Elovenko, Design System Designer
Ce que les skills ne feront pas à votre place
Les skills fixent un plancher. Ils vous amènent à un rendu qui a l'air senior, et c'est déjà énorme quand on part de la médiane du web. Mais le goût vient de la compréhension des contraintes : le secteur, la marque, l'usage réel, l'utilisateur qui a trois secondes. Pas d'une liste de fonts interdites.
C'est la même conclusion que pour l'IA dans le workflow design : l'outil compresse l'exécution, il ne signe pas les choix. La décision sur la direction à prendre reste la vôtre, et c'est précisément ce qui reste rare.
Trois ou quatre skills bien choisis transforment le même prompt qui produisait du slop générique en travail qui a l'air signé. Ce book en est la démonstration : goût, motion, tokens et validation visuelle sont outillés, mais la direction artistique reste une décision humaine.
Vous voulez monter cette stack dans votre équipe, ou cadrer l'usage des agents dans votre workflow design ? Parlons-en.
Discutons-en →