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 combat le problème de la "médiocrité de l'IA" dans les résultats frontend générés par l'IA. Elle est livrée avec 20 commandes de pilotage (/audit, /polish, /critique, et plus encore), 7 fichiers de référence de conception spécifiques à un domaine, et des anti-patterns sélectionnés qui indiquent au modèle exactement 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.

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

Demandez à n'importe quel assistant de codage IA de vous construire un tableau de bord, une page d'atterrissage ou un panneau de paramètres. Laissez-lui carte blanche. Qu'obtenez-vous ?

La police Inter. Un dégradé violet-bleu. Des cartes imbriquées dans des cartes. Du texte gris sur un fond coloré. Une section d'en-tête avec un grand nombre, une petite étiquette et un accent lumineux. Peut-être un peu de "glassmorphism" pour la "profondeur".

Vous l'avez vu mille fois parce que chaque grand modèle linguistique entraîné sur les mêmes modèles génériques produit le même résultat générique. C'est le piège du frontend généré par l'IA : techniquement fonctionnel, visuellement oubliable.

Impeccable a été créé spécifiquement pour briser ce cycle. Là où la compétence officielle frontend-design d'Anthropic a posé les bases, Impeccable s'appuie dessus avec une expertise plus approfondie, une couverture de domaine plus vaste et des contraintes strictes qui éloignent l'IA des schémas prévisibles gravés dans ses pondérations.

Qu'est-ce qu'Impeccable ?

Impeccable est une compétence Claude Code – un ensemble installable d'instructions, de fichiers de référence et de commandes slash qui augmentent la façon dont Claude Code aborde toute tâche frontend.

À la base, la compétence est livrée avec trois composants :

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

La compétence frontend-design au sein d'Impeccable est un guide de conception complet, divisé en sept fichiers de référence spécifiques à un domaine :

Chaque fichier de référence est techniquement précis. Le guide de typographie, par exemple, va au-delà de "utiliser de bonnes polices" et explique comment le rythme vertical fonctionne, pourquoi le FOUT (Flash of Unstyled Text) se produit et comment l'éviter avec des surcharges size-adjust, et quand le type fluide avec clamp() est en fait le mauvais choix. Cette profondeur est ce qui sépare Impeccable d'un guide de style générique.

Le protocole de collecte de contexte d'Impeccable

L'un des aspects les plus sous-estimés de la conception d'Impeccable est la commande /teach-impeccable. Avant que tout travail de conception ne commence, la compétence exige un contexte de conception confirmé : public cible, cas d'utilisation et personnalité de la marque. Ce contexte est enregistré dans .impeccable.md à la racine du projet et est automatiquement chargé lors des sessions futures.

C'est une petite chose qui fait une grande différence. La sortie frontend générée par l'IA est générique en partie parce que le modèle n'a aucun contexte de projet – il opte par défaut pour des choix sûrs et moyens. Impeccable force l'établissement de ce contexte en premier.

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

Impeccable est livré avec 20 commandes invocables par l'utilisateur, chacune abordant un mode de défaillance spécifique dans le travail frontend généré par l'IA. Vous les appelez comme des commandes slash dans Claude Code :

/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 optionnel. /audit header exécute l'audit uniquement sur la barre de navigation. /polish checkout-form concentre la passe de polissage sur le flux de paiement. Ce ciblage chirurgical permet à Claude de rester concentré et l'empêche de toucher des parties du frontend généré par l'IA qui fonctionnent déjà.

Le véritable pouvoir vient de l'enchaînement des commandes. Un flux de travail typique pourrait exécuter /audit pour détecter les problèmes, /arrange pour corriger les problèmes de mise en page, /typeset pour nettoyer la hiérarchie des types, et /polish comme passe finale avant le déploiement – chaque étape s'appuyant sur la précédente.

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

La contribution la plus originale d'Impeccable au problème du frontend généré par l'IA n'est pas les commandes, mais les anti-patterns.

