tasteskill : Compétence Frontend Anti-Cliché
Pages de destination, portfolios et refontes. Pas de tableaux de bord, pas de tableaux de données, pas d'interface produit multi-étapes. Chaque règle ci-dessous est contextuelle. Aucune ne se déclenche automatiquement. Lisez d'abord le brief, puis extrayez uniquement ce qui convient.
0. INFÉRENCE DU BRIEF (Lisez la pièce avant toute chose)
Avant de toucher au code ou de modifier des paramètres, inférez ce que l'utilisateur veut réellement. La plupart des conceptions générées par les LLM sont mauvaises car le modèle saute vers une esthétique par défaut au lieu de lire la pièce.
0.A Lisez d'abord ces signaux
- Type de page - page de destination (SaaS / grand public / agence / événement), portfolio (développeur / designer / studio créatif), refonte (préserver vs refondre), éditorial / blog.
- Mots d'ambiance utilisés par l'utilisateur - "minimaliste", "calme", "style Linear", "Awwwards", "brutaliste", "grand public premium", "Apple-esque", "ludique", "B2B sérieux", "éditorial", "agence-y", "vitré", "tech sombre".
- Signaux de référence - URLs qu'ils ont liées, captures d'écran qu'ils ont collées, produits qu'ils ont nommés, marques avec lesquelles ils sont en concurrence.
- Audience - Comité d'achat B2B vs. consommateur soucieux du design vs. recruteur parcourant un portfolio. L'audience choisit l'esthétique, pas votre goût.
- Actifs de marque qui existent déjà - logo, couleur, police, photographie. Pour les refontes, ce sont des matériaux de départ, pas une entrée facultative (voir Section 11).
- Contraintes silencieuses - publics axés sur l'accessibilité, secteur public, industries réglementées, commerce basé sur la confiance, produits pour enfants. Ces contraintes OUTREPASSENT les préférences esthétiques.
0.B Produisez une « Lecture de conception » d'une ligne avant de générer
Avant tout code, énoncez en une ligne : « Je lis ceci comme : pour , avec un langage , tendant vers <système de conception ou famille esthétique>. »
Exemples de lectures :
- « Je lis ceci comme : page de destination SaaS B2B pour acheteurs techniques, avec un langage minimaliste style Linear, tendant vers les utilitaires Tailwind + Geist + animation retenue. »
- « Je lis ceci comme : portfolio de designer solo pour responsables du recrutement, avec un langage éditorial / typographie cinétique, tendant vers CSS natif + animation pilotée par le défilement + typographie personnalisée. »
- « Je lis ceci comme : refonte d'un site de service public, avec un langage priorisant la confiance, tendant vers GOV.UK Frontend ou USWDS. »
0.C Si le brief est ambigu, posez une question, ne devinez pas
Posez exactement une question de clarification - jamais un tas de questions - et uniquement lorsque la lecture de conception diverge vraiment. Exemple : « Cela devrait-il ressembler plus à du Linear-propre ou à de l'Awwwards-expérimental ? »
Si vous pouvez déduire avec confiance du contexte, ne demandez pas. Déclarez simplement la lecture de conception et continuez.
0.D Discipline anti-défaut
Ne vous rabattez pas sur : les dégradés violet-IA, le héros centré sur fond sombre, les trois cartes de fonctionnalités égales, le glassmorphisme générique partout, les micro-animations en boucle infinie partout, Inter + slate-900. Ce sont les valeurs par défaut des LLM. Atteignez au-delà délibérément en fonction de la lecture de conception.
1. LES TROIS CADRANS (Configuration Principale)
Après la lecture de conception, réglez trois cadrans. Chaque décision de mise en page, de mouvement et de densité ci-dessous est conditionnée par ceux-ci.
VARIANCE_CONCEPTION: 8- 1 = Symétrie Parfaite, 10 = Chaos ArtistiqueINTENSITE_MOUVEMENT: 6- 1 = Statique, 10 = Cinématographique / PhysiqueDENSITE_VISUELLE: 4- 1 = Galerie d'Art / Aérée, 10 = Cockpit / Données Denses
Valeurs de base : 8 / 6 / 4. Utilisez-les sauf si la lecture de conception les remplace. Ne demandez pas à l'utilisateur de modifier ce fichier - les remplacements se font par conversation.
1.A Inférence des cadrans (lecture de conception → valeurs des cadrans)
| Signal | VARIANCE | MOUVEMENT | DENSITÉ |
|---|---|---|---|
| "minimaliste / propre / calme / éditorial / style Linear" | 5-6 | 3-4 | 2-3 |
| "grand public premium / Apple-esque / luxe / marque" | 7-8 | 5-7 | 3-4 |
| "ludique / sauvage / Dribbble / Awwwards / expérimental / agence" | 9-10 | 8-10 | 3-4 |
| "page de destination / portfolio / site marketing (par défaut)" | 7-9 | 6-8 | 3-5 |
| "priorité confiance / secteur public / réglementé / accessibilité critique" | 3-4 | 2-3 | 4-5 |
| "refonte - préserver" | correspondre à l'existant | +1 | correspondre à l'existant |
| "refonte - refondre" | +2 | +2 | correspondre à l'existant |
1.B Préréglages par cas d'utilisation
| Cas d'utilisation | VARIANCE | MOUVEMENT | DENSITÉ |
|---|---|---|---|
| Page de destination (SaaS, grand public) | 7 | 6 | 4 |
| Page de destination (Agence / créatif) | 9 | 8 | 3 |
| Page de destination (Grand public premium) | 7 | 6 | 3 |
| Portfolio (Designer / studio) | 8 | 7 | 3 |
| Portfolio (Développeur) | 6 | 5 | 4 |
| Éditorial / Blog | 6 | 4 | 3 |
| Service public | 3 | 2 | 5 |
| Refonte - préserver | correspondre | correspondre+1 | correspondre |
| Refonte - refondre | +2 | +2 | correspondre |
1.C Comment les cadrans pilotent la sortie
Utilisez ces valeurs (ou celles remplacées par l'utilisateur) comme variables globales. Les références croisées dans ce document se réfèrent à ces noms de variables exacts - n'inventez jamais d'alias comme VARIANCE_LAYOUT ou NIVEAU_ANIM.
2. BRIEF → CARTE DU SYSTÈME DE CONCEPTION
Une fois que vous avez la lecture de conception (Section 0) et les cadrans (Section 1), choisissez la bonne fondation. N'inventez pas de CSS pour des choses qui ont un package officiel. Ne prétendez pas qu'une tendance esthétique est un système officiel.
2.A Quand utiliser un véritable système de conception (utilisez les packages officiels)
| Le brief se lit comme... | Utilisez | Pourquoi |
|---|---|---|
| Microsoft / SaaS entreprise / tableaux de bord | @fluentui/react-components ou @fluentui/web-components | Fluent UI officiel, tokens Microsoft, accessibilité intégrée |
| UI de style Google, produit saveur Material | @material/web + tokens Material 3 | Officiel, thème via Material Theming |
| Analytique B2B / entreprise style IBM | @carbon/react + @carbon/styles | Carbon officiel, patterns de densité de données matures |
| Surfaces d'application Shopify | composants web polaris.js / Polaris React | Requis pour l'interface admin Shopify |
| Produit style Atlassian / Jira | @atlaskit/* + @atlaskit/tokens | Système de conception Atlassian officiel |
| Page communauté / outil développeur style GitHub | @primer/css ou @primer/react-brand | Primer officiel ; variante Brand pour le marketing |
| Service public britannique | govuk-frontend | Attendu légalement / réglementairement |
| Service public américain / priorité confiance | uswds | Idem |
| MVP rapide pour agence / entreprise locale | Bootstrap 5.3 | Ennuyeux, rapide, fonctionne |
| Fondation React moderne et accessible | @radix-ui/themes | Primitives + thème soigné |
| SaaS moderne où vous possédez les composants | shadcn/ui (npx shadcn@latest add ...) | Vous possédez le code, facile à personnaliser ; n'envoyez jamais l'état par défaut |
| SaaS moderne / marketing IA basé sur Tailwind | Utilitaires Tailwind v4 + variante dark: | Par défaut pour les builds de développeurs indépendants et de petites équipes |
Règle d'honnêteté : si le brief correspond à l'un des systèmes ci-dessus, installez et utilisez le package officiel. Ne recréez pas son CSS à la main. N'importez pas les tokens d'un système pour ensuite en remplacer 90 %.
Un système par projet. Ne mélangez pas Fluent React avec Carbon dans la même arborescence. N'importez pas de composants shadcn/ui dans une application Material 3.
2.B Quand le brief est une esthétique, pas un système
Pour ces directions, il n'y a aucun package officiel unique. Construisez avec CSS natif + Tailwind + une bibliothèque de composants maintenue. Soyez honnête dans les commentaires de code sur ce qui est une inspiration empruntée vs. un matériel officiel.
| Esthétique | Implémentation honnête |
|---|---|
| Glassmorphisme / "verre givré" | backdrop-filter, bordures en couches, superpositions de surbrillance. Fournissez un repli de remplissage solide pour prefers-reduced-transparency. |
| Bento (grilles de tuiles style Apple) | Grille CSS avec tailles de cellules mixtes. Aucune bibliothèque unique ne possède cela. |
| Brutalisme | CSS natif, monospace, bordures brutes. Aucune bibliothèque. |
| Éditorial / magazine | Police avec empattement, grille asymétrique, espace blanc généreux. Aucune bibliothèque. |
| Tech sombre / hacker | Mono + néon accent, motifs de terminal. Aucune bibliothèque. |
| Dégradés Aurora / mesh | SVG ou dégradés radiaux en couches. Aucune bibliothèque. |
| Typographie cinétique | Animations CSS natives, animations pilotées par le défilement, GSAP pour les détournements. Aucune bibliothèque. |
| Apple Liquid Glass | Apple documente ceci uniquement pour les plateformes Apple. Il n'y a pas de liquid-glass.css officiel. Les implémentations Web sont des approximations utilisant backdrop-filter + bordures en couches + surbrillances. Étiquetez clairement comme approximation. |
3. ARCHITECTURE ET CONVENTIONS PAR DÉFAUT
À moins que la lecture de conception ne choisisse un véritable système de conception (Section 2.A), voici les valeurs par défaut :
3.A Stack
- Framework : React ou Next.js. Par défaut, utilisez les Server Components (RSC).
- SÉCURITÉ RSC : L'état global fonctionne UNIQUEMENT dans les Composants Clients. Dans Next.js, enveloppez les fournisseurs dans un composant
"use client". - ISOLATION DE L'INTERACTIVITÉ : Tout composant utilisant Motion, des écouteurs de défilement ou de la physique de pointeur DOIT être une feuille isolée avec
'use client'en haut. Les Server Components rendent uniquement des mises en page statiques.
- SÉCURITÉ RSC : L'état global fonctionne UNIQUEMENT dans les Composants Clients. Dans Next.js, enveloppez les fournisseurs dans un composant
- Stylisme : Tailwind v4 (par défaut). Tailwind v3 uniquement si le projet existant l'exige.
- Pour v4 : n'utilisez PAS le plugin
tailwindcssdanspostcss.config.js. Utilisez@tailwindcss/postcssou le plugin Vite.
- Pour v4 : n'utilisez PAS le plugin
- Animation : Motion (la bibliothèque anciennement connue sous le nom de Framer Motion). Importez depuis
motion/react(import { motion } from "motion/react"). Le packageframer-motionfonctionne toujours comme un alias hérité - préférezmotion/reactdans le nouveau code. - Polices : Utilisez toujours
next/font(Next.js) ou auto-hébergez avec@font-face+font-display: swap. Ne liez jamais les polices Google via<link>en production.
3.B État
useState/useReducerlocaux pour l'interface isolée.- État global UNIQUEMENT pour éviter le forage profond d'accessoires (Zustand, Jotai, ou contexte React).
- NE JAMAIS utiliser
useStatepour suivre des valeurs continues pilotées par l'entrée utilisateur (position de la souris, progression du défilement, physique du pointeur, survol magnétique). UtilisezuseMotionValue/useTransform/useScrollde Motion.useStateréexécute l'arbre React à chaque changement et s'effondre sur mobile.
3.C Icônes
- Bibliothèques autorisées (par ordre de priorité) :
@phosphor-icons/react,hugeicons-react,@radix-ui/react-icons,@tabler/icons-react. - Déconseillé :
lucide-react. Acceptable uniquement lorsque l'utilisateur le demande explicitement ou que le projet en dépend déjà. - NE JAMAIS fabriquer d'icônes SVG à la main. Si un glyphe manque, installez une deuxième bibliothèque ou composez à partir de primitives - ne dessinez pas les chemins d'icônes à partir de zéro.
- Une famille par projet. Ne mélangez pas Phosphor avec Lucide dans la même arborescence de composants.
- Standardisez
strokeWidthglobalement (par exemple1.5ou2.0).
3.D Politique des emoji
Déconseillé par défaut dans le code, le balisage et le texte visible. Remplacez les symboles par des glyphes de bibliothèque d'icônes. Remplacement : autorisez les emoji uniquement lorsque l'utilisateur demande explicitement une ambiance ludique / style chat / social-native - et même dans ce cas, utilisez-les avec parcimonie et intention.
3.E Réactivité et mécanismes de mise en page
- Standardisez les points de rupture (
sm 640,md 768,lg 1024,xl 1280,2xl 1536). - Contenez les mises en page en utilisant
max-w-[1400px] mx-autooumax-w-7xl. - Stabilité de la fenêtre d'affichage : N'utilisez JAMAIS
h-screenpour les sections Héros en pleine hauteur. Utilisez TOUJOURSmin-h-[100dvh]pour éviter les sauts de mise en page sur mobile (barre d'adresse iOS Safari). - Grille plutôt que Flex-Math : N'utilisez JAMAIS de pourcentage de flexbox complexe (
w-[calc(33%-1rem)]). Utilisez TOUJOURS la grille CSS (grid grid-cols-1 md:grid-cols-3 gap-6).
3.F Vérification des dépendances (obligatoire)
Avant d'importer une bibliothèque tierce, vérifiez package.json. Si le package est manquant, affichez d'abord la commande d'installation. Ne supposez jamais qu'une bibliothèque existe.
4. DIRECTIVES D'INGÉNIERIE DE CONCEPTION (Correction des biais)
Les LLM par défaut tombent dans les clichés. Remplacez ces valeurs par défaut de manière proactive. Chaque règle a un chemin de remplacement contextuel.
4.1 Typographie
-
Affichage / Titres : Par défaut
text-4xl md:text-6xl tracking-tighter leading-none. -
Corps / Paragraphes : Par défaut
text-base text-gray-600 leading-relaxed max-w-[65ch]. -
Choix de police sans empattement :
- Déconseillé par défaut :
Inter. ChoisissezGeist,Outfit,Cabinet Grotesk,Satoshi, ou une police avec empattement appropriée à la marque en premier. - Remplacement : Inter est acceptable lorsque l'utilisateur demande explicitement une sensation neutre / standard / style Linear, ou lorsque le brief est un site de secteur public / priorité accessibilité.
- Déconseillé par défaut :
-
Appariements à connaître :
Geist+Geist Mono,Satoshi+JetBrains Mono,Cabinet Grotesk+Inter Tight,GT America+IBM Plex Mono. -
DISCIPLINE DES POLICES AVEC EMPATTEMENT (TRÈS DÉCONSEILLÉ PAR DÉFAUT) :
- Les polices avec empattement sont très déconseillées comme police par défaut pour tout projet. "Cela semble créatif / premium / éditorial" n'est PAS une raison d'utiliser une police avec empattement. Le modèle mental par défaut de l'agent selon lequel "brief créatif = police avec empattement" est le tell d'IA le plus testé dans les cycles de production.
- Les polices avec empattement ne sont acceptables que lorsque l'UN des éléments suivants est explicitement vrai :
- Le brief de la marque nomme littéralement une police avec empattement, OU
- La famille esthétique est véritablement éditoriale / luxe / publication / manuscrit / patrimoine / vintage ET vous pouvez expliquer pourquoi cette police avec empattement particulière correspond à cette marque particulière
- Pour tout le reste (agence créative, studio de design, marque moderne, grand public premium, portfolio, style de vie), par défaut, police d'affichage sans empattement (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). Les polices d'affichage sans empattement ne sont pas « ennuyeuses » — elles sont la valeur par défaut pour la même raison que le noir est la valeur par défaut dans la mode.
- RÈGLE D'EMPHASE (connexe) : Lorsque vous voulez mettre l'accent sur un mot dans un titre (le mouvement cinétique du type "et
spatialdesign"), utilisez l'italique ou le gras de la MÊME police. N'injectez pas un mot aléatoire avec empattement dans un titre sans empattement (ou vice versa) juste pour ajouter de l'intérêt visuel. L'emphase de familles mixtes est amateur. L'emphase en italique/gras dans la même famille est la bonne décision. - Spécifiquement INTERDITES par défaut :
FrauncesetInstrument_Serif(les deux polices d'affichage avec empattement préférées des LLM). - Si une police avec empattement est justifiée (rare, selon ce qui précède), faites une rotation à partir de ce pool, ne réutilisez pas la même police avec empattement sur des projets consécutifs : PP Editorial New, GT Sectra Display, Cardinal Grotesque, Reckless Neue, Tiempos Headline, Recoleta, Cormorant Garamond, Playfair Display, EB Garamond, IvyPresto, Migra, Editorial Old, Saol Display, Söhne Breit Kursiv, Domaine Display, Canela, Schnyder, Tobias, NB Architekt, I...