Un site sans modèle avec Claude Code et Refero DESIGN.md

Des ressources pratiques sur le travail avec les projets et les modèles : documentation Ailoot.

Pourquoi les sites Web créés avec Claude Code ressemblent-ils à des modèles Tailwind ?#

Dans l’exemple de janvier décrit, un petit projet annexe était en cours de création : un composeur d’appels de prospection à froid. Dans un dépôt vide, il a été demandé à Claude Code de créer la page d’accueil. Le résultat était générique : un arrière-plan sombre slate-950, une couleur d’accent purple-500, un titre en gras avec une police sans empattement et, en dessous, trois cartes aux ombres identiques. La même mise en page que dans la première version de ChatGPT, la première version de Lovable et la première version de v0. Après cinq modifications du prompt ajoutant « moderne », « premium » et « pas comme les autres », rien n’a changé. La page semblait toujours provenir d’un ensemble de modèles Tailwind UI Templates.

Autrement dit, Claude ne « ne sait pas » pas créer quelque chose de beau. Il sait ce que font la plupart des gens et reproduit cette majorité. Pour obtenir un résultat qui ne soit pas une moyenne, l’agent a besoin de contraintes précises : les couleurs à utiliser, les polices, les espacements et les composants à considérer comme canoniques.

C’est là qu’un système de design intervient comme contexte. Pas « rends-le beau », mais « crée-le dans ce style précis ; voici ses paramètres ».

Refero Styles comble cet écart avec un artefact prêt à l’emploi : un fichier DESIGN.md contenant des paramètres issus de vrais produits.

Qu’est-ce que Refero Styles ?#

La page d’accueil de styles.refero.design le dit clairement : « découvrez plus de 2 000 systèmes de design lisibles par les agents IA, issus de sites Web de produits de premier plan ». Le catalogue présente des marques qui définissent les standards visuels : Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Ces systèmes ne sont pas extraits manuellement : l’équipe Refero exécute un script qui analyse le CSS et le balisage réels d’un site et regroupe le résultat sous forme de Markdown structuré. La bibliothèque styles.refero.design est gratuite.

Le mot clé est « structuré ». Le fichier ne contient ni captures d’écran ni description du genre « dans un style minimaliste ». C’est du Markdown avec des couleurs hexadécimales précises, des tailles de police exactes en pt, des unités d’espacement et des règles pour les composants. L’agent IA lit ce fichier et travaille à partir de détails concrets plutôt que d’essayer de décrire des préférences esthétiques avec des mots.

Sur sa page ai-agents, l’équipe Refero indique que les outils pris en charge sont « Cursor, Claude Code, Codex, v0 et Lovable ». DESIGN.md fonctionne donc comme un artefact universel : un seul fichier adapté à tous les principaux agents de développement IA.

Que contient un fichier DESIGN.md ?#

L’équipe Refero décrit la structure du fichier sur sa page design-md-template :

La structure du fichier ressemble donc généralement à ceci :

Les créateurs soulignent aussi un principe qui résout 80 % des problèmes de design liés à l’IA :

Autrement dit, le code hexadécimal #5E6AD2 est plus parlant que « comme Linear ». La valeur exacte font-size: 13px / line-height: 18px est plus parlante que « texte compact ». Les détails concrets l’emportent sur l’interprétation.

DESIGN.md dans le dépôt n’est pas une image destinée à l’équipe. C’est un élément du contexte permanent de votre projet : un savoir structuré que l’IA lit à chaque requête.

Créer un site Web dans le style de Linear en 4 étapes#

Ces quatre étapes forment la séquence décrite pour démarrer un nouveau site Web. Il ne s’agit pas de « quatre étapes en général », mais d’une séquence précise avec une action par étape.

1. Installer Claude Code

   Installateur natif à une commande : curl -fsSL https://claude.ai/install.sh | bash (la méthode recommandée dans la documentation officielle). Sur macOS, brew install --cask claude-code fonctionne ; sur Windows, winget install Anthropic.ClaudeCode. S’il est déjà installé, vérifiez la version : claude --version (la version 2.1.178+ est nécessaire : c’est elle qui a introduit les permissions Tool(param:value) et le blocage des commandes git dangereuses en mode automatique). Connectez-vous à votre compte : claude lance l’assistant. Claude Code est inclus dans un abonnement Pro ($17/mois avec facturation annuelle ou $20/mois avec facturation mensuelle).

2. Ouvrir Refero Styles et choisir une marque

   Rendez-vous sur https://styles.refero.design et ouvrez le catalogue. Le principal critère de sélection est la proximité avec votre produit, pas le fait que le style vous « plaise ». Vous créez un tableau de bord SaaS ? Regardez Linear, Vercel et Notion. Vous créez un produit fintech ? Regardez Stripe, Mercury et Column. Vous créez un produit destiné aux membres ? Regardez Duolingo. Ouvrez la fiche d’une marque et cliquez sur « Copy DESIGN.md ».

