Style · guide

Le style d'une grande marque, dans ton site

Refero Styles, c'est plus de 2 000 design systems tirés de vrais sites de marques, chacun dans un fichier DESIGN.md que Claude Code sait lire. Comment choisir le bon, le copier, le prompt exact à donner à Claude, et comment l'adapter à ta marque sans copier personne.

Lecture 8 min Niveau débutant Mis à jour le 29 septembre 2026

i am rankMon outil Sois la marque que recommande. Mesure et améliore ta visibilité IA dans ChatGPT, Gemini et les autres moteurs de recherche. Et transforme leurs réponses en clients. 100 % gratuitAnalyser ma marque Sans carte. Ton premier score en 2 minutes.

C'est quoi, un DESIGN.md

Un fichier texte qui décrit un style entier, écrit pour être lu par une IA. Celui d'Apple, sur Refero Styles, fait 392 lignes. Dedans :

• Les couleurs, chacune avec son rôle. Le bleu Apple #0071e3 sert uniquement aux boutons pleins et aux états sélectionnés.
• Les typographies : les polices, l'échelle de tailles (12, 14, 17, 21, 28, 40, 56 px), les graisses et l'interlettrage.
• Les espacements et les formes : l'unité de base (4 px), les rayons (980 px pour tous les boutons, 8 px pour les cartes), la largeur maximale.
• Les composants : le bouton plein, le bouton contour, la barre de navigation, le pied de page, décrits un par un.
• Les règles Do / Don't : ce qu'il faut faire et ce qu'il ne faut jamais faire. Chez Apple : pas d'ombre portée sur les cartes ni les boutons, jamais de carte dans une section grise.

Étape 1 : choisir ton style

Va sur styles.refero.design. Pas de compte, rien à installer. La page d'accueil annonce « Browse 2,000+ AI-readable design systems », avec le badge Beta et « New styles added every week » : la bibliothèque grossit chaque semaine.

Trois façons de trouver ton style :

1. Par marque

   Tape le nom dans la recherche : Apple, Stripe, Notion, Vercel… Les quatre de la vidéo, en lien direct : Tesla, Apple, Ferrari, Anthropic.

2. Par ambiance

   Sous la recherche, le site propose des recherches toutes faites : « Light minimal SaaS », « Cream paper & serif », « Brutalist portfolio », « Like Vercel », « Linear, but warmer »… La recherche accepte aussi une couleur, une police ou un secteur.

3. En parcourant

   Les onglets Trending, Popular et Newest affichent la grille des styles, chacun avec son aperçu et sa phrase d'ambiance (« Midnight command center, coral neon » pour Raycast).

Lire une fiche en une minute

À gauche, le style en clair, dans cet ordre :

• La phrase d'ambiance. Apple : « white room with a single blue switch ». Si elle ne ressemble pas à ce que tu veux construire, passe à une autre fiche.
• Color Palette : les couleurs de marque puis les neutres, chacune avec son rôle et un bouton pour copier le code.
• Typography : l'échelle de tailles en vrai, et les polices avec leur remplaçante.
• Spacing & Shape : densité, unité de base, largeur maximale, rayons.
• Guidelines : la liste Do / Don't. C'est la partie la plus utile, lis-la en premier.

À droite, le fichier lui-même, en deux versions : Compact (173 lignes pour Apple) et Extended (392 lignes). Prends Extended pour un site complet : c'est lui qui contient les composants détaillés et les exemples de prompts. Compact suffit pour une seule page ou un composant.

Étape 2 : copier le DESIGN.md

1. Tu copies

   Dans le panneau de droite, onglet DESIGN.md, choisis Extended puis clique sur Copy. Le site affiche « Style copied ». Ou clique sur .md pour télécharger le fichier. Aucun compte demandé.

2. Tu le poses à la racine de ton projet

   Crée un fichier DESIGN.md dans le dossier de ton site, au même niveau que ton CLAUDE.md, et colles-y le texte. Ou demande-le directement à Claude Code :

   Crée un fichier DESIGN.md à la
   racine du projet et colle-y ce
   texte : [colle ici]

Étape 3 : le prompt pour Claude Code

