10 skills design pour Claude Code : les commandes, et notre test sur la même page

Le guideCe qu’il y a dans ce guide

Tu as commenté SKILLS. Voici les dix skills du carrousel, avec le lien et la commande de chacune, relus le 3 novembre 2026 sur leurs pages et leurs dépôts GitHub.

On a voulu voir ce qu’elles changent vraiment. Alors on a donné la même demande à Claude Code six fois : une fois sans skill, cinq fois avec une skill différente. Les six pages sont ci-dessous, avec le temps de chacune et ce qui a limité le test.

Partie 1Le test : la même page, six résultats

La demande, mot pour mot :

Fais la page d’accueil d’une boulangerie artisanale de Lyon, Maison Aubrac, dans un seul fichier index.html. Tout le texte en français, inventé mais plausible. Pas d’image externe. Ne me pose aucune question et va jusqu’au bout.

Pour les cinq essais avec skill, on a ajouté une dernière phrase : « Utilise la skill … », avec son nom. Chaque essai est parti d’un dossier vide où seule cette skill était installée. Modèle : Claude Sonnet 5.5, sur notre abonnement, sans nos réglages.

Le coût ci-dessous est celui que Claude Code affiche au prix de l’API. Sur l’abonnement, rien n’a été facturé en plus.

• Sans skill : 2,4 min, 0,78 $. Vert sapin, titre massif, un pain dessiné.
• Frontend Design : 4,4 min, 1,20 $. Rose et bleu marine, grand titre en serif, le pain dessiné en très gros.
• Impeccable : 9,7 min, 2,94 $. Bleu et orange, l’accroche « Six fournées par jour, pas une de plus », et un tableau des fournées heure par heure.
• Taste Skill : 9,0 min, 2,64 $. Fond sombre, carte des fournées du jour avec un compte à rebours, rangée de pains en bas.
• Hallmark : 6,1 min, 2,55 $. Crème, titre en gothique, « Le pain de la Guillotière, au levain ».
• UI UX Pro Max : 4,4 min, 1,46 $. Crème et brun, « Le pain d’ici, levé lentement », en serif italique.

Ce qu’on en retient

Franchement, on s’attendait à un écart plus net avec la page sans skill. Elle tient la route, mais il y a une raison : Claude Code a chargé de lui-même artifact-design, une skill de design livrée avec l’outil. Notre « sans skill » veut donc dire « sans skill ajoutée ».

Impeccable est celle qui nous a le plus surpris : c’est la seule à sortir une accroche qui dit quelque chose sur le commerce, et la plus lente des six. UI UX Pro Max donne une belle page, mais crème avec un titre en serif italique, c’est justement le look qu’on reconnaît aujourd’hui sur les sites faits par IA. Ça reste notre avis sur un seul essai.

Les six ont eu la même idée : montrer les heures de fournée. Ça laisse penser qu’elle vient du modèle plus que des skills. Pour une page qui ne ressemble qu’à toi, il faudra un brief précis.

Partie 2Les dix skills

Les étoiles sont celles du dépôt GitHub, relevées le 3/11. Pour Frontend Design et shadcn/ui, elles comptent tout le dépôt et pas seulement la skill.

Frontend Design (Anthropic), 186 768 étoiles

La skill d’Anthropic pousse à choisir une direction visuelle qui ne ressemble à aucun modèle. Elle tient en deux fichiers, sans script. Dans Claude Code :

/plugin marketplace add anthropics/skills

/plugin install example-skills@anthropic-agent-skills

Lien : github.com/anthropics/skills

Impeccable, 100 465 étoiles

Elle donne à ton agent un vocabulaire de design : shape pour cadrer avant de coder, critique pour une revue notée, polish, bolder et quieter pour ajuster. Elle repère aussi les défauts typiques d’une page faite par IA.

npx impeccable install

Lien : impeccable.style

Taste Skill, 108 720 étoiles

Elle lit le brief, déduit une direction de design, puis passe un contrôle strict avant de livrer. Le dépôt contient aussi une variante réglée pour GPT et Codex.

npx skills add Leonxlnx/taste-skill

Lien : tasteskill.dev

Hallmark, 45 987 étoiles

Elle propose trois thèmes tirés d’un catalogue de 50, construit la page, puis la vérifie dans un vrai navigateur avec son propre outil de contrôle. Cette vérification n’a pas tourné dans notre test.

npx skills add nutlope/hallmark -g

Le -g l’installe pour tous tes projets. Sans lui, elle reste dans le dossier courant. Lien : usehallmark.com

UI UX Pro Max, 144 280 étoiles

Une base qu’on interroge : 192 palettes, 74 paires de polices et 119 règles UX d’après son GitHub. Installé par npx skills, le paquet a posé sept skills dans notre dossier : banner-design, brand, design, design-system, slides, ui-styling et ui-ux-pro-max.

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Lien : uupm.cc