3. Placer DESIGN.md dans le projet comme contexte

   Créez un fichier docs/DESIGN.md à la racine du projet et collez-y le contenu copié. Ouvrez ensuite CLAUDE.md et ajoutez une ligne : @docs/DESIGN.md. Il s’agit d’une directive d’importation : Claude Code charge le contenu dans son contexte au démarrage d’une session. Pour en savoir plus sur les importations dans CLAUDE.md, consultez le guide consacré à un fichier d’instructions unique pour Claude Code, Codex et Cursor.

4. Demander une page précise

   Pas « rends-la belle ». Soyez précis : « À partir du DESIGN.md présent dans le contexte, crée une page d’accueil pour un produit SaaS de gestion des tâches. Structure : un hero avec un titre et un sous-titre, deux boutons CTA (principal et secondaire), un bloc en dessous avec 3 fonctionnalités et des icônes, puis un bloc de témoignages. Utilise exactement les couleurs et la typographie de DESIGN.md ; n’invente pas les tiennes. »

Après la quatrième étape, Claude crée la page. Dans l’expérience décrite, une page d’accueil prend en moyenne 8–12 minutes, et elle ressemble réellement au style de la marque sélectionnée. Ce n’est pas une copie au pixel près, mais l’esthétique est reconnaissable : les mêmes polices, la même palette, le même rythme d’espacement et les mêmes petites décisions de conception pour les boutons.

Les créateurs de Refero décrivent le même principe en trois étapes, de façon un peu plus concise, sur leur page ai-agents/design-resources :

Cette séquence en quatre étapes suit la même logique, en ajoutant les étapes explicites de l’installation de Claude Code et de l’importation du fichier dans CLAUDE.md.

Quel style choisir pour votre produit ?#

Les créateurs de Refero donnent ce conseil dès la première étape de leur guide : choisissez une référence en fonction non seulement du nom de la marque, mais aussi de la densité, du ton et du public.

Les couleurs, la typographie, la hiérarchie et les animations sobres inspirées d’Apple peuvent convenir à un tableau de bord SaaS ; les grands espacements d’une page marketing particulière peuvent ne pas convenir. Examinez l’écran précis plutôt que la marque. Pour la comptabilité, fixez explicitement hauteur compacte des lignes, espacements et densité en préservant la lecture des nombres et commandes, sans recopier une présentation aérée.

Un guide simple pour choisir selon le type de produit :

Si vous hésitez encore, choisissez Linear. Il offre la base la plus polyvalente : une palette neutre, une typographie lisible (Inter / Söhne) et des espacements sobres. Un site Web basé sur Linear aura une apparence professionnelle pour 9 types de produits sur 10.

Pourquoi intégrer DESIGN.md au contexte permanent de votre projet ?#

Dans la pratique décrite, DESIGN.md est stocké à côté de CLAUDE.md dans chaque projet géré avec des agents IA. Ce fichier n’est pas considéré comme « temporaire pour une seule tâche ». C’est un canon permanent sur lequel s’appuient toutes les sessions futures. Dans un mois, vous pouvez demander à Claude d’ajouter une page au projet : il ouvrira le même DESIGN.md et la créera dans le même style. Dans six mois, vous pouvez confier le projet à un autre membre de l’équipe : il pourra lui aussi lancer Claude et obtenir un résultat cohérent, car DESIGN.md se trouve dans le dépôt.

Appliqué au design, le principe fonctionne ainsi : une décision est prise une fois — la palette, la typographie et le rythme des espacements. Ensuite, chaque agent IA la tient pour acquise.

Autrement dit, le design existe sous forme de code (Markdown est du code), et non comme un fichier Figma que l’IA ne peut pas lire. Lorsque le design est un fichier dans le dépôt, Claude Code le lit, Codex le lit et tout futur outil pourra le lire. Lorsque le design se trouve dans Figma, il reste dans un environnement séparé et doit être traduit manuellement pour chaque session.

Dans les projets annexes décrits, cette structure a été utilisée :

