Les modèles de code ont tendance à reproduire les mêmes réflexes visuels : typographie Inter systématique, dégradés bleu-violet et cartes imbriquées à l’infini. Impeccable propose un vocabulaire de conception structuré et 61 règles déterministes pour reprendre la main sur la direction artistique de vos agents. Issu du travail initial sur le skill frontend-design d’Anthropic, le projet standardise les échanges stylistiques sans dépendre d’un appel API supplémentaire pour ses vérifications de base.
Ce que corrige Impeccable face aux automatismes des modèles
Sans cadrage explicite, les agents de codage appliquent les recettes des modèles SaaS courants. Impeccable formalise des règles strictes contre ces anti-patterns récurrents :
- Typographies génériques : interdiction d’utiliser par défaut Arial, Inter ou les polices système sans justification.
- Contraste dégradé : refus du texte gris posé sur des arrière-plans colorés.
- Noirs et gris neutres : obligation de teinter les noirs et les gris pour enrichir la palette.
- Surabondance de conteneurs : fin des interfaces où chaque élément est enfermé dans une carte, elle-même imbriquée dans une autre carte surmontée d’une icône carrée arrondie.
- Animations datées : rejet des transitions de type rebond ou élastiques (bounce/elastic easing).
Les 24 commandes Impeccable pour guider votre agent
Toutes les commandes s’exécutent via la syntaxe /impeccable <commande> <cible> dans votre outil d’édition. Il est également possible d’épingler un raccourci direct avec /impeccable pin <commande> (par exemple pin audit pour créer /audit).
1. /impeccable init
Configure le projet une fois pour toutes. La commande analyse le code existant, pose des questions ciblées sur les manques d’informations et consigne la vérité produit dans PRODUCT.md (public cible, contexte d’utilisation, contraintes, ton et preuves). Elle configure aussi le mode live si nécessaire et oriente vers les étapes suivantes.
2. /impeccable document
Génère un fichier racine DESIGN.md à partir du code de votre projet pour formaliser le système visuel déjà en place.
3. /impeccable extract
Extrait les composants réutilisables et les design tokens découverts dans l’application pour enrichir le système de design central.
4. /impeccable shape
Planifie l’expérience utilisateur et l’interface avant toute écriture de code. Cette étape définit les intentions d’agencement sans entrer dans l’implémentation technique.
5. /impeccable craft
Prend en charge le cycle complet : de la formalisation du besoin jusqu’à la construction finale dans le code, en passant par l’itération visuelle.
6. /impeccable critique
Déclenche une revue UX complète portant sur la hiérarchie visuelle, la lisibilité et la résonance émotionnelle. Cette revue relève les défauts sans appliquer aveuglément les correctifs.
7. /impeccable audit
Exécute une vérification technique sur l’accessibilité, la performance et le comportement adaptatif. Exemple : /impeccable audit blog pour inspecter le hub et les articles.
8. /impeccable polish
Assure la passe finale de nettoyage : alignement avec le système de design, suppression des fioritures inutiles et validation de la préparation à la mise en production. Exemple : /impeccable polish settings.
9. /impeccable bolder
Amplifie le caractère visuel des interfaces trop ternes ou impersonnelles en accentuant les partis pris stylistiques.
10. /impeccable quieter
Tempère les interfaces surchargées ou visuellement trop agressives pour rétablir le calme et la lisibilité.
11. /impeccable distill
Élimine le superflu pour ramener l’interface à son essence fonctionnelle et visuelle stricte.
12. /impeccable harden
Renforce la robustesse de l’interface en prenant en compte la gestion des erreurs, la traduction (i18n), les débordements de texte et les cas limites. Exemple : /impeccable harden checkout.
13. /impeccable onboard
Conçoit les parcours de premier usage, les écrans vides (empty states) et les chemins d’activation pour les nouveaux utilisateurs.
14. /impeccable animate
Ajoute des mouvements et des transitions ciblées qui ont un sens fonctionnel, loin des effets de rebond artificiels.
15. /impeccable colorize
Intègre la couleur de manière stratégique pour guider le regard plutôt que pour décorer arbitrairement.
16. /impeccable typeset
Corrige les choix de polices de caractères, la hiérarchie typographique, l’échelle et le dimensionnement des textes.
17. /impeccable layout
Ajuste la disposition structurelle, les espacements et le rythme visuel global de la page.
18. /impeccable delight
Insère des détails soignés et des interactions agréables pour valoriser l’expérience utilisateur sans encombrer la tâche principale.
19. /impeccable overdrive
Intègre des effets techniques avancés et visuellement marquants lorsque l’ambition de l’interface l’exige.
20. /impeccable clarify
Revoit et simplifie les textes d’interface (microcopie UX) pour lever toute ambiguïté de compréhension.
21. /impeccable adapt
Ajuste l’ergonomie et la mise en page selon les différents formats d’écrans et types d’appareils.
22. /impeccable optimize
Traite spécifiquement les gains de performance technique liés au rendu frontend et aux ressources affichées.
23. /impeccable live
Active le mode d’itération en direct dans le navigateur pour modifier des éléments visuels locaux avec aperçu immédiat.
24. /impeccable generate
Génère automatiquement des variantes directes d’un élément précis dans le navigateur en mode live, sans sélection manuelle requise. Exemple : /impeccable generate 3 bold variants of the pricing cards.
Note d’usage : Vous n’avez pas besoin de mémoriser chaque nom de commande. Une consigne naturelle telle que
/impeccable redo this hero sectionpermet à l’agent de déterminer l’intervention appropriée.
Deux approches de création : maquette préalable ou code direct
Lors de la création d’une nouvelle surface, Impeccable propose deux méthodes enregistrées sous la clé buildPath dans .impeccable/config.json (valeurs acceptées : comp ou code). Cette option s’illustre notamment à travers l’étude de cas Neo Mirai, où une maquette illustrée a été transposée vers un site fonctionnel.
| Critère | Maquette d’abord (comp-led) | Code direct (code-led) |
|---|---|---|
| Opportunité | Compositions plus audacieuses dépassant le registre naturel du modèle de code. | Première implémentation plus cohérente et rapide, alignée sur les forces du modèle. |
| Revue | Validation d’une maquette générée, puis comparaison de l’interface réelle avec l’image retenue. | Revue d’un concept structuré, puis validation directe dans le code fonctionnel. |
| Contrainte | La traduction image vers code perd des détails ; plusieurs passes sont requises pour affiner. | Résultat immédiat plus propre en sortie de boîte, mais direction visuelle souvent plus sage. |
| Prérequis | Génération d’images active, temps d’itération disponible. | Aucune génération d’images requise. |
Détecteur autonome et exécution en ligne de commande
Impeccable embarque un moteur binaire autonome capable d’exécuter 61 règles déterministes sans modèle de langage ni clé API. La commande CLI npx impeccable detect permet d’analyser des dossiers, des fichiers isolés ou des URL rendues :
npx impeccable detect src/: analyse un répertoire complet.npx impeccable detect index.html: analyse un fichier balisé.npx impeccable detect https://example.com: inspecte une page via Chrome, Chromium ou Edge local.npx impeccable detect --json .: produit un flux JSON sur la sortie standard pour les pipelines CI.
Le binaire renvoie le code de sortie 0 en l’absence d’anomalies majeures, 2 si des problèmes primaires sont détectés, et 1 en cas d’échec opérationnel de l’analyse. Des dérogations locales peuvent être définies directement dans le code source :
<!-- impeccable-disable overused-font: exported brand doc -->
Pour en savoir plus sur les règles supportées, consultez la documentation du détecteur.
Installation et intégration des hooks éditeur
L’installation s’effectue en priorité via le CLI :
npx impeccable install
Cette commande détecte les environnements présents (Claude Code, Cursor, Codex, Grok Build, Hermes Agent, Veto, GitHub Copilot) et configure les dossiers cibles. Sur Claude Code, Cursor, Codex, GitHub Copilot et Grok Build, un hook natif est automatiquement configuré pour analyser les modifications de fichiers UI :
- Cursor : intercepte et bloque les écritures non conformes avant qu’elles ne soient appliquées.
- Claude Code, GitHub Copilot et Codex : signalent les anomalies après l’édition et effectuent un passage approfondi à l’arrêt (Stop).
- Grok Build : prépare l’analyse après l’édition et remonte les constats uniquement lors de l’arrêt.
- Hermes Agent : exige une validation manuelle avec
hermes skills trustpour les installations locales au projet. - Codex : requiert d’ouvrir
/hookspour approuver explicitement le hook de projet.
Les détails d’activation selon chaque harnais sont regroupés dans le guide technique pour autoriser le hook dans votre outil. Le projet peut également être exploré directement sur le dépôt GitHub officiel ou téléchargé sur le site impeccable.style.
Fichiers à conserver et règles d’exclusion Git
Les commandes d’Impeccable génèrent des captures d’écran, des prévisualisations et des caches dans le dossier .impeccable/. Seuls les fichiers de spécification partagée doivent être suivis dans votre gestionnaire de version :
- À versionner dans Git :
.impeccable/config.json,.impeccable/live/config.json,.impeccable/design.json, les briefs de routes dans.impeccable/surfaces/*.mdet les rapports dans.impeccable/critique/*.md. - À ignorer : les fichiers locaux
config.local.json, les caches de hook, les fichiers temporaires de session live et les captures PNG.
Avertissement sur le mode live : Le mode live exécute le script
impeccable:manual-edit-validatedéclaré danspackage.jsonavec vos droits utilisateur locaux. Ne l’utilisez que sur des projets de confiance exécutés en local, et n’injectez jamais son relais HTTP sur un site de production.