Impeccable : le site qui n'a pas l'air fait par l'IA

Ce que c'est et pourquoi ça compte

Vous ouvrez votre site et ça se voit tout de suite : c'est l'IA qui l'a fait. De l'Inter partout, un dégradé du violet au bleu, des cartes dans d'autres cartes, du texte gris sur un fond coloré. Le README d'Impeccable les liste comme les signes qui reviennent dans chaque projet : tous les modèles d'IA ont appris sur les mêmes sites faits à la chaîne.

Impeccable sert à les enlever. C'est une skill, c'est-à-dire un paquet d'instructions pour Claude Code, avec 24 commandes qui deviennent un vocabulaire commun entre vous et lui. En plus, il y a un détecteur à 62 règles fixes qui tourne sans IA et sans clé API. C'est open source sur GitHub, sous licence Apache 2.0, avec plus de 90 000 étoiles fin octobre.

C'est pour celles et ceux qui construisent seuls avec Claude Code, sans designer. Pour dessiner une page neuve à partir de zéro, il y a un autre guide, GUSTO. Celui-ci part d'une autre question : le site, vous l'avez déjà, alors comment lui enlever sa tête d'IA ?

1. Ce qu'il vous faut et comment l'installer dans Claude Code

Il vous faut Claude Code, le dossier du projet et une version récente de Node.js, le programme qui fait tourner npx (vérifiez avec node -v dans le terminal). Ensuite :

1. Depuis le dossier principal du projet, lancez l'installateur, la ligne ci-dessous.
2. Choisissez les outils que vous utilisez parmi ceux qu'il trouve, par exemple Claude Code, et s'il faut l'installer dans ce projet ou dans tous.
3. Quand il vous propose le contrôle automatique à chaque modification, dites oui : on le voit au point 5.
4. Redémarrez Claude Code pour qu'il charge la skill.

npx impeccable install

Sinon, il y a le plugin : dans Claude Code, tapez /plugin marketplace add pbakaus/impeccable, puis ouvrez /plugin, installez Impeccable depuis Discover et redémarrez. Moi, j'utilise l'installateur : c'est la voie que le README recommande, et le contrôle automatique arrive avec lui.

2. La première commande : /impeccable init

Toutes les commandes passent par /impeccable. La première, une fois par projet, se tape dans le chat de Claude Code :

/impeccable init

D'abord, il lit le projet : documents, fonctionnalités, code, images. Ensuite, il ne demande que ce qui manque : pour qui est le produit, dans quelle situation on l'utilise, à quoi il sert, quelles contraintes respecter. Et il vous fait confirmer ce qu'il a compris tout seul.

Puis il écrit PRODUCT.md, un fichier texte dans le projet, avec les faits sur lesquels vous êtes d'accord et les décisions ouvertes. C'est utile parce que chaque commande part de là et sait à qui parle la page, au lieu de le deviner. Relisez-le et corrigez-le ; si le produit change, relancez init.

Si le site a déjà son propre style, tapez aussi /impeccable document : il le consigne dans DESIGN.md, et le détecteur vérifie que vos pages ne s'en éloignent pas.

3. Contrôlez votre site en une minute, sans IA

La partie que je préfère : le détecteur tourne depuis le terminal, sans Claude et sans clé. À la place de src/, mettez le dossier du code, un fichier ou une adresse, même http://localhost:3000. Pour les adresses, il utilise Chrome, Chromium ou Edge ; avec --viewport 390x844, vous voyez la page à la taille d'un téléphone.

npx impeccable detect src/

• Il trouve les signes de l'IA : dégradés violets, texte rempli d'un dégradé, halos sombres, animations qui rebondissent, la police trop utilisée.
• Et les problèmes de qualité : lignes trop longues, espacements serrés, boutons trop petits pour le doigt, titres qui sautent un niveau.

Regardez le chiffre avec lequel il se termine : 0, aucun problème principal ; 2, problèmes trouvés ; 1, il y a quelque chose qu'il n'a pas pu contrôler, donc le contrôle a échoué. Avec --json, vous avez les résultats dans un format que Claude lit tout de suite ; --list-rules vous montre toutes les règles.

