Guide

Vous refondez votre site ? Extrayez d’abord son design system

Une refonte, un changement d’identité ou une migration vers un nouveau framework, c’est souvent là qu’un design system se perd sans bruit. Les couleurs vivent dans un vieux CSS, l’échelle typographique dans la tête de quelqu’un, les états des boutons dans un composant que personne ne veut ouvrir.

Extrayez votre site actuel en DESIGN.md avant de toucher à quoi que ce soit. Vous obtenez une base de référence écrite pour la nouvelle version, lisible à la fois par votre équipe et par votre agent de code.

Écrit pour les équipes qui préparent une refonte, un rebranding ou une migration. Mis à jour le .

Ce que vous obtiendrez

  • Un DESIGN.md de votre site actuel, commité avant la première ligne de la refonte.
  • Une vision claire de ce que le fichier a capturé et de ce qu’il n’a pas capturé.
  • Une liste de points à vérifier à la main : ressources graphiques, états, animations, breakpoints et pages derrière une connexion.
  • Un moyen de comparer le nouveau site à l’ancien une fois le travail terminé.

Quand le faire

  • Un changement de framework. Même apparence, nouvelle stack. Le DESIGN.md permet à votre agent de code de reconstruire les composants avec les valeurs exactes au lieu de lire d’anciennes feuilles de style.
  • Un changement d’identité. Capturez d’abord l’ancien système, pour savoir exactement quelles couleurs, polices et rayons changent et lesquels restent.
  • Une passation. Une nouvelle agence ou une nouvelle équipe reçoit un seul fichier qui décrit l’apparence actuelle du site, au lieu d’une visite guidée de la base de code.

Étapes

  1. Extrayez le site en ligne avant de modifier quoi que ce soit

    Collez votre URL de production sur la page d’accueil de Design Extractor et lancez une extraction Pro. La page doit être publique : l’extraction la charge comme un visiteur, donc localhost et les pages derrière une connexion ne fonctionnent pas.

  2. Commitez-le comme base de référence

    Enregistrez-le sous le nom DESIGN.md dans le nouveau dépôt et commitez-le avant le début de la refonte. Il garde désormais la trace de l’apparence du site ce jour-là.

  3. Lisez la section Known Gaps

    La fin du fichier liste ce que l’extraction n’a pas pu capturer. Chaque élément de cette liste est à vérifier à la main.

  4. Vérifiez ce qu’un DESIGN.md ne peut pas contenir

    Les ressources graphiques, les écrans connectés, les animations et les autres éléments ci-dessous. Ajoutez des notes au fichier au fur et à mesure.

  5. Construisez en vous appuyant dessus

    Indiquez le fichier à votre agent de code, comme le montre le guide Claude Code et Cursor, et comparez chaque nouvel écran au fichier.

Ce que le fichier a capturé sur Stripe

Pour voir ce que vous obtenez, regardez le DESIGN.md de Stripe dans la galerie. Son extraction Pro a capturé 5 pages de stripe.com : /nl, /nl/pricing, /nl/products, /nl/newsroom/news/stripe-openai-instant-checkout, /nl/contact/sales. Une extraction de votre propre site produit la même structure.

Couleurs21 tokens, chacun avec son rôle
Typographie17 styles en Sohne
Rayons10 tokens
Espacements62 tokens
Composants71 recettes en HTML et CSS : 44 ont passé la vérification sur la page en ligne, 27 signalées ou non vérifiables, chacune avec la raison
SectionsOverview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps

Ce que le fichier dit avoir manqué

Le fichier est honnête sur ses limites. Les 5 premiers des 11 éléments de sa section Known Gaps :

Tiré de la fin du DESIGN.md de Stripe, tel quel.
## Known Gaps

