leonxlnx/taste-skill

Protocole : Architecte UI Minimalisme Utilitaire Premium

1. Présentation du Protocole

Nom : Minimalisme Utilitaire Premium & UI Éditorial Description : Une directive avancée en ingénierie frontend pour générer des interfaces web hautement raffinées, ultra-minimalistes, de "style document", analogues aux plateformes de travail haut de gamme. Ce protocole impose strictement une palette monochrome chaleureuse à fort contraste, des hiérarchies typographiques sur mesure, un macro-whitespace structurel méticuleux, des layouts en bento-grid et une architecture de composants ultra-plate avec des accents pastel discrets et délibérés. Il rejette activement les tendances génériques de conception SaaS.

2. Contraintes Négatives Absolues (Éléments Interdits)

L'IA doit strictement éviter les valeurs par défaut génériques du développement web suivantes :

• NE PAS utiliser les polices "Inter", "Roboto" ou "Open Sans".
• NE PAS utiliser les bibliothèques d'icônes génériques à traits fins comme "Lucide", "Feather" ou les "Heroicons" standard.
• NE PAS utiliser les ombres portées lourdes par défaut de Tailwind (ex : shadow-md, shadow-lg, shadow-xl). Les ombres doivent être pratiquement inexistantes ou fortement personnalisées pour être ultra-diffuses et de faible opacité (< 0.05).
• NE PAS utiliser de fonds de couleur primaire pour de grands éléments ou sections (ex : pas de sections hero bleu vif, vert ou rouge).
• NE PAS utiliser de dégradés, de couleurs néon ou de glassmorphisme 3D (au-delà de flous subtils de barre de navigation).
• NE PAS utiliser rounded-full (formes de pilule) pour les grands conteneurs, les cartes ou les boutons primaires.
• NE PAS utiliser d'émojis nulle part dans le code, le balisage, le contenu textuel, les titres ou le texte alternatif. Remplacer par des icônes appropriées ou des primitives SVG propres.
• NE PAS utiliser de noms de remplacement génériques comme "Jean Dupont", "Acme Corp" ou "Lorem Ipsum". Utiliser un contenu réaliste et contextuel.
• NE PAS utiliser les clichés de rédaction IA : "Élever", "Sans couture", "Libérer", "Nouvelle génération", "Révolutionnaire", "Plonger". Écrire un langage simple et spécifique.

3. Architecture Typographique

L'interface doit reposer sur un contraste typographique extrême et une sélection de polices premium pour établir une sensation éditoriale.

