Compétence de Conception Frontend

Créez des interfaces frontend distinctives et de qualité production qu'aucun humain n'identifierait comme générées par IA. Chaque résultat doit ressembler à une création d'une agence de design onéreuse — audacieuse, intentionnelle et mémorable.

Protocole de Réflexion en Design

Avant d'écrire LE MOINDRE code, complétez cette liste de vérification. Ne sautez pas d'étapes.

1. Objectif — Quel problème cette interface résout-elle ? Qui l'utilise ?

2. Ton — Choisissez UNE direction esthétique extrême. C'est obligatoire — ne continuez jamais avec une direction non nommée.

Choisissez parmi (ou inventez la vôtre avec autant de spécificité) :

Minimaliste brutal | Chaos maximaliste | Rétro-futuriste | Organique/naturel
Éditorial de luxe | Brutaliste/brut | Art déco/géométrique | Doux/pastel
Industriel/utilitariste | Néo-Memphis | Moderniste suisse | Minimaliste japonais
Terminal rétro-futuriste | Calme nordique | Néons de Tokyo | Chaleur du désert

Si vous ne pouvez pas nommer le ton en deux mots, vous n'avez pas décidé. « Moderne propre » N'EST PAS un ton — c'est l'absence de ton, et cela produit de la bouillie IA.

3. Contraintes — Framework (HTML/React/Vue/Svelte), support navigateur, budget performance, charte graphique existante.

4. Différenciation — Quelle est l'UNIQUE chose dont on se souviendra sur cette page ? Nommez-la explicitement avant de coder.

Le Manifeste Anti-Bouillie

Ces règles existent parce que les LLM convergent vers une sortie statistiquement moyenne — agréable, inoffensive et totalement oubliable. Les motifs ci-dessous sont sur liste noire non pas parce qu'ils sont intrinsèquement mauvais, mais parce que leur utilisation indiscriminée est le signal n°1 du design généré par IA.

Polices sur Liste Noire

N'utilisez JAMAIS celles-ci comme police d'affichage principale sans demande explicite de l'utilisateur :

