Pourquoi améliorer un site web existant avec les skills ?

Si vous avez déjà fait générer une interface par une IA, vous connaissez le résultat. Police Inter, dégradé violet vers bleu, cards imbriquées, texte gris sur fond coloré, hero centré et glassmorphism pour faire moderne. Le même site revient partout, peu importe le projet.

Ce phénomène est souvent appelé AI slop.

Le problème n’est pas que les modèles soient incapables. Ils connaissent la typographie, les contrastes OKLCH et les rythmes verticaux. Mais ils ne les appliquent pas spontanément. Il leur manque un vocabulaire de direction et une liste claire de ce qu’il faut éviter.

Les skills changent ça. Ils donnent à Claude Code des commandes spécialisées pour auditer, corriger et polir une interface existante sans repartir de zéro.

Prérequis pour commencer

Avant de vous lancer, assurez-vous d’avoir ces éléments.

  • Un compte Claude Pro actif

  • Claude Code installé sur votre machine

  • Un projet de site web déjà existant sur votre ordinateur

Guide étape par étape

Étape 1 : Ouvrir Claude Code dans le dossier de votre projet

Lancez votre terminal, placez-vous à la racine du projet, puis tapez la commande claude pour démarrer la session.

Étape 2 : Installer le skill de design

Dans votre terminal, lancez la commande npx skills add pbakaus/impeccable.

Le skill se charge automatiquement. Vous obtenez 23 commandes spécialisées qui pilotent chaque dimension du design, comme la typographie, la couleur, la mise en page, le mouvement, les micro-interactions et la copy UX.

Étape 3 : Définir le contexte de votre projet

Dans Claude Code, tapez la commande /impeccable teach.

Le skill vous pose une série de questions structurées. Il cherche à comprendre à qui s’adresse votre site, quel registre vous voulez adopter, et quelles esthétiques vous refusez explicitement.

Les réponses sont enregistrées dans les fichiers PRODUCT.md et DESIGN.md à la racine du projet. Ces fichiers sont relus à chaque commande, donc vous ne répétez jamais le même brief.

Étape 4 : Auditer le site dans son état actuel

Tapez la commande /impeccable audit. Vous pouvez aussi cibler une page précise avec une commande comme /impeccable audit landing.

Le skill scanne votre code, le compare à 25 anti-patterns documentés, puis vous remonte un rapport noté par sévérité de P0 à P3. Il peut par exemple signaler des dégradés violets, des polices surutilisées, des cards imbriquées, des contrastes insuffisants ou des hiérarchies typographiques cassées.

C’est le diagnostic. Tout part de là.

Étape 5 : Corriger la typographie et la mise en page

Enchaînez ensuite avec /impeccable typeset, puis /impeccable layout.

La première commande règle la hiérarchie typographique, les tailles et les rythmes verticaux. Elle évite aussi les polices trop vues, sauf si votre fichier DESIGN.md les justifie explicitement.

La seconde commande corrige les espacements, les alignements, les longueurs de ligne et les zones cliquables sous-dimensionnées.

Étape 6 : Affirmer la direction visuelle

Selon le résultat recherché, choisissez la commande qui correspond au geste de design.

  • /impeccable bolder pour rendre une section plus affirmée

  • /impeccable quieter pour calmer une zone trop bruyante

  • /impeccable colorize pour retravailler la palette en OKLCH

  • /impeccable delight pour ajouter des micro-interactions justifiées

Chaque commande sait dans quel mode elle travaille, brand ou product, et adapte son vocabulaire en conséquence. Une landing page n’est pas un dashboard.

Étape 7 : Lancer la passe finale

Tapez la commande /impeccable polish sur la page que vous voulez livrer.

Cette commande aligne votre code sur les tokens existants, relance le détecteur d’anti-patterns et vous renvoie une page prête à être expédiée.

Étape 8 : Tester sur une page existante

Ouvrez un fichier de votre site, puis demandez à Claude Code d’utiliser le skill impeccable pour auditer la page, corriger les anti-patterns en P0 et P1, appliquer un polish final, puis proposer une variante plus affirmée du hero en mode brand.

Aller plus loin avec l’IA et le design

Ce guide vous montre comment transformer un site web générique en interface plus professionnelle grâce aux skills Claude. Pour continuer, vous pouvez appliquer la même méthode à vos pages de vente, à vos dashboards ou à vos écrans produit existants.