CleanUI — Compétence de Renforcement UI par IA

STOP. Avant d'écrire du code UI, lis ce fichier.

Tu es un générateur de code IA avec des habitudes UI profondément enracinées qui produisent des sorties « faites par l’IA ». Cette compétence existe pour outrepasser ces habitudes et produire des interfaces professionnelles conçues par des humains.

Ton processus pour chaque tâche UI :

Réfléchis à ce que tu générerais NORMALEMENT

Vérifie chaque élément contre la liste INTERDICTION ABSOLUE ci-dessous

Remplace chaque violation par l’alternative spécifiée

Seulement ensuite écris le code

LISTE INTERDICTION ABSOLUE — MOTIFS D’ÉCHEC AUTOMATIQUES

Si ta sortie contient l’un de ces éléments, arrête et corrige avant de retourner le code.

Typographie

INTERDIT : font-extrabold (800), font-black (900), fontWeight: "800", fontWeight: "900"
UTILISE À LA PLACE : font-bold (700) maximum. font-semibold (600) pour les titres de section.
AUTO-VÉRIFICATION : Cherche dans ton code « extrabold » et « black ». Remplace tout par « bold ».

Logo / Barres de confiance

INTERDIT : Noms d’entreprise comme texte brut identique dans des boîtes/pills identiques
UTILISE À LA PLACE : Rend chaque logo visuellement distinct — associe icônes et noms, varie le poids/italique/espaces par logo, ou utilise des SVG
AUTO-VÉRIFICATION : Tous les logos se ressemblent ? Corrige.

Majuscules / Espacement des lettres

INTERDIT : tracking-[0.18em], tracking-[0.2em], tracking-[0.24em] ou tout espacement large personnalisé
INTERDIT : Plus de 2 étiquettes en majuscules sur toute la page
UTILISE À LA PLACE : Phrase en minuscule. Si majuscule nécessaire, tracking-wider (0.05em) maximum.

Badges décoratifs

INTERDIT : Pill/badge décoratif au-dessus des titres qui répète ce que dit le titre (ex. « Système d’écriture IA pour les équipes de contenu »)
UTILISE À LA PLACE : Supprime entièrement, ou utilise une info factuelle : « Actuellement en bêta », « Salué par 2 400 équipes », « Forfait gratuit disponible »

Titres de héros

INTERDIT : Titres qui s’étendent sur 4 lignes ou plus sur desktop
UTILISE À LA PLACE : 4-8 mots, maximum 2 lignes. Raccourcis.
INTERDIT : Sous-titre plus long que 2 phrases
UTILISE À LA PLACE : 1-2 phrases courtes maximum.

Texte décoratif

INTERDIT : Étiquettes ornementales comme « Impulsion en direct », « Quart de nuit », « Clarté opérationnelle sans encombrement »
UTILISE À LA PLACE : Données réelles (statut, comptes, dates) ou supprime entièrement. Chaque étiquette doit avoir une fonction.

Ombres

INTERDIT : shadow-xl, shadow-2xl, flou supérieur à 8px sur les cartes
UTILISE À LA PLACE : shadow-sm ou shadow-none avec contour subtil.

Rayon de bordure

INTERDIT : Mélange aléatoire de rounded-md, rounded-xl, rounded-2xl, rounded-3xl, rounded-[24px], rounded-[32px]
UTILISE À LA PLACE : Choisis 2-3 valeurs. Cartes : 8-12px. Boutons : 6-8px (ou rounded-full pour les pills). Champs de saisie : 6-8px. Sois cohérent.

Icônes

INTERDIT : Caractères Unicode comme icônes (↑, ↓, ◌, ⌂, ◫)
UTILISE À LA PLACE : lucide-react (web), @expo/vector-icons (React Native), SF Symbols (iOS), Material Icons (Android)

Structure de fichiers

INTERDIT : Application entière dans un seul fichier
UTILISE À LA PLACE : Sépare : écrans/pages, composants, constantes/thème, données, navigation

RÈGLES DE DISPOSITION

Fais correspondre la disposition au type de contenu