Hue, 863 étoiles

Tu lui donnes un lien ou une capture d’une marque, et elle en fait un système de design complet que ton agent réutilise. Pas de compte ni de clé d’API, d’après sa page. On ne l’a pas lancée : notre demande n’avait pas de marque à reprendre.

git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue

Lien : hueapp.io

Extract DESIGN.md (Google Stitch), 8 662 étoiles

Elle tire un DESIGN.md complet du code d’un projet : composants, feuilles de style, réglages Tailwind, thèmes. Utile pour qu’un site existant garde son style quand ton agent y touche. Elle fait partie du paquet des skills de Stitch.

npx skills add google-labs-code/stitch-skills

Liens : stitch.withgoogle.com et son dépôt

shadcn/ui, 127 202 étoiles

La skill officielle : elle lit la configuration de ton projet, puis ajoute et met à jour les composants à la manière shadcn. Elle ne sert que si ton projet utilise shadcn/ui.

pnpm dlx skills add shadcn/ui

Lien : ui.shadcn.com/docs/skills

Interface Design, 5 909 étoiles

Claude oublie tes choix de design d’une conversation à l’autre. Ce plugin les écrit dans .interface-design/system.md (hauteurs de boutons, grille d’espacement, couleurs) et recharge ce fichier à chaque conversation. Redémarre Claude Code après l’installation.

/plugin marketplace add Dammyjay93/interface-design

Puis ouvre /plugin pour l’installer. Lien : interface-design.dev

Better Typography, 10 363 étoiles

Elle fait partie du paquet de Jakub Krehel. Elle s’occupe de l’échelle des titres, des espacements, des polices variables, des options OpenType, des retours à la ligne et des textes coupés.

npx skills add jakubkrehel/skills

Puis, dans Claude Code :

/better-typography

Lien : jakub.kr/skills

Partie 3Avant d’installer

L’outil d’installation le dit lui-même à la fin : relis les skills avant de t’en servir, elles tournent avec tous les droits de ton agent. Une skill, c’est du texte que ton agent suit, et parfois des scripts qu’il peut lancer.

Sur nos cinq skills, Frontend Design ne contient aucun script. Les autres en ont de 5 à 49. On a cherché dans leurs fichiers principaux les commandes qui suppriment ou téléchargent, les accès aux clés et les consignes du type « ignore tes instructions » : rien d’inquiétant. Une recherche de mots ne vaut pas une relecture complète, et on n’a pas relu leurs scripts ligne à ligne. Ça n’a pas suffi : le README d’Impeccable, précisé le 2 novembre, dit qu’en mode live le bouton Apply peut lancer codex ou claude sans validation, sans contrôle des permissions et sans bac à sable, si aucune session de chat ne répond. Pour l’éviter, démarre le mode live avec IMPECCABLE_LIVE_COPY_AGENT=chat.

Trois habitudes qui ne coûtent rien :

• Installe d’abord dans le dossier du projet, sans -g. Si ça ne te plaît pas, tu supprimes le dossier.
• Regarde ce qui a été ajouté dans .claude/skills, surtout le fichier SKILL.md.
• Si ton agent demande à lancer un script d’une skill, lis la commande avant d’accepter.

Le mode automatique de Claude Code a d’ailleurs refusé notre premier essai, qui donnait à ces skills le droit de lancer des commandes. C’est pour ça que le test s’est fait sans.

Côté licences, relues sur GitHub : MIT pour Taste Skill, Hallmark, UI UX Pro Max, Hue, shadcn/ui, Interface Design et le dépôt de Jakub Krehel ; Apache 2.0 pour Impeccable et les skills de Stitch. Le dépôt d’Anthropic n’affiche pas de licence unique : chaque skill a la sienne.

Partie 4Laquelle choisir

• Un site à faire vite, sans réglage : Frontend Design. Deux fichiers, 4,4 min dans notre test.
• Un site où le texte compte autant que le design : Impeccable, en acceptant que ce soit plus long.
• Un site existant à garder cohérent : Extract DESIGN.md, puis Interface Design pour que les décisions restent d’une session à l’autre.
• Un site aux couleurs d’une marque : Hue.
• Un projet déjà sous shadcn/ui : sa skill officielle.
• Du texte qui fait brouillon : Better Typography sur une page déjà faite.

Ne les installe pas toutes dans le même projet. Plusieurs d’entre elles donnent des consignes de design à ton agent, et on n’a pas testé ce que ça donne quand elles se contredisent.

Les sourcesSources

Tout a été relu le 3 novembre 2026.

• Les pages et dépôts de chaque skill, liés dans la partie 2.
• Les étoiles et les licences : API de GitHub.
• Le test : six essais de Claude Code en mode restreint, sans outil de commande, avec Claude Sonnet 5.5. Les pages et les journaux sont dans notre dossier de production.
• Sélection d’origine : le carrousel de craftwork.design du 29 octobre 2026.