Guide

Mélanger deux sites de référence en un seul design pour un prototype

« Je veux un mélange de Notion et de Stripe. » Les clients briefent souvent des prototypes de cette façon. Avec un DESIGN.md pour chaque site, vous transformez cette phrase en une spécification concrète : comparez les tokens côte à côte, décidez quel fichier mène, puis fusionnez.

Design Extractor vous fournit les deux fichiers. La fusion vous revient, à la main ou avec votre agent de code, et ce guide montre les deux méthodes.

Écrit pour les designers et les agences qui prototypent. Mis à jour le .

Ce que vous obtiendrez

  • Deux fichiers DESIGN.md comparés token par token, pour que les différences soient concrètes.
  • Un plan de fusion : un fichier comme base, des groupes de tokens nommés tirés de l’autre.
  • Le DESIGN.md fusionné, fait à la main ou par votre agent avec le prompt ci-dessous.
  • Une vérification du contraste, pour que le mélange reste lisible.

Comment fonctionne un mélange

Un mélange n’est pas une moyenne. Combiner la moitié d’une palette avec la moitié d’une autre donne un site qui ne ressemble à aucun des deux. Ce qui fonctionne, c’est un fichier de base plus quelques parties nommées tirées de l’autre :

  • La base donne la structure : échelle typographique, espacements, rayons et recettes de composants.
  • L’accent prête des groupes entiers, comme sa famille de couleurs primary ou sa police d’affichage, jamais des valeurs isolées.

Les deux fichiers suivent la spécification DESIGN.md de Google, donc les groupes correspondent : colors, typography, rounded, spacing et components. Voir ce que contient un DESIGN.md pour la structure complète.

Étapes

  1. Récupérez les deux fichiers

    Copiez-les depuis la galerie s’ils y sont, ou collez chaque URL sur la page d’accueil de Design Extractor et lancez une extraction Pro pour chacun.

  2. Mettez-les côte à côte

    Comparez les couleurs primary, les fonds, les polices, les tailles de texte et les rayons, comme dans le tableau ci-dessous.

  3. Choisissez la base

    Prenez le site dont la mise en page et la densité correspondent au prototype.

  4. Nommez ce que l’accent prête

    Notez-le sous forme de groupes de tokens, par exemple « sa famille de couleurs primary ».

  5. Fusionnez à la main ou avec votre agent

    Les deux méthodes sont décrites ci-dessous. Enregistrez le résultat sous le nom DESIGN.md dans le dépôt du prototype.

  6. Vérifiez le contraste et la structure

    Collez le fichier fusionné dans le validateur DESIGN.md gratuit.

Exemple concret : Notion rencontre Stripe

Deux vrais fichiers de la galerie : le DESIGN.md de Notion et le DESIGN.md de Stripe. Tous deux ont été extraits des sites publics des marques et ne sont pas des chartes de marque officielles.

NotionStripe
Primary#0075DE#533AFD
Fond#FFFFFF#FFFFFF
Texte#000000#061B31
PolicesNotion Inter, Lyon TextSohne
Plus grand textehero-display, 96px, graisse 600hero-display, 56px, graisse 500
Texte courantbody, 16px, graisse 400body-lg, 18px, graisse 300
Rayon des boutons8px4px
Tokens de couleur2021
Recettes de composants1471

Une façon de les mélanger

Prenez Notion comme base pour sa typographie, ses espacements, ses rayons et ses composants, et laissez Stripe prêter sa famille de couleurs primary (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft). C’est le brief classique « notre mise en page, leur énergie ».

Vérifiez les chiffres avant de vous engager. La couleur primary de Stripe sur le fond de Notion a un contraste de 6.1:1. Le texte on-primary de Notion sur la nouvelle couleur primary atteint 6.1:1. Le texte courant exige au moins 4.5:1 selon WCAG AA ; les grands textes et les icônes exigent 3:1.

Un piège : la couleur primary de Notion, #0075DE, apparaît 65 fois dans son fichier, surtout dans les recettes de composants. Remplacer le token en haut ne suffit pas ; chaque occurrence doit changer.

Illustration de la fusion manuelle décrite ci-dessus, assemblée par cette page à partir des deux fichiers de la galerie : les tokens de Notion avec la famille primary de Stripe, abrégés. Ce n’est pas une fonctionnalité de Design Extractor, ni un résultat produit par un agent.
---
name: Notion and Stripe prototype
colors:
  primary: "#533AFD"
  primary-focus: "#5452FB"
  primary-bright: "#635BFF"
  primary-pressed: "#4032C8"
  primary-deep: "#2E2B8C"
  primary-soft: "#D6D9FC"
  on-primary: "#FFFFFF"
  ink: "#000000"
typography:
  hero-display:
    fontFamily: Notion Inter
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -4.6px
  body:
    fontFamily: Notion Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 4px
  sm: 8px
  md: 12px
  full: 9999px
---

Fusionner à la main

  1. Copiez le fichier de base dans DESIGN.md et changez son name.
  2. Dans colors, remplacez la famille primary de la base par les valeurs de l’accent.
  3. Cherchez chaque ancienne valeur hex dans tout le fichier et remplacez-la. Les recettes de composants répètent les couleurs dans leur CSS : la liste des tokens ne suffit donc pas.
  4. Réécrivez le texte des sections Overview et Colors pour qu’il décrive le mélange, et non l’une ou l’autre marque.
  5. Vérifiez le fichier dans le validateur et corrigez les avertissements de contraste.

Fusionner avec votre agent

Enregistrez les deux fichiers dans le dépôt du prototype, par exemple sous design/, et donnez à votre agent un prompt qui nomme la base, les groupes à reprendre et les vérifications à faire. Celui-ci a été écrit pour ce guide avec les vrais noms de fichiers et de tokens.

Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.

Relisez le résultat comme n’importe quelle autre modification : lisez le diff, puis collez le fichier dans le validateur. L’agent fait la saisie ; les décisions du prompt restent les vôtres.

FAQ

Mélanger le design de deux sites : questions

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

Non, il n’existe pas de fonction de fusion. Chaque extraction renvoie le DESIGN.md d’un seul site. Vous fusionnez deux fichiers à la main, ou vous demandez à votre agent de code de le faire avec un prompt comme celui de ce guide, puis vous relisez le résultat.

Deux, parfois trois. Un fichier sert de base et donne la structure : échelle typographique, espacements, rayons et composants. Les autres prêtent une partie nommée, comme une famille de couleurs ou une police d’affichage. Mélanger des valeurs de davantage de fichiers donne un résultat qui semble rapiécé.

Celui dont la mise en page et la densité correspondent au prototype. Si le client veut un produit calme, proche d’un document, avec les couleurs d’un autre site, le site calme sert de base et l’autre prête ses couleurs, et non l’inverse.

Collez le fichier fusionné dans le validateur DESIGN.md gratuit. Il vérifie la structure et signale les couleurs de texte au contraste insuffisant. Construisez ensuite un vrai écran avec avant de le montrer au client.

Obtenez les deux fichiers de votre brief

Collez l’URL de chaque site de référence et obtenez son DESIGN.md, prêt à être comparé et fusionné.

Obtenir un DESIGN.md à partir de n’importe quel site

Guides associés

Voir tous les guides DESIGN.md