Impeccable : la skill qui donne un vocabulaire de design à votre agent IA

Impeccable : une skill de design pour agents de code

Une skill, c'est un dossier d'instructions que votre agent charge quand la tâche s'y prête. Elle laisse le modèle intact et lui fournit une méthode, un vocabulaire et des garde-fous au moment précis où il en a besoin.

Impeccable est une skill de design pour interfaces web. Elle est publiée sous licence Apache 2.0 par Paul Bakaus, avec sa documentation sur impeccable.style et son code sur GitHub.

Son point de départ est assumé : la skill frontend-design d'Anthropic, la première skill de design largement utilisée avec Claude. Impeccable y ajoute quatre choses :

• un flux de configuration unique, qui écrit le contexte design du projet dans des fichiers versionnés ;
• 23 commandes qui nomment chacune une intention de design ;
• un mode d'itération visuelle dans le navigateur ;
• 59 règles de détection déterministes, exécutables sans agent.

La skill ne dessine pas à votre place. Elle donne à votre agent le vocabulaire qui vous manquait pour lui dire quoi corriger, et à vous un moyen de vérifier le résultat autrement qu'à l'œil.

Mini-résumé : Impeccable est une skill open source qui installe dans votre agent de code une méthode de design, un jeu de commandes et un détecteur d'anti-patterns.

Le problème qu'elle règle : les tics du design généré par IA

Les mêmes signatures partout

Tous les modèles ont été entraînés sur les mêmes templates SaaS. Sans consigne précise, ils reproduisent les mêmes réflexes d'un projet à l'autre. Vous les reconnaissez sans doute :

• Inter, Arial ou la police système par défaut, sur toute l'interface ;
• des cartes imbriquées dans des cartes, jusqu'à trois niveaux ;
• du texte gris posé sur un fond coloré, sous le seuil de contraste ;
• des noirs et des gris purs, jamais teintés ;
• des courbes d'animation à rebond, datées depuis une bonne décennie ;
• des bordures d'onglet latérales et des halos sombres décoratifs.

À ces signatures s'ajoutent les défauts de qualité que le modèle ne mesure pas : lignes de texte trop longues, paddings serrés, cibles tactiles sous le seuil, niveaux de titres sautés.

Le pari d'Impeccable est simple : ce qui se mesure se détecte automatiquement, et ce qui se discute se nomme par une commande. Si vous travaillez déjà vos consignes à l'écrit, l'article sur comment formuler un prompt IA efficace pour concevoir un design de site web est un bon complément.

Mini-résumé : les modèles partagent les mêmes réflexes visuels, et Impeccable les traite en deux temps, par la détection automatique pour le mesurable et par des commandes nommées pour le reste.

Installer Impeccable en une commande

Une commande, puis un rechargement

Impeccable demande Node 22.12 au minimum. L'installation se lance depuis la racine de votre projet :

# Installer la skill et les hooks dans le projet courant
npx impeccable install
# Mettre à jour une installation existante
npx impeccable update

L'installeur détecte les dossiers d'agent présents sur la machine (~/.claude, .cursor, .codex et les autres), vous laisse ajuster la liste, puis demande si l'installation vaut pour le projet ou pour tout votre compte. Sur les harnais qui le supportent, il pose aussi le manifeste de hook natif. Rechargez ensuite votre agent pour que la skill apparaisse.

Sur Claude Code et Grok Build, l'installation passe aussi par la marketplace de plugins. Pour les équipes qui veulent figer la version, le dépôt s'ajoute en sous-module Git.

La skill fonctionne avec Cursor, Claude Code, GitHub Copilot, Gemini CLI, Codex CLI, Grok Build, OpenCode, Pi, Kiro, Trae, Rovo Dev, Qoder, Mistral Vibe et Google Antigravity.

À noter : selon le harnais, le hook demande une approbation explicite dans ses réglages avant de tourner. Sur Codex, cette approbation est à refaire après une mise à jour qui modifie le manifeste.

Mini-résumé : npx impeccable install pose la skill, les commandes et le hook, et il ne reste qu'à recharger l'agent.

Poser le contexte du projet avec /impeccable init

Les fichiers que lisent toutes les commandes

/impeccable init se lance une fois par projet. La commande vous demande d'abord la nature de la surface : brand (site vitrine, landing page, portfolio) ou product (application, tableau de bord, outil interne). Les attentes ne sont pas les mêmes, et cette réponse oriente tout le reste.

Elle écrit ensuite deux fichiers à la racine :

• PRODUCT.md : à qui vous parlez, ce que le produit fait, la voix, et vos anti-références, c'est-à-dire ce à quoi le résultat ne doit surtout pas ressembler ;
• DESIGN.md : votre système visuel, couleurs, typographie, composants.

Toutes les commandes suivantes lisent ces deux fichiers. C'est ce qui fait la différence entre un agent qui applique votre charte et un agent qui improvise une charte plausible.

Sur un projet qui a déjà une identité en place, /impeccable document fait le chemin inverse : il lit le code existant et en déduit un DESIGN.md.

Mini-résumé : init transforme votre contexte design en fichiers versionnés que chaque commande relit ensuite.

Les 23 commandes, rangées par intention

Toutes les commandes passent par la même porte, /impeccable <commande> <cible>. Elles se rangent en six familles.

Chaque commande accepte une cible, en langage naturel :

/impeccable audit blog
/impeccable critique la page de tarifs
/impeccable typeset le header
/impeccable harden le tunnel de paiement

Tapée seule, /impeccable affiche le menu des commandes avec une recommandation adaptée à l'état du projet. Si vous en utilisez une tout le temps, /impeccable pin audit crée le raccourci /audit.

