Comprendre les systèmes de design pour agents de code

Un agent IA sans design system en invente un à chaque prompt, et il invente le même que tout le monde. Voici quoi lui donner à la place, ce que ce fichier doit contenir pour être réellement efficace, et comment l'installer dans chaque outil majeur.

2026-07-27

Les design systems intégrés de Bolt nécessitent un forfait Team payant pour ajouter le vôtre. Voici les sources utilisées pour compiler cette fonctionnalité, ainsi que la configuration compatible avec tous les forfaits via le terminal intégré de Bolt.

2026-07-27

Le conseil habituel est d'écrire une règle design.mdc et le tour est joué. Cela fonctionne pendant environ trois semaines. Voici pourquoi un design system ne tient pas dans un seul fichier de règles, comment le segmenter selon le moment où chaque règle doit s'appliquer, et quoi mettre dans chaque partie.

2026-07-27

Un serveur MCP permet à un agent d'interroger votre design system au lieu de le deviner. Cela règle les problèmes de noms de props erronés et d'imports obsolètes. En revanche, cela ne règle pas le problème d'un agent qui n'a aucune idée de l'apparence que devrait avoir votre produit ; ce sont deux problèmes distincts qui nécessitent des solutions différentes.

2026-07-27

La plupart des comparatifs listent vingt outils aux fonctions différentes comme s'ils étaient concurrents. Ici, ils sont regroupés par problème résolu, avec une conclusion essentielle : aucun d'entre eux ne produit de design system, et tous partent du principe que vous en avez déjà un.

2026-07-27

La plupart des listes de prompts Lovable se contentent de phrases uniques. Le design ne survit pas aux phrases uniques. Voici l'anatomie d'un prompt de design pérenne, avec des exemples prêts à être copiés.

2026-08-03

Une skill est un dossier contenant un fichier SKILL.md que Claude Code ne charge que lorsque votre tâche correspond à sa description. Cette seule phrase explique pourquoi la plupart des skills installées ne servent jamais. Voici le mécanisme, le format de fichier et l'exemple concret d'une skill de design.

2026-08-04

Copilot lit des fichiers d'instructions que personne ne remplit avec des décisions de design, c'est pourquoi ses sorties UI sont génériques par défaut. Voici la configuration : copilot-instructions.md, des fichiers .instructions.md ciblés, de vrais tokens et un fichier DESIGN.md vers lequel ils pointent.

2026-08-04

Codex détecte les dossiers SKILL.md dans cinq emplacements, les charge via la correspondance de la description ou un $ explicite, et partage ce format avec Claude Code et Cursor. Voici l'anatomie, l'ordre de découverte et un exemple de skill de design adaptable.

2026-08-04

Gemini CLI concatène chaque fichier GEMINI.md de sa hiérarchie dans chaque prompt, ce qui rend l'intégration d'un design system exceptionnellement simple : une seule ligne d'import et le contrat est chargé à chaque requête. Voici la configuration et le fichier importé.

2026-08-04

Deux commandes suffisent pour installer le plugin frontend-design d'Anthropic, et celui-ci permet de rendre un écran esthétique. En revanche, il est incapable de rendre le vingtième écran cohérent avec le premier, car il apporte du goût, pas des valeurs. Voici comment l'installer, où se situe la lacune et comment la combler.

2026-08-04

Un kit de design est un point de départ. Ce qui fait la différence, c'est d'imposer les tokens dans chaque composant, de construire sur des primitives solides, de trouver la direction visuelle avec la génération d'images et de générer des variations au lieu d'accepter le premier résultat.

2026-08-10

Un fichier DESIGN.md décrit une identité visuelle sous une forme lisible par un agent de code. Nous avons analysé 299 fichiers publics : voici le format, section par section, ainsi que les quatre éléments que presque tous omettent.

2026-07-27

Une documentation de design system écrite pour des humains échoue lorsqu'un modèle la lit, et ce, de manière spécifique et mesurable. Voici ce que nous avons découvert dans 299 fichiers réels, et les sept changements qui rendent les directives exécutables plutôt que descriptives.

2026-07-27

Quatre fichiers, quatre rôles, un ordre de priorité. Ce qu'il faut mettre dans chacun d'eux, quels outils les lisent, et pourquoi le fichier de design est celui que personne n'écrit.

2026-08-04

Six modifications au niveau des tokens, chacune avec un avant et un après. Les ajustements de prompt ne modifient qu'un seul écran ; ceux-ci impactent chaque écran que l'agent construira désormais.

