IA coding design — pourquoi chaque IA fabrique la même interface.

Quiconque a demandé à Claude Code, Cursor, Windsurf, GitHub Copilot, Cline ou Continue de générer une landing reconnaît le rendu : Inter étirée à des tailles d'affichage, un dégradé du violet au bleu, trois cartes identiques alignées, et sous le héros la formule « Build something amazing ». Le problème ne vient pas de l'outil. Il vient de ce que tous les outils ont appris sur le même corpus de modèles. ux-skill bloque exactement ces défauts dans la CI — sans LLM, avec 145 règles regex déterministes.

By the ux-skill team · 9 min de lecture · open source MIT

Les huit défauts visuels que toute IA produit

Nous avons catalogué l'ensemble des empreintes dans la taxonomie des empreintes de design IA. Les huit ci-dessous reviennent dans presque chaque héros généré.

1. Inter en typographie d'affichage — un caractère dessiné pour la lisibilité à petite taille d'écran, porté à 90 px dans le héros. L'inverse de son usage prévu.
2. Dégradé violet vers bleu — la famille #7C3AED → #3B82F6, utilisée en fond de la première section.
3. Trois cartes identiques en ligne — icône, titre d'un mot, sous-titre d'une phrase, répétés trois fois.
4. Animation fade-in-up universelle — appliquée à chaque enfant direct de chaque section, sans différenciation de rôle.
5. Axe centré partout — héros, cartes, formulaires, tout est posé sur l'axe vertical central.
6. Copie générique — « Build something amazing », « Beautiful experiences », « Revolutionizing X », sans un seul substantif du produit.
7. URL d'images de stock — placeholders génériques au lieu de captures réelles du produit.
8. Ombres lourdes sur du flat — le réflexe « se démarquer » se cogne à la mode du flat, et l'on obtient un volume bancal.

Chaque défaut pris isolément n'est pas une faute. C'est la combinaison des huit, posés simultanément sur la même page, qui produit l'empreinte reconnaissable. Un seul défaut fait hausser les épaules ; quatre dans le même above-the-fold permettent de deviner quel outil l'a généré.

Pourquoi les prompts ne suffisent pas

La première réaction de toute équipe consiste à ajouter des instructions au prompt : « n'utilise pas le dégradé par défaut », « mets une vraie typographie display », « ne pose pas trois cartes identiques ». Cela tient un message. Au suivant, la consigne se dilue, la fenêtre de contexte gonfle, et l'empreinte revient. La conduite par prompt est probabiliste, et elle se dégrade avec la longueur.

Ce qu'il faut, c'est un plancher déterministe — un contrôle qui s'exécute après le modèle, sans LLM dans la boucle. C'est précisément le trou que comble ux-skill. Le recommandeur restreint en amont les choix du modèle ; le linter sanctionne en aval les défauts qui passent malgré tout.

Ne pas répondre au stochastique par du stochastique

L'idée de « brancher un second LLM pour noter la sortie du premier » revient sans cesse. Mais une évaluation par LLM présente la même variance qu'une génération par LLM : elle dépend du prompt de notation, des exemples few-shot, de la version du jour. Pour la CI, on a besoin d'une couche qui rend le même verdict à chaque exécution. Le déterminisme est la seule force réelle de la regex, et elle suffit.

145 règles regex, sans LLM, dans la CI

Le linter scanne tout fichier *.tsx, *.jsx, *.vue, *.svelte, *.astro, *.css, *.scss, *.html. Il applique 145 expressions régulières avec les flags i et m. Il renvoie un JSON contenant l'ID de règle, la gravité, le fichier, la ligne, la colonne, l'extrait, et la correction suggérée.

# Lint local, seuil par défaut sur high+critical
$ uxskill lint
[OK] Scanned 142 files in 412ms · 0 findings at threshold high

# Sous-dossier + JSON
$ uxskill lint apps/web/src --json | jq '.summary'
{
  "critical": 0,
  "high": 4,
  "medium": 11,
  "low": 3,
  "total": 18
}

Zéro appel LLM. Le balayage moyen d'un dépôt Next.js de 200 fichiers prend 380 ms à froid, 90 ms à chaud. La description complète des règles est dans le guide du linter regex.

Avant / après, sur un vrai héros

Voici un bloc héros simplifié, tiré d'un starter Next.js, qui échoue à trois règles, et sa réécriture qui sort en exit 0. Même intention commerciale, empreinte différente.

// Avant — 3 détections high
<section className="bg-gradient-to-br
  from-purple-500 via-violet-500
  to-blue-500 py-32">
  <h1 className="font-['Inter']
    text-7xl leading-none">
    Build something amazing.
  </h1>
  <div className="grid grid-cols-3 gap-6">
    <Card icon="Zap" title="Fast" />
    <Card icon="Shield" title="Safe" />
    <Card icon="Heart" title="Loved" />
  </div>
</section>

// Après — 0 détection
<section className="bg-stone-50 py-28">
  <h1 className="font-['Fraunces']
    text-6xl leading-[1.04]
    tracking-tight">
    La couche de routage de fret
    que votre TMS n'a jamais livrée.
  </h1>
  <div className="grid grid-cols-12 gap-6 mt-16">
    <Card className="col-span-7"
      title="Consolidation de fret" />
    <Card className="col-span-5"
      title="Classement transporteurs" />
  </div>
</section>

Dans l'avant, trois règles se déclenchent : Inter à text-7xl, le dégradé canonique de l'IA, et la grille de trois cartes identiques. Dans l'après, on apparie Fraunces (display) avec Inter (corps), on adopte une surface plate, et l'on passe à une grille asymétrique 7-et-5. Même intention, l'empreinte a disparu.

Le recommandeur élève le sol. Le linter pose le plafond. Les deux sont nécessaires.

Mettre un vrai système de design dans Claude Code

Claude Code est le terrain natif d'ux-skill. L'installation depuis la marketplace tient en deux lignes :

# Marketplace de plugins de Claude Code
$ /plugin marketplace add Laith0003/ux-skill
$ /plugin install ux@ux-skill

Après installation, 22 commandes slash sont enregistrées dans la session Claude Code. /ux-discover mène un brief en 10 champs sous forme de questions, /ux-recommend lance cinq recherches parallèles (industrie, style, palette, typographie, motion), puis /ux-persist save écrit MASTER.md, tokens.css et manifest.json à la racine du dépôt. Une fois ces fichiers écrits, Claude Code s'appuie dessus dans toutes les sessions suivantes pour produire du code aligné sur le système.

Pour Cursor, l'install combine .cursorrules + serveur MCP, via uxskill init --target cursor. Pour Windsurf, c'est .windsurfrules + MCP, via uxskill init --target windsurf. Pour GitHub Copilot, on génère .github/copilot-instructions.md et l'on branche le linter sur disque via uxskill init --target copilot.

Trois chemins d'installation, une seule intention

Le même paquet Python atteint les 17 IDE de la matrice de compatibilité. Choisissez le chemin le plus proche de votre éditeur :

Sous tous ces chemins : 1 182 entrées de catalogue, 145 règles, 160 spécifications de marque, 22 commandes, 75 tests verts à chaque release.

Pour aller plus loin

• Les 35 empreintes de design que toute IA expédie par défaut
• Linter regex pour IA coding — 145 règles en CI
• Outils anti-slop pour Claude Code — le classement honnête
• Plugin de design pour Cursor — guide d'installation
• README (version française)
• Page d'installation / Configuration MCP