davila7/claude-code-templates

Conception Web Premium

Créez des composants React (.jsx) qui ont l'air d'appartenir à Awwwards — le genre de travail qui fait dire « Qui a designé ça ? ». Ce sont des sites où chaque pixel est intentionnel, chaque animation est chorégraphiée, et l'impression générale est que des talents créatifs sérieux et un budget important ont été mobilisés.

Le Problème Esthétique de l'IA

La plupart des sites web générés par IA partagent un ADN reconnaissable. L'éviter nécessite de savoir exactement à quoi il ressemble.

La Liste Noire — À Ne Jamais Faire

Péchés typographiques

• Inter, Poppins, Montserrat, Raleway, Space Grotesk, Outfit comme polices principales — elles crient « modèle IA ». (Remarque : Inter Tight est une famille de polices séparée avec des métriques différentes et est autorisée.)
• Utiliser une seule famille de polices pour tout
• Tailles de police uniformes avec une hiérarchie prévisible (64px → 32px → 18px → 14px)
• Interlettrage et hauteur de ligne par défaut partout
• Blocs de texte centrés partout, en particulier les paragraphes multilignes

Péchés de couleur

• Dégradés violet-bleu (le plus grand cliché de design IA)
• Indigo/violet comme couleur de marque principale sans raison contextuelle
• Fond blanc + une couleur d'accent + texte gris (le kit de démarrage SaaS)
• Dégradés sur les boutons ou les cartes sans raison
• Utiliser l'opacité ou les superpositions semi-transparentes comme substitut à de véritables choix de couleurs
• Couleurs d'accent néon sur fonds sombres (le look « portfolio de développeur »)

Péchés de mise en page