2026-07-27

Le drift est mesurable, ce n'est pas une question de « vibe ». Comment le quantifier sur une session, pourquoi il apparaît vers le cinquième écran, et le changement unique qui empêche son accumulation.

2026-07-27

La plupart des guides se concentrent sur les outils. Ce qui distingue les designers qui livrent leurs projets de ceux qui doivent tout recommencer, c'est ce qu'ils mettent en place avant le premier prompt, et leur manière de passer en revue un diff sans savoir lire le code.

2026-07-27

La plupart des checklists de cohérence demandent si votre interface semble cohérente, une question à laquelle personne ne peut répondre. Celle-ci est une liste de vérifications avec des commandes et des conditions de validation, classées selon la quantité de dérives détectées par minute passée.

2026-07-27

Quatre paramètres par défaut créent cette uniformité : une palette neutre, une police sans-serif, un rayon de bordure et une grille de cartes. Voici d'où ils proviennent et comment les modifier.

2026-08-03

Qu'est-ce qu'un registre shadcn, comment registry.json et registry-item.json s'articulent, et le cas que la documentation aborde à peine : livrer un thème complet (tokens, polices, rayons, modes clair et sombre) comme un seul élément installable.

2026-07-27

Des réponses précises aux questions que les galeries de palettes ignorent : faut-il utiliser le noir pur, comment traduire l'élévation sans ombres, pourquoi les couleurs d'accentuation doivent évoluer, et quels rôles une palette sombre requiert au-delà de cinq échantillons.

2026-07-27

Une palette de dashboard a trois fonctions qu'une palette marketing n'a jamais : distinguer des séries de données, proposer des couleurs de statut qui ne parasitent pas votre marque, et définir des gris capables de supporter un tableau dense. Voici comment concevoir une palette qui remplit ces trois objectifs.

2026-07-27

Pourquoi les produits SaaS convergent vers le même accent bleu-violet, ce qu'une palette doit réellement supporter dans une UI de produit, et comment en choisir une distinctive qui reste efficace sur un tableau de paramètres à 16h.

2026-07-27

Chaque guide typographique par secteur vous donne la même réponse avec des étiquettes différentes : une sans serif géométrique pour la tech, une serif pour le droit, une script pour la beauté. Voici des associations qui fonctionnent réellement par secteur, ainsi que la raison pour laquelle le cadrage par catégorie produit systématiquement des marques qui se ressemblent toutes.

2026-07-27

Carbon d'IBM est le design system d'entreprise sous licence ouverte le plus vaste. En 2026, il réalise une prouesse dont aucun article ne parle : il s'expose aux agents d'IA via le Model Context Protocol. Voici un guide pratique sur la nature de Carbon, son architecture en couches et l'impact du serveur MCP.

2026-07-27

Polaris React est désormais marqué comme déprécié et les Polaris Web Components sont désormais la norme pour les applications Shopify : ils sont chargés via une balise script CDN, et non comme une dépendance npm. Voici ce qui a concrètement changé, pourquoi, et ce que cela implique pour quiconque maintient un design system.

2026-07-27

La plupart des compilations de design systems ne sont que des listes de liens. Ce texte analyse neuf systèmes réels, organisés selon la décision pertinente qu'ils ont prise (stratification, application, contrats multiplateformes, livraison), ainsi qu'une évolution majeure opérée par trois d'entre eux ces dix-huit derniers mois et qui n'a encore été documentée nulle part.

2026-07-27

Salesforce affirme que SLDS 2 est « le fondement du design system agentique » : un design system d'entreprise vieux d'une décennie, réarchitecturé autour des propriétés CSS personnalisées pour que les interfaces générées respectent l'image de marque. Voici ce qui a réellement changé et ce que cela implique si vous n'utilisez pas Salesforce.

2026-07-27

L'interface de Linear est constamment imitée et souvent mal reproduite. Une analyse approfondie de ce qui est réellement observable (la plage de graisses, le trait fin, l'accent unique) révèle pourquoi la partie que tout le monde copie n'est pas celle qui fait tout le travail.

2026-07-27

Le Design Language System d'Airbnb est le design system multiplateforme le plus cité, et le plus mal interprété. Sa décision fondatrice a été de rejeter d'emblée les atomes et les molécules ; c'est précisément le raisonnement derrière ce choix qui le rend utile aujourd'hui.

2026-07-27

