Claude · Skills

Les 5 skills qui donnent du goût à ton IA quand elle code une interface

Ton IA sait coder une page. Elle ne sait pas la rendre désirable. Voici cinq skills à installer une fois pour que tes landing pages et tes interfaces arrêtent de ressembler au template de tout le monde.

QQuentin Megevand
7 août 2026 · 8 min de lecture

Tu demandes une landing page à ton IA. En quarante secondes tu as un truc qui marche : un hero, trois cartes de features, un formulaire, un footer. Tout est aligné, rien n'est cassé. Et pourtant tu sens que tu ne peux pas l'envoyer à un client.

Le problème n'est pas le code. Il est dans le goût. Un modèle entraîné sur des millions de pages produit la moyenne de ces pages : Inter partout, dégradé violet vers bleu, cartes dans des cartes, petite icône dans un carré arrondi au-dessus de chaque titre. C'est propre, c'est mort, et ça se repère en une seconde.

Une interface qui sent le template coûte de la conversion avant même d'être lue.

La bonne nouvelle : le goût s'installe. Les skills sont des dossiers d'instructions que ton agent charge quand il en a besoin, et il existe aujourd'hui cinq skills de design sérieuses, gratuites, qui règlent chacune une couche différente du problème. Ce guide te donne les cinq, ce que chacune apporte, la commande d'installation exacte et dans quel ordre les empiler.

Claude AI Lab

Le Claude AI Lab, c'est ma communauté Skool où je partage mes systèmes Claude et les modules plus avancés. L'accès est à $67/mois.

Rejoindre le Lab →
Ce qu'il te faut
1
Claude Code installé. Les commandes de ce guide sont vérifiées sur la version 2.1.224. Deux voies d'installation existent selon les skills : les slash commands /plugin intégrées à Claude Code, et la CLI npx skills qui pose les fichiers dans ton projet ou dans ton dossier utilisateur.
2
Un projet sous la main. Une landing page, un dashboard, un formulaire. Ces skills se jugent sur du vrai, pas sur une démo.
3
Cinq minutes. C'est le temps total d'installation des cinq. Elles restent ensuite disponibles à vie, sur tous tes projets.
1

Frontend Design, la base officielle

🔗 github.com/anthropics/skills

C'est la skill maintenue par Anthropic dans son dépôt public de skills. Elle apprend à Claude à quoi ressemble un vrai front end et comment il doit se comporter : hiérarchie visuelle, densité, états d'un composant, comportement au survol et au focus, responsive qui tient sur autre chose qu'un écran de développeur.

Commence par celle-là. C'est la couche de fond, celle qui fait passer une page de « ça compile » à « ça se tient ». Les quatre autres viennent affiner par dessus.

⚙️Installation
4
Ajoute le marketplace. Dans Claude Code, tape /plugin marketplace add anthropics/skills.
5
Installe le jeu de skills. Tape /plugin install example-skills@anthropic-agent-skills. Frontend Design fait partie de ce jeu, tu récupères donc plusieurs skills d'exemple d'un coup.
À savoir
Le dépôt est présenté par Anthropic comme une vitrine de ce que permet le système de skills. Traite ces skills comme une excellente base de travail, pas comme un produit sous contrat de support.
2

UI UX Pro Max, la bibliothèque de styles

🔗 github.com/nextlevelbuilder/ui-ux-pro-max-skill

Celle-ci répond à une question précise : quel style choisir. Elle embarque une base de données de design consultable par l'agent, avec 84 styles d'interface et 161 règles de raisonnement pour décider lequel s'applique à ton cas.

Concrètement, tu arrêtes de décrire ton style en trois adjectifs vagues. Tu décris ton produit et ton audience, l'agent va chercher un style cohérent avec sa palette et sa typographie, et il s'y tient sur toutes les pages. C'est la skill qui règle le problème de la cohérence entre écrans, celui qui se voit quand la page tarifs ne ressemble pas à la page d'accueil.

⚙️Installation
6
Ajoute le marketplace. /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
7
Installe la skill. /plugin install ui-ux-pro-max@ui-ux-pro-max-skill
Quand elle sert
Au démarrage d'un projet, avant la première ligne de CSS. Une fois le style posé, elle sert de garde-fou sur toutes les pages suivantes.
3

Taste, le curseur de style

🔗 tasteskill.dev

Taste se présente comme un cadre anti slop pour les agents. Sa particularité est le réglage : au lieu d'un style figé, tu ajustes des paramètres et des variantes, comme un égaliseur. Plus sobre, plus dense, plus affirmé.

C'est la skill à prendre quand tu produis pour plusieurs marques ou plusieurs clients. Tu gardes une même méthode et tu déplaces les curseurs, plutôt que de réexpliquer ta direction artistique à chaque nouveau projet.

