Qu'est-ce que DESIGN.md ? Le fichier de design que lisent les agents de codage IA (avec exemples d'applications mobiles gratuits)

DESIGN.md est un fichier Markdown qui décrit l'identité visuelle d'un produit destinée aux agents de codage IA. Le format de Google Labs associe des tokens de design YAML optionnels à des directives écrites expliquant comment les utiliser. Il fournit à l'agent des règles concrètes de couleurs, de typographie, d'espacement et de composants à lire avant de générer une interface.

Pour les développeurs d'applications mobiles, tout l'intérêt réside dans la possibilité d'appliquer ces choix d'un écran à l'autre. Commencez par choisir un fichier dans notre bibliothèque gratuite de DESIGN.md mobiles, inspectez les écrans associés et adaptez les règles à votre application.

Qui a créé DESIGN.md ?

Google Labs publie le format DESIGN.md utilisé par Stitch. Google a introduit l'importation et l'exportation de DESIGN.md lors de son annonce de Stitch en mars 2026, puis a publié le projet de spécification en open source en avril. Le dépôt officiel qualifie toujours le format d'alpha, pensez donc à vérifier la spécification actuelle lors du développement d'une intégration.

Un fichier nommé DESIGN.md peut aussi être un document de projet ordinaire. Lorsque vous en partagez un, précisez le format utilisé et gardez le texte brut accessible pour vérification.

Que contient un fichier DESIGN.md ?

La spécification de Google Labs décrit un corps Markdown accompagné d'un frontmatter YAML optionnel. Les groupes de tokens couvrent les couleurs, la typographie, les coins arrondis, les espacements et les composants. Le corps du texte explique des décisions telles que l'emplacement d'une couleur d'accent ou la différence entre les boutons et les cartes. Les valeurs exactes et les directives écrites remplissent des fonctions distinctes.

La spécification accepte les chaînes de couleurs CSS, y compris les valeurs hexadécimales. Mettez les couleurs hexadécimales entre guillemets dans le YAML : un croisillon sans guillemets démarre un commentaire. Une référence comme {colors.primary} pointe vers un autre token du fichier. La bibliothèque de Sleek affiche des échantillons hexadécimaux à côté du texte d'origine afin de vous permettre de vérifier la palette avant de la télécharger.

À quoi ressemble un exemple minimal de DESIGN.md ?

Un fichier DESIGN.md de départ peut décrire un petit système visuel : une palette, un style de texte principal, une valeur d'espacement et un bouton. L'exemple ci-dessous a été rédigé pour ce guide. Enregistrez-le sous le nom DESIGN.md, puis ajoutez des règles au fur et à mesure des besoins de votre application mobile. Il s'agit d'un point de départ, non d'une bibliothèque de composants terminée.

---
version: alpha
name: Quiet Blue Mobile
colors:
  primary: "#2459C4"
  on-primary: "#FFFFFF"
  surface: "#FAF8F3"
  on-surface: "#20242B"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  md: 12px
spacing:
  md: 16px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
---
## Overview
A quiet mobile interface with cream surfaces and blue actions.

## Colors
Use primary for actions. Keep reading surfaces cream.

## Typography
Use body-md for reading text. Keep labels short.

## Layout
Use spacing.md for screen gutters and related content groups.

## Shapes
Use rounded.md on cards and buttons.

## Components
Primary buttons use button-primary. Keep one main action per view.

## Do's and Don'ts
Keep text readable at larger system font sizes.
Do not use color as the only signal for an error.

Vérifiez vos propres ajouts à l'aide de la commande de linter du dépôt. Ses résultats peuvent vous aider à repérer les références cassées et les problèmes de contraste entre paires de couleurs. Inspectez tout de même l'écran rendu : un fichier texte ne peut pas vous montrer une étiquette tronquée, un élément de contrôle confus ou un clavier qui masque un formulaire.

npx @google/design.md lint DESIGN.md

Comment utiliser DESIGN.md avec Claude Code ?

Gardez DESIGN.md dans votre projet et demandez à Claude Code de le lire pour les tâches d'interface. La documentation sur la mémoire d'Anthropic explique que les importations de CLAUDE.md sont chargées au démarrage de la session. Utilisez une simple référence au chemin pour une lecture à la demande, ou une règle dans .claude/rules/ avec des motifs paths correspondant à vos fichiers d'interface.

Par exemple, ajoutez cette instruction à CLAUDE.md sans importation @ :

For UI tasks, read DESIGN.md before creating or changing app screens.

Demandez ensuite un écran spécifique et ses différents états. Par exemple, demandez une liste de tâches avec un état vide et un état d'échec de synchronisation. Vérifiez si l'interface utilisateur générée respecte les valeurs du fichier, puis mettez à jour le fichier lorsque vous modifiez délibérément le design. Notre guide pour concevoir des interfaces avec Claude détaille l'ensemble de ce processus.

Comment utiliser DESIGN.md avec Cursor ou Stitch ?

Dans Cursor, joignez explicitement DESIGN.md à la tâche ou référencez-le depuis une règle de projet. Dans Stitch, utilisez son flux de travail d'importation et d'exportation DESIGN.md pour transférer les règles de design d'un projet à l'autre. La nuance a son importance : un agent de codage a besoin du fichier dans son contexte, tandis que Stitch propose un flux de travail articulé autour de ce format.

Pour Cursor, la documentation des règles explique les règles de projet et les références de fichiers. Une règle peut ordonner à l'agent de lire DESIGN.md lors de modifications de l'interface utilisateur. Choisissez judicieusement quand la règle s'applique afin que des tâches backend non liées ne s'encombrent pas d'un volumineux document de design.

Pour Stitch, l'annonce relative à DESIGN.md publiée par Google confirme que vous pouvez importer et exporter des règles de design entre plusieurs projets. Après l'importation, comparez un écran généré à la source et ajustez les règles si nécessaire.

Comment Sleek utilise-t-il DESIGN.md pour les styles d'applications mobiles ?

Sleek associe un fichier de design à chaque référence mise en avant pouvant être réutilisée. Lorsque vous choisissez Utiliser ce style et que vous décrivez votre application, Sleek transmet ce fichier accompagné de votre brief au moteur de génération. Le fichier décrit l'esthétique ; votre brief détermine l'objectif et le contenu de l'application. Vous pouvez commencer par inspecter aussi bien les écrans que le fichier.

La galerie de références et la bibliothèque de fichiers DESIGN.md s'appuient sur les mêmes projets mis en avant. Sleek utilise la structure de Google Labs et ajoute des propriétés de composants telles que les bordures et les ombres, que l'outil de lint signale par des avertissements. Il ajoute aussi des directives pour l'iconographie, les illustrations, la hiérarchie visuelle et certains détails caractéristiques. Le fichier de style consigne les choix visuels pour générer une nouvelle application.

Ouvrez un style dans la bibliothèque pour copier ou télécharger son fichier DESIGN.md, ou choisissez Use this style in Sleek pour saisir votre idée d'application. Si vous souhaitez piloter Sleek directement depuis votre environnement de codage, le guide de configuration de l'agent vous explique cette intégration distincte.

Questions fréquentes sur DESIGN.md