Développez intelligemment votre business en optimisant vos coûts
On en discuteLundi, 9h12. Les soldes démarrent mercredi. Votre chef de projet demande à l’IA une landing « premium, élégante, qui donne envie d’acheter ». 9h14, la page est prête : dégradé violet, cartes aux coins bien ronds, typo Inter, gros bouton noir. Propre. Rapide. Plutôt jolie. Un seul détail cloche : elle pourrait appartenir à n’importe qui.
À votre concurrent direct, à une marque de chaussettes, à une startup de fintech. Votre marque vient de se faire cloner, et le coupable est la moyenne.
Car l’agent a beaucoup de talent et zéro souvenir de vous. Sans contexte, il puise dans tout ce qu’il a déjà vu et vous sert le design le plus probable. En e-commerce, le plus probable a un nom : « encore un site Shopify ».
Et la scène se rejoue partout. Remplacez la landing par l’écran d’accueil de votre application, la home de votre site de marque ou le tableau de bord de votre CRM : même rapidité, même talent, même visage passe-partout.
Alors on bricole. Des prompts de trois paragraphes, des captures Figma collées dans le chat, des retouches à la main. Et à chaque nouvelle page, tout recommence.
Et si chaque IA recevait un brief de votre marque avant de dessiner le moindre bouton ? Ce brief a désormais un format. Il s’appelle DESIGN.md, Google Labs en a ouvert la spécification au printemps, et il pourrait bien changer la façon dont les marques construisent toutes leurs interfaces, à commencer par leur boutique.
Un fichier markdown, placé à la racine du projet, que l’agent lit en premier. Il combine deux couches : des tokens lisibles par la machine, dans un en-tête YAML, qui donnent les valeurs exactes de vos couleurs, tailles de police, rayons et espacements ; une justification lisible par l’humain, en prose, qui dit pourquoi ces valeurs existent, où les utiliser et où les éviter.
Les tokens donnent la précision. La prose donne l’intention. C’est ce duo qui fait la différence : un agent qui sait que votre terracotta est #C4633F produit une couleur juste ; un agent qui sait que ce terracotta est réservé aux appels à l’action produit une page juste.
L’idée a été popularisée par Google Stitch, l’outil de design assisté par IA de Google Labs. En avril 2026, Google a publié la spécification en open source (licence Apache 2.0), avec un outil en ligne de commande. La structure des tokens s’inspire du format de design tokens du W3C, le DTCG (Design Tokens Community Group, qui travaille à un standard commun pour décrire les valeurs d’un design system).
Précision utile : la spécification est encore en version alpha. Le format peut évoluer, et certains sujets, animations, tokens de mode sombre, points de rupture responsive, restent en discussion.
Trois fichiers, trois rôles complémentaires.
| Fichier | Ce qu’il décrit | Pour qui |
|---|---|---|
| AGENTS.md | Comment le projet se construit : commandes, conventions de code | Agents de code |
| SKILL.md | Comment mener une tâche précise : procédure, savoir métier | Agents Claude et compatibles |
| DESIGN.md | À quoi le projet doit ressembler, et l’émotion qu’il doit transmettre | Agents de design et de code |
AGENTS.md est un standard ouvert porté par plusieurs acteurs de l’IA ; SKILL.md est le format des « compétences » réutilisables des agents Claude.
Voici un extrait simplifié pour une marque fictive d’épicerie fine, « Maison Olivette ». L’objectif : montrer la logique, pas livrer un fichier conforme à la virgule près.
---
version: alpha
name: Maison Olivette
description: Épicerie fine méditerranéenne. Chaleur artisanale, sobriété éditoriale.
colors:
primary: "#2F3B2A" # vert olive profond, titres et navigation
accent: "#C4633F" # terracotta, réservé aux CTA d'achat
surface: "#F6F1E7" # fond crème, rappel du papier kraft
promo: "#8A2B1E" # uniquement pour les prix barrés et soldes
typography:
display: { fontFamily: "Fraunces", fontWeight: 600 }
body: { fontFamily: "Inter", fontSize: 16px, lineHeight: 1.6 }
rounded:
card: 2px
button: 2px
---
## Visual Theme
Une boutique qui évoque le marché provençal plutôt que la marketplace.
Beaucoup d'air, des photos produit sur fond crème, peu d'effets.
## Component Stylings
Fiche produit : nom en Fraunces, prix en Inter gras, bouton
« Ajouter au panier » en terracotta pleine largeur sur mobile.
## Do's and Don'ts
- Le terracotta signale l'achat : jamais de terracotta décoratif.
- Pas de dégradé, pas d'ombre portée marquée.
- Badge « Nouveau » en vert olive, badge « Promo » en rouge promo.Avec ce fichier, une consigne aussi courte que « crée la landing de la collection Noël » produit une page qui respecte la palette, la hiérarchie et, surtout, la logique commerciale de la marque.
Un site vitrine se refait tous les trois ans. Une boutique en ligne, elle, produit du nouveau en continu : collections saisonnières, landings de campagne, pages de soldes, bannières, emails, tests A/B. C’est exactement le terrain où l’IA accélère le plus, et où la dérive visuelle coûte le plus cher.
La confiance est le premier moteur de conversion. Une page promo qui « sort » de la charte crée un micro-doute chez l’acheteur. DESIGN.md verrouille la cohérence sur chaque nouvelle page, quel que soit l’outil ou la personne qui la génère.
Le rouge réservé aux prix barrés, la place du bouton d’achat, la taille minimale des mentions de livraison : ces règles vivent souvent dans la tête d’un designer senior. DESIGN.md les rend explicites, transmissibles et applicables par un agent.
L’outil officiel (npx @google/design.md lint) vérifie la structure du fichier, détecte les références de tokens cassées et contrôle les contrastes WCAG AA, le niveau d’accessibilité de référence pour la lisibilité des textes. Un bouton illisible est un bouton qui ne convertit pas.
La même ligne de commande permet de comparer deux versions du fichier pour repérer les régressions, et d’exporter les tokens vers Tailwind ou le format JSON du W3C. Pour une boutique headless, un front sur mesure branché à Shopify, c’est un pont direct entre la charte et le code.
La boutique est le cas le plus visible. Elle est loin d’être le seul. Dès qu’un agent IA dessine un écran, DESIGN.md a son mot à dire.
Le point commun : l’interface. Aujourd’hui, le format vise avant tout le web, les applications et les écrans. Pour les visuels réseaux sociaux ou le print, son usage reste encore marginal.
La vraie question dépasse donc le e-commerce : comment une marque reste reconnaissable quand une partie de sa production passe par l’IA ? La boutique pose la question en premier, parce qu’elle produit le plus. Toutes les autres interfaces suivent.
On pourrait croire que l’IA pousse le designer vers la sortie. DESIGN.md dit exactement l’inverse : il le place au centre du dispositif. Le fichier est court, mais chaque ligne engage la marque. Quelqu’un doit en répondre. Ce quelqu’un, c’est le designer.
Un linter vérifie une syntaxe et des contrastes. Il ignore pourquoi une marque respire, pourquoi tel vert évoque le terroir, pourquoi le bouton d’achat mérite toute la largeur de l’écran sur mobile. Cette traduction d’une intention en règles précises relève du regard du designer. Écrire un bon DESIGN.md, c’est un exercice de synthèse : dire l’essentiel en dix règles claires plutôt qu’en cinquante nuances.
Le designer tranche entre ce qui est non négociable, la couleur réservée à l’achat, la hiérarchie de la fiche produit, et ce qui reste ouvert à l’agent, la composition d’une landing saisonnière, le rythme d’une bannière. Cette frontière conditionne tout : trop de liberté, et la marque se dilue ; trop de contraintes, et les pages deviennent rigides.
Chaque page générée passe sous ses yeux avant la mise en ligne. Quand l’agent se trompe, le designer remonte à la source : la règle manquait-elle, ou était-elle floue ? La correction se fait alors dans le fichier, une fois pour toutes, plutôt que page après page.
Une nouvelle collection, un repositionnement, une typo remplacée : le fichier évolue avec la marque. Le designer valide chaque modification, comme un responsable technique valide une mise à jour de code. L’outil de comparaison de versions (diff) lui sert de filet : il repère immédiatement un token modifié ou une régression de contraste.
En clair : le designer passe du rôle d’exécutant de chaque page au rôle d’architecte du système qui produit toutes les pages. Son goût devient transmissible, et donc démultiplié.
Soyons honnêtes : l’idée n’a rien de neuf. Décrire des couleurs, des typos, des marges et des règles d’usage, les graphistes le font depuis des décennies. Ça s’appelle une charte graphique. Les grandes marques ont ensuite formalisé leurs design systems, puis les design tokens ont transformé ces règles en valeurs réutilisables par le code.
Ce qui change avec DESIGN.md, c’est le lecteur. Et ce lecteur-là change tout.
| La charte graphique | Le DESIGN.md | |
|---|---|---|
| Support | PDF, brand book, souvent très visuel | Texte brut et valeurs chiffrées |
| Lecteur | Un graphiste, un développeur, un prestataire | Un agent IA, et l’équipe qui le pilote |
| Mode de lecture | Interprétée, avec du recul et du goût | Appliquée à la lettre, sans recul |
| Force | Transmet une vision, une émotion, un univers | Transmet des règles exactes, testables, versionnées |
| Faiblesse | Vieillit dans un dossier partagé | Peine à transmettre l’émotion |
Le point clé se cache dans la troisième ligne. Une charte écrit « utiliser le bleu avec parcimonie » : un graphiste comprend immédiatement. Un agent, lui, a besoin d’une règle : « le bleu uniquement sur les liens et les boutons secondaires ». Chaque ambiguïté tolérée par un humain devient une erreur chez la machine. Écrire un DESIGN.md, c’est donc traquer le flou, ligne après ligne.
Un fichier texte décrit très bien une valeur. Il décrit beaucoup moins bien une sensation.
Un DESIGN.md seul, c’est une partition sans orchestre. Pour qu’un agent produise vraiment une page de marque, il lui faut un écosystème complet.
Verdict : DESIGN.md n’a rien de miraculeux. C’est un excellent outil de traduction, qui vaut exactement ce que vaut la marque qu’il traduit, et le soin de celui qui l’écrit. Une charte forte donne un DESIGN.md puissant. Une charte floue donne un fichier flou, appliqué avec une rigueur de machine.
Chez Nativbiz, on voit DESIGN.md comme la suite logique de la charte graphique : la même exigence, traduite pour une nouvelle catégorie de collaborateurs, les agents IA. Et on le livre avec tout ce qui l’entoure : assets, composants, règles de ton et exemples de référence.
Chaque DESIGN.md que nous livrons a un garant identifié : un designer de l’équipe, qui en connaît chaque règle et en répond.
Concrètement, nous accompagnons les marques en quatre étapes, en partant de la boutique pour couvrir toutes leurs interfaces.
Le résultat : des pages et des écrans produits plus vite, une identité qui tient sur la durée et sur tous les supports, et des équipes qui passent leur temps à créer plutôt qu’à corriger. Nous l’avons fait pour l’écosystème e-commerce du Parfait, de la boutique à l’application mobile.
Votre marque a une personnalité. Il est temps que vos outils IA la connaissent aussi. Parlons de votre DESIGN.md.
Non, il la traduit. La charte porte la vision, l’univers visuel et l’émotion ; le DESIGN.md en extrait des règles précises, lisibles par un agent. L’un sans l’autre fonctionne mal.
Non. Figma reste l’outil de conception. DESIGN.md en est la traduction textuelle, destinée aux agents qui génèrent du code ou des maquettes.
Non. Il s’applique à toute interface générée par un agent IA : site de marque, application mobile, SaaS, outils internes, emails. Le e-commerce en tire un bénéfice immédiat parce qu’il produit des pages en continu.
Le designer. Il en écrit les règles, arbitre ce qui est figé ou libre, relit les pages générées et valide chaque évolution du fichier.
La partie prose s’écrit comme un brief de marque. La partie tokens demande de la rigueur, valeurs exactes et noms cohérents. Le linter aide à valider le tout.
Le fichier décrit la marque, indépendamment de la technologie. Il guide les agents qui éditent vos sections et templates, et ses tokens peuvent alimenter les réglages de thème ou une configuration Tailwind en headless.
C’est une spécification ouverte publiée par Google Labs, en version alpha et ouverte aux contributions. Son adoption progresse, mais elle n’est pas encore universelle.