Et souvenez-vous de ce que dit le README : un contrôle propre est un indice, pas une preuve. Ces règles n'ont rien trouvé, mais ouvrez quand même la page, aussi sur téléphone.

4. Les cinq commandes à utiliser en premier sur la page que vous avez déjà

Elles se tapent dans le chat de Claude Code : /impeccable, la commande et ce qu'il faut regarder, en mots simples. Remplacez les parties entre [ ] par les vôtres.

critique : ce qui la freine

Une revue de design : où la page fait générique ou confuse et ce qu'il faut corriger d'abord. Elle ne change rien, elle vous donne un rapport.

/impeccable critique la page d'accueil. Qui arrive ici doit [télécharger l'app]. Dis-moi ce qui la fait passer pour une page faite par l'IA et ce que tu corrigerais en premier.

audit : les contrôles techniques

Accessibilité, vitesse, thèmes, téléphone. Chaque problème a une priorité de P0, bloquant, à P3, finition. Audit aussi laisse le code tel quel.

/impeccable audit la page des tarifs. Pour chaque problème, dis-moi qui il gêne et comment le corriger. Ne change rien pour l'instant.

distill : enlevez le superflu

Il enlève ce qui gêne l'action principale : informations répétées, décorations qui ne disent rien. Si l'action principale n'est pas claire, il vous la demande d'abord.

/impeccable distill la page d'accueil. L'action principale, c'est [s'inscrire sur la liste d'attente]. Enlève les cartes dans les cartes, garde [les tarifs].

typeset : la typographie

Hiérarchie des titres, tailles, longueur des lignes. Il garde vos polices, sauf si vous demandez de les changer : si Inter est arrivée par défaut, dites-le-lui.

/impeccable typeset tout le site. La police actuelle est celle par défaut, pas celle de la marque : propose-moi une alternative adaptée à [qui utilise le produit].

polish : la dernière passe

Il peaufine une page dont la direction est déjà bonne : états manquants, espacements, alignements. Il modifie le code, donc regardez les changements. Si c'est la direction qui ne va pas, demandez de la refaire.

/impeccable polish la page d'inscription. Garde la mise en page et les couleurs de la marque. À la fin, dis-moi ce que tu as changé et relance npx impeccable detect.

5. Le contrôle automatique à chaque modification

Avec l'installateur, Claude Code reçoit deux hooks, c'est-à-dire des commandes qui se lancent toutes seules. Après chaque modification d'un fichier d'interface, un contrôle rapide cherche les images cassées, le texte qui déborde, les halos ; à la fin du tour, un contrôle plus large regarde les fichiers touchés. Ce qu'il trouve revient à Claude, qui le corrige ou vous explique son choix. Vous les voyez avec /hooks.

• /impeccable hooks status vous dit s'il est actif ; /impeccable hooks off le coupe, /impeccable hooks on le rallume.
• npx impeccable install --no-hooks installe sans hook, juste pour cette fois.
• /impeccable doctor vérifie qu'il est bien installé : s'il ne dit rien, il est peut-être simplement coupé.

Et si Inter est vraiment votre police ? Dites-le une fois : la règle reste active pour les autres polices, et l'exception vaut pour le hook comme pour detect.

npx impeccable ignores add-value overused-font Inter --reason "Police de la marque"

Les erreurs les plus courantes

• Se fier à un detect propre. C'est un indice, pas une preuve : ouvrez la page et demandez une critique.
• Utiliser polish pour changer de direction. Polish peaufine, il ne redessine pas.
• Tout couper à cause d'une police. Ajoutez l'exception avec ignores add-value et gardez les autres règles.
• Mettre tout le dossier .impeccable/ dans git, avec captures et fichiers temporaires. Copiez dans votre .gitignore le bloc du README.

Check-list

• Après le redémarrage, Claude Code voit /impeccable
• PRODUCT.md existe et je l'ai relu et corrigé
• npx impeccable detect sur mon code se termine par 0
• /impeccable hooks status indique que le contrôle automatique est actif

Questions fréquentes