• Sans-Serif Principal (Corps, UI, Boutons) : Utiliser des polices propres, géométriques ou natives du système avec du caractère. Cible : font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif.
• Serif Éditorial (Titres Hero et Citations) : Cible : font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif. Appliquer un crénage serré (letter-spacing: -0.02em à -0.04em) et une hauteur de ligne serrée (1.1).
• Monospace (Code, Touches de raccourci, Métadonnées) : Cible : font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace.
• Couleurs de Texte : Le texte du corps ne doit jamais être noir absolu (#000000). Utiliser un noir cassé/charcoal (#111111 ou #2F3437) avec une line-height généreuse de 1.6 pour la lisibilité. Le texte secondaire doit être d'un gris atténué (#787774).

4. Palette de Couleurs (Monochrome Chaud + Pastels Ponctuels)

La couleur est une ressource rare, utilisée uniquement pour un sens sémantique ou des accents subtils.

• Fond / Toile : Blanc Pur #FFFFFF ou Blanc Os/Blanc Cassé Chaud #F7F6F3 / #FBFBFA.
• Surface Primaire (Cartes) : #FFFFFF ou #F9F9F8.
• Bordures Structurelles / Séparateurs : Gris ultra-clair #EAEAEA ou rgba(0,0,0,0.06).
• Couleurs d'Accent : Utiliser exclusivement des pastels très désaturés et délavés pour les étiquettes, les arrière-plans de code en ligne ou les arrière-plans d'icônes subtils.
  • Rouge Pâle : #FDEBEC (Texte : #9F2F2D)
  • Bleu Pâle : #E1F3FE (Texte : #1F6C9F)
  • Vert Pâle : #EDF3EC (Texte : #346538)
  • Jaune Pâle : #FBF3DB (Texte : #956400)

5. Spécifications des Composants

• Grilles de Fonctionnalités en Bento Grid :
  • Utiliser des mises en page CSS Grid asymétriques.
  • Les cartes doivent avoir exactement border: 1px solid #EAEAEA.
  • Le border-radius doit être net : 8px ou 12px maximum.
  • Le remplissage interne doit être généreux (ex : 24px à 40px).
• Appels à l'Action Primaires (Boutons) :
  • Fond solide #111111, texte #FFFFFF.
  • Légère bordure arrondie (4px à 6px). Pas de box-shadow.
  • L'état de survol doit être un changement de couleur subtil vers #333333 ou une micro-échelle transform: scale(0.98).
• Étiquettes et Badges d'État :
  • En forme de pilule (border-radius: 9999px), typographie très petite (text-xs), en majuscules avec un crénage large (letter-spacing: 0.05em).
  • L'arrière-plan doit utiliser les Pastels Atténués définis.
• Accordéons (FAQ) :
  • Supprimer tous les cadres de conteneur. Séparer les éléments uniquement par un border-bottom: 1px solid #EAEAEA.
  • Utiliser une icône + et - propre et nette pour l'état de bascule.
• Micro-UI de Touches de Raccourci :
  • Afficher les raccourcis comme des touches physiques à l'aide de balises <kbd> : border: 1px solid #EAEAEA, border-radius: 4px, background: #F7F6F3, en utilisant la police Monospace.
• Chrome de Fenêtre Faux-OS :
  • En simulant un logiciel, l'envelopper dans un conteneur minimaliste avec une barre supérieure blanche contenant trois petits cercles gris clair (reproduisant les contrôles de fenêtre macOS).

6. Directives sur l'Iconographie et l'Imagerie

• Icônes Système : Utiliser "Phosphor Icons (poids Gras ou Rempli)" ou "Radix UI Icons" pour une esthétique technique, au trait légèrement plus épais. Standardiser la largeur du trait sur toutes les icônes.
• Illustrations : Croquis à l'encre monochromes, au trait continu et rugueux, sur fond blanc, comportant une seule forme géométrique décalée remplie d'une couleur pastel atténuée.
• Photographie : Utiliser des images de haute qualité, désaturées, avec une tonalité chaude. Appliquer des superpositions subtiles (opacity: 0.04 grain chaud) pour fondre les photos dans la palette monochrome. Ne jamais utiliser de photos stock sursaturées. Utiliser des espaces réservés fiables comme https://picsum.photos/seed/{context}/1200/800 lorsque les ressources réelles ne sont pas disponibles.
• Arrière-plans Hero et de Sections : Les sections ne doivent pas sembler vides et plates. Utiliser des images d'arrière-plan subtiles en pleine largeur à très faible opacité, des points lumineux radiaux doux (radial-gradient avec des tons chauds à opacity: 0.03), ou des motifs de lignes géométriques minimalistes pour ajouter de la profondeur sans briser l'esthétique propre.

7. Mouvement Subtile et Micro-Animations

Le mouvement doit sembler invisible – présent mais jamais distrayant. L'objectif est une sophistication discrète, pas un spectacle.

• Entrée au Scroll : Les éléments apparaissent en fondu doux à mesure qu'ils entrent dans la fenêtre d'affichage. Utiliser translateY(12px) + opacity: 0 se résolvant sur 600ms avec cubic-bezier(0.16, 1, 0.3, 1). Utiliser IntersectionObserver, jamais window.addEventListener('scroll').
• États de Survol : Les cartes se soulèvent avec un changement d'ombre ultra-subtil (box-shadow passant de 0 0 0 à 0 2px 8px rgba(0,0,0,0.04) sur 200ms). Les boutons répondent avec scale(0.98) sur :active.
• Dévoilements Échelonnés : Les listes et les éléments de grille entrent avec un délai en cascade (animation-delay: calc(var(--index) * 80ms)). Ne jamais monter tout en même temps.
• Mouvement Ambiant d'Arrière-plan : Optionnel. Une seule tache de dégradé radial se déplaçant très lentement (animation-duration: 20s+, opacity: 0.02-0.04) dérivant derrière les sections hero. Doit être appliquée à une couche position: fixed; pointer-events: none. Jamais sur des conteneurs à défilement.
• Performance : Animer exclusivement via transform et opacity. Pas de propriétés déclenchant une mise en page (top, left, width, height). Utiliser will-change: transform avec parcimonie et uniquement sur les éléments en animation active.

8. Protocole d'Exécution

Lorsqu'il est chargé d'écrire du code frontend (HTML, React, Tailwind, Vue) ou de concevoir une mise en page :

1. Établir d'abord le macro-whitespace. Utiliser un espacement vertical massif entre les sections (ex : py-24 ou py-32 dans Tailwind).
2. Contraindre la largeur du contenu typographique principal à max-w-4xl ou max-w-5xl.
3. Appliquer immédiatement la hiérarchie typographique personnalisée et les variables de couleur monochromatiques.
4. S'assurer que chaque carte, séparateur et bordure adhère strictement à la règle 1px solid #EAEAEA.
5. Ajouter des animations d'entrée au scroll à tous les blocs de contenu majeurs.
6. S'assurer que les sections aient une profondeur visuelle grâce à des images, des dégradés ambiants ou des textures subtiles – pas de fonds plats vides.
7. Fournir un code qui reflète cette esthétique éditoriale haut de gamme, épurée et native, sans nécessiter d'ajustements manuels.