# 10 skills design pour Claude Code : les commandes, et notre test sur la même page > Les dix skills du carrousel, avec le lien et la commande de chacune. Et notre test : la même page de boulangerie demandée six fois à Claude Code, sans skill puis avec cinq skills différentes. Abyane Nabeebaccus, Eigenflow. Publié le 03/11/2026, mis à jour le 03/11/2026. Lecture : 9 min. Testé par nous. Page : https://eigenflow.fr/fr/guides/skills-design-claude-code PDF : https://eigenflow-leads.vercel.app/skills-design-claude-code.pdf ## L'essentiel en 30 secondes - Dix skills, dix commandes. Toutes sont gratuites à installer. Le site de UI UX Pro Max a un bouton Premium, qu’on n’a pas regardé. - Le test tient en un essai par skill, sur une seule page. Il montre des directions, il ne classe pas les skills. - Sans outil pour lancer des commandes : les scripts de Hallmark, Taste Skill et UI UX Pro Max n’ont pas tourné. Elles ont travaillé avec leurs consignes seules, donc sous leur vrai niveau. - Deux chiffres du carrousel d’origine avaient changé. Hallmark annonce maintenant 50 thèmes et non 21. Le site de UI UX Pro Max affiche 95 palettes et son GitHub 192 : on a pris le GitHub. - Une skill s’exécute avec les droits de ton agent. Lis la partie 3 avant d’installer. ## Le guide · Ce 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 1 · Le test : la même page, six résultats La demande, mot pour mot : **À coller** ```text 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. ![Les six pages, de gauche à droite puis de haut en bas : sans skill, Frontend Design, Impeccable, Taste Skill, Hallmark, UI UX Pro Max. Captures du 3 novembre 2026, en 1280 × 860.](https://eigenflow.fr/guides/skills-design-claude-code/comparatif.jpg) *Les six pages, de gauche à droite puis de haut en bas : sans skill, Frontend Design, Impeccable, Taste Skill, Hallmark, UI UX Pro Max. Captures du 3 novembre 2026, en 1280 × 860.* 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 2 · Les 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 : **À coller** ```text /plugin marketplace add anthropics/skills ``` **À coller** ```text /plugin install example-skills@anthropic-agent-skills ``` Lien : [github.com/anthropics/skills](https://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. **Terminal** ```text npx impeccable install ``` Lien : [impeccable.style](https://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. **Terminal** ```text npx skills add Leonxlnx/taste-skill ``` Lien : [tasteskill.dev](https://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. **Terminal** ```text 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](https://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. **À coller** ```text /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill ``` **À coller** ```text /plugin install ui-ux-pro-max@ui-ux-pro-max-skill ``` Lien : [uupm.cc](https://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. **Terminal** ```text git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue ``` Lien : [hueapp.io](https://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. **Terminal** ```text npx skills add google-labs-code/stitch-skills ``` Liens : [stitch.withgoogle.com](https://stitch.withgoogle.com) et [son dépôt](https://github.com/google-labs-code/stitch-skills) ### 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. **À coller** ```text pnpm dlx skills add shadcn/ui ``` Lien : [ui.shadcn.com/docs/skills](https://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. **À coller** ```text /plugin marketplace add Dammyjay93/interface-design ``` Puis ouvre /plugin pour l’installer. Lien : [interface-design.dev](https://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. **Terminal** ```text npx skills add jakubkrehel/skills ``` Puis, dans Claude Code : **À coller** ```text /better-typography ``` Lien : [jakub.kr/skills](https://jakub.kr/skills) ## Partie 3 · Avant 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 4 · Laquelle 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 sources · Sources 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. ## Auteur et méthode **Abyane Nabeebaccus**. Fondateur d’Eigenflow. On construit des agents et des automatisations IA pour les PME et les indépendants, et on teste chaque outil avant d’en parler. Méthode : six essais de Claude Code le 3 novembre 2026 (Claude Sonnet 5.5, abonnement, mode restreint, aucun outil de commande), un par configuration, sur la même demande. Pages, commandes, étoiles et licences relues le même jour. Ce qui n’a pas tourné est écrit. ## On met ces skills au travail sur ton site. On choisit celles qui servent ton projet, on les installe proprement, et on refait avec toi la page qui compte le plus. - Démarrer un projet : https://eigenflow.fr/fr/candidature - Réserver un appel : https://eigenflow.fr/fr/booking ## Les autres guides - [La skill Apple Design d’Emil Kowalski, installée et testée sur nos pages](https://eigenflow.fr/fr/guides/skill-apple-design) (Claude) - [L’art du Claude maxxing : la config complète en cinq niveaux](https://eigenflow.fr/fr/guides/claude-maxxing) (Claude) - [GPT-6 Astra et les corvées de bureau : le prompt exact et notre test](https://eigenflow.fr/fr/guides/agent-ia-corvees-bureau) (Agents IA)