LanceSkill - Guide UI/UX et Design de Jeux Haut de Gamme

Guide UI/UX et Conception de Jeux Haut de Gamme (Premium UI/UX & Game Design)

Ce skill vise à guider l'agent IA dans la conception d'interfaces web, d'applications ou de jeux pour dépasser les rendus par défaut « basiques, monotones, esthétique de développeur » et produire des produits professionnels au design moderne, à la hiérarchie visuelle soignée et aux interactions fluides (micro-interactions).

---

1. Normes d'Esthétique Visuelle et de Système de Design (Design System & Aesthetics)

🎨 Palette de Couleurs Raffinée (Color Palette)

• Interdiction des couleurs pures : Ne jamais utiliser #FF0000 (rouge pur), #00FF00 (vert pur), #0000FF (bleu pur), #FFFF00 (jaune pur).
• Teintes soigneusement choisies (Semantic Colors) :
  • Arrière-plan et texte : Utiliser des gris ardoise profonds (Deep Slate, ex. #0B0F19, #1E293B) ou un noir mat extrême, associés à un blanc cassé à contraste élevé mais doux (#F8FAFC).
  • Couleur primaire (Primary) : Utiliser l'indigo (#6366F1), le vert aurora (#10B981), la violette (#8B5CF6), le rouge rosé dégradé.
  • Couleurs d'état : Rouge corail doux (#EF4444) pour les erreurs, vert émeraude (#34D399) pour les succès.

✍️ Typographie Moderne et Hiérarchie Typographique (Typography)

• Chargement de polices : Toujours charger des polices modernes depuis Google Fonts, par exemple :
  • UI/Corps de texte : Inter ou Plus Jakarta Sans.
  • Titres/Chiffres : Outfit ou Cabinet Grotesk.
• Contraste des épaisseurs (Font Weights) : Utiliser 700 ou 800 pour les titres, 500/600 pour les sous-titres, 400 pour le corps du texte. Créer une hiérarchie visuelle via les graisses de police plutôt que par la seule taille de police.

🔮 Profondeur Spatiale et Effet Verre Dépoli (Depth & Glassmorphism)

• Design des coins arrondis : Boutons avec au moins 8px à 12px de rayon ; cartes avec 16px à 24px de rayon.
• Verre dépoli (Glassmorphism) :

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  

• Ombres douces (Box Shadows) : Utiliser des ombres multi-couches subtiles pour créer une sensation de flottement, en évitant les ombres noires brutes monocouches :

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03), 
              0 1px 3px rgba(0, 0, 0, 0.02);
  

---

2. Micro-interactions Fluides et Effets Dynamiques (Micro-interactions & Motion)

La finesse de l'interface vient du « retour et du mouvement ». Une interface sans animations de transition paraît rigide.

✨ Dynamiques des Boutons et Composants Interactifs (Button Interactions)

• Transitions fluides : Tous les états Hover/Focus/Active doivent inclure une transition fluide :

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  

• Surélévation et halo au survol (Hover) : Au passage de la souris, la carte se soulève légèrement, l'ombre s'accentue, ou la bordure s'illumine.

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(99, 102, 241, 0.4);
  }
  

• Retour de pression au clic (Press Feedbacks) :

  .button:active {
    transform: scale(0.96);
  }
  

🌀 Chargements et Transitions (Transitions & Loaders)

• Écran squelette (Skeleton Screen) : Pour les données chargées de manière asynchrone, toujours concevoir un écran squelette avec un scintillement fluide, plutôt qu'un texte "Chargement..." rigide.
• Animation SVG soignée : Si un spinner est nécessaire, utiliser une icône SVG légère tournant avec CSS, accompagnée d'un effet de dégradé.

---

3. Règles Spécifiques à l'Interface de Jeu (Game UI/UX Guidelines)

⏱️ Boucle de Jeu et Contrôles Fluides (Game Loop & Controls)

• Séparation physique/rendu : Utiliser requestAnimationFrame pour le rendu et traiter avec un pas de temps fixe.
• Lissage des contrôles : Si des capteurs sont utilisés pour contrôler le jeu, appliquer un filtre passe-bas ou une interpolation pour éviter les à-coups des composants.

💥 Retour Tactile et « Juice » du Jeu (Game Juice & Tactile Feedback)

• Retour de score/succès :
  • Agrandissement de la police avec rebond (transform: scale(1.2) avec animation bounce).
  • Effet de particules éclaboussées.
  • Valeur qui flotte vers le haut en s'estompant.
• Retour de dégâts/échec :
  • Secousse d'écran (Screen Shake).
  • Clignotement rouge.
  • Animation de secousse de carte (Shake animation).

📺 Configuration de l'Interface et HUD (Heads-Up Display)

• Disposition réactive plein écran sans parallaxe.
• Voile semi-transparent assombrissant, menus popup déclenchés par des animations Scale-up ou Slide-in.

---

4. Flux de Travail de Développement et Règles de Mise en Œuvre (Implementation Workflow)

1. Concevoir avant d'implémenter : Avant d'écrire du code, esquisser la disposition avec des diagrammes ASCII/Markdown.
2. Pas de contenu factice : Ne pas utiliser "Lorem Ipsum" ou autres données de test ; utiliser des icônes SVG (comme Lucide icons).
3. Centraliser les couleurs du thème avec des variables CSS.