Police	Pourquoi	Utilisez plutôt
Inter	#1 défaut IA (~90% des IAs LLM)	Satoshi, General Sans, ou une serif comme Fraunces
Roboto	#2 défaut IA (écosystème Android/Chrome)	Outfit, Plus Jakarta Sans (corps uniquement), Karla
Arial / system-ui	Absence de choix typographique	Toute sélection de police intentionnelle
Open Sans	Défaut IA hérité (données d'entraînement pré-2022)	Source Sans 3, Nunito (corps uniquement)
Poppins	Saturation des templates Figma	Figtree, Outfit, DM Sans (corps uniquement)
Space Grotesk	Était distinctive, maintenant défaut IA « excentrique sûr »	Syne, Anybody, Chakra Petch
Montserrat	Sérif géométrique surutilisé	Josefin Sans, Barlow, Jost

Règle : Si une police figure dans le top 20 des polices Google par popularité, justifiez-la explicitement ou rejetez-la. Consultez references/typography-pairings.md pour plus de 20 associations organisées par ton.

Couleurs sur Liste Noire

N'utilisez JAMAIS celles-ci comme accent principal sans intention explicite :

Couleur	Hex	Pourquoi
Tailwind indigo-500	`#6366f1`	La couleur IA originelle. Attribuable à une seule décision de la documentation Tailwind.
Tailwind violet-500	`#8b5cf6`	Deuxième accent IA le plus courant.
Tailwind purple-500	`#a855f7`	Point d'arrivée du dégradé indigo→violet.
Tailwind blue-500	`#3b82f6`	L'alternative IA « entreprise » au violet.
Le dégradé IA	`from-indigo-500 to-purple-600`	Le dégradé IA canonique et toutes ses variantes.
Arrière-plans blancs plats	`#ffffff`, `#f9fafb`, `#f8fafc`	L'IA n'explore jamais les thèmes sombres, les tons terreux ou la profondeur atmosphérique.

Règle : Si votre palette pourrait être reproduite par npx create-next-app + les valeurs par défaut de Tailwind, recommencez. Consultez references/color-systems.md pour plus de 15 palettes organisées.

Mises en Page sur Liste Noire

Ne produisez JAMAIS ces structures :

Le template IA en 9 sections : Hero → barre de logos → 3 colonnes fonctionnalités → étapes « comment ça marche » → carrousel de témoignages → tableau de prix → FAQ accordéon → bannière CTA → footer 4 colonnes. Cette séquence exacte est reproduite sur chaque page SaaS générée par IA.
Grilles symétriques de 3 colonnes de cartes comme structure de contenu principale.
Tout centré — text-center sur chaque section, mx-auto sur chaque conteneur, aucune tension spatiale.
Des cartes pour tout — rounded-xl shadow-lg p-6 sur chaque bloc de contenu, qu'il nécessite ou non un traitement de carte.

Règle : Chaque mise en page doit avoir au moins UN élément brisant la grille : asymétrie, chevauchement, pleine largeur, flux diagonal ou espace négatif inattendu. Consultez references/layout-patterns.md pour des wireframes.

Animations sur Liste Noire

fade-in-up sur chaque élément via IntersectionObserver (le défilement universel IA)
hover:-translate-y-1 hover:shadow-xl sur chaque carte
transition-all duration-300 appliqué sans discernement
Animations cycliques de dégradés de couleurs
Parallaxe générique sur tout

Règle : Maximum 2-3 mouvements intentionnels par page. Chacun doit servir la hiérarchie ou l'atmosphère. Consultez references/motion-recipes.md pour plus de 12 alternatives distinctives.

Copie sur Liste Noire

N'écrivez jamais ces phrases :

« Révolutionnez votre flux de travail » / « Transformez la façon dont vous... »
« Libérez la puissance de... » / « Intégrez en toute transparence... »
« Construit pour le moderne... » / « Boostez votre... »
« Faites passer votre X au niveau supérieur » / « Tout ce dont vous avez besoin pour... »
« Dites adieu à [point douloureux] » / « Propulsé par une technologie de pointe... »

Mots interdits (sauf citation de l'utilisateur) : transparent, tirer parti, de pointe, robuste, évolutif, autonomiser, révolutionnaire, niveau supérieur, holistique, innovant, à la pointe, plonger

Règle de copie : Les titres portent un sens spécifique. Une courte phrase de soutien par section. « Si supprimer 30% améliore la page, continuez à supprimer. »

Composants sur Liste Noire

Boutons CTA avec dégradé (bg-gradient-to-r from-indigo-500 to-purple-600)
Barre de navigation avec fond flou (backdrop-blur-md bg-white/80) par défaut
Icône + titre + paragraphe en grille 3 colonnes (le bloc de fonctionnalités universel)
Badges/étiquettes flottantes sur les images hero
Carrousels de témoignages avec avatars circulaires et évaluations par étoiles
Nuages de logos « Approuvé par » en bandes horizontales
Tableaux de prix génériques (Gratuit / Pro / Enterprise avec badge « Le plus populaire »)

Système Typographique

Chaque projet doit établir un système typographique délibéré :

Association Affichage + Corps — Deux familles de polices distinctes. Affichage = caractère, Corps = lisible. Jamais la même police pour les deux.
Variables CSS — --font-display, --font-body, --font-accent (monospace optionnel)
Échelle modulaire — Choisissez un ratio (1.25 tierce majeure, 1.333 quarte juste, 1.5 quarte augmentée) et appliquez-le de manière cohérente
Contraste de graisse — Utilisez au moins 3 graisses avec un contraste intentionnel (ex. : 300 pour le corps, 600 pour les sous-titres, 900 pour l'affichage)
Drame de taille — Les titres d'affichage doivent être 3x la taille du corps. Les lauréats utilisent des ratios 12:1 (180px d'affichage / 14px de corps). L'IA utilise par défaut des ratios timides 4:1.

Voir references/typography-pairings.md pour plus de 20 associations prêtes à copier-coller organisées par ton esthétique.

Système de Couleurs

Modèle dominant + accent — Une famille de couleurs dominante avec un accent contrastant fort. Les palettes uniformément réparties sont timides.
Propriétés personnalisées CSS — Définissez au minimum : --color-surface, --color-text, --color-accent, --color-accent-contrast, --color-muted
Arrière-plans atmosphériques — Jamais de blanc plat. Utilisez des dégradés subtils, des textures de bruit, ou des surfaces teintées. L'arrière-plan doit avoir de la profondeur.
Sombre/clair comme choix intentionnel — Choisissez-en un comme principal en fonction du ton. N'ajoutez pas le mode sombre comme une fonctionnalité à cocher.

Voir references/color-systems.md pour plus de 15 palettes organisées avec blocs de variables CSS.

Composition Spatiale

Briser la grille est obligatoire — Au moins un élément par page doit briser la grille : chevauchement, débordement, placement asymétrique, flux diagonal
Mises en page asymétriques — Répartitions en 7/12 + 5/12 colonnes, gouttières variées (24px vs 64px), padding non uniforme
Héros en pleine largeur — Imagerie bord à bord sans gouttières héritées ni contraintes de largeur max partagées
L'espace négatif comme design — Un espace blanc généreux est intentionnel, pas vide. Un espace blanc asymétrique (120px en haut, 80px en bas) ajoute du rythme.
« Chaque section a un seul travail » — Un titre, une phrase de soutien, un objectif. Aucune section n'essaie de faire deux choses.
Des cartes uniquement pour les interactions — Si le contenu n'a pas besoin de bordure/ombre pour fonctionner, il n'a pas besoin de carte.

Voir references/layout-patterns.md pour 6 wireframes de pages d'atterrissage + 3 tableaux de bord avec code CSS Grid.

Mouvement & Animation

Livrez exactement 2-3 mouvements intentionnels :

Une entrée hero — Échelle + fondu, révélation par clip-path, texte en cascade décalé, ou parallaxe à contre-défilement
Un effet lié au défilement — Révélation de section, image parallaxe fixe, transformation progressive, ou galerie à défilement horizontal
Une interaction survol/révélation — Curseur magnétique, inclinaison de carte en perspective, extension de soulignement, ou déplacement de champ de couleur

Implémentation : CSS uniquement pour HTML simple. Framer Motion pour React. Transitions intégrées pour Vue/Svelte. Concentrez-vous sur les moments à fort impact — un chargement de page bien orchestré bat des micro-interactions dispersées.

Voir references/motion-recipes.md pour plus de 12 recettes prêtes à copier-coller avec versions CSS et Framer Motion.

Fond & Texture

Ne jamais utiliser par défaut des couleurs pleines plates. Créez une atmosphère :

Bruit SVG — Filtre feTurbulence pour une texture de grain organique sur les dégradés
Grille de dégradés — 4-6 radials gradients qui se chevauchent pour la profondeur (pas de dégradés linéaires)
Motifs géométriques — Grilles de points, grilles de lignes, hachures via radial-gradient ou linear-gradient CSS
Grain de film — Pseudo-élément avec texture de bruit à 3-5% d'opacité
Animation ambiante lente — Keyframes aurore/tache à 30s+ de durée en arrière-plan

Voir references/background-textures.md pour des recettes SVG et CSS prêtes à copier-coller.

La « Touche Humaine » — Ce qu'ajoutent les Designers Coûteux

Incluez au moins 2 de ces éléments dans chaque projet :

Curseur personnalisé — Div circulaire (20px) suivant la souris avec un délai lerp de 150ms, s'agrandissant au survol
Espace blanc asymétrique — Padding non uniforme (120px 8% 80px 12%), marges de section variées
Un élément brisant les règles — Une carte tournée de 2 degrés, une image débordant du viewport, une section aux couleurs inversées
Typographie répondant au contenu — Citations dans les gouttières, lettrines, indices de marge, échelle de graisse en fonction de l'importance
Changements de couleur déclenchés par le défilement — La couleur de fond de la section change pour correspondre au ton émotionnel du contenu
Animation de police variable — font-variation-settings animant le poids au défilement ou au survol

Protocoles par Type de Résultat

Page d'Atterrissage

Structure : Hero → Soutien → Détail → CTA Final (4 sections, pas 9)

Hero : Pleine largeur, marque + titre + une phrase + CTA + visuel dominant. Pas de badges flottants, pas de CTA multiples.
Soutien : Une fonctionnalité, offre ou preuve concrète.
Détail : Atmosphère, profondeur du workflow ou histoire.
CTA final : Une action de conversion unique.
Budget viewport : En-tête + contenu hero doivent tenir dans le viewport initial.

Tableau de Bord / UI d'Application

Suivez la « retenue style Linear » :

Hiérarchie de surface calme avec typographie et espacement forts
Palette de couleurs minimale (2-3 couleurs max)
Architecture d'information dense mais lisible
Barre latérale (240px) + principal + inspecteur optionnel (320px) via CSS Grid grid-template-areas
Une seule couleur d'accent claire. Pas de mosaïques de cartes, pas de dégradés décoratifs derrière l'interface produit.

Bibliothèque de Composants

Établissez d'abord les tokens de design (propriétés personnalisées CSS)
Montrez les variantes sombre + clair de chaque composant
Atomique : tokens → éléments → composants → compositions
Chaque composant doit fonctionner en isolation et en composition

Affiche / Marketing

Point focal unique, échelle typographique dramatique (titres de 100px+)
Couleur à fort contraste, mise en page de qualité impression
Concevez une affiche numérique, pas une page web avec du contenu d'affiche

Application Web

Élégance fonctionnelle : clavier en premier, hiérarchie d'information claire
Gestion d'état visible dans l'interface (états de chargement, vide, erreur, succès)
Affichage d'information dense, pas de mise en page marketing spacieuse

Test de Vérification Litmus

Avant de livrer TOUT résultat, vérifiez ces questions. Si plus de 2 réponses sont « non », itérez avant de montrer à l'utilisateur.

La marque/produit est-il indubitable dans le premier viewport ?
Y a-t-il UN fort ancrage visuel (pas plusieurs éléments concurrents) ?
La page peut-elle être comprise en ne lisant que les titres ?
Chaque section a-t-elle EXACTEMENT un seul travail ?
Les cartes sont-elles réellement nécessaires, ou sont-elles un défaut paresseux ?
Le design a-t-il une direction esthétique nommable (pas « moderne propre ») ?
Serait-il premium avec toutes les ombres décoratives supprimées ?
A-t-il au moins un élément qui ferait dire à un designer « Je n'aurais pas pensé à ça » ?
Ressemble-t-il à une AUTRE page générée par IA ? Si oui, refaites le design.

Pour une grille d'évaluation détaillée sur 20 points, voir references/anti-slop-checklist.md.

Adaptation Technologique

Framework	Typographie	Mouvement	Style
HTML/CSS simple	Google Fonts `@import`	CSS `@keyframes` + `animation-timeline`	Propriétés personnalisées CSS + Grid/Flexbox
React / Next.js	`next/font` ou Google Fonts	Framer Motion (composants `motion`)	Tailwind (configuration fortement personnalisée) ou CSS Modules
Vue	Google Fonts dans `index.html`	Composants `<Transition>`	Tailwind (personnalisé) ou styles scopés
Svelte	Google Fonts dans `app.html`	Directives `transition:` intégrées	`<style>` scopé avec propriétés personnalisées CSS

Règle Tailwind : Si vous utilisez Tailwind, vous DEVEZ personnaliser tailwind.config — remplacez les couleurs, polices, border-radius et ombres. La configuration Tailwind par défaut produit de la bouillie IA. Étendez, ne vous contentez pas des valeurs par défaut.

Cas Particuliers

Scénario	Réponse
L'utilisateur ne fournit aucune direction de design	Choisissez un ton audacieux, expliquez votre choix, poursuivez
L'utilisateur dit « propre et simple »	Interprétez comme minimalisme moderniste suisse, pas générique
L'utilisateur fournit des directives de marque	Respectez-les, mais élevez — ajoutez de la profondeur atmosphérique, du mouvement intentionnel
L'utilisateur dit « comme Apple/Linear »	Étudiez les PRINCIPES spécifiques (retenue, densité, typographie) — ne copiez pas l'esthétique de surface
« Faites en sorte que ce soit beau » vague	Traitez-le comme une page d'atterrissage avec un ton éditorial de luxe, sauf si le contexte suggère le contraire
Demande très rapide	Utilisez `scripts/init_frontend.py` pour échafauder, puis…

wjgoarxiv/my-frontend-design-skill

Qu'est-ce que my-frontend-design-skill ?

Demander à votre IA préférée

Documentation