Un fichier pour que tes sites générés arrêtent de se ressembler
Tu choisis le style d’abord, l’IA construit ensuite dans ton système. Deux minutes d’installation, un seul fichier.
Contexte
Pourquoi tous les sites générés se ressemblent
Sans contraintes visuelles, l’IA en invente, et elle invente toujours les mêmes.
Quand tu demandes un site à Claude, à Codex ou à Lovable sans rien préciser, le modèle n’a aucune contrainte visuelle, alors il en fabrique. Et il fabrique les mêmes à chaque fois. Tu lui as donné un objectif fonctionnel sans lui donner de système de design, alors il comble le vide avec sa moyenne statistique. Et sa moyenne, c’est exactement ce que tu vois passer partout depuis un an.
Claude
Codex
LovableTrouver
Où trouver le style
Le site s’appelle Refero Styles.
Refero StylesRends-toi sur styles.refero.design. C’est une bibliothèque de design systems extraits de vrais sites de produit, et chaque fiche te donne le DESIGN.md correspondant. Le site annonce plus de 2 000 styles et précise que le fichier s’utilise dans Cursor, Claude Code, Codex, v0 ou Lovable.
Cursor
v0Cherche par ambiance, pas par marque
La barre du haut propose des filtres tout faits : Minimal Design, Clean SaaS, Editorial Type, Soft Gradients, Monochrome UI, Playful Design, High Contrast, Premium Design. Commence par là, c’est plus rapide que de faire défiler.
Trie avec Trending, Popular ou Newest
Trois onglets sont posés en haut de la grille. Newest est le plus utile si tu veux éviter les styles que tout le monde utilise déjà.
Lis la phrase d’ambiance avant d’ouvrir
Chaque vignette porte une ligne comme « midnight precision instrument » pour Linear, ou « warm paper notebook » pour Notion. Cette phrase est la première ligne du fichier, et c’est elle qui donne le ton à l’IA.
Linear
Apple
Notion
Vercel
Resend
Mercury
Wise
Duolingo
Superhuman
Framer
RaycastLe fichier
Quatre onglets, un seul qui t’intéresse
Prends DESIGN.md, en version Extended.
- Onglet
- Quand le prendre
- DESIGN.md
- Le document complet en markdown, écrit pour être lu par un agent. C’est celui de ce guide
- Tailwind v4
- Un bloc @theme avec les tokens, si ton projet est déjà en Tailwind v4
- CSS Variables
- Un bloc :root de custom properties, pour un projet CSS classique sans agent
- Design Tokens
- Les tokens bruts, si tu alimentes une chaîne de production de tokens
TailwindLe toggle Compact donne les tokens et l’essentiel. Extended ajoute les composants, les do et les don’t, les surfaces, la mise en page et un guide de prompts. Prends Extended : c’est exactement ce que l’IA invente mal quand tu ne dis rien.
- Ce qu’il y a dedans, sur la fiche Linear
- Le détail
- Couleurs
- 16 couleurs nommées, chacune avec son token et son rôle écrit en clair
- Typographie
- 2 familles avec leurs substituts, les graisses exactes, 12 pas d’échelle avec interlignage et interlettrage
- Espacements et formes
- Unité de base, densité, 16 valeurs d’échelle, 6 rayons nommés par élément, 8 ombres
- Composants
- 11 composants décrits avec leurs valeurs exactes, du bouton primaire à la barre de logos
- Règles
- 7 do et 7 don’t, formulés comme des ordres
- Bonus
- Un guide de prompts par composant, prêt à recopier
Install
Trois façons de l’installer
Prends celle qui correspond à ton setup, les trois donnent le même résultat.
Dans un projet : à la racine, et cité une fois
Télécharge le fichier en Extended, renomme-le DESIGN.md et pose-le au même niveau que ton package.json. Puis, dans ton AGENTS.md ou CLAUDE.md, ajoute une ligne du type « avant toute UI, lis DESIGN.md et applique-le ». Sans cette ligne, l’agent le lira parfois et l’oubliera souvent.
En skill dans Claude
Customize, puis Skills, puis Add en haut à droite, puis Upload skill, et tu glisses le fichier dans la zone prévue.
En skill dans ChatGPT
Même logique : tu uploades le fichier une fois et tu l’actives quand tu commences un build. Vérifie que ton abonnement y donne accès, la disponibilité en dépend.
En copier-coller, partout ailleurs
Le bouton Copy, et tu colles le bloc en tout premier message de la conversation, avant ta demande. C’est la méthode la moins durable, mais elle marche dans les outils qui n’ont ni skills ni fichiers de projet.
Usage
Tu décris la structure, il applique le style
Une fois le fichier en place, ton prompt change de nature. Tu arrêtes de décrire l’apparence et tu décris uniquement ce qu’il y a sur la page, puisque le style est déjà écrit.
- Avant, sans le fichier
- Après, avec le fichier
- « Fais-moi une landing page moderne et épurée pour une app de finance, avec un beau hero, des couleurs premium et une palette élégante »
- « En suivant DESIGN.md, construis la landing : nav, hero avec un seul CTA, bandeau de logos clients, 3 blocs features, FAQ, footer »
Le deuxième prompt est plus court et il donne un meilleur résultat, parce que tous les mots que tu as enlevés étaient vagues. « Moderne », « épuré », « premium » et « élégant » ne veulent rien dire pour un modèle, et c’est exactement là qu’il improvise.
En suivant strictement DESIGN.md, construis [la page].
# Structure : [tes sections, dans l'ordre]
# N'invente aucune valeur qui n'est pas dans le fichier.Compare le code que tu viens d'écrire à DESIGN.md.
Liste chaque valeur que tu as utilisée et qui ne vient pas
du fichier, avec la ligne concernée. Ne corrige rien encore.Applique DESIGN.md à ce fichier. Remplace les couleurs,
tailles, rayons et espacements par ceux du fichier.
Ne touche ni au contenu ni à la structure.Erreurs
Ce qui casse le résultat
- L’erreur
- Ce qui se passe, et la correction
- Prendre Compact
- Tu récupères les couleurs, mais pas les composants ni les don’t, et le rendu redevient générique dès le deuxième écran. Mets le toggle sur Extended
- Uploader et ne jamais l’invoquer
- Le fichier existe mais l’agent ne le lit pas. Tu crois que ça ne marche pas alors que rien n’a été activé. Nomme DESIGN.md dans le prompt
- Empiler deux styles
- Deux systèmes qui se contredisent. Le modèle fait la moyenne des deux et tu obtiens exactement le rendu générique que tu voulais fuir. Un seul fichier par projet
- Rajouter tes propres adjectifs
- « En suivant DESIGN.md, fais un truc plus fun » annule la moitié du fichier. Décris la structure, pas le style
- Traduire le fichier
- Les rôles et les don’t perdent en précision, et certains termes techniques n’ont pas d’équivalent propre. Laisse-le en anglais
Limites
La partie honnête
- Quand ça vaut le coup
- La réponse
- Prototype ou MVP
- Oui. C’est le meilleur usage : un rendu crédible tout de suite, sans phase de design
- Projet perso ou side project
- Oui. Tu n’allais pas payer un designer de toute façon
- Refonte d’un projet existant
- Oui, avec le prompt 03. Ça homogénéise un projet qui a dérivé
- Site client avec charte existante
- Non. Écris ton propre DESIGN.md à partir de leur charte, en reprenant la même structure
- Création d’identité de marque
- Non. Ce n’est pas le bon outil pour ce travail-là
Mémo
Tout le setup en un bloc
# 1. Choisir le style
styles.refero.design
Filtres d'ambiance ou nom de marque, onglets Trending / Popular / Newest
# 2. Récupérer le fichier
Ouvre la fiche > onglet DESIGN.md > toggle sur Extended
Bouton .md pour télécharger, ou Copy pour copier
# 3. L'installer
Projet : DESIGN.md à la racine + une ligne dans AGENTS.md ou CLAUDE.md
Claude : Customize > Skills > Add > Upload skill
ChatGPT : upload en skill, puis active-le au début du build
Sinon : colle le bloc en premier message
# 4. Prompter
"En suivant strictement DESIGN.md, construis [la page].
Structure : [tes sections]. N'invente aucune valeur."- Ce qu’il faut retenir
- Réponse courte
- C’est un prompt ?
- Non. C’est un document de référence que l’agent lit avant de coder
- Compact suffit ?
- Non. Les composants et les don’t sont dans Extended
- Une palette collée fait pareil ?
- Non. L’IA garde les couleurs et réinvente l’échelle typographique, les rayons et la densité
- Je peux en mettre deux ?
- Non. Le modèle fait la moyenne et tu retombes sur du générique
- Je le traduis en français ?
- Non. Le fichier reste en anglais, tes prompts restent en français
- C’est gratuit ?
- Pas annoncé sur les pages lues. Vérifie toi-même