KIT-code-maker/design-excellence

Excellence en Design

Faire en sorte que les applications construites par l'IA aient l'air conçues par des humains. Pas de modèles génériques. Pas de motifs évidents.

<core_principle>

La Norme Artisanale

Si quelqu'un peut dire que c'est généré par IA, nous avons échoué.

Un bon design est invisible. Les utilisateurs doivent sentir que l'application est professionnelle, et non pas qu'elle suit un modèle. </core_principle>

<color_system>

Philosophie des Couleurs

Le Problème des Choix de Couleurs par IA

L'IA a tendance à choisir :

• Dégradés violets sur fond blanc (aspect par défaut de Lovable)
• Couleurs d'accent trop saturées
• Trop de couleurs dans une seule interface
• Dégradés là où des couleurs unies fonctionnent mieux

Notre Approche : la Retenue

Palette de Base (par défaut)

/* Utiliser l'échelle ardoise de Tailwind pour les neutres */
--background: slate-50       /* Fond de page */
--surface: white             /* Cartes, modales */
--border: slate-200          /* Séparateurs, bordures */
--text-primary: slate-900    /* Titres */
--text-secondary: slate-600  /* Corps de texte */
--text-muted: slate-400      /* Espaces réservés, indices */

Couleurs d'Accent (en choisir UNE par application)

/* Défaut : Bleu (professionnel, digne de confiance) */
--accent: blue-600
--accent-hover: blue-700
--accent-light: blue-50

/* Alternatives selon le type d'application : */
/* Finance/Banque → Vert (argent) */
/* Santé/Bien-être → Sarcelle (calme) */
/* Alimentation/Restaurant → Orange (appétit) */
/* Créatif/Design → Violet (créativité) */
/* Urgence/Alerte → Rouge (attention) */

Règles

1. UNE seule couleur d'accent par application, sans exception
2. Utiliser l'accent avec parcimonie - uniquement boutons, liens, mises en évidence
3. Jamais de dégradé sur les boutons primaires
4. Le fond est blanc ou presque blanc, pas coloré
5. Mode sombre : inverser correctement, ne pas se contenter de le rendre gris </color_system>

<typography_system>

Règles Typographiques

La Pile de Polices

/* Ne pas spécifier Inter partout - utiliser les polices système */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 
  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

/* Cela donne un aspect natif sur toutes les plateformes */

Échelle Typographique (classes Tailwind)

Titre de page :     text-2xl font-semibold   (24px)
Titre de section :  text-lg font-medium      (18px)
Titre de carte :    text-base font-medium    (16px)
Corps de texte :    text-sm                  (14px)
Petit/Légende :     text-xs text-slate-500   (12px)

Anti-patrons

❌ N'utilisez pas font-bold partout ❌ Ne mélangez pas trop de tailles de police dans une seule carte ❌ N'utilisez pas de MAJUSCULES pour les longs textes ❌ Ne centrez pas les paragraphes de corps de texte ❌ N'utilisez pas le noir pur (#000) - utilisez slate-900

Bons Patrons

✅ Titres : semibold ou medium, jamais regular ✅ Corps de texte : poids regular, bonne hauteur de ligne (1.5-1.6) ✅ Gardez une hiérarchie : maximum 3 tailles par composant ✅ Alignez la plupart du texte à gauche (sauf titres dans les dispositions centrées) </typography_system>

<spacing_system>

Espacement et Disposition

Échelle d'Espacement

Utilisez l'échelle par défaut de Tailwind de manière cohérente :

4   (1rem/16px)  - Petits écarts, éléments en ligne
6   (1.5rem/24px) - Écarts moyens, entre les composants
8   (2rem/32px)  - Grands écarts, entre les sections
12  (3rem/48px)  - Très grands écarts, sections de page

Disposition de Page

// Conteneur de page standard
<div className="p-4 md:p-6 lg:p-8">
  {/* Titre de page */}
  <h1 className="text-2xl font-semibold mb-6">Tableau de Bord</h1>
  
  {/* Sections de contenu avec espacement cohérent */}
  <section className="mb-8">
    {/* Contenu de la section */}
  </section>
</div>

Espacement Interne des Cartes

<Card>
  <CardHeader className="pb-4">  {/* Réduire le remplissage par défaut */}
    <CardTitle>Titre</CardTitle>
  </CardHeader>
  <CardContent className="space-y-4">
    {/* Contenu avec écarts verticaux */}
  </CardContent>
</Card>

Anti-patrons

❌ Remplissage incohérent (p-3 ici, p-5 là) ❌ Trop peu d'espace blanc (sensation d'étouffement) ❌ Trop d'espace blanc (sensation de déconnexion) ❌ Tailles d'écart différentes pour des éléments de même niveau </spacing_system>

<animation_system>

Mouvement et Animation

Philosophie

L'animation devrait :

• Paraître naturelle, pas criarde
• Fournir un retour d'information, pas une distraction
• Être rapide (150-300ms), pas lente
• Être subtile, pas dramatique

Transitions Standard

// États de survol - utiliser transition-colors ou transition-all
<div className="transition-colors hover:bg-slate-50">

// Survol de carte - soulèvement subtil
<Card className="transition-shadow hover:shadow-md">

// Survol de bouton - intégré dans shadcn, ne pas surcharger
<Button>Déjà animé</Button>

Patrons Framer Motion

// Transitions de page
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>

// Effet d'échelonnement de liste
<motion.div
  variants={{
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: { staggerChildren: 0.1 }
    }
  }}
  initial="hidden"
  animate="show"