• Hero → grille de fonctionnalités à 3 colonnes → témoignages → CTA → pied de page (la page d'atterrissage SaaS par défaut)
• Hero → barre de statistiques → grille de travail → split à propos → CTA → pied de page (la page d'atterrissage « IA premium » — tout aussi formatée)
• TOUT ordre prévisible de sections de haut en bas qui pourrait être échangé entre sites. Chaque site doit avoir son propre ADN structurel unique — nombre différent de sections, logique d'ordonnancement différente, sections qui ne rentrent pas parfaitement dans des catégories
• Grilles parfaitement symétriques avec des cartes de taille égale
• Tout centré, tout contenu dans un conteneur à largeur maximale
• Rectangles arrondis avec ombres portées comme élément d'interface utilisateur principal
• Cartes icône + titre + paragraphe dans une rangée de 3 ou 4
• Hero générique avec titre + sous-titre + deux boutons côte à côte
• Sections hero plates statiques avec juste du texte — les sections hero devraient être des expériences spatiales immersives

Péchés d'animation

• Éléments apparaissant par le bas lors du défilement (l'effet AOS surutilisé)
• Transitions identiques sur tout (même durée, même easing, même direction)
• Effets de survol qui ne font que zoomer ou ajouter une ombre
• Spinners de chargement au lieu d'écrans squelettes ou de révélations chorégraphiées

Péchés d'imagerie et de décoration

• Formes blob comme décorations de fond
• Formes géométriques flottantes (cercles, triangles) comme « éléments de design »
• Arrière-plans dégradés génériques
• Grilles de photos d'archives avec des rapports d'aspect uniformes
• Emoji ou icônes linéaires génériques comme marqueurs de section

---

À quoi Ressemble Vraiment le Luxe

La conception web premium communique le savoir-faire par la retenue, la surprise et une attention obsessionnelle aux détails.

La Typographie comme Identité

La typographie est le #1 différenciateur entre un site à 500 € et un à 50 000 €.

Philosophie de sélection des polices :

• Utilisez des polices serif ou display distinctives pour les titres — des polices avec personnalité et opinion. Bons points de départ : Playfair Display, Cormorant Garamond, DM Serif Display, Fraunces, Instrument Serif pour les serif. Pour les sans-serif qui ne sont pas surutilisées : Syne, General Sans, Satoshi, Switzer, Cabinet Grotesk, Nacelle, Inter Tight, IBM Plex Sans, Manrope, Archivo, Work Sans, Instrument Sans.
• Associez une police display expressive à une police de corps neutre mais raffinée.
• Les polices monospaced comme typographie d'accent (pour les étiquettes, catégories, dates) ajoutent une qualité éditoriale — JetBrains Mono, IBM Plex Mono, Space Mono.
• Mélangez les graisses de manière dramatique — un titre en graisse 900 à côté d'un corps de texte en graisse 300 crée une tension visuelle.

Exécution typographique :

• Utilisez clamp() pour une mise à l'échelle fluide des polices plutôt que des sauts de point d'arrêt
• Contraste de taille dramatique — les titres peuvent faire 8vw+ sur desktop
• Interlettrage négatif sur les grands titres (-0.03em à -0.06em)
• Hauteur de ligne généreuse sur le corps de texte (1.6–1.8), serrée sur les titres (0.9–1.1)
• Alignement mixte — corps de texte aligné à gauche avec des étiquettes occasionnellement alignées à droite ou des titres asymétriques
• max-width sur les paragraphes (45–75ch) et text-wrap: balance sur les titres
• Micro-étiquettes en majuscules avec un large interlettrage (0.1em+) pour les catégories, dates, métadonnées

La Couleur comme Atmosphère

• Commencez par le noir et le blanc. N'ajoutez de la couleur que lorsqu'elle a gagné sa place.
• Une teinte dominante avec intention — « quel territoire émotionnel cette couleur revendique-t-elle ? »
• Les blancs cassés et les gris chauds (pas du #ffffff ou #000000 pur) semblent plus designés — essayez #FAFAF8, #F5F0EB, #1A1A1A, #0D0D0D
• Les palettes monochromatiques ou analogues avec un seul moment de contraste sont perçues comme plus sophistiquées que les schémas arc-en-ciel
• Les thèmes sombres bien réalisés : pas seulement « blanc sur gris foncé » mais une superposition de fond réfléchie avec des teintes chaudes ou froides subtiles
• La couleur utilisée avec parcimonie frappe plus fort — un seul lien rouge dans une mer de noir et blanc est plus puissant que du rouge partout

La Mise en Page comme Récit

Le #1 mode d'échec de cette compétence est de produire des sites qui ont l'air différents en surface mais partagent la même structure sous-jacente — un hero, trois sections éditoriales, une citation en exergue, un formulaire, un colophon. Sur un ensemble de sites, cela commence à ressembler à un modèle avec des couleurs différentes. Luttez activement contre cela, et délibérément.

La règle d'unicité de l'ADN structurel :

Avant d'écrire tout balisage, nommez le concept structurel primaire à voix haute — une seule phrase nominale, comme « manuscrit index » ou « diorama horizontal sticky ». Dans un même lot de sites, deux sites ne peuvent pas partager le même concept structurel primaire. Si le site précédent était un récit à défilement sticky, celui-ci ne l'est pas. Si le site précédent était une division verticale 33/67, celui-ci ne l'est pas. L'idée structurelle est la première chose que l'utilisateur remarque — varier la couleur sans varier la structure n'est que cosmétique.

Catalogue d'ADN Structurel

Ce sont des structures primaires distinctes. Chaque invocation de la compétence doit choisir un concept et s'y tenir. Ne mélangez pas deux structures en un seul site (cela dilue les deux).

1. Manuscrit Index — Une seule longue colonne éditoriale, sans sections. Un rythme typographique du haut en bas. La page entière se lit comme un seul manuscrit qui se trouve être un site web. (Bon pour : le menu d'un chef, la lettre d'un parfumeur, un manifeste.)
2. Diorama Horizontal Sticky — La page est un long défilement vertical, mais ce que vous voyez en défilant est une scène panoramique horizontale. Utilisez position: sticky + translateX piloté par le défilement. (Bon pour : une chronologie de commandes, un processus par étapes, une collection d'artefacts.)
3. Split Permanente à Deux Volets — La page est toujours une division 50/50 (ou 38/62) ; un volet est sticky, l'autre défile. La navigation se fait à l'intérieur d'un volet, jamais en défilant toute la page. (Bon pour : une archive avec un index mis à jour en direct, le catalogue d'un bibliothécaire.)
4. Séquence de Diapositives — « Diapositives » en pleine hauteur de vue, une par écran, avec défilement par accroche. Chaque diapositive est une composition complètement différente. (Bon pour : la monographie d'un photographe, une visite de galerie, un look-book éditorial.)
5. Objet en Scène sur un Socle — Un seul sujet 3D/image centré, rotatable, et tout le reste de la page est des marginalia qui orbitent autour de l'objet. (Bon pour : une maison avec un seul produit — une montre, un flacon, une bouteille.)
6. Récit Épinglé (Scrollytelling) — Une section de 2 à 4 écrans de haut se verrouille en place tandis que son contenu progresse à travers des états discrets (échanges d'images, échanges de texte, progression). Utilisé une fois dans la page comme pièce maîtresse. (Bon pour : un profil de mission, un processus de production, l'étude d'un effondrement de bâtiment.)
7. Navigation Horizontale — Le défilement principal de la page est horizontal. Les sections se lisent de gauche à droite. Le défilement vertical est désactivé ou réservé aux révélations de détails. (Bon pour : une archive horlogère, l'aile d'un musée, le programme d'un studio de cinéma.)
8. Barre Latérale + Colonne — Une barre latérale gauche persistante ne défile jamais (navigation, métadonnées, pied de page courant) ; la colonne de droite constitue l'ensemble du site. (Bon pour : un cabinet d'avocats, un institut de recherche, un éditeur académique.)
9. Portes de Chapitre — Séparateurs de chapitre en pleine hauteur de vue entre des zones tonales très différentes. Chaque chapitre a sa propre couleur de fond, son poids typographique et son rythme de mise en page. La page change de caractère à mesure que vous descendez. (Bon pour : un studio multidisciplinaire, une rétrospective.)
10. Registre / Journal — La page se présente comme un document d'école — un connaissement, un registre, le manifeste d'un navire. Les lignes tabulaires dominent ; la typographie se lit comme un journal. (Bon pour : une liste d'attente, un registre de lots, le manifeste d'une expédition.)
11. Collage / Briseur de Grille — Une grille asymétrique de style magazine avec des ruptures délibérées — images surdimensionnées débordant dans les colonnes, citations en exergue traversant les gouttières, notes de bas de page dans les marges. (Bon pour : publications éditoriales, magazines culturels, studios créatifs.)
12. Objet Unique, Sans Chrome — Le site est juste le sujet, rotatable, avec une seule phrase courte en dessous. Pas de nav, pas de pied de page, presque pas d'interface utilisateur. (Bon pour : la sortie d'une œuvre unique d'un artiste, une œuvre de déclaration.)
13. Ardoise UI Produit — Le hero est une simulation réaliste de l'interface propre du produit (tuiles de tableau de bord, vue diff, palette de commandes). Utilisé par les marques tech/AI dont le produit EST une UI. (Bon pour : IDE IA, outils de développement.)
14. Grille de Tuiles de Tableau de Bord — La page entière est structurée comme un tableau de bord à sensation live avec des compteurs en direct, des sparklines, des pips pulsants. (Bon pour : infra, cybersécurité, observabilité.)
15. Chronologie de Conversation — La page rejoue une conversation/transcription/appel simulé pendant que l'utilisateur défile. Les callouts de fonctionnalités s'ancrent à des moments spécifiques. (Bon pour : IA vocale, plateformes de support, entretiens juridiques.)

Comment choisir le concept :

• Partez du fait central du client. Un restaurant dont toute l'identité est un menu de neuf plats veut un Manuscrit Index. Un horloger dont l'identité est la précision et un seul calibre veut un Objet en Scène sur un Socle. Une société d'expédition dont la marque est un voyage annuel unique veut un Récit Épinglé.
• Rejetez le concept s'il a été utilisé la dernière fois dans cette session. Choisissez le meilleur suivant.
• Notez le concept et une phrase de justification avant d'écrire du JSX. Gardez-le visible dans le fichier d'invite.

Principes de mise en page (appliquez-les quel que soit le concept structurel que vous choisissez) :

• Brisez la grille intentionnellement. Des moments en pleine largeur suivis de colonnes de texte étroites. Des images surdimensionnées débordant de l'écran. Des divisions asymétriques à deux colonnes (60/40, 70/30).
• L'espace blanc généreux n'est pas de l'espace perdu — c'est un signal de luxe. Un espacement de 8rem+ entre les sections.
• Sections à défilement horizontal pour les portfolios ou les galeries (bien faites, pas comme motif de navigation principal — sauf si vous avez délibérément choisi Navigation Horizontale).
• Éléments qui se chevauchent — texte sur images, images sortant de leurs conteneurs, éléments qui traversent les limites de section.
• Éléments sticky qui accompagnent le défilement — une étiquette qui reste pendant que le contenu défile.

Micro-motifs spécifiques qui sont perçus comme premium :

• Grilles en mosaïque ou décalées pour le contenu visuel au lieu de grilles uniformes.
• Texte qui chevauche les images avec mix-blend-mode pour un effet éditorial.
• Sections numérotées ou indexées avec une progression visible.
• Un système de grille visible (lignes ou colonnes subtiles) que le design brise occasionnellement.
• Contenu qui se transforme à mesure que vous défilez — pas seulement en apparaissant, mais en se métamorphosant, en changeant d'échelle, en se repositionnant.
• Lignes tabulaires / de registre pour les listes (lots, manifestes, registres) plutôt que des grilles de cartes.
• Champs de formulaire qui ressemblent à des parties d'un document éditorial, pas d'un formulaire SaaS — étiquettes en petit monospace au-dessus d'entrées serif, pas de contours, bordures inférieures uniquement.

Répétitions interdites (dans une session de compétence) :

• Ne donnez pas à deux sites une section de processus « colonne gauche sticky + colonne droite défilante ». Choisissez-la pour un ; inventez autre chose pour l'autre.
• N'ouvrez pas deux sites avec un hero asymétrique 33/67. Si l'un l'a fait, le suivant s'ouvre avec une scène centrée, ou un arrière-plan plein écran, ou un registre, ou pas de hero du tout.
• Ne terminez pas deux sites avec la même paire « formulaire de demande + grille de colophon ». Variez la conclusion.

Variété de la barre de navigation — un mode d'échec silencieux à surveiller.

Le défaut le plus simple est une barre supérieure grid-template-columns: auto 1fr auto avec « marque à gauche, quelque chose au centre, quelque chose aligné à droite, mix-blend-mode: différence ». Après trois sites, cela commence à ressembler à une signature — pas à un choix de design. Dans chaque session, variez la barre de nav de manière substantielle :

• Pas de nav du tout (marques Objet Unique, Sans Chrome).
• Nav intégrée dans la barre latérale sticky (marques Barre Latérale + Colonne).
• Barre de commandes fixée en bas stylisée comme le lanceur ⌘K (marques de produits tech — Cursor / Linear / Arc).
• Wordmark centré en ligne avec des onglets étalés en dessous comme une bande secondaire.
• Index de défilement horizontal en pleine largeur qui sert également de nav.
• Nav Marquee — ticker à défilement continu avec les noms des sections.
• Nav verticale gauche écrite de bas en haut.
• Nav barre d'état avec un pip opérationnel en direct.
• Bande de ticker Marquee (prix de référence, métriques) plus une barre supérieure fine.

Choisissez la nav qui appartient à la marque et à l'ADN structurel — ne vous rabattez pas par défaut sur la barre supérieure à trois colonnes.

Évitez le défaut éditorial-luxe.

Cette compétence gravite, sous pression, vers : fond crème chaud, police serif display (Fraunces / Cormorant), métadonnées monospace, un seul accent cuivré, micro-étiquettes en majuscules à large espacement, symboles ◦. C'est une esthétique réelle, appropriée pour la couture, la parfumerie, la haute cuisine, l'horlogerie. Ce n'est pas approprié pour la tech, l'IA, la cybersécurité, l'électronique grand public, le SaaS ou les outils de développement — et le fait de s'y rabattre à plusieurs reprises donne l'impression que tous les sites d'un lot ont été réalisés par la même agence.

Si le domaine est la technologie, l'esthétique doit pencher vers : fonds blanc pur ou presque noir (pas crème) ; sans-serifs néo-grotesques (style Söhne, Inter Tight, IBM Plex Sans, Instrument Sans) comme police d'affichage primaire ; des accents bleus, cyan ou blancs ; des mises en page fonctionnelles et denses ; des tuiles, des analyses, des lignes tabulaires ; des motifs UI (palettes de commandes, vues diff, tuiles de tableau de bord). La variante tech de cette compétence doit être reconnaissable comme « cette entreprise fait du logiciel sérieux ».

Si le domaine est le design industriel / l'architecture, l'esthétique doit pencher vers : plans austères, grilles de documents techniques avec cotes, monospace pour toutes les étiquettes, noir sur blanc, images en pleine page avec une seule ligne de type, sections en tiroir à révélation horizontale. Faites ressembler le site à un plan.

Si le domaine est le bien-être / la santé / la médecine, l'esthétique doit pencher vers : grandes images douces, rapports de cercle et de courbe, polices arrondies, crèmes et verts sauge, bordures épaisses, étiquettes de données cliniques en monospace, études de cas sous forme d'essais de patients.

Le test du portfolio : avant de finaliser un design, demandez-vous : « Si je mettais ce site dans un portfolio, est-ce qu'on dirait que je l'ai fait ou que je l'ai acheté ? » Si la réponse penche vers « acheté », repartez de zéro.