Demandez à n'importe quel agent de codage de "créer une landing page" et vous obtiendrez la même chose : un hero Tailwind gray-950, un dégradé violet, la police Inter et trois cartes de fonctionnalités. C'est compétent mais totalement générique, car le modèle n'a aucune mémoire de votre marque entre les prompts. Ajoutez une deuxième page et le style dérive : espacements différents, un bleu légèrement distinct, une nouvelle forme de bouton. Il n'y a pas de source de vérité pour l'aspect visuel, donc il n'y a pas de cohérence.

Un système de design règle ce problème. Lorsque l'agent dispose d'un ensemble unique de tokens sémantiques, d'un duo de polices fixe et de règles écrites à suivre, chaque écran qu'il génère fait référence aux mêmes variables au lieu de réinventer le style. C'est la différence entre une démo et un produit.

Un kit est un système complet, pas seulement une palette. Voici un aperçu en direct du kit gratuit ambient-sage : les mêmes tokens, polices et traitements qu'un agent reçoit lorsqu'il l'applique. Tout ce qui figure sur cette page pourrait être repeint en changeant simplement de kit.

La mécanique diffère selon l'outil : les agents de codage exécutent un serveur MCP local, tandis que les constructeurs web utilisent le registre shadcn ou le fichier DESIGN.md exporté. Choisissez votre outil :

• Donnez un système de design à Claude Code : MCP via .mcp.json, ou identityforge apply.
• Donnez un système de design à Cursor : MCP via .cursor/mcp.json.
• Donnez un système de design à Windsurf : configuration MCP manuelle pour Cascade, plus la méthode CLI.
• Donnez un système de design à v0 : le registre shadcn + DESIGN.md comme brief.
• Donnez un système de design à Lovable : connaissances du projet + shadcn add dans le dépôt.
• Donnez un système de design à Bolt : lancez shadcn add directement dans le terminal de Bolt.

Quelle que soit votre méthode d'installation, la charge utile contient les trois mêmes éléments :

1. Un DESIGN.md : le brief écrit comprenant l'intention du design, le système typographique, les règles d'espacement et de mise en page, le traitement des composants, les motifs distinctifs et les choses à faire ou ne pas faire. C'est ce qui empêche l'agent de revenir par défaut à un style générique. Ce qu'est un DESIGN.md et comment en générer un.
2. Des tokens de couleurs sémantiques : 28 rôles (background, foreground, primary, muted, card, border, chart-1 à 5, et plus encore) pour les modes clair et sombre. L'agent applique le style en utilisant les noms de rôles plutôt que des codes hexadécimaux bruts, ce qui garantit la cohérence des thèmes. Explication des tokens de couleurs sémantiques.
3. Des exports de frameworks : le même système sous forme de variables CSS, @theme Tailwind v3/v4, un élément de registre shadcn, ou JSON DTCG/W3C. L'agent connecte celui qui correspond à votre stack.

Parcourez les kits par style visuel pour voir des systèmes complets en contexte : typographie, couleur, surfaces et règles de construction. Chaque kit possède un slug stable ; une fois que vous le connaissez, l'agent peut s'en passer de recherche et l'appliquer directement. Si vous avez déjà des couleurs de marque, l'outil MCP match_palette trouve les kits qui s'en rapprochent le plus perceptivement.