Impeccable: La compétence Claude Code pour une interface utilisateur frontend unique

Impeccable : La solution aux interfaces générées par l'IA

Impeccable est une compétence open-source pour Claude Code, conçue par Paul Bakaus, qui vise à résoudre le problème de la "médiocrité de l'IA" dans les résultats frontend générés par l'IA. Elle fournit 20 commandes de pilotage (/audit, /polish, /critique, etc.), 7 fichiers de référence de conception spécifiques à un domaine et des anti-patterns qui guident précisément l’IA sur ce qu’il NE FAUT PAS générer. Le résultat : des interfaces utilisateur qui semblent conçues, et non auto-générées.

Essayez Apidog dès aujourd'hui

Pourquoi toutes les interfaces générées par l'IA se ressemblent-elles ?

Demandez à un assistant de codage IA de générer un tableau de bord ou une page d’atterrissage : vous obtiendrez souvent la même recette – police Inter, dégradé violet-bleu, cartes imbriquées, texte gris sur fond coloré, header standardisé, un peu de glassmorphism. Cette uniformité vient du fait que les grands modèles sont formés sur les mêmes exemples génériques et produisent donc des résultats génériques.

Impeccable a été développé pour casser ce cycle. Contrairement à la compétence officielle frontend-design d'Anthropic qui pose les bases, Impeccable approfondit l’expertise, élargit la couverture de domaine et impose des contraintes strictes pour forcer l’IA à sortir des sentiers battus.

💡 Avant d'utiliser /audit, /polish ou /overdrive dans Claude Code avec Impeccable, téléchargez Apidog gratuitement. Testez et déboguez visuellement les endpoints API que votre frontend généré par IA appellera : validez payloads, tokens d’auth, schémas de réponse, données mock. Cela évite les allers-retours fastidieux entre l’UI et un backend peu fiable.

Qu'est-ce qu'Impeccable ?

Impeccable est une compétence Claude Code : un package installable d’instructions, de fichiers de référence et de commandes slash dédiées au frontend.

La compétence "frontend-design" étendue d’Impeccable

Impeccable fournit un guide de conception complet, réparti en 7 fichiers de référence spécifiques à chaque domaine :

Chaque fichier détaille des pratiques avancées. Exemple : le guide de typographie ne se contente pas de recommander de "bonnes polices", il explique le rythme vertical, le FOUT (Flash of Unstyled Text) et comment l’éviter, et quand éviter le type fluide avec clamp(). Cette précision distingue Impeccable des guides de style classiques.

Le protocole de collecte de contexte d’Impeccable

La commande /teach-impeccable force la définition d’un contexte : public cible, cas d’utilisation, personnalité de marque. Ce contexte est sauvegardé dans .impeccable.md à la racine du projet, et rechargé automatiquement. Cela évite une IA générique en obligeant à contextualiser le projet avant toute génération.

Les 20 commandes qui corrigent les interfaces générées par l’IA

Impeccable offre 20 commandes slash, chacune ciblant un défaut courant du frontend IA. On les appelle dans Claude Code comme ceci :

/audit          → Contrôle qualité (accessibilité, performance, réactivité)
/critique       → Révision UX : hiérarchie, clarté, résonance émotionnelle
/polish         → Dernière passe avant le déploiement (alignement, espacement, détails)
/distill        → Simplifier à l'essence – supprimer la complexité qui ne justifie pas sa place
/normalize      → Aligner avec les standards du système de design
/animate        → Ajouter du mouvement intentionnel (pas un scintillement décoratif)
/colorize       → Introduire une couleur stratégique dans les interfaces monochromes
/bolder         → Amplifier les designs sûrs et ennuyeux
/quieter        → Atténuer les designs trop agressifs
/delight        → Ajouter des moments de joie mémorables
/typeset        → Corriger les choix de police, la hiérarchie et la taille
/arrange        → Corriger la mise en page, l'espacement et le rythme visuel
/harden         → Gestion des erreurs, i18n, cas limites
/optimize       → Améliorations des performances
/extract        → Extraire les composants réutilisables et les tokens de design
/adapt          → Adapter pour différents appareils/contextes
/onboard        → Concevoir les flux d'intégration et les états vides
/clarify        → Améliorer les textes UX peu clairs
/overdrive      → Effets techniquement ambitieux (shaders, physique de ressort, révélations basées sur le défilement)
/teach-impeccable → Configuration unique : collecter et enregistrer le contexte de conception

La plupart des commandes acceptent un argument de portée :

/audit header n’audite que la barre de navigation, /polish checkout-form cible le formulaire de paiement.

Enchaînez les commandes pour un flux efficace :

/audit → /arrange → /typeset → /polish. Chaque étape améliore la précédente.

La bibliothèque d’anti-patterns : apprendre à l’IA ce qu’il ne faut PAS faire