project/
├── CLAUDE.md            (imports @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (canon visuel, copié depuis Refero)
│   ├── ARCHITECTURE.md  (structure du projet)
│   └── BRAND.md         (voix de marque, vocabulaire)
└── ...

Ces trois fichiers sont une façon d’organiser le contexte permanent du projet. DESIGN.md gère le visuel, ARCHITECTURE.md la structure et BRAND.md la voix. Tout agent IA ayant accès au dépôt reçoit ces trois fichiers comme contexte.

Que sont Refero MCP et refero_skill ?#

Refero Styles est la couche de base (DESIGN.md sous forme de fichier). La vague suivante est constituée d’intégrations qui rendent l’accès à la bibliothèque « natif » pour les agents IA.

Refero MCP (officiel). Il s’agit d’une API serveur à https://api.refero.design/mcp à laquelle Claude Code se connecte à l’aide d’un jeton Bearer. L’agent accède alors à plus de 150 000 écrans et plus de 6 000 parcours utilisateur issus de produits réels. Vous pouvez l’installer avec un skill :

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

Après l’installation, Claude lance une « recherche en design » au début de chaque session comme première étape obligatoire : l’agent examine les choix visuels adaptés à la tâche et, si nécessaire, propose trois directions liées à la référence sélectionnée. Au 23 juin 2026, le dépôt refero_skill compte 67 commits et 135 étoiles. Un nouveau produit en cours de développement actif.

La pratique décrite repose sur une méthode simple : ouvrir le site manuellement, copier DESIGN.md et le placer dans un fichier. MCP est utile lorsque le travail avec des systèmes de design devient courant, par exemple lorsque vous gérez plusieurs projets clients et passez chaque jour d’un canon visuel à l’autre. Pour en savoir plus sur la connexion de serveurs MCP à Claude Code, consultez le guide sur NotebookLM et MCP.

Quelles 4 erreurs font échouer le processus ?#

Ces quatre erreurs reviennent dans l’expérience décrite du travail avec un contexte de design. Chacune semble anodine, mais chacune ramène le résultat au modèle Tailwind standard.

Erreur 1. Le prompt « rends-le moderne ». C’est le schéma d’erreur le plus courant. On ouvre Claude Code et on écrit : « crée-moi un site SaaS, style moderne, aspect premium ». On obtient un arrière-plan sombre avec un accent violet. Dans les données d’entraînement, le mot « moderne » est associé à toutes les pages d’atterrissage de 2022–2024 construites à partir du même modèle. Sans les paramètres exacts de DESIGN.md, « moderne » signifie « moyen ».

Erreur 2. Coller DESIGN.md dans le chat sous forme de message. Il arrive que des personnes copient DESIGN.md dans la fenêtre de chat de Claude Code et disent : « voici le style, utilise-le ». Cela fonctionne une fois, jusqu’à la fin de la session. Ouvrez une nouvelle session (ou passez à une autre tâche, /clear), et le contexte est perdu. Si vous voulez conserver le style, le fichier doit se trouver dans le dépôt et être importé dans CLAUDE.md. Pour comprendre pourquoi CLAUDE.md est le point central du contexte permanent, consultez le guide sur la mémoire de Claude.

Erreur 3. Choisir un style parce qu’il vous « plaît ». Une référence marketing Apple aérée peut mal se prêter à la copie intégrale pour un tableau immobilier exigeant 30 annonces à l’écran. Cela n’exclut ni typographie, palette ni hiérarchie inspirées d’Apple : adaptez espacements et densité, puis vérifiez les informations réellement visibles à la taille d’écran cible. Choisissez la référence précise selon densité, ton et public, pas seulement sa marque.

Erreur 4. Ne pas mentionner DESIGN.md dans le prompt lui-même. DESIGN.md peut se trouver dans le dépôt, être importé par CLAUDE.md et être visible par l’agent. Mais si le prompt dit « crée un site Web », Claude peut suivre la voie habituelle sans se référer explicitement au fichier. Pour chaque prompt de design, cette phrase est utile : « Utilise exactement les couleurs, les polices et les espacements de docs/DESIGN.md. N’invente pas de valeurs : prends-les dans le fichier. » Cela garantit que l’agent utilise DESIGN.md au lieu de le contourner.

Les tokens précis sont les codes hexadécimaux, les tailles de police en pt et les unités d’espacement de DESIGN.md. Le langage naturel, c’est « moderne », « premium », « épuré » ou « comme Apple ». Les tokens précis fonctionnent ; les mots libres ne fonctionnent pas.

Que faire ensuite ?#

Vous avez maintenant le processus de base : Claude Code + DESIGN.md de Refero + 4 étapes = un site Web sans modèle. Cela couvre 70 % des besoins. Les 30 % restants concernent les cas où vous avez besoin de plus de précision, de rapidité ou de vérification.

Trois pistes à explorer après avoir maîtrisé les bases :

1. Frontend Design Skill. Il s’agit d’un skill officiel pour Claude Code qui ajoute un retour visuel. L’agent prend une capture d’écran de la page assemblée avec Puppeteer, la regarde avec ses « yeux » (un modèle de vision), la compare à DESIGN.md et propose lui-même des corrections. C’est une boucle automatisée « prompt → code → capture d’écran → critique → prompt ». Utile lorsqu’une page est complexe et qu’une seule itération ne suffit pas.

2. Refero MCP en mode production. Lorsque vous gérez 3–5 projets en parallèle, ajouter manuellement DESIGN.md pour chacun devient fastidieux. Refero MCP peut trouver 3 styles adaptés à partir d’une description de projet et vous laisser choisir. Cela réduit le démarrage d’un nouveau projet de 30 minutes à 3.

3. Combiner avec le Context Engineering. DESIGN.md est l’un des artefacts de contexte. À ses côtés, on trouve généralement ARCHITECTURE.md (structure du projet), BRAND.md (voix de marque) et business/audience.md (public cible). Ils sont tous importés dans CLAUDE.md. Lorsque Claude crée une page, il tient compte du visuel, du public et de la structure du produit. Il s’agit essentiellement du Context Engineering : un travail systématique sur ce que vous fournissez à l’agent avant une requête.

Ressources pratiques : documentation Ailoot.

Ressources pratiques : documentation Ailoot.

Plus de ressources et d’outils : Ailoot.