Type de contenu	Disposition	N’utilise pas
Images/visuel (nourriture, voyage, produits)	Carrousels horizontaux, grilles d’images, images héros	Listes verticales uniquement texte
Données/chiffres (finance, fitness, analytique)	Cartes statistiques, barres de progression, grilles de métriques	Cartes image héros
Fil d’actualité (social, news, posts)	Cartes empilées pleine largeur, défilement infini	Disposition sectionnée avec poignées de glissement
Éléments à parcourir (e-commerce, tâches, e-mail)	Liste verticale avec recherche/filtres	Sections héros
Multimédia (streaming, musique, podcasts)	Étagères horizontales défilantes (style Netflix)	Listes verticales
Discussion/messages	Liste de contacts + détail de discussion	Cartes héros ou grilles statistiques
Cartes/localisation	Vue carte + superposition de panneau inférieur	Disposition liste standard

Règles anti-modèles

N’utilise JAMAIS le même squelette de disposition pour chaque application. Lis le prompt, identifie le type de contenu, choisis la disposition appropriée.
N’utilise JAMAIS TOUS ces éléments ensemble : carte héros + boutons en grille + poignée de glissement + contrôle segmenté + liste verticale. C’est un modèle.
Si l’application est riche en images, affiche des images réelles — miniatures, photos — pas seulement des icônes dans des carrés arrondis.
Utilise des défilements horizontaux (FlatList horizontal, CSS overflow-x-auto) pour les catégories, articles en vedette, étagères de contenu. Les générateurs IA sous-utilisent ces techniques.

BON GOÛT DE DESIGN

Retenue des couleurs

Les palettes monochromes ou quasi monochromes sont souvent plus belles que les palettes colorées.
La couleur devrait apparaître principalement dans les actions (boutons, liens), le statut (badges) et les surlignages (états sélectionnés). Pas sur tout.
Les éléments sombres (cartes, sections) sont justifiés UNIQUEMENT lorsqu’ils représentent un objet réel (carte de crédit, lecteur multimédia, bloc de code) ou créent un rythme visuel délibéré. Pas seulement « pour changer ».

Éléments de liste

N’utilise JAMAIS les initiales de lettres comme seul identifiant. Utilise des icônes spécifiques à la catégorie (couverts pour restaurant, bus pour transport, répéter pour abonnement) dans des carrés arrondis.
Inclus toujours des métadonnées : date/heure, catégorie, statut. « Restaurant » sonne faux. « Restaurant · 5 mai · 14:28 » sonne vrai.

Filtres

Toute liste de 5 éléments ou plus doit avoir un filtre ou un contrôle segmenté.
Contrôle segmenté : style pill-track avec remplissage plein sur le segment sélectionné.

Boutons d’action

Le style sans bordure est souvent plus propre : icône dans un carré à fond atténué + étiquette en dessous. Pas d’emballage carte, pas d’ombre, pas de bordure nécessaire.

RÈGLES MOBILES

Voir Références de modèles mobiles pour les palettes de couleurs iOS complètes, les tokens Material 3 Android, les directives de composants et les exemples de code.

Toutes plateformes

Utilise des bibliothèques de navigation réelles, pas des barres de navigation personnalisées basées sur View. React Native : @react-navigation/bottom-tabs. iOS : TabView. Android : Material NavigationBar.
NE construis JAMAIS de barres de navigation inférieures en forme de pilule flottante. Pas de position: absolute, pas de borderRadius: 28, pas de pilule flottante sombre.
Utilise Platform.select() ou Platform.OS pour un style conditionnel dans React Native.
Définis des tokens de design (couleurs, espacements, rayons, typographie) dans un fichier de constantes.
Prends en compte 3 états par écran : chargement (squelettes), contenu, vide.

iOS

Discret, doux, premium. Couleurs retenues. Polices système (SF Pro). Couleurs sémantiques (.label, .secondaryLabel, .systemBackground). Barres de navigation/onglets translucides. listStyle(.insetGrouped). SF Symbols pour les icônes. Séparateurs fins. Rayon de coin : 10-12. Pas d’ombres lourdes — utilise le contraste de fond.

Android (Material 3)

Structuré, audacieux, expressif. Composants Material de material3. Surfaces tonales (tonalElevation) au lieu d’ombres portées. Scaffold avec TopAppBar + NavigationBar. Composable ListItem pour les lignes de liste. HorizontalDivider() entre les éléments. Rayon de coin : 12dp pour les cartes. Génère le jeu de couleurs à partir d’une couleur de base.

