Donnez un design system à Claude Code

Claude Code est sans état concernant le design. Chaque prompt repart de zéro, ce qui le pousse à utiliser les mêmes valeurs par défaut : Inter, un arrière-plan slate-950, un accent violet, des cartes génériques. Après quelques écrans, l'ensemble devient incohérent car rien ne fixe l'identité visuelle. Un design system sert de point d'ancrage : un ensemble de tokens sémantiques et un fichier DESIGN.md que l'agent consulte à chaque tâche, garantissant que la page cinq correspond à la page une.

Claude Code est également parfaitement adapté à MCP. Une fois le serveur connecté, l'agent ne reçoit pas seulement des fichiers statiques : il peut parcourir le catalogue, lire le brief complet d'un kit et l'appliquer, le tout depuis votre session sans quitter le terminal.

Voici le kit gratuit atmospheric-botanical rendu à partir de ses tokens réels, exactement le type de système que l'agent écrit dans votre repo lorsqu'il applique un slug de kit (les commandes ici utilisent ambient-sage) :

1. 1

   Écrire la config MCP

   Exécutez ceci à la racine de votre projet. Cela fusionne un serveur identityforge dans .mcp.json (sans écraser les serveurs existants).

   Copy

   npx --yes identityforge@latest install --client claude-code

2. 2

   Approuver le serveur

   Redémarrez pour que le nouveau serveur soit pris en compte, puis confirmez que les outils sont disponibles en tapant /mcp : le panneau liste les serveurs connectés et le nombre d'outils associés.

3. 3

   Se connecter (optionnel pour les kits gratuits)

   Nécessaire uniquement pour vos propres données, un quota d'API plus élevé ou les kits Pro. Utilise un flux PKCE via navigateur.

   Copy

   npx --yes identityforge@latest login

4. 4

   Définir un style et laisser l'agent l'appliquer

   Précisez 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 écrit le DESIGN.md ainsi que les tokens avec apply_theme.

   Copy

   Use Identity Forge to pick a calm, trustworthy theme for a
   fintech dashboard, apply it, and follow the DESIGN.md.

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

Claude Code peut exécuter des commandes shell, le serveur MCP n'est donc pas strictement indispensable. L'une ou l'autre de ces méthodes lui fournira les mêmes tokens et le même DESIGN.md :

1. 1

   Application via CLI

   Écrit le fichier DESIGN.md ainsi qu'un fichier de tokens dans le répertoire courant. Demandez à Claude de lire DESIGN.md et d'intégrer les tokens dans votre couche de style.

   Copy

   identityforge apply ambient-sage

2. 2

   Registre shadcn

   Si vous utilisez shadcn/ui, cela installe les variables CSS du kit directement dans le thème de votre projet.

   Copy

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

Une fois le serveur connecté, demandez : Use Identity Forge to theme this app for a wellness product, calm and minimal. Claude peut appeler search_themes({ description: "wellness product, calm and minimal" }), choisir ambient-sage, lire son DESIGN.md et exécuter apply_theme. Il refactorise ensuite les composants pour utiliser des tokens sémantiques tels que bg-background, text-foreground et bg-primary, tout en respectant les règles du kit pour les cartes, les ombres et la typographie. Les écrans suivants hériteront des mêmes fichiers et règles.

Étape suivante : faites de même dans Cursor, découvrez ce qu'est un DESIGN.md ou parcourez les kits par style visuel pour trouver un slug adapté à votre produit.

• Model Context Protocol - Claude Code Docs : les serveurs MCP liés au projet se trouvent dans .mcp.json à la racine du projet, et Claude Code demande une approbation avant de les utiliser ; le panneau /mcp liste les serveurs connectés et le nombre d'outils.

• Model Context Protocol - Claude Code Docs: Les serveurs MCP liés au projet se trouvent dans .mcp.json à la racine du projet, et Claude Code demande une approbation avant de les utiliser ; le panneau /mcp liste les serveurs connectés et le nombre d'outils.