La compétence intègre des contraintes explicites "NE PAS" directement dans le contexte du modèle. Ce ne sont pas de vagues préférences de style ; ce sont des signatures d'échec spécifiques et récurrentes qui apparaissent encore et encore dans la sortie frontend générée par l'IA :

Anti-patterns de typographie :

• N'utilisez pas Inter, Roboto, Arial ou les valeurs par défaut du système (ils rendent les designs invisibles)
• N'utilisez pas les polices monospace comme raccourci paresseux pour "l'ambiance de développeur"
• Ne mettez pas de grandes icônes arrondies au-dessus de chaque titre – ça donne l'impression d'un modèle

Anti-patterns de couleur :

• N'utilisez pas de texte gris sur des fonds colorés – ça semble délavé ; utilisez plutôt une teinte plus foncée de la couleur du fond
• N'utilisez pas la "palette IA" : cyan sur fond sombre, dégradés violet-bleu, accents néon sur fonds sombres
• N'utilisez pas de noir pur (#000) ou de blanc pur (#fff) – teignez vos neutres

Anti-patterns de mise en page :

• N'enveloppez pas tout dans des cartes – tous les éléments n'ont pas besoin d'un conteneur
• N'imbriquez pas des cartes dans des cartes
• N'utilisez pas de grilles de cartes identiques (icône + titre + texte, répétés à l'infini)
• Ne centrez pas tout – le texte aligné à gauche avec des mises en page asymétriques semble intentionnel

Anti-patterns de mouvement :

• N'utilisez pas l'amortissement de rebond ou élastique – ils semblent dépassés ; les objets réels décélèrent en douceur
• N'animez pas les propriétés de mise en page comme width, height, padding – utilisez uniquement transform et opacity

Ces règles sont calquées précisément sur les habitudes qui rendent le code frontend généré par l'IA reconnaissable au premier coup d'œil. En les nommant explicitement, Impeccable donne au modèle une lentille corrective qu'il n'aurait pas sans orientation externe.

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

Impeccable n'est pas seulement un fichier d'invite ; c'est un véritable projet logiciel avec un système de build, une suite de tests unitaires et un support multi-fournisseurs.

Le système de build

Les fichiers sources des compétences résident dans source/skills/ et utilisent un frontmatter YAML riche (conformément à la spécification Agent Skills). Une seule étape de build les compile dans des formats spécifiques aux fournisseurs pour Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro et Pi :

bun run build      # Compile tous les 8 formats de fournisseur
bun run rebuild    # Nettoie et reconstruit à partir de zéro

Chaque fournisseur obtient le bon dialecte. Claude Code et OpenCode reçoivent les métadonnées complètes, y compris args et allowed-tools. Codex CLI obtient le format argument-hint avec des placeholders $ARGNAME. Gemini reçoit un frontmatter minimal. Le build gère tout cela automatiquement grâce à une architecture de transformateurs modulaires dans scripts/lib/transformers/.

La suite de tests unitaires

Impeccable est livré avec une suite de tests unitaires basée sur Bun dans tests/build.test.js. Les tests couvrent l'ensemble du pipeline de build :

• Les tests d'orchestration vérifient que chaque fonction de transformateur est appelée avec les bons arguments
• Les tests d'intégration créent de véritables fichiers source dans un répertoire temporaire et affirment que les fichiers de sortie attendus existent pour chaque fournisseur
• Les tests de correction de transformation vérifient des transformations spécifiques – que la sortie Gemini contient {{args}}, que la sortie Codex contient $TARGET, que la sortie Claude Code contient user-invokable: true
• Les tests de cas limites gèrent les listes de compétences vides et vérifient que le pipeline ne se rompt pas

L'exécution de la suite de tests unitaires est une seule commande :

bun test

Ces tests unitaires sont ce qui rend sûr de contribuer à Impeccable. Vous pouvez modifier un transformateur, exécuter les tests unitaires et savoir immédiatement si votre modification a cassé la sortie pour l'un des huit outils pris en charge. C'est le genre de confiance en ingénierie qui sépare les projets open-source maintenus des collections d'invites abandonnées.

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

