leonxlnx/taste-skill

Compétence de Redesign

Comment ça fonctionne

Lorsqu'elle est appliquée à un projet existant, suivez cette séquence :

1. Analyser — Lisez la base de code. Identifiez le framework, la méthode de style (Tailwind, CSS vanilla, styled-components, etc.) et les motifs de design actuels.
2. Diagnostiquer — Parcourez l'audit ci-dessous. Listez chaque motif générique, point faible et état manquant que vous trouvez.
3. Corriger — Appliquez des améliorations ciblées en travaillant avec la stack existante. Ne réécrivez pas à partir de zéro. Améliorez ce qui est là.

Audit de Design

Typographie

Vérifiez ces problèmes et corrigez-les :

• Polices par défaut du navigateur ou Inter partout. Remplacez par une police avec du caractère. Bonnes options : Geist, Outfit, Cabinet Grotesk, Satoshi. Pour les projets éditoriaux/créatifs, associez un titre serif à un corps sans-serif.
• Les titres manquent de présence. Augmentez la taille pour le texte d'affichage, resserrez l'espacement des lettres, réduisez la hauteur de ligne. Les titres doivent sembler lourds et intentionnels.
• Texte du corps trop large. Limitez la largeur du paragraphe à environ 65 caractères. Augmentez la hauteur de ligne pour la lisibilité.
• Seuls les poids Regular (400) et Bold (700) sont utilisés. Introduisez Medium (500) et SemiBold (600) pour une hiérarchie plus subtile.
• Chiffres en police proportionnelle. Utilisez une police monospace ou activez les chiffres tabulaires (font-variant-numeric: tabular-nums) pour les interfaces riches en données.
• Ajustements d'espacement des lettres manquants. Utilisez un tracking négatif pour les grands titres, un tracking positif pour les petites capitales ou les étiquettes.
• Sous-titres en majuscules partout. Essayez plutôt l'italique en minuscule, la casse de phrase ou les petites capitales.
• Mots orphelins. Mots uniques seuls sur la dernière ligne. Corrigez avec text-wrap: balance ou text-wrap: pretty.

Couleur et Surfaces

• Fond #000000 pur. Remplacez par du noir cassé, du charbon foncé ou un foncé teinté (#0a0a0a, #121212, ou un bleu marine foncé).
• Couleurs d'accent trop saturées. Maintenez la saturation en dessous de 80%. Désaturez les accents pour qu'ils se fondent avec les neutres au lieu de crier.
• Plus d'une couleur d'accent. Choisissez-en une. Supprimez les autres. La cohérence bat la variété.
• Mélange de gris chauds et froids. Tenez-vous à une famille de gris. Teintez tous les gris avec une teinte cohérente (chaude ou froide, pas les deux).
• Esthétique "dégradé IA" violet/bleu. C'est l'empreinte digitale de design IA la plus courante. Remplacez par des bases neutres et un seul accent réfléchi.
• box-shadow générique. Teintez les ombres pour correspondre à la teinte de fond. Utilisez des ombres colorées (par exemple, ombre bleue foncée sur un fond bleu) au lieu du noir pur à faible opacité.
• Design plat avec zéro texture. Ajoutez du bruit subtil, du grain ou des micro-motifs aux fonds. Les vecteurs plats purs semblent stériles.
• Dégradés parfaitement uniformes. Brisez l'uniformité avec des dégradés radiaux, des superpositions de bruit ou des dégradés maillés au lieu des fondus linéaires standard à 45 degrés.
• Direction d'éclairage incohérente. Auditez toutes les ombres pour vous assurer qu'elles suggèrent une source lumineuse unique et cohérente.
• Sections sombres aléatoires dans une page en mode clair (ou vice versa). Une section unique à fond sombre cassant une page autrement claire ressemble à une erreur de copier-coller. Soit optez pour un mode sombre complet, soit gardez un ton de fond cohérent sur toute la page. Si un contraste est nécessaire, utilisez une nuance légèrement plus foncée de la même palette — pas un saut soudain vers #111 au milieu d'une page crème.
• Sections vides et plates sans profondeur visuelle. Les sections qui ne sont que du texte sur un fond uni semblent inachevées. Ajoutez des images de fond de haute qualité (floutées, superposées ou masquées), des motifs subtils ou des dégradés ambiants. Utilisez des sources de placeholder fiables comme https://picsum.photos/seed/{name}/1920/1080 lorsque les ressources réelles ne sont pas disponibles. Expérimentez avec des images de fond derrière les sections hero, les blocs de fonctionnalités ou les CTA — même une photo pleine largeur subtile à faible opacité ajoute de la présence.

Mise en Page

