uxskill
Star on GitHub
Language
English 简体中文 繁體中文 日本語 한국어 हिन्दी Bahasa Indonesia Tiếng Việt ไทย العربية Español Français Deutsch Português Русский Türkçe Italiano
Blog · Français · 2026-05-28

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

Éditeur | Chemin | Commande
--- | --- | ---
Claude Code | Marketplace | `/plugin install ux@ux-skill`
Cursor | `.cursorrules` + MCP | `uxskill init --target cursor`
Windsurf | `.windsurfrules` + MCP | `uxskill init --target windsurf`
GitHub Copilot | `copilot-instructions.md` | `uxskill init --target copilot`
Cline / Continue | Serveur MCP | `uxskill mcp-config --target cline`
JetBrains AI Assistant | `.junie/guidelines.md` | `uxskill init --target jetbrains`
Zed | MCP stdio | `uxskill init --target zed`
Codex CLI / Aider | CLI direct | `pip install uxskill`

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.

Périmètre honnête

#### Les règles attrapent la structure. Pas le goût.

Le linter ne signalera jamais « cette section a un mauvais rythme » ni « cette copie sonne froide ». Cela relève d'une revue humaine ou d'un LLM critique. En revanche, la regex attrape de façon fiable toute empreinte exprimable par un token littéral, un motif ou une forme, c'est-à-dire l'essentiel des défauts d'IA, parce que le modèle revient toujours au même artefact.

Nous évitons délibérément de faire tourner un juge LLM en CI. Si votre étalon est « ça ressemble à du travail de designer », alors c'est de la revue de code, pas du lint. ux-skill fournit `ux critique` pour ce passage, mais à la demande dans l'éditeur, pas en CI.

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

Installer

## 17 IDE. Un seul moteur. 145 règles.

Le recommandeur, le linter, le serveur MCP, les 22 commandes, les 160 spécifications de marque et les 1 182 entrées de catalogue sont distribués ensemble. Le linter s'exécute sous la seconde, le reste à la demande. MIT, sans télémétrie, sans compte.

$ /plugin marketplace add Laith0003/ux-skill
$ /plugin install ux@ux-skill
· ou ·
$ pip install uxskill
· ou ·
$ npx uxskill@alpha init

## Pour aller plus loin

- 35 empreintes de design IA
- Linter regex · 145 règles
- Classement anti-slop
- Plugin de design pour Cursor