Impeccable résout le problème de qualité du frontend généré par l'IA au niveau de l'interface utilisateur. Apidog le résout au niveau de l'API.

Lorsque vous construisez un produit réel avec l'aide de l'IA, les deux couches comptent. Un frontend généré par l'IA qui semble soigné décevra toujours les utilisateurs si les appels API qu'il effectue sont mal documentés, non testés ou peu fiables. Apidog vous offre le même niveau de précision pour votre API qu'Impeccable pour votre interface utilisateur.

Avec Apidog, vous pouvez :

• Concevoir des API visuellement avant d'écrire une seule ligne de code backend
• Générer des serveurs mock automatiquement à partir de votre schéma API, afin que votre frontend généré par l'IA dispose de données réalistes à afficher pendant le développement
• Exécuter des tests API automatisés sur chaque point de terminaison, détectant les régressions avant qu'elles n'atteignent la production
• Partager une documentation API interactive avec votre équipe, en maintenant l'alignement entre les développeurs frontend et backend

La combinaison est naturelle : utilisez Impeccable pour vous assurer que votre frontend généré par l'IA est visuellement distinctif et prêt pour la production, et utilisez Apidog pour vous assurer que les API alimentant ce frontend sont fiables et bien documentées. Ensemble, ils comblent le fossé de qualité que le développement assisté par l'IA laisse seul ouvert.

Essayez Apidog gratuitement pour générer des serveurs mock et de la documentation API pour votre prochain projet frontend généré par l'IA.

Démarrer avec Impeccable

Le chemin le plus rapide est de télécharger le bundle prêt à l'emploi depuis impeccable.style, de choisir votre outil et d'extraire.

Pour Claude Code spécifiquement :

# 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/

Exécutez ensuite /teach-impeccable une fois pour enregistrer le contexte de conception de votre projet, et vous êtes prêt à utiliser les 20 commandes.

FAQ

Qu'est-ce qui différencie Impeccable de la compétence officielle frontend-design d'Anthropic ? Impeccable s'appuie sur la compétence d'Anthropic avec 7 fichiers de référence spécifiques à un domaine, 20 commandes de pilotage et une bibliothèque explicite d'anti-patterns. La compétence officielle est un point de départ ; Impeccable est un système de conception complet superposé à celle-ci.

Impeccable fonctionne-t-il avec des outils autres que Claude Code ? Oui. Impeccable prend en charge Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro et Pi. Le système de build compile un seul format source en dialectes spécifiques aux fournisseurs pour chaque outil.

À quoi sert la commande /overdrive ? /overdrive est destinée aux effets techniquement ambitieux qui dépassent les limites conventionnelles : shaders WebGL, tableaux virtuels à 60 ips, physique de ressort sur les dialogues, révélations basées sur le défilement. Utilisez-la lorsque vous voulez quelque chose qui pousse les utilisateurs à se demander "comment ont-ils fait ça ?"

Comment Impeccable gère-t-il les tests unitaires ? Le projet est livré avec une suite de tests unitaires basée sur Bun qui couvre l'ensemble du pipeline de build, y compris la correction des transformateurs et les tests d'intégration qui créent de véritables fichiers source et vérifient la sortie. Exécutez bun test pour exécuter la suite complète de tests unitaires.

Impeccable peut-il aider avec les frontends basés sur les API ? Impeccable gère la qualité de l'interface utilisateur. Pour la couche API, associez-le à Apidog, qui fournit une conception API visuelle, des tests automatisés et la génération de serveurs mock – tout ce dont vous avez besoin pour construire des backends fiables pour votre frontend généré par l'IA.

Impeccable est-il gratuit ? Oui. Impeccable est sous licence Apache 2.0 et open source. Le code source est disponible sur GitHub et les bundles compilés sont disponibles sur impeccable.style.