⚙️Installation
8
Tout le dépôt. npx skills add https://github.com/Leonxlnx/taste-skill
9
Ou une seule skill. npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" si tu ne veux que la partie front end.
Le détail qui compte
L'installation ciblée avec --skill évite de charger du contexte que ton agent n'utilisera jamais. Prends l'habitude, ça se paie en tokens à chaque session.
4

Impeccable, le vocabulaire partagé

🔗 impeccable.style

Impeccable est la plus outillée des cinq : une skill, 23 commandes et 59 règles de détection déterministes qui tournent sans appel au modèle. Son idée centrale est un vocabulaire commun avec ton agent. Au lieu d'écrire un paragraphe pour expliquer ce que tu veux, tu tapes un mot : polish, audit, critique, distill, animate, bolder, quieter.

Elle démarre par une phase de contexte. /impeccable init te demande si la surface est une surface de marque (landing, site vitrine, portfolio) ou une surface produit (application, tableau de bord, outil), puis écrit un fichier PRODUCT.md et te propose un DESIGN.md. Toutes les commandes suivantes lisent ces fichiers, donc l'agent connaît ton audience, ta voix et tes couleurs sans que tu les répètes.

⚙️Installation
10
Installe depuis la racine de ton projet. npx impeccable install
11
Initialise le contexte. Dans ton outil, tape /impeccable init et réponds aux questions. C'est cette étape qui rend les 22 autres commandes utiles.
12
Ensuite, au quotidien. /impeccable audit sur une page existante, /impeccable polish sur un composant qui te dérange sans que tu saches dire pourquoi.
Pourquoi les règles déterministes comptent
Les 59 détecteurs tournent sans modèle et sans clé API. Ils attrapent toujours la même chose, à chaque passage, là où une critique par le modèle varie d'une fois sur l'autre.
5

Les skills d'Emil Kowalski, la couche mouvement

🔗 github.com/emilkowalski/skills

Les quatre premières traitent ce qui est immobile. Celle-ci traite ce qui bouge : animations, transitions de page, micro interactions. C'est la couche qui s'ajoute en dernier, et celle qui se sent immédiatement à l'usage.

L'auteur a construit des interfaces chez Vercel et Linear, et la skill encode ce type d'arbitrage : une animation d'entrée qui prend un ease-out et pas un ease-in, une ombre semi transparente plutôt qu'une bordure pleine. Pris isolément, chaque détail semble négligeable. Empilés sur une interface entière, ce sont eux qui font la différence entre « correct » et « ça a l'air cher ».

⚙️Installation
13
Une seule commande. npx skills@latest add emilkowalski/skills
Où ça se voit
Sur les états de transition : ouverture d'un menu, apparition d'une modale, changement de page. Ce sont les moments où l'œil juge la qualité, et ceux que les agents traitent le plus mal par défaut.

Dans quel ordre les empiler

Les cinq ne se concurrencent pas, elles se superposent. Installe dans cet ordre, en testant à chaque étape sur une vraie page :

🧱
1. Frontend Design
La base. Ce qu'est une interface correcte.
🎨
2. UI UX Pro Max
Le style et sa cohérence d'un écran à l'autre.
🎚️
3. Taste
Le réglage fin, projet par projet ou client par client.
🗣️
4. Impeccable
Le vocabulaire pour piloter en un mot au lieu d'un paragraphe.
5. Emil Kowalski
Le mouvement, en dernier, une fois que le statique tient.

Si tu n'en installes qu'une, prends Frontend Design : c'est celle qui déplace le plus la ligne pour le moins d'effort. Si tu en installes deux, ajoute Impeccable, parce que audit sur une page que tu as déjà livrée est l'exercice le plus instructif de la liste.

Ce que ça change dans ton travail

Le vrai gain n'est pas esthétique, il est économique. Une page qui inspire confiance convertit mieux à trafic égal, et une interface produit qui se comprend seule génère moins de support. Tu ne paies ces skills qu'une fois, en installation, et elles s'appliquent ensuite à chaque page que tu génères.

Le second gain est le temps de va et vient. Sans vocabulaire commun, tu passes tes itérations à décrire une sensation : « c'est trop chargé », « ça fait cheap », « je ne sais pas, ça ne va pas ». Avec, tu tapes un mot et tu passes à la suite.

Le réflexe à prendre
Installe les cinq une bonne fois, puis lance un audit sur ta page la plus visitée. C'est le test le plus rentable : celle qui reçoit déjà du trafic est celle où chaque point de conversion compte.

Tu veux aller plus loin ?

Et au quotidien, je partage un reel par jour sur Instagram : @quentin_iamarketing