Ouvre Claude Code dans le dossier de ton site et colle ceci, en remplaçant ce qui est entre crochets :

Lis DESIGN.md à la racine du
projet et construis ma page
d'accueil en le suivant à la
lettre : couleurs, typos,
espacements, composants et
règles Do / Don't.
Le site : [ce que tu vends, en
une phrase], pour [ta cible].
Si une police du fichier n'est
pas disponible, utilise sa
remplaçante (Substitute).
Lance la page en local et
donne-moi l'adresse.

Claude lit le fichier, construit la page et te donne une adresse du type localhost:3000. Ouvre-la, puis corrige en parlant normalement : « le titre est trop gros », « ajoute une section tarifs ». Il garde le style à chaque retouche.

Pour qu'il le relise à chaque session, ajoute une ligne à ton CLAUDE.md. Demande-le-lui :

Ajoute cette ligne à CLAUDE.md :
« Le style du projet est dans
DESIGN.md : relis-le avant toute
modification d'interface et
respecte ses règles Do / Don't. »

L'adapter à ta marque

Comme je le dis dans la vidéo, l'idée n'est pas de recopier à 100 % le design system d'une autre boîte. Tu gardes la rigueur du fichier (les espacements, la hiérarchie, les règles), et tu changes ce qui fait la marque : la couleur signature, les polices, et bien sûr le logo, que tu n'utilises jamais.

Fais 3 variations de ma page,
dans une autre architecture,
adaptées à ma marque. Garde la
rigueur du DESIGN.md (espacements,
hiérarchie, règles), mais :
- couleur signature : [ta couleur]
- polices : [tes polices]
Montre-les-moi côte à côte.

Choisis celle que tu préfères, puis demande-lui de mettre à jour DESIGN.md avec tes couleurs et tes polices. À partir de là, c'est ton design system.

Aller plus vite : Tailwind et CSS

À côté de l'onglet DESIGN.md, la fiche propose trois exports prêts à coller :

• Tailwind v4 : un bloc @theme avec toutes les couleurs, les polices et les tailles (--color-apple-blue: #0071e3…). Si ton projet utilise Tailwind 4, colle-le dans ton fichier CSS principal : les classes comme bg-apple-blue existent aussitôt.
• CSS Variables : le même contenu sous forme de variables :root, pour un site sans Tailwind.
• Design Tokens : un fichier JSON, utile si tu synchronises tes couleurs avec Figma ou une autre application.

Le plus simple reste de donner les deux à Claude : le DESIGN.md pour les règles, et l'export qui correspond à ton projet pour les valeurs exactes.

Les limites à connaître

• Ce ne sont pas les chartes officielles des marques. Refero le dit lui-même : ses fichiers sont extraits des sites et interprétés, ce ne sont pas des guides de marque officiels. Les mesures sont fiables, les rôles des couleurs sont une lecture.
• Plusieurs fiches pour une même marque. Apple en a plus d'une dizaine : Apple, Apple (España), iPhone 18 Pro, AirPods 5, Apple Watch Ultra 4… Prends celle dont l'aperçu ressemble à ce que tu construis.
• Gratuit pendant la bêta. Copier un DESIGN.md ne demande ni compte ni paiement aujourd'hui. Rien ne dit que ça durera : garde une copie des fichiers dont tu te sers (bouton .md).
• Pas de clone de marque. Pour un vrai site commercial, change la couleur signature et n'utilise jamais le logo ni le nom de la marque d'origine.

L'option payante : Refero MCP

Le bouton « Connect to your AI » branche Refero directement dans Claude Code. Ton agent peut alors chercher lui-même dans tout le catalogue de Refero : les styles, mais aussi de vrais écrans de sites et d'applications iOS, et des parcours utilisateur complets.

Il faut un abonnement Refero payant : Pro, Team ou Lifetime. La formule gratuite n'y donne pas accès. Si tu en as un, la commande pour Claude Code :

claude mcp add \
  --transport http refero \
  https://api.refero.design/mcp

Ça vaut le coup si tu conçois des interfaces toutes les semaines. Pour un site, le copier-coller du DESIGN.md suffit largement.