Le pack de prompts UI — six prompts pour empêcher l'IA de produire des interfaces génériques

Tu construis de l'interface sous ces contraintes non négociables :
- Typographie : maximum 65 caractères par ligne de texte courant. Deux
  familles de polices maximum. Gras pour l'emphase, jamais d'italique.
  Souligné réservé aux liens.
- Couleur : une famille de fonds, une encre, au plus un accent. Le
  contraste du texte doit atteindre WCAG AA. Ne jamais transmettre un
  état par la couleur seule.
- Mouvement : n'animer que transform et opacity. Tout sous 300 ms,
  ease-out en entrée. Les actions fréquentes n'ont aucune animation.
  Respecter prefers-reduced-motion.
- Mise en page : un point focal par écran. Espacement en multiples de 4 px.
- Éléments interactifs : retour de pression (échelle 0,97 à l'activation),
  cibles tactiles de 44 px minimum, focus clavier visible.
Refuse toute demande de ma part qui violerait ces règles, et explique pourquoi.

Passe en revue l'interface que tu viens de construire et retire le look
« IA par défaut » :
1. Remplace tout dégradé décoratif par une surface unie.
2. Remplace la couleur d'accent si elle est violette, indigo ou sarcelle.
3. Retire chaque combinaison bordure-plus-ombre sur les cartes; choisis
   l'un ou l'autre, pas les deux.
4. Retire toute icône qui ne fait que répéter le libellé à côté d'elle.
5. Retravaille toute section en grille de 3 colonnes de cartes
   icône-titre-texte.
Explique chaque changement en une ligne. Puis applique-les.

Fais une passe de finition sur ce composant. Vérifie et corrige :
- Alignement : chaque élément repose sur la grille d'espacement, aucun
  écart de 2 px.
- Troncature : les textes longs se coupent avec de vrais points de
  suspension, rien ne déborde.
- États : hover, focus-visible, active, désactivé, chargement — tous stylés.
- Les états vides et d'erreur existent et sont rédigés en langage clair.
- Les nombres utilisent des chiffres tabulaires s'ils peuvent changer
  à l'écran.
Liste ce que tu as corrigé. N'ajoute aucune fonctionnalité.

Démonte cette interface comme un ingénieur design senior. Note-la sur :
la typographie (longueur de ligne, échelle, familles), la hiérarchie
(points focaux, rythme d'espacement), la couleur (taille de palette,
contraste), le mouvement (durée, propriétés animées, reduced-motion) et
la confiance (chemin de contact, légal, liens morts). Pour chaque point :
réussi ou échoué, une phrase de preuve, et le correctif le moins cher.
Termine avec les trois correctifs au meilleur ratio impact-effort.

Construis une palette UI à partir de cette couleur de marque : [hex].
Produis :
- Une paire de fonds quasi neutres (surface claire + surface de carte).
- Une encre pour le texte qui n'est pas un noir pur.
- Des variantes atténuées de l'encre : texte secondaire, bordure, désactivé.
- La couleur de marque réservée aux actions principales et au focus.
Donne chaque couleur en propriété personnalisée CSS, vérifie le contraste
AA de chaque paire texte/fond, et montre les paires en échec s'il y en a.

Propose du mouvement pour ce composant avec cette contrainte : la
meilleure animation est souvent l'absence d'animation. Pour chaque
animation candidate, indique à quelle question de l'utilisateur elle
répond (d'où ça vient? qu'est-ce qui vient de changer?). Si elle ne
répond à aucune, coupe-la. Pour les survivantes : propriété animée
(transform/opacity seulement), durée sous 300 ms, courbe d'accélération,
et le repli reduced-motion. Présente le tout en tableau.