lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

UI/UX Pro Max - Intelligence de Conception

Guide de conception complet pour applications web et mobiles. Contient 67 styles, 96 palettes de couleurs, 57 associations de polices, 99 bonnes pratiques UX et 25 types de graphiques, répartis sur 13 piles technologiques. Base de données consultable avec recommandations prioritaires.

Quand appliquer

Reportez-vous à ces directives lorsque vous :

• Concevez de nouveaux composants UI ou pages
• Choisissez des palettes de couleurs et une typographie
• Examinez du code pour des problèmes UX
• Construisez des pages d'atterrissage ou des tableaux de bord
• Mettez en œuvre des exigences d'accessibilité

Catégories de règles par priorité

Priorité	Catégorie	Impact	Domaine
1	Accessibilité	CRITIQUE	ux
2	Toucher & Interaction	CRITIQUE	ux
3	Performance	ÉLEVÉ	ux
4	Mise en page & Responsive	ÉLEVÉ	ux
5	Typographie & Couleur	MOYEN	typographie, couleur
6	Animation	MOYEN	ux
7	Sélection de style	MOYEN	style, produit
8	Graphiques & Données	FAIBLE	graphique

Référence rapide

1. Accessibilité (CRITIQUE)

• contraste-couleur - Ratio minimum de 4.5:1 pour le texte normal
• états-focus - Anneaux de focus visibles sur les éléments interactifs
• texte-alt - Texte alternatif descriptif pour les images significatives
• étiquettes-aria - aria-label pour les boutons avec icône uniquement
• navigation-clavier - L'ordre de tabulation correspond à l'ordre visuel
• étiquettes-formulaire - Utiliser label avec l'attribut for

2. Toucher & Interaction (CRITIQUE)

• taille-cible-tactile - Cibles tactiles minimum de 44x44px
• survol-vs-appui - Utiliser clic/appui pour les interactions principales
• boutons-chargement - Désactiver le bouton pendant les opérations asynchrones
• retour-erreur - Messages d'erreur clairs près du problème
• curseur-pointer - Ajouter cursor-pointer aux éléments cliquables

3. Performance (ÉLEVÉ)

• optimisation-images - Utiliser WebP, srcset, chargement différé
• mouvement-réduit - Vérifier prefers-reduced-motion
• sauts-contenu - Réserver de l'espace pour le contenu asynchrone

4. Mise en page & Responsive (ÉLEVÉ)

• meta-viewport - width=device-width initial-scale=1
• taille-police-lisible - Minimum 16px pour le texte du corps sur mobile
• défilement-horizontal - S'assurer que le contenu tient dans la largeur de la fenêtre
• gestion-z-index - Définir une échelle z-index (10, 20, 30, 50)

5. Typographie & Couleur (MOYEN)

• hauteur-ligne - Utiliser 1.5-1.75 pour le texte du corps
• longueur-ligne - Limiter à 65-75 caractères par ligne
• association-polices - Associer les personnalités des polices de titre/corps

6. Animation (MOYEN)

• durée-timing - Utiliser 150-300ms pour les micro-interactions
• performance-transformation - Utiliser transform/opacity, pas width/height
• états-chargement - Écrans squelette ou spinners

7. Sélection de style (MOYEN)

• correspondance-style - Faire correspondre le style au type de produit
• cohérence - Utiliser le même style sur toutes les pages
• pas-icônes-emoji - Utiliser des icônes SVG, pas des emojis

8. Graphiques & Données (FAIBLE)

• type-graphique - Faire correspondre le type de graphique au type de données
• conseil-couleur - Utiliser des palettes de couleurs accessibles
• tableau-données - Fournir une alternative de tableau pour l'accessibilité

Comment utiliser

Recherchez des domaines spécifiques à l'aide de l'outil CLI ci-dessous.

---

Prérequis

Vérifiez si Python est installé :

python3 --version || python --version

Si Python n'est pas installé, installez-le en fonction du système d'exploitation de l'utilisateur :

macOS :

brew install python3

Ubuntu/Debian :

sudo apt update && sudo apt install python3

Windows :

winget install Python.Python.3.12

---

Comment utiliser cette compétence

Lorsque l'utilisateur demande un travail UI/UX (concevoir, construire, créer, implémenter, revoir, corriger, améliorer), suivez ce workflow :

Étape 1 : Analyser les besoins de l'utilisateur

Extrayez les informations clés de la demande de l'utilisateur :

• Type de produit : SaaS, e-commerce, portfolio, tableau de bord, page d'atterrissage, etc.
• Mots-clés de style : minimal, ludique, professionnel, élégant, mode sombre, etc.
• Secteur : santé, fintech, jeux, éducation, etc.
• Stack : React, Vue, Next.js, ou par défaut html-tailwind

Étape 2 : Générer le système de design (REQUIS)

Commencez toujours par --design-system pour obtenir des recommandations complètes avec raisonnement :

python3 skills/ui-ux-pro-max/scripts/search.py "<type_produit> <secteur> <mots_clés>" --design-system [-p "Nom du Projet"]

