tasteskill : Compétence Frontend Anti-Bourrage
Landing pages, 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 ne retenez que ce qui correspond.
0. INFÉRENCE DU BRIEF (Lire la pièce avant toute chose)
Avant de toucher au code ou de régler les cadrans, déduisez ce que l'utilisateur veut réellement. La plupart des sorties de design des LLM sont mauvaises parce que le modèle saute sur une esthétique par défaut au lieu de lire la pièce.
0.A Lisez d'abord ces signaux
- Type de page - landing (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 », « premium grand public », « Apple-like », « ludique », « sérieux B2B », « éditorial », « style agence », « vitreux », « dark tech ».
- 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 - Panel d'achat B2B vs. consommateur sensible au design vs. recruteur qui parcourt un portfolio. L'audience choisit l'esthétique, pas votre goût.
- Actifs de marque existants - logo, couleur, typographie, photographie. Pour les refontes, ce sont des matériaux de départ, pas une entrée facultative (voir Section 11).
- Contraintes silencieuses - audiences axées sur l'accessibilité, secteur public, industries réglementées, commerce de confiance, produits pour enfants. Ces contraintes PRIMENT sur la préférence esthétique.
0.B Émettez une « Lecture de Design » en une ligne avant de générer
Avant tout code, indiquez en une ligne : « Je lis ceci comme : pour , avec un langage , tendant vers <système de design ou famille esthétique>. »
Exemples de lectures :
- « Je lis ceci comme : landing B2B SaaS pour acheteurs techniques, avec un langage minimaliste style Linear, tendant vers les utilitaires Tailwind + Geist + mouvements retenus. »
- « Je lis ceci comme : portfolio de designer solo pour responsables de 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 de confiance d'abord, 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 une décharge de questions multiples - et seulement lorsque la lecture de design diverge réellement. Exemple : « Cela devrait-il ressembler plus à un nettoyage Linear ou à un expérimental Awwwards ? »
Si vous pouvez déduire avec confiance du contexte, ne posez pas de question. Déclarez simplement la lecture de design et continuez.
0.D Discipline Anti-Défaut
Ne par défaut pas : dégradés violets IA, héro centré sur un maillage sombre, trois cartes de fonctionnalités égales, vitromorphisme générique partout, micro-animations en boucle infinie partout, Inter + slate-900. Ce sont les défauts des LLM. Atteignez au-delà délibérément en fonction de la lecture de design.
1. LES TROIS CADRANS (Configuration de Base)
Après la lecture de design, réglez trois cadrans. Chaque décision de mise en page, mouvement et densité ci-dessous est conditionnée par ceux-ci.
DESIGN_VARIANCE : 8- 1 = Symétrie Parfaite, 10 = Chaos ArtistiqueMOTION_INTENSITY : 6- 1 = Statique, 10 = Cinématique / PhysiqueVISUAL_DENSITY : 4- 1 = Galerie d'Art / Aéré, 10 = Cockpit / Données denses
Base : 8 / 6 / 4. Utilisez-les sauf si la lecture de design 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 design → valeurs des cadrans)
| Signal | VARIANCE | MOUVEMENT | DENSITÉ |
|---|---|---|---|
| « minimaliste / propre / calme / éditorial / style Linear » | 5-6 | 3-4 | 2-3 |
| « premium grand public / Apple-like / luxe / marque » | 7-8 | 5-7 | 3-4 |
| « ludique / sauvage / Dribbble / Awwwards / expérimental / agence » | 9-10 | 8-10 | 3-4 |
| « landing page / portfolio / site marketing (défaut) » | 7-9 | 6-8 | 3-5 |
| « confiance d'abord / 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ésélections par Cas d'Usage
| Cas d'usage | VARIANCE | MOUVEMENT | DENSITÉ |
|---|---|---|---|
| Landing (SaaS, grand public) | 7 | 6 | 4 |
| Landing (Agence / créatif) | 9 | 8 | 3 |
| Landing (Premium grand public) | 7 | 6 | 3 |
| Portfolio (Designer / studio) | 8 | 7 | 3 |
| Portfolio (Développeur) | 6 | 5 | 4 |
| Éditorial / Blog | 6 | 4 | 3 |
| Service secteur 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 tout au long de ce document font référence à ces noms de variables exacts - n'inventez jamais d'alias comme LAYOUT_VARIANCE ou ANIM_LEVEL.
2. CARTE BRIEF → SYSTÈME DE DESIGN
Une fois que vous avez la lecture de design (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 design (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, jetons Microsoft, accessibilité faite |
| UI de type Google, produit aux couleurs Material | @material/web + jetons Material 3 | Officiel, personnalisable via Material Theming |
| Analyse d'entreprise de style IBM | @carbon/react + @carbon/styles | Carbon officiel, motifs de densité de données matures |
| Surfaces d'appli Shopify | composants web polaris.js / Polaris React | Requis pour l'interface admin Shopify |
| Produit de style Atlassian / Jira | @atlaskit/* + @atlaskit/tokens | DS Atlassian officiel |
| Outil de développement / page communautaire de 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 / confiance d'abord | uswds | De même |
| MVP rapide d'agence / entreprise locale | Bootstrap 5.3 | Ennuyeux, rapide, fonctionne |
| Fondation React moderne accessible | @radix-ui/themes | Primitives + thème poli |
| SaaS moderne où vous possédez les composants | shadcn/ui (npx shadcn@latest add ...) | Vous possédez le code, facile à personnaliser ; ne jamais livrer l'état par défaut |
| SaaS / marketing IA moderne basé sur Tailwind | Utilitaires Tailwind v4 + variante dark: | Défaut pour les builds indépendants + petites équipes |
Règle d'honnêteté : si le brief se lit comme 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 jetons d'un système pour ensuite remplacer 90% d'entre eux.
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 pas de 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 |
|---|---|
| Vitromorphisme / « verre dépoli » | backdrop-filter, bordures en couches, surimpressions de surbrillance. Fournissez une solution de repli de remplissage unie pour prefers-reduced-transparency. |
| Bento (grilles de tuiles de 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 serif, grille asymétrique, espace blanc généreux. Aucune bibliothèque. |
| Dark tech / hacker | Mono + accent néon, motifs de terminal. Aucune bibliothèque. |
| Dégradés Aurora / maillage | 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 cela 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 & CONVENTIONS PAR DÉFAUT
À moins que la lecture de design ne choisisse un véritable système de design (Section 2.A), voici les valeurs par défaut :
3.A Pile technique
- Framework : React ou Next.js. Par défaut, utilisez les Composants Serveur (RSC).
- SÉCURITÉ RSC : L'état global fonctionne UNIQUEMENT dans les Composants Client. Dans Next.js, enveloppez les providers dans un composant
"use client". - ISOLEMENT DE L'INTERACTIVITÉ : Tout composant qui utilise Motion, des écouteurs de défilement, ou la physique de pointeur DOIT être une feuille isolée avec
'use client'en haut. Les Composants Serveur ne rendent que des mises en page statiques.
- SÉCURITÉ RSC : L'état global fonctionne UNIQUEMENT dans les Composants Client. Dans Next.js, enveloppez les providers dans un composant
- Stylisation : Tailwind v4 (par défaut). Tailwind v3 seulement 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/useReducerlocal pour l'interface isolée.- État global UNIQUEMENT pour éviter le forage profond de props - Zustand, Jotai, ou contexte React.
- N'utilisez JAMAIS
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é-rend l'arbre React à chaque changement et s'effondre sur mobile.
3.C Icônes
- Bibliothèques autorisées (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 CRÉEZ JAMAIS d'icônes SVG à la main. Si un glyphe manque, installez une deuxième bibliothèque ou composez à partir de primitives - ne dessinez pas de 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 d'Émoji
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 émojis uniquement lorsque l'utilisateur demande explicitement une ambiance ludique / style chat / social-natif - et même dans ce cas, utilisez-les avec parcimonie et intention.
3.E Réactivité & Mécanismes de Mise en Page
- Standardisez les points d'arrêt (
sm 640,md 768,lg 1024,xl 1280,2xl 1536). - Contenez les mises en page de page en utilisant
max-w-[1400px] mx-autooumax-w-7xl. - Stabilité de la fenêtre : N'utilisez JAMAIS
h-screenpour les sections Hero pleine hauteur. Utilisez TOUJOURSmin-h-[100dvh]pour empêcher les sauts de mise en page sur mobile (barre d'adresse de Safari iOS). - Grille plutôt que mathématique Flex : N'utilisez JAMAIS de mathématiques de pourcentage flexbox complexes (
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, émettez d'abord la commande d'installation. Ne supposez jamais qu'une bibliothèque existe.
4. DIRECTIVES D'INGÉNIERIE DU DESIGN (Correction de Biais)
Les LLM par défaut aux clichés. Remplacez ces défauts 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-serif :
- Déconseillé par défaut :
Inter. ChoisissezGeist,Outfit,Cabinet Grotesk,Satoshi, ou une police serif adaptée à la marque en premier. - Remplacement : Inter est acceptable lorsque l'utilisateur demande explicitement un aspect neutre / standard / style Linear, ou lorsque le brief concerne un site du secteur public / axé sur l'accessibilité.
- Déconseillé par défaut :
-
Associations à connaître :
Geist+Geist Mono,Satoshi+JetBrains Mono,Cabinet Grotesk+Inter Tight,GT America+IBM Plex Mono. -
DISCIPLINE SERIF (TRÈS DÉCONSEILLÉE PAR DÉFAUT) :
- Le serif est très déconseillé comme police par défaut pour tout projet. « Cela semble créatif / premium / éditorial » N'EST PAS une raison pour utiliser le serif. Le modèle mental par défaut de l'agent selon lequel « brief créatif = serif » est le signe de l'IA le plus testé dans les cycles de production.
- Serif n'est acceptable que lorsque l'UN de ces cas est explicitement vrai :
- Le brief de la marque nomme littéralement une police serif, OU
- La famille esthétique est véritablement éditoriale / luxe / publication / manuscrit / patrimoine / vintage ET vous pouvez articuler pourquoi ce serif spécifique convient à cette marque spécifique
- Pour tout le reste (agence créative, studio de design, marque moderne, premium grand public, portfolio, style de vie), utilisez par défaut un affichage sans-serif (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). Les polices d'affichage sans-serif ne sont pas « ennuyeuses » - elles sont la norme pour la même raison que le noir est la norme dans la mode.
- RÈGLE D'EMPHASE (connexe) : Lorsque vous voulez mettre l'accent sur un mot dans un titre (le mouvement cinétique « et
spatialdesign »), utilisez l'italique ou le gras de la MÊME police. N'injectez PAS un mot serif aléatoire dans un titre sans-serif (ou vice versa) juste pour ajouter de l'intérêt visuel. L'emphase de famille mixte est amateur. L'emphase italique/gras dans la même famille est le bon geste. - Spécifiquement INTERDITES comme défauts :
FrauncesetInstrument_Serif(les deux polices serif d'affichage préférées des LLM). - Si un serif est justifié (rare, selon ce qui précède), choisissez dans ce pool, ne réutilisez PAS le même serif 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
…
[la suite a été tronquée pour la traduction]