Le design system Encore de Spotify a dû couvrir 45 plateformes et plus de 2 000 types d'appareils. Son équipe reconnaît que le curseur a trop glissé vers la flexibilité et qu'il a fallu rectifier le tir. C'est cette correction, et la structure en couches qui en a découlé, qui constituent l'aspect le plus pertinent.

2026-07-27

Stripe propose un design system qui interdit totalement le CSS personnalisé et un autre conçu presque entièrement pour permettre de le surcharger. Tous deux sont publics, tous deux sont documentés, et la frontière entre les deux est la publication la plus utile de Stripe sur les design systems.

2026-07-27

Transformer le HIG d'Apple, Material ou vos propres règles internes en guides lisibles par un agent : ce qui survit à la transition d'un document de design humain vers une instruction d'agent, ce qui ne survit pas, et pourquoi les directives de plateforme seules produisent encore des UI génériques.

2026-07-27

Toutes les listes de polices pour SaaS recommandent les mêmes graisses. Voici pourquoi, ce qu'une typographie doit réellement supporter dans une interface produit dense (chiffres tabulaires, séparation nette des graisses, lisibilité en petite taille) et quand l'ajout d'une seconde famille se justifie.

2026-07-27

L'atomic design a résolu un problème de 2013 : donner aux humains un vocabulaire commun pour les parties d'une interface. Un agent possède déjà le vocabulaire, mais manque de jugement. Quelles parties de la méthodologie survivent à cela, et lesquelles n'étaient que des échafaudages ?

2026-07-27

Primitive, sémantique, composant. La convention à trois niveaux est quasi universelle, et pourtant, la plupart des équipes finissent avec des tokens que personne n'utilise. Pourquoi cela arrive-t-il, comment nommer chaque niveau, et quel test permet de détecter un mauvais nom avant la mise en production.

2026-07-27

Les modèles de gouvernance ont été conçus sur l'hypothèse qu'une personne demande un changement et qu'une autre le valide. Lorsqu'un agent génère quarante écrans entre deux revues, les processus de contribution cessent d'être le goulot d'étranglement et l'application des règles devient l'essentiel du travail.

2026-07-27

Les outils de design-to-code reproduisent l'apparence d'une frame. Ils ne peuvent pas en reproduire la signification, car une frame Figma ne contient pas cette information. Voici ce qui est réellement transféré, ce qui ne l'est pas, et la décision de nommage qui permet de combler l'essentiel de l'écart.

2026-07-27

Une bibliothèque de composants est du code que l'on peut installer. Un design system est l'ensemble des décisions qui font que ce code a cet aspect. C'est en les confondant que des équipes installent shadcn, livrent un produit générique et ne comprennent pas ce qui a échoué.

2026-07-27

Ce qui s'accorde réellement avec Avenir, rendu en direct plutôt qu'en capture d'écran. Ainsi que les Google Fonts qui prennent le relais lorsque la licence ne suit pas, et des systèmes complets basés sur ces associations.

2026-08-03

Les sans-serif et monos qui s'accordent avec la Caslon, rendus en direct avec des revivals gratuits de la Caslon prêts pour la production. En cas de doute, utilisez la Caslon ; avant de l'associer, lisez ceci.

2026-08-03

Les polices serif et mono qui s'accordent avec Proxima Nova, illustrées en direct avec des polices gratuites de substitution. La police par défaut d'Internet mérite un partenaire qui ne soit pas, lui aussi, un standard.

2026-08-03

Quelles polices s'accordent avec la géométrie arrondie de Gilroy ? Découvrez des exemples en temps réel avec des alternatives gratuites Google Fonts, ainsi que les graisses gratuites sur lesquelles vous pouvez réellement bâtir un produit.

2026-08-03

Huit chartes graphiques publiques qui apportent un réel enseignement, ce qui distingue un document opérationnel d'un simple PDF esthétique, et pourquoi la prochaine génération de guidelines doit être exécutable par des machines, et non plus seulement lue par des designers.

2026-08-04

Un DESIGN.md est le brief de design écrit que votre agent de code suit pour éviter de construire des interfaces génériques. Voici ce qu'il doit contenir et comment générer un DESIGN.md complet et exportable à partir d'un véritable design system.

2026-08-04

Tous deux fournissent un DESIGN.md à un agent de code. getdesign.md publie des analyses de marques existantes ; Identity Forge génère un système original basé sur les tokens sémantiques référencés dans le brief. C'est cette différence structurelle qui détermine l'outil adapté à votre projet.

2026-07-27