• Tout centré et symétrique. Brisez la symétrie avec des marges décalées, des rapports d'aspect mixtes ou des en-têtes alignés à gauche sur du contenu centré.
• Trois colonnes de cartes égales comme rangée de fonctionnalités. C'est la disposition IA la plus générique. Remplacez par un zig-zag à 2 colonnes, une grille asymétrique, un défilement horizontal ou une disposition en maçonnerie.
• Utilisation de height: 100vh pour les sections plein écran. Remplacez par min-height: 100dvh pour éviter les sauts de mise en page sur les navigateurs mobiles (bug de la zone d'affichage iOS Safari).
• Calcul de pourcentage flexbox complexe. Remplacez par CSS Grid pour des structures multi-colonnes fiables.
• Pas de conteneur max-width. Ajoutez une contrainte de conteneur (environ 1200-1440px) avec des marges automatiques pour que le contenu ne s'étire pas d'un bord à l'autre sur les écrans larges.
• Cartes de hauteur égale forcées par flexbox. Autorisez des hauteurs variables ou utilisez la maçonnerie lorsque le contenu varie en longueur.
• Rayon de bordure uniforme sur tout. Variez le rayon : plus serré sur les éléments intérieurs, plus doux sur les conteneurs.
• Pas de chevauchement ou de profondeur. Les éléments sont plats les uns à côté des autres. Utilisez des marges négatives pour créer une superposition et une profondeur visuelle.
• Rembourrage vertical symétrique. Le rembourrage supérieur et inférieur est toujours identique. Ajustez optiquement — le rembourrage inférieur doit souvent être légèrement plus grand.
• Le tableau de bord a toujours une barre latérale gauche. Essayez plutôt la navigation supérieure, un menu de commande flottant ou un panneau pliable.
• Espace blanc manquant. Doublez l'espacement. Laissez le design respirer. Les mises en page denses fonctionnent pour les tableaux de bord de données, pas pour les pages marketing.
• Boutons non alignés en bas dans les groupes de cartes. Lorsque les cartes ont différentes longueurs de contenu, les CTA se retrouvent à des hauteurs aléatoires. Épinglez les boutons en bas de chaque carte pour qu'ils forment une ligne horizontale propre, quelle que soit la teneur du contenu ci-dessus.
• Listes de fonctionnalités commençant à des positions verticales différentes. Dans les tableaux de prix ou les cartes de comparaison, la liste des fonctionnalités doit commencer à la même position Y dans toutes les colonnes. Utilisez un espacement cohérent au-dessus de la liste ou des blocs de titre/prix de hauteur fixe.
• Rythme vertical incohérent dans les éléments côte à côte. Lorsque vous placez des cartes, colonnes ou panneaux les uns à côté des autres, alignez les éléments partagés (titres, descriptions, prix, boutons) sur tous les éléments. Les lignes de base désalignées donnent l'impression que la mise en page est cassée.
• Alignement mathématique qui semble optiquement faux. Centrer mathématiquement ne semble pas toujours centré à l'œil. Les icônes à côté du texte, les boutons de lecture dans des cercles ou le texte dans les boutons ont souvent besoin d'ajustements optiques de 1 à 2 px pour sembler corrects.

Interactivité et États

• Pas d'état de survol sur les boutons. Ajoutez un décalage de fond, une légère échelle ou une translation au survol.
• Pas de retour actif/enfoncé. Ajoutez un scale(0.98) subtil ou un translateY(1px) lors de l'appui pour simuler un clic physique.
• Transitions instantanées avec durée nulle. Ajoutez des transitions fluides (200-300ms) à tous les éléments interactifs.
• Anneau de focus manquant. Assurez des indicateurs de focus visibles pour la navigation au clavier. C'est une exigence d'accessibilité, pas une option.
• Pas d'état de chargement. Remplacez les spinners circulaires génériques par des squelettes de chargement qui correspondent à la forme de la mise en page.
• Pas d'état vide. Un tableau de bord vide qui n'affiche rien est une opportunité manquée. Concevez une vue "pour commencer" composée.
• Pas d'état d'erreur. Ajoutez des messages d'erreur clairs et en ligne pour les formulaires. N'utilisez pas window.alert().
• Liens morts. Boutons qui pointent vers #. Soit liez vers des destinations réelles, soit désactivez-les visuellement.
• Aucune indication de la page actuelle dans la navigation. Stylisez le lien de navigation actif différemment pour que les utilisateurs sachent où ils se trouvent.
• Sauts de défilement. Les clics sur les ancres sautent instantanément. Ajoutez scroll-behavior: smooth.
• Animations utilisant top, left, width, height. Passez à transform et opacity pour une animation fluide accélérée par GPU.

Contenu

• Noms génériques comme "John Doe" ou "Jane Smith". Utilisez des noms diversifiés et réalistes.
• Faux nombres ronds comme 99.99%, 50%, $100.00. Utilisez des données organiques et désordonnées : 47,2%, 99,00 €, +1 (312) 847-1928.
• Noms d'entreprise de placeholder comme "Acme Corp", "Nexus", "SmartFlow". Inventez des noms de marque contextuels et crédibles.
• Clichés de copywriting IA. N'utilisez jamais "Élever", "Fluide", "Libérer", "Nouvelle Génération", "Révolutionnaire", "Approfondir", "Tissu" ou "Dans le monde de...". Écrivez dans un langage simple et spécifique.
• Points d'exclamation dans les messages de succès. Supprimez-les. Soyez confiant, pas bruyant.
• Messages d'erreur "Oups!". Soyez direct : "La connexion a échoué. Veuillez réessayer."
• Voix passive. Utilisez la voix active : "Nous n'avons pas pu enregistrer vos modifications" au lieu de "Des erreurs ont été commises."
• Toutes les dates d'articles de blog identiques. Randomisez les dates pour paraître réelles.
• Même image d'avatar pour plusieurs utilisateurs. Utilisez des ressources uniques pour chaque personne distincte.
• Lorem Ipsum. N'utilisez jamais de texte latin de placeholder. Rédigez un véritable brouillon.
• Majuscule À Chaque Titre. Utilisez plutôt la casse de phrase.

Motifs de Composants

• Aspect carte générique (bordure + ombre + fond blanc). Supprimez la bordure, ou utilisez uniquement la couleur de fond, ou utilisez uniquement l'espacement. Les cartes ne doivent exister que lorsque l'élévation communique une hiérarchie.
• Toujours un bouton rempli + un bouton fantôme. Ajoutez des liens textuels ou des styles tertiaires pour réduire le bruit visuel.
• Badges "Nouveau" et "Bêta" en forme de pilule. Essayez les badges carrés, les drapeaux ou les étiquettes de texte brut.
• Sections FAQ en accordéon. Utilisez une liste côte à côte, une aide consultable ou une divulgation progressive en ligne.
• Carrousel de témoignages à 3 cartes avec points. Remplacez par un mur en maçonnerie, des publications sociales intégrées ou une citation rotative unique.
• Tableau de prix avec 3 tours. Mettez en évidence le niveau recommandé avec de la couleur et de l'emphase, pas seulement une hauteur supplémentaire.
• Modales pour tout. Utilisez l'édition en ligne, les panneaux coulissants ou les sections extensibles au lieu des popups pour les actions simples.
• Cercles d'avatar exclusivement. Essayez les squircles ou les carrés arrondis pour un aspect moins générique.
• Bascule clair/sombre toujours un interrupteur soleil/lune. Utilisez un menu déroulant, la détection des préférences système ou intégrez-le dans les paramètres.
• Ferme de liens de pied de page avec 4 colonnes. Simplifiez. Concentrez-vous sur les chemins de navigation principaux et les liens requis par la loi.

Iconographie

• Icônes Lucide ou Feather exclusivement. Ce sont les choix d'icônes "par défaut" de l'IA. Utilisez Phosphor, Heroicons ou un ensemble personnalisé pour vous différencier.
• Fusée pour "Lancer", bouclier pour "Sécurité". Remplacez les métaphores clichées par des icônes moins évidentes (éclair, empreinte digitale, étincelle, coffre).
• Épaisseurs de trait incohérentes entre les icônes. Auditez toutes les icônes et normalisez à un poids de trait.
• Favicon manquant. Incluez toujours un favicon de marque.
• Photos d'équipe "diversifiées" génériques. Utilisez de vraies photos d'équipe, des clichés spontanés ou un style d'illustration cohérent au lieu d'images de stock troublantes.

Qualité du Code

• Soupe de div. Utilisez du HTML sémantique : <nav>, <main>, <article>, <aside>, <section>.
• Styles en ligne mélangés avec des classes CSS. Déplacez tout le style vers le système de style du projet.
• Largeurs en pixels codées en dur. Utilisez des unités relatives (%, rem, em, max-width) pour des mises en page flexibles.
• Texte alternatif manquant sur les images. Décrivez le contenu de l'image pour les lecteurs d'écran. Ne laissez jamais alt="" ou alt="image" sur des images significatives.
• Valeurs z-index arbitraires comme 9999. Établissez une échelle z-index propre dans le thème/les variables.
• Code mort commenté. Supprimez tous les artefacts de débogage avant la livraison.
• Hallucinations d'import. Vérifiez que chaque import existe réellement dans package.json ou les dépendances du projet.
• Balises meta manquantes. Ajoutez des balises meta appropriées <title>, description, og:image et de partage social.

Omissions Stratégiques (Ce que l'IA Oublie Généralement)

• Pas de liens légaux. Ajoutez les liens vers la politique de confidentialité et les conditions d'utilisation dans le pied de page.
• Pas de navigation "retour". Des impasses dans les flux utilisateurs. Chaque page a besoin d'un moyen de revenir en arrière.
• Pas de page 404 personnalisée. Concevez une expérience utile et de marque "page non trouvée".
• Pas de validation de formulaire. Ajoutez une validation côté client pour les e-mails, les champs obligatoires et les vérifications de format.
• Pas de lien "passer au contenu". Essentiel pour les utilisateurs de clavier. Ajoutez un lien de saut caché.
• Pas de consentement aux cookies. Si requis par la juridiction, ajoutez une bannière de consentement conforme.

Techniques d'Amélioration

Lors de l'amélioration d'un projet, utilisez ces techniques à fort impact pour remplacer les motifs génériques :

Améliorations Typographiques

• Animation de police variable. Interpolez le poids ou la largeur au défilement ou au survol pour un texte qui semble vivant.
• Transitions contour-vers-remplissage. Le texte commence comme un contour de trait et se remplit de couleur à l'entrée du défilement ou à l'interaction.
• Révélations par masque de texte. Typographie de grande taille agissant comme une fenêtre sur une vidéo ou une image animée derrière.

Améliorations de Mise en Page

• Grille brisée / asymétrie. Éléments qui ignorent délibérément la structure des colonnes — se chevauchant, débordant de l'écran ou décalés avec une aléatoire calculé.
• Maximisation de l'espace blanc. Utilisation agressive de l'espace négatif pour forcer le focus sur un seul élément.
• Piles de cartes en parallaxe. Sections qui restent collées et s'empilent physiquement les unes sur les autres pendant le défilement.
• Défilement en écran partagé. Deux moitiés de l'écran glissant dans des directions opposées.

Améliorations de Mouvement

• Défilement fluide avec inertie. Découplez le défilement des valeurs par défaut du navigateur pour une sensation plus lourde et cinématographique.
• Entrée échelonnée. Les éléments apparaissent en cascade avec de légers délais, combinant une translation sur l'axe Y avec une atténuation de l'opacité. Ne montez jamais tout en même temps.
• Physique à ressort. Remplacez l'assouplissement linéaire par un mouvement basé sur un ressort pour une sensation naturelle et pondérée sur tous les éléments interactifs.
• Révélations pilotées par le défilement. Contenu entrant par des masques qui s'agrandissent, des essuyages ou des chemins SVG dessinés liés à la progression du défilement.

Améliorations de Surface

• Vrai glassmorphisme. Allez au-delà de backdrop-filter: blur. Ajoutez une bordure intérieure de 1 px et une ombre intérieure subtile pour simuler la réfraction des bords.
• Bordures spotlight. Bordures de carte qui s'illuminent dynamiquement sous le curseur.
• Superpositions de grain et de bruit. Une superposition fixe, sans pointeur-événement, avec un bruit subtil pour briser la platitude numérique.
• Ombres colorées et teintées. Ombres qui portent la teinte du fond plutôt que d'utiliser du noir générique.

Priorité des Correctifs

Appliquez les modifications dans cet ordre pour un impact visuel maximal avec un risque minimal :

1. Changement de police — la plus grande amélioration instantanée, le risque le plus faible.
2. Nettoyage de la palette de couleurs — supprimez les couleurs qui se heurtent ou sont trop saturées.
3. États de survol et actifs — un minimum d'effort, un gros gain d'impression de qualité.
4. Suppression des ombres génériques — remplacez par des ombres teintées.
5. Alignement des boutons et des listes — corrigez les problèmes de mise en page les plus visibles.
6. Harmonisation du rythme vertical — espacement et alignement cohérents.
7. Amélioration des états vides — ajoutez des écrans de démarrage et des états de chargement.
8. Texture de surface — ajoutez du bruit, des dégradés ou des superpositions.
9. Révision du contenu — remplacez les textes génériques, traduisez les clichés.
10. Améliorations de l'accessibilité — anneaux de focus, navigation au clavier, liens de saut.
11. Corrections sémantiques — balisage, accessibilité, meta.
12. Ajout de fonctionnalités — pages 404, formulaires, consentement aux cookies.

Principe Directeur

Ne refaites pas tout, améliorez tout.