>
  {items.map(item => (
    <motion.div
      key={item.id}
      variants={{
        hidden: { opacity: 0, y: 20 },
        show: { opacity: 1, y: 0 }
      }}
    >
      {item.content}
    </motion.div>
  ))}
</motion.div>

// Micro-interaction - tapotement de bouton
<motion.button whileTap={{ scale: 0.98 }}>
  Cliquez-moi
</motion.button>

Timing des Animations

• Effets de survol : 150ms
• Petites transitions : 200ms
• Transitions de page : 300ms
• Animations complexes : max 400-500ms

Anti-patrons

❌ Effets de rebond (sensation bon marché) ❌ Animations lentes (>500ms donne une sensation de lenteur) ❌ Animation sur chaque élément (accablant) ❌ Chargeurs rotatifs partout (utiliser des squelettes à la place) ❌ Animations d'entrée dramatiques </animation_system>

<component_patterns>

Patrons de Conception de Composants

Cartes

// Carte propre - pas de décoration excessive
<Card className="bg-white border shadow-sm">
  <CardContent className="p-4">
    {/* Contenu */}
  </CardContent>
</Card>

// NE PAS FAIRE : rounded-3xl, ombres lourdes, bordures dégradées

Boutons

// Action primaire
<Button>Enregistrer</Button>

// Action secondaire
<Button variant="outline">Annuler</Button>

// Action destructive
<Button variant="destructive">Supprimer</Button>

// Bouton d'icône
<Button variant="ghost" size="icon">
  <Settings className="h-4 w-4" />
</Button>

// NE PAS FAIRE : boutons dégradés, effets 3D, icônes dans les boutons primaires (généralement)

Formulaires

// Disposition de formulaire propre
<div className="space-y-4">
  <div className="space-y-2">
    <Label>Nom</Label>
    <Input placeholder="Entrez votre nom" />
  </div>
  
  <div className="space-y-2">
    <Label>Email</Label>
    <Input type="email" placeholder="[email protected]" />
  </div>
</div>

// NE PAS FAIRE : étiquettes en ligne, étiquettes flottantes (sauf si demandé), icônes à l'intérieur des champs de saisie

Tableaux

// Tableau propre
<Table>
  <TableHeader>
    <TableRow className="bg-slate-50">
      <TableHead>Nom</TableHead>
      <TableHead>Statut</TableHead>
      <TableHead className="text-right">Actions</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow className="hover:bg-slate-50">
      <TableCell>Jean Dupont</TableCell>
      <TableCell><Badge>Actif</Badge></TableCell>
      <TableCell className="text-right">
        <Button variant="ghost" size="sm">Modifier</Button>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

// NE PAS FAIRE : rayures zébrées (obsolète), bordures lourdes, contenu centré

</component_patterns>

<anti_patterns_detail>

Signaux d'Alerte du Design Généré par IA

Le "Look Lovable" (à éviter)

• Violet comme couleur primaire
• Arrière-plans dégradés sur des cartes blanches
• rounded-3xl sur tout
• Émojis dans les en-têtes
• "Bon retour, Utilisateur ! 👋"
• Illustrations génériques de type photo d'archives

Le "Look Bootstrap" (à éviter)

• Ombres portées lourdes
• Boutons en pilule arrondis
• Liens bleus sur tout
• Grilles de cartes de hauteurs égales
• En-têtes de style Jumbotron

Le "Look Material" (à éviter, sauf si demandé)

• Boutons d'action flottants
• Cartes surélevées partout
• Effets d'ondulation sur tout
• Menu hamburger sur desktop

Ce qui rend le design "Fait par un Humain"

1. Retenue - Toutes les fonctionnalités ne sont pas mises en évidence
2. Hiérarchie - Primaire, secondaire, tertiaire clairs
3. Espace blanc - De l'espace pour respirer
4. Cohérence - Les mêmes patrons répétés
5. Détails subtils - Petites touches qui ne crient pas
6. Contenu réel - Aucun texte d'espace réservé visible </anti_patterns_detail>

<review_checklist>

Checklist de Revue de Design

Vérification des Couleurs

• Une SEULE couleur d'accent utilisée
• Pas de dégradés sur les fonds blancs
• Pas de texte noir pur
• Contraste suffisant pour l'accessibilité

Vérification Typographique

• Maximum 3 tailles de police par composant
• Hiérarchie appropriée (titres semibold, corps regular)
• Pas de paragraphes en MAJUSCULES
• Hauteur de ligne lisible (1.5+)

Vérification de l'Espacement

• Remplissage cohérent sur l'ensemble
• Assez d'espace blanc entre les sections
• Le contenu n'est pas à l'étroit
• L'espacement mobile est proportionnel

Vérification des Animations

• Les transitions sont subtiles (150-300ms)
• Pas d'effets de rebond/ressort
• Le chargement utilise un squelette, pas un spinner
• Les états de survol fournissent un retour d'information

Vérification des Composants

• Les cartes n'ont pas de décoration excessive
• Les boutons suivent la hiérarchie (primaire/secondaire)
• Les formulaires sont disposés proprement
• Les tableaux sont lisibles et interactifs

Vérification Finale

• Un utilisateur saurait-il que c'est fait par IA ? (Devrait être NON)
• Cela ressemble-t-il à un vrai produit ? (Devrait être OUI)
• Est-ce cohérent avec les applications SaaS modernes ? (Devrait être OUI) </review_checklist>