Cette commande :

1. Recherche 5 domaines en parallèle (produit, style, couleur, page d'atterrissage, typographie)
2. Applique les règles de raisonnement depuis ui-reasoning.csv pour sélectionner les meilleures correspondances
3. Renvoie le système de design complet : motif, style, couleurs, typographie, effets
4. Inclut les anti-modèles à éviter

Exemple :

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

Étape 2b : Persister le système de design (Modèle Maître + Surcharges)

Pour enregistrer le système de design pour une récupération hiérarchique entre sessions, ajoutez --persist :

python3 skills/ui-ux-pro-max/scripts/search.py "<requête>" --design-system --persist -p "Nom du Projet"

Ceci crée :

• design-system/MASTER.md — Source de Vérité Globale avec toutes les règles de design
• design-system/pages/ — Dossier pour les surcharges spécifiques aux pages

Avec surcharge spécifique à une page :

python3 skills/ui-ux-pro-max/scripts/search.py "<requête>" --design-system --persist -p "Nom du Projet" --page "tableau-de-bord"

Ceci crée également :

• design-system/pages/tableau-de-bord.md — Déviations spécifiques à la page par rapport au Maître

Comment fonctionne la récupération hiérarchique :

1. Lors de la construction d'une page spécifique (par exemple, "Checkout"), vérifiez d'abord design-system/pages/checkout.md
2. Si le fichier de page existe, ses règles remplacent le fichier Maître
3. Sinon, utilisez uniquement design-system/MASTER.md

Étape 3 : Compléter avec des recherches détaillées (si nécessaire)

Après avoir obtenu le système de design, utilisez des recherches par domaine pour obtenir des détails supplémentaires :

python3 skills/ui-ux-pro-max/scripts/search.py "<mot-clé>" --domain <domaine> [-n <max_résultats>]

Quand utiliser les recherches détaillées :

Besoin	Domaine	Exemple
Plus d'options de style	style	--domain style "verre dépoli sombre"
Recommandations de graphiques	graphique	--domain graphique "tableau-de-bord temps-réel"
Bonnes pratiques UX	ux	--domain ux "animation accessibilité"
Polices alternatives	typographie	--domain typographie "élégant luxe"
Structure de page d'atterrissage	page-atterrissage	--domain page-atterrissage "héro preuve-sociale"

Étape 4 : Directives de Stack (Par défaut : html-tailwind)

Obtenez les meilleures pratiques spécifiques à l'implémentation. Si l'utilisateur ne spécifie pas de stack, utilisez par défaut html-tailwind.

python3 skills/ui-ux-pro-max/scripts/search.py "<mot-clé>" --stack html-tailwind

Stacks disponibles : html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose

---

Référence de recherche

Domaines disponibles

Domaine	Utilisé pour	Exemples de mots-clés
produit	Recommandations de type de produit	SaaS, e-commerce, portfolio, santé, beauté, service
style	Styles UI, couleurs, effets	verre dépoli, minimalisme, mode sombre, brutalisme
typographie	Associations de polices, Google Fonts	élégant, ludique, professionnel, moderne
couleur	Palettes de couleurs par type de produit	saas, ecommerce, santé, beauté, fintech, service
page-atterrissage	Structure de page, stratégies CTA	héro, centré-héro, témoignage, tarification, preuve-sociale
graphique	Types de graphiques, recommandations de bibliothèques	tendance, comparaison, chronologie, entonnoir, camembert
ux	Bonnes pratiques, anti-modèles	animation, accessibilité, z-index, chargement
react	Performances React/Next.js	waterfall, bundle, suspense, memo, rerender, cache
web	Directives d'interface web	aria, focus, clavier, sémantique, virtualiser
prompt	Prompts IA, mots-clés CSS	(nom du style)

Stacks disponibles

Stack	Focus
html-tailwind	Utilitaires Tailwind, responsive, a11y (PAR DÉFAUT)
react	État, hooks, performance, patterns
nextjs	SSR, routage, images, routes API
vue	Composition API, Pinia, Vue Router
svelte	Runes, stores, SvelteKit
swiftui	Vues, État, Navigation, Animation
react-native	Composants, Navigation, Listes
flutter	Widgets, État, Mise en page, Thème
shadcn	Composants shadcn/ui, thématisation, formulaires, patterns
jetpack-compose	Composable, Modificateurs, État en amont, Recomposition

---

Exemple de workflow

Demande de l'utilisateur : "Crée une page d'atterrissage pour un service de soins de la peau professionnel"

Étape 1 : Analyser les besoins

• Type de produit : Service Beauté/Spa
• Mots-clés de style : élégant, professionnel, doux
• Secteur : Beauté/Bien-être
• Stack : html-tailwind (par défaut)

Étape 2 : Générer le système de design (REQUIS)

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

Sortie : Système de design complet avec motif, style, couleurs, typographie, effets et anti-modèles.

Étape 3 : Compléter avec des recherches détaillées (si nécessaire)

# Obtenir les directives UX pour l'animation et l'accessibilité
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibilité" --domain ux

# Obtenir des options de typographie alternatives si nécessaire
python3 skills/ui-ux-pro-max/scripts/search.py "élégant luxe serif" --domain typographie

Étape 4 : Directives de Stack

python3 skills/ui-ux-pro-max/scripts/search.py "mise en page responsive formulaire" --stack html-tailwind

Ensuite : Synthétiser le système de design + les recherches détaillées et implémenter le design.

---

Formats de sortie

Le flag --design-system prend en charge deux formats de sortie :

# Boîte ASCII (par défaut) - idéal pour l'affichage en terminal
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - idéal pour la documentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

---

Conseils pour de meilleurs résultats

1. Soyez précis avec les mots-clés - "tableau de bord SaaS santé" > "application"
2. Recherchez plusieurs fois - Différents mots-clés révèlent différentes informations
3. Combinez les domaines - Style + Typographie + Couleur = Système de design complet
4. Vérifiez toujours l'UX - Recherchez "animation", "z-index", "accessibilité" pour les problèmes courants
5. Utilisez le flag stack - Obtenez des meilleures pratiques spécifiques à l'implémentation
6. Itérez - Si la première recherche ne correspond pas, essayez différents mots-clés

---

Règles courantes pour une UI professionnelle

Ce sont des problèmes souvent négligés qui rendent une UI peu professionnelle :

Icônes et éléments visuels

Règle	À faire	À ne pas faire
Pas d'icônes emoji	Utiliser des icônes SVG (Heroicons, Lucide, Simple Icons)	Utiliser des emojis comme 🎨 🚀 ⚙️ comme icônes UI
États de survol stables	Utiliser des transitions de couleur/opacité au survol	Utiliser des transformations d'échelle qui déplacent la mise en page
Logos de marque corrects	Rechercher les SVG officiels de Simple Icons	Deviner ou utiliser des chemins de logo incorrects
Taille d'icône cohérente	Utiliser un viewBox fixe (24x24) avec w-6 h-6	Mélanger différentes tailles d'icônes de manière aléatoire

Interaction et curseur

Règle	À faire	À ne pas faire
Curseur pointeur	Ajouter cursor-pointer à tous les éléments cliquables/survolables	Laisser le curseur par défaut sur les éléments interactifs
Retour de survol	Fournir un retour visuel (couleur, ombre, bordure)	Aucune indication que l'élément est interactif
Transitions fluides	Utiliser transition-colors duration-200	Changements d'état instantanés ou trop lents (>500ms)

Contraste mode clair/sombre

Règle	À faire	À ne pas faire
Carte en verre mode clair	Utiliser bg-white/80 ou une opacité plus élevée	Utiliser bg-white/10 (trop transparent)
Contraste texte clair	Utiliser #0F172A (ardoise-900) pour le texte	Utiliser #94A3B8 (ardoise-400) pour le texte du corps
Texte atténué clair	Utiliser un minimum de #475569 (ardoise-600)	Utiliser gray-400 ou plus clair
Visibilité des bordures	Utiliser border-gray-200 en mode clair	Utiliser border-white/10 (invisible)

Mise en page et espacement

Règle	À faire	À ne pas faire
Barre de navigation flottante	Ajouter un espacement top-4 left-4 right-4	Coller la barre de navigation à top-0 left-0 right-0
Remplissage du contenu	Tenir compte de la hauteur de la barre de navigation fixe	Laisser le contenu se cacher derrière les éléments fixes
Largeur maximale cohérente	Utiliser le même max-w-6xl ou max-w-7xl	Mélanger différentes largeurs de conteneur

---

Checklist de pré-livraison

Avant de livrer le code UI, vérifiez ces éléments :

Qualité visuelle

• Aucun emoji utilisé comme icône (utiliser SVG à la place)
• Toutes les icônes proviennent d'un ensemble cohérent (Heroicons/Lucide)
• Les logos de marque sont corrects (vérifiés depuis Simple Icons)
• Les états de survol ne provoquent pas de changement de mise en page
• Utiliser les couleurs du thème directement (bg-primary), pas d'emballage var()

Interaction

• Tous les éléments cliquables ont cursor-pointer
• Les états de survol fournissent un retour visuel clair
• Les transitions sont fluides (150-300ms)
• Les états de focus sont visibles pour la navigation au clavier

Mode clair/sombre

• Le texte en mode clair a un contraste suffisant (minimum 4.5:1)
• Les éléments en verre/transparents sont visibles en mode clair
• Les bordures sont visibles dans les deux modes
• Tester les deux modes avant la livraison

Mise en page

• Les éléments flottants ont un espacement approprié par rapport aux bords
• Aucun contenu caché derrière les barres de navigation fixes
• Responsive à 375px, 768px, 1024px, 1440px
• Pas de défilement horizontal sur mobile

Accessibilité

• Toutes les images ont un texte alternatif
• Les entrées de formulaire ont des étiquettes
• La couleur n'est pas le seul indicateur
• prefers-reduced-motion respecté