React Native / Expo

Couleurs, ombres et espacements conditionnels à la plateforme via Platform.select().
iOS utilise shadowColor/shadowOpacity/shadowRadius. Android utilise elevation.
Couleurs de fond différentes par plateforme : iOS #F2F2F7, Android #F9F9FF.
Couleurs primaires différentes : iOS #007AFF, Android utilise la couleur de base Material.

RÈGLES WEB

Liberté créative + Structure

Tu as la liberté sur : la palette de couleurs, le choix de police, les valeurs de rayon de bordure, la personnalité de marque, les traitements de fond.

Tu dois suivre : la structure des sections, les limites de contenu du héros, les motifs de composants, le comportement responsive.

Navigation

Barre collante en haut avec backdrop-blur et fond semi-transparent
Logo à gauche, liens de navigation au centre, boutons d’appel à l’action à droite
Mobile : menu hamburger

Structure de page d’accueil

Hero       → titre + sous-titre + 2 CTA + un élément de confiance
Confiance   → barre de logos (logos visuellement distincts)
Fonctionnalités → grille 3 colonnes avec icône + titre + description
Comment ça marche → processus en 3 étapes
Témoignages → avatar + nom + rôle + citation
Tarifs    → 2-3 niveaux, niveau vedette inversé visuellement (fond sombre)
CTA       → dernier appel à l’action
Pied de page → colonnes de liens + droits d’auteur

Héros

Titre + sous-titre court + 2 boutons + un élément de confiance. Point final.
Maquette/capture d’écran du produit sur le côté droit d’un héros à deux colonnes est acceptable.
Ne mets PAS de cartes statistiques, de cartes d’aperçu complexes avec listes ou de descriptions multi-paragraphes dans le héros.

Cartes de fonctionnalités

Conteneur d’icônes : au moins 48px avec fond teinté. Pas minuscule.
Bordure de carte : généreuse (p-6 à p-8).
Chaque carte doit sembler complète — icône + titre + description.

Tarifs

Niveau vedette : inversé (fond sombre, texte clair) ou bordure plus épaisse + badge « Le plus populaire ».
CTA pleine largeur dans chaque carte.

Connexion

Deux colonnes : panneau de marque (gauche, sombre) + formulaire (droite).
Connexion sociale au-dessus du formulaire e-mail.
Mobile : cacher le panneau de marque, afficher le formulaire avec logo.

Tableau de bord

Barre latérale (240-260px) + contenu principal.
Barre latérale : logo, éléments de navigation avec icônes, carte de mise à niveau facultative.
Barre supérieure : recherche + notifications + avatar.
Contenu : salutation → cartes statistiques → liste filtrée avec onglets → fil d’activité.

Mode sombre

Fond : gris très foncé, pas noir pur.
Texte : blanc cassé, pas blanc pur.
Bordures : gris foncé. Réduis la saturation des couleurs.

LISTE DE VÉRIFICATION AVANT SORTIE

Avant de retourner le code, vérifie :

Typographie :

Pas de font-extrabold ou font-black nulle part
Maximum 2 poids de police utilisés (regular + bold/semibold)

Visuel :

Pas de tracking-[0.18em] ou plus large
Maximum 2 étiquettes en majuscules sur toute la page
Les éléments de la barre de logos sont visuellement distincts les uns des autres
Pas de shadow-xl ou shadow-2xl sur les cartes
Rayon de bordure cohérent (2-3 valeurs maximum)

Héros :

Le titre tient sur 2 lignes sur desktop
Le badge (si présent) ajoute une nouvelle info, ne répète pas le titre
Le sous-titre fait 1-2 phrases, pas un paragraphe

Structure :

Plusieurs fichiers (écrans, composants, constantes, navigation)
Bibliothèque d’icônes réelle (pas Unicode)
Style spécifique à la plateforme (React Native)
États de chargement/vides existent

Disposition :

La disposition correspond au type de contenu (pas le même modèle à chaque fois)
Les éléments de liste ont des icônes de catégorie + métadonnées
Les listes de 5+ éléments ont des filtres

Demander à votre IA préférée

Documentation