L’approche innovante d’Impeccable : intégrer des anti-patterns "NE PAS" directement dans le contexte du modèle. Exemples :

Typographie :

• N’utilisez pas Inter, Roboto, Arial ou des polices système.
• N’utilisez pas de monospace comme raccourci “dev”.
• Ne mettez pas de grandes icônes arrondies au-dessus de chaque titre.

Couleurs :

• Pas de texte gris sur fond coloré ; préférez une teinte foncée du fond.
• Pas de cyan sur fond sombre, dégradés violet-bleu, accents néon sur fond sombre.
• Pas de #000 ou #fff purs – colorez vos neutres.

Mise en page :

• Ne mettez pas tout dans des cartes, ni de cartes imbriquées.
• Évitez les grilles de cartes identiques.
• Ne centrez pas tout ; l’alignement à gauche et l’asymétrie sont plus intentionnels.

Mouvement :

• Pas d’amortissement rebond/élastique (effet obsolète).
• N’animez pas width, height, padding – utilisez transform et opacity.

Ces anti-patterns sont calqués sur ce qui rend les UIs IA reconnaissables. En les documentant, Impeccable corrige la trajectoire du modèle.

Sous le capot : Système de build, tests unitaires et support multi-outils

Impeccable n’est pas juste un fichier prompt : c’est un vrai projet logiciel avec build system, tests unitaires et support multi-éditeurs.

Le système de build

Sources dans source/skills/ avec frontmatter YAML (voir la specification Agent Skills). Une commande compile pour chaque fournisseur :

bun run build      # Compile les 8 formats
bun run rebuild    # Nettoie et reconstruit

Chaque outil reçoit le format adapté (Claude Code, OpenCode : métadonnées complètes ; Codex CLI : placeholders $ARGNAME ; Gemini : frontmatter réduit). L’architecture de transformateurs dans scripts/lib/transformers/ gère l’adaptation.

La suite de tests unitaires

La suite basée sur Bun dans tests/build.test.js couvre :

• Orchestration des transformateurs
• Tests d’intégration : création de vrais fichiers source et vérification des sorties
• Vérification de la correction des transformations (ex : sortie Gemini avec {{args}})
• Tests de cas limites (ex : liste de skills vide)

Exécution des tests :

bun test

Contribuer à Impeccable est sûr : modifiez un transformateur, lancez les tests et vérifiez que tout fonctionne sur chaque outil supporté.

Impeccable + Apidog : Allier qualité de conception et qualité d’API

Impeccable élève la qualité du frontend généré par IA. Apidog fait de même côté API.

Pour un produit IA robuste, l’UI ET l’API doivent être fiables. Un frontend impeccable décevra si les endpoints sont mal documentés ou non testés. Apidog offre :

• Conception API visuelle avant le code backend
• Génération automatique de serveurs mock à partir du schéma API
• Tests API automatisés sur chaque endpoint, pour détecter les régressions
• Documentation interactive à partager avec l’équipe, pour garder frontend et backend alignés

Combinez Impeccable (UI) et Apidog (API) pour combler le fossé de qualité laissé par les outils IA seuls.

Essayez Apidog gratuitement pour générer serveurs mock et documentation API pour vos prochains projets frontend IA.

Démarrer avec Impeccable

Téléchargez le bundle sur impeccable.style, choisissez votre outil, et extrayez-le.

Pour Claude Code :

# Installation au niveau du projet
cp -r dist/claude-code/.claude votre-projet/

# Ou installer globalement pour tous les projets
cp -r dist/claude-code/.claude/* ~/.claude/

Ensuite, exécutez /teach-impeccable une fois pour enregistrer le contexte design du projet. Vous pouvez alors utiliser toutes les commandes.

FAQ

Qu’est-ce qui différencie Impeccable de la compétence officielle frontend-design d’Anthropic ?

Impeccable ajoute 7 fichiers de référence, 20 commandes de pilotage et une bibliothèque d’anti-patterns. La compétence officielle pose les bases, Impeccable construit un système de design complet dessus.

Impeccable fonctionne-t-il avec d’autres outils que Claude Code ?

Oui : Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, Pi. Le build gère la conversion pour chaque outil.

À quoi sert /overdrive ?

Pour des effets avancés : shaders WebGL, virtual lists à 60fps, animations de dialogues avec physique, effets de scroll. Utilisez-le pour impressionner vos utilisateurs.

Comment Impeccable gère-t-il les tests unitaires ?

Suite de tests Bun couvrant tout le pipeline, corrections de transformateurs et intégration (vrais fichiers source et vérification de sortie). Exécutez bun test pour lancer tous les tests.

Impeccable peut-il aider avec les frontends basés sur API ?

Pour l’UI oui, pour la couche API couplez-le à Apidog : conception API visuelle, tests automatisés, mock servers et documentation.

Impeccable est-il gratuit ?

Oui, sous licence Apache 2.0. Code source sur GitHub, bundles sur impeccable.style.