Faire générer à Claude Code et Cursor une interface fidèle à un site

Pourquoi un DESIGN.md vaut mieux qu’une capture d’écran#

Étapes#

1. 1

   Choisissez un site dont l’interface ressemble à ce que vous construisez

   Des écrans de produit avec une densité similaire fonctionnent mieux qu’une landing page avec un grand hero. Si vous construisez un tableau de bord, choisissez un produit qui en a un. Consultez d’abord la galerie DESIGN.md : le fichier y est peut-être déjà.

2. 2

   Récupérez son DESIGN.md

   Copiez-le depuis la page de la galerie, ou collez l’URL sur la page d’accueil de Design Extractor et lancez une extraction Pro. Le mode Pro échantillonne les pages clés du site, et une extraction prend au moins une minute.

3. 3

   Enregistrez-le sous le nom DESIGN.md à la racine de votre dépôt

   Placez-le à côté de README.md et d’AGENTS.md et commitez-le, pour que chaque branche et l’agent de chaque coéquipier lisent le même fichier.

4. 4

   Indiquez-le à votre agent

   Ajoutez une courte référence dans CLAUDE.md pour Claude Code, ou une règle de projet pour Cursor. Les blocs sont ci-dessous.

5. 5

   Demandez l’interface dans les termes du fichier

   Nommez les tokens et les composants dans votre prompt (primary, body-md, une recette de bouton) et demandez à l’agent de lister toute valeur introuvable au lieu d’en inventer une.

6. 6

   Comparez le résultat au fichier

   Vérifiez les couleurs, les polices, les rayons et les états par rapport au DESIGN.md avant d’accepter la modification.

Exemple concret : Linear#

---
name: Linear
colors:
  primary: "#5E6AD2"
  canvas: "#08090A"
  surface: "#121414"
  surface-raised: "#1C1C1F"
  ink: "#F7F8F8"
  ink-secondary: "#D0D6E0"
  muted: "#8A8F98"
  subtle: "#62666D"
typography:
  hero-display:
    fontFamily: Inter Variable
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.584px
  body-lg:
    fontFamily: Inter Variable
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: normal
rounded:
  xs: 2px
  sm: 4px
  sm-2: 4.4625px
  md: 5px
---

Indiquez le fichier à votre agent#

## Design
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

---
description: Follow DESIGN.md for every UI change
alwaysApply: true
---
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

Des prompts qui utilisent les tokens#

Build a pricing page with three plan cards. Follow DESIGN.md:
- use primary (#5E6AD2) only where the file says it belongs
- set headings in hero-display and body copy in body-lg
- reuse the button-ghost recipe for the plan buttons, with its hover and focus states
- start the plan cards from the card recipe
List any value you could not find in DESIGN.md instead of inventing one.

@DESIGN.md Restyle the settings form in src/app/settings to match this file.
Take colors, type and radii from the tokens and inputs and buttons from the component recipes.
Keep the existing layout and logic, and list any value you could not find in the file.

Relisez ce que l’agent a construit#

• Couleurs. Cherchez les valeurs hex dans le diff. Chacune doit figurer dans DESIGN.md. Une nouvelle valeur signifie généralement que l’agent a deviné.
• Polices. Beaucoup de marques utilisent des polices commerciales que vous ne pouvez pas distribuer. La section Typography du fichier nomme généralement une alternative open source ; vérifiez que l’agent a chargé celle-là, et non une police de secours au hasard.
• Rayons et espacements. Les boutons et les cartes doivent utiliser les tokens d’arrondi du fichier, pas une valeur par défaut comme 8px partout.
• États. Les styles de survol et de focus font partie de chaque recette de composant. Parcourez la page avec Tab et vérifiez l’anneau de focus.
• Recettes signalées. Si le fichier marque une recette comme signalée, sa géométrie est une approximation. Comparez ce composant avec le vrai site.

Si vous modifiez DESIGN.md à la main, vérifiez-le avec le validateur DESIGN.md gratuit avant que votre agent le relise.

Fichiers utilisés dans ce guide#

Chacune de ces pages de la galerie contient le DESIGN.md complet à copier dans votre dépôt, avec sa palette et son spécimen typographique.

• 
  Logiciels et SaaS · Productivity & Notes

  Linear

  Le système de design de Linear est une interface produit dense, conçue en priorité pour le mode sombre et destinée aux équipes d'ingénierie. La palette de surfaces repose sur un noir presque pur (#08090a, #0f1011), complété par des gris sombres superposés pour différencier la barre latérale, les cartes et les panneaux. La typographie repose exclusivement sur Inter Variable, avec un interlettrage négatif précis aux grandes tailles, et sur Berkeley Mono pour le code en ligne. Le langage des rayons reste volontairement discret (2 à 6 px en général), les formes en pilule étant réservées aux badges et aux pastilles de statut. L'élévation s'exprime par des bordures intérieures fines de 1 px et des ombres portées de faible opacité plutôt que par des superpositions spectaculaires. La couleur d'appel principale est l'indigo signature de Linear (#5e6ad2), utilisé pour le bouton Sign Up et les liens clés.

• 
  Finance et fintech

  Stripe

  Le site marketing de Stripe repose sur un design system très encadré (HDS, Stripe Design System) construit autour de la police variable « sohne-var » en graisses légères (300–400), d'une palette de marque allant du bleu marine profond à l'indigo, ancrée sur #533afd (Stripe Indigo), et d'un héros signature en dégradé spectral pleine largeur. Les composants ont des rayons faibles (4–6 px), des ombres plates ou très discrètes, et sont structurés selon une grille d'espacement de base de 8 px. Le ton général est autoritaire mais accessible : l'infrastructure financière y est présentée par une typographie assurée et un usage mesuré de la couleur.

• 
  Développeurs et infrastructure · Developer Tools & IDEs

  Supabase

  Supabase utilise un système de design orienté sombre, ancré sur un fond presque noir et profond (oklch ~0.19) avec un accent vert vif de marque (#3ecf8e / #3fcf8e). La mise en page s'organise autour d'une grille responsive de cartes de fonctionnalités, avec Manrope pour les titres d'affichage et Inter pour le texte de corps et l'interface. Source Code Pro gère l'ensemble des contextes monospace et de code. Le système de couleurs repose sur des propriétés personnalisées en oklch, nommées de façon sémantique. Les cartes ont un rayon de 12 px avec un traitement de bordure discret, les boutons un rayon de 6 à 8 px, et la densité globale reste modérée, sur une grille d'espacement de base de 8 px.

Parcourir tous les exemples de DESIGN.md