Donnez un design system à Cursor

L'Agent de Cursor génère des fonctionnalités complètes rapidement, mais chaque génération peut entraîner de nouvelles décisions de style. Sans système fixe, l'espacement, les couleurs et la forme des composants divergent d'un fichier à l'autre. Un design system fournit à l'Agent un ensemble de tokens sémantiques et un fichier DESIGN.md, afin que les composants suivants respectent les mêmes règles que le premier.

Cursor supporte MCP nativement. L'Agent peut utiliser des outils pour rechercher, récupérer et appliquer un kit pendant qu'il travaille, en plus de lire les fichiers installés par le kit.

Voici le kit gratuit teal-rose-institute-grid rendu à partir de ses tokens réels. Les commandes de ce guide utilisent ambient-sage ; les deux sont gratuits et s'installent de la même manière :

1. 1

   Écrire la config MCP

   Exécutez ceci à la racine de votre projet pour fusionner le serveur dans .cursor/mcp.json.

   Copy

   npx --yes identityforge@latest install --client cursor

2. 2

   Activer le serveur dans Cursor

   Ouvrez Customize dans la barre latérale, trouvez le serveur identityforge et activez-le. Redémarrez Cursor si les outils n'apparaissent pas.

3. 3

   Se connecter (optionnel pour les kits gratuits)

   Copy

   npx --yes identityforge@latest login

4. 4

   Demander à l'Agent de thématiser votre application

   Indiquez le produit, l'audience et l'ambiance ; l'Agent établit une présélection avec search_themes, lit le brief avec get_design_md et applique le tout avec apply_theme.

   Copy

   Use Identity Forge to pick a minimal, warm theme for a
   wellness app, apply it, and follow the DESIGN.md.

{
  "mcpServers": {
    "identityforge": {
      "command": "npx",
      "args": ["-y", "identityforge@latest", "mcp"]
    }
  }
}

Pour que l'Agent reste cohérent même en dehors d'une phase d'application de kit, ajoutez une règle de projet dans .cursor/rules/ lui indiquant de styliser uniquement via les tokens sémantiques et de suivre le fichier DESIGN.md. Cela complète parfaitement le kit : les tokens définissent les valeurs, la règle impose que le code généré les utilise systématiquement.

---
description: Keep generated UI on the design system
alwaysApply: true
---

Always style against the semantic design tokens defined in the
project (bg-background, text-foreground, bg-primary, bg-muted,
border-border, …) and follow the rules and motifs in DESIGN.md.
Never hardcode raw hex colors or introduce new fonts.

1. 1

   Application via CLI

   Écrit le fichier DESIGN.md et un fichier de tokens dans le répertoire courant ; demandez ensuite à Cursor de les intégrer.

   Copy

   identityforge apply ambient-sage

2. 2

   Registre shadcn

   Installe les variables CSS du kit directement si vous utilisez shadcn/ui.

   Copy

   npx shadcn add https://identityforge.io/r/ambient-sage.json

Consultez la même configuration pour Claude Code et Windsurf, ou commencez par le guide fondamental.

• Model Context Protocol - Cursor Docs : Cursor lit les serveurs MCP du projet depuis .cursor/mcp.json et permet de les activer/désactiver via l'onglet Customize dans la barre latérale.
• Rules - Cursor Docs : Les règles du projet se trouvent dans .cursor/rules sous forme de fichiers .mdc avec frontmatter ; un fichier markdown simple à cet emplacement est ignoré par le système de règles.

• Model Context Protocol - Cursor Docs: Cursor lit les serveurs MCP du projet depuis .cursor/mcp.json et permet de les activer/désactiver via l'onglet Customize dans la barre latérale.
• Rules - Cursor Docs: Les règles du projet se trouvent dans .cursor/rules sous forme de fichiers .mdc avec frontmatter ; un fichier markdown simple à cet emplacement est ignoré par le système de règles.