Mini-résumé : les 23 commandes donnent un nom précis à chaque geste de design, ce qui remplace les demandes vagues du type « rends ça plus joli ».

Le mode live : itérer dans le navigateur

/impeccable live se branche sur votre application en cours d'exécution et injecte un sélecteur dans la page. Vous cliquez sur un élément, vous écrivez votre consigne, et vous recevez trois variantes que vous faites défiler dans l'interface. Un bouton accepte celle que vous gardez, et elle est écrite dans le code source.

Vous pouvez aussi piloter la page entière plutôt qu'un élément isolé.

C'est le mode qui sert quand vous savez que quelque chose ne va pas sans savoir le formuler à l'avance. Désigner un bouton et comparer trois propositions coûte moins cher que trois allers-retours de description.

Mini-résumé : le mode live remplace la description d'un problème visuel par une désignation directe dans le navigateur, avec trois variantes à comparer.

Le détecteur : 59 règles, en ligne de commande et en hook

Des contrôles sans modèle et sans clé API

Le détecteur d'Impeccable est déterministe : ce sont des règles écrites, pas un jugement de modèle. Il tourne donc sans LLM, sans clé API, et il donne le même résultat à chaque exécution.

Les 59 règles couvrent les problèmes de contraste, les dérives de typographie, les débordements de mise en page, les signatures de design généré par IA, les animations fragiles et les écarts au design system du projet.

En ligne de commande

# Analyser un dossier de sources
npx impeccable detect src/
# Analyser un fichier, ou une page déjà en ligne
npx impeccable detect index.html
npx impeccable detect https://example.com
# Sortie JSON, pour un script ou une intégration continue
npx impeccable detect --json .

La commande parcourt les fichiers d'interface : JSX, TSX, Vue, Svelte, Astro, modules CSS et gabarits serveur. Elle rend 0 quand rien n'est trouvé, 2 quand il y a des signalements, et 1 quand la commande elle-même a échoué. De quoi la brancher sur une intégration continue sans écrire de glue.

En hook, pendant que l'agent travaille

Le hook fait tourner le détecteur au fil des modifications d'interface, sur Claude Code, GitHub Copilot, Codex, Cursor et Grok Build. Il fonctionne en deux temps : à chaque modification, il ne remonte que le critique (image cassée, texte qui déborde, contraste en échec, texte minuscule, écart aux règles du projet) ; en fin de session, il repasse le jeu complet sur tous les fichiers touchés.

La documentation justifie ce découpage : remonter chaque règle à chaque modification rendait les modèles plus timides, pas plus soigneux.

Cursor est le seul à bloquer avant écriture. Il contrôle la modification proposée et l'arrête quand le détecteur y trouve un problème. Les quatre autres remontent leurs constats après coup.

Déclarer vos exceptions

Une charte forte produit forcément des faux positifs. Ils se déclarent, plutôt que de se subir :

npx impeccable ignores list
npx impeccable ignores add-file "src/legacy/**"
npx impeccable ignores add-value overused-font Inter --reason "Police de marque"

Pour une dérogation qui doit voyager avec un seul fichier, un commentaire suffit : <!-- impeccable-disable overused-font: police de marque -->.

Le hook s'active et se coupe avec impeccable hooks on, impeccable hooks off, et impeccable hooks status dit où vous en êtes. npx impeccable install --no-hooks saute l'étape à l'installation.

Mini-résumé : le détecteur apporte un contrôle reproductible, utilisable seul en intégration continue comme en garde-fou pendant que l'agent code.

Comment l'insérer dans votre workflow

L'erreur la plus courante consiste à lancer les commandes au hasard quand le résultat déçoit. Une séquence tient mieux :

1. Une fois par projet : /impeccable init, puis /impeccable document si le code porte déjà une identité.
2. Avant de coder une nouvelle surface : /impeccable shape, qui produit un brief par questionnement.
3. Une fois la surface construite : /impeccable audit pour le technique, /impeccable critique pour le design.
4. Sur les écarts relevés : la commande qui nomme le geste, typeset, layout, colorize, quieter.
5. Avant livraison : /impeccable polish, et /impeccable harden sur les parcours qui manipulent des données.
6. En intégration continue : npx impeccable detect --json sur le dossier des sources.

Deux commandes méritent d'être connues au-delà de cette séquence. /impeccable extract remonte les composants et les tokens répétés dans le design system, ce qui évite qu'un projet accumule quinze variantes de bouton. /impeccable adapt reprend une interface pour d'autres tailles d'écran, un sujet que nous avons détaillé dans nos conseils pour créer un site web adapté aux mobiles.

Mini-résumé : cadrer une fois, évaluer après construction, corriger par commandes nommées, et automatiser le détecteur en intégration continue.

Ce qu'Impeccable ne fait pas

Les limites à connaître avant de l'adopter

Impeccable ne remplace pas une direction artistique. La skill demande d'ailleurs explicitement que le brief l'emporte : si vous imposez une époque, une matière, une police ou une palette, elle les suit même quand ses propres avertissements disent le contraire. Sans brief, elle vous ramène vers un défaut prudent.

Le détecteur ne juge pas le goût. Il attrape ce qui se mesure, contraste, taille, longueur de ligne, valeur hors système. Une interface qui passe les 59 règles peut rester ennuyeuse, et c'est le rôle de critique et de vos yeux.

Enfin, le projet évolue vite, avec des versions publiées à un rythme soutenu sur npm. Vérifiez la documentation officielle avant de vous appuyer sur un comportement précis, et lancez npx impeccable update avant de conclure à un bug.

Mini-résumé : Impeccable outille votre jugement de design, elle ne le remplace pas, et elle suit votre brief plutôt que ses propres préférences.

FAQ : vos questions sur la skill Impeccable