- **Many recipes did not reproduce exactly.** `button-primary` (84% pixel match), `card` (78%), `card-2` (94%), `promo-banner` (77%) and `skip-link` (0%; it is visually hidden until focused) are approximations. So are several header and footer recipes (`header-landing`, `header-inner-2` timed out, `footer-landing`, `footer-inner`, `footer-inner-2`).
- **Some recipes could not be judged at all.** `stat` and `stat-2` were not verifiable, because page media covered most of the element.
- **Some elements were never visible.** `footer-landing`, `header-inner` and `logo-strip-item` were not visible when verification ran, so their values come from computed styles only.
- **No section rhythm was measured.** `sectionRhythm` is empty, so vertical spacing between page sections and the inner padding of large cards is described only qualitatively.
- **No `base` spacing step was published.** The evidence frequency (4px, 8px, 12px, 16px and 24px most common) suggests a 4px-derived grid, but it is not a verified token.

Extrait du site public de Stripe, pas une charte de marque officielle. Lire le DESIGN.md complet de Stripe

Votre propre fichier aura sa propre liste. Considérez-la comme votre liste de vérifications pour les points ci-dessous.

Ce qu’il faut vérifier à la main

ÉlémentPourquoi le fichier peut le manquerQue faire
Logo, icônes, imagesUn DESIGN.md décrit des styles, pas des fichiers.Exportez-les depuis la base de code actuelle et conservez-les avec la nouvelle.
Écrans connectésL’extraction ne voit que les pages publiques.Notez en quoi l’app diffère du site marketing, par exemple des tableaux plus denses ou une barre latérale.
ÉtatsLe survol et le focus sont enregistrés là où l’extraction les a vus ; les états pressé, désactivé et erreur ne le sont souvent pas.Parcourez les formulaires et les boutons et notez les états manquants.
AnimationsLes transitions et les animations sont au mieux décrites en mots.Relevez les durées et les courbes d’accélération dans le CSS actuel.
BreakpointsL’extraction capture une largeur desktop et une largeur mobile.Vérifiez la mise en page tablette et notez où les colonnes changent.
Modèles de page hors de l’échantillonLe mode Pro échantillonne environ cinq pages clés.Extrayez séparément toute page qui a un aspect différent, comme la documentation ou le paiement.

Après la refonte

Quand le nouveau site est en ligne, extrayez-le à nouveau et comparez les deux fichiers. Des tokens inchangés signifient que l’apparence a survécu ; ceux qui ont changé sont soit le changement d’identité prévu, soit une dérive à corriger.

N’importe quel diff de texte montre les valeurs hex et les tailles modifiées. Le paquet @google/design.md de Google ajoute une commande diff qui compare deux versions token par token ; la présentation de DESIGN.md couvre le format et ses outils. Si vous modifiez le fichier à la main en cours de route, vérifiez-le avec le validateur DESIGN.md.

FAQ

Extraire votre design system avant une refonte : questions

Des réponses courtes aux questions qu’on se pose avant d’essayer.

Non. Un DESIGN.md est un fichier texte qui décrit des styles : couleurs, typographie, espacements, rayons et recettes de composants en HTML et CSS. Exportez le logo, les icônes, les illustrations et les photos depuis votre base de code ou vos fichiers de design actuels, et conservez-les à côté.

Non. L’extraction charge la page à partir de son URL, comme le ferait un visiteur : les pages derrière une connexion, en localhost ou sur un réseau privé ne sont donc pas prises en charge. Extrayez le site public, et notez en quoi les écrans connectés diffèrent.

Le mode Pro échantillonne les pages clés du site, environ cinq, et fusionne ce qu’il trouve dans un seul DESIGN.md. Si un modèle de page important n’en fait pas partie, comme une page de documentation ou un tunnel de paiement, extrayez aussi l’URL de cette page et comparez les deux fichiers.

Extrayez le nouveau site une fois en ligne et comparez les deux fichiers. Le paquet @google/design.md de Google dispose d’une commande diff qui compare deux versions d’un DESIGN.md token par token, et n’importe quel diff de texte montre les valeurs hex et les tailles modifiées.

Capturez votre site avant de le modifier

Collez votre URL de production. Une extraction Pro échantillonne ses pages clés et renvoie un seul DESIGN.md.

Obtenir un DESIGN.md de votre site actuel

Guides associés

Voir tous les guides DESIGN.md