Claude Code est sans état concernant le design. Chaque prompt repart de zéro, il utilise donc les mêmes valeurs par défaut sécurisées : Inter, un arrière-plan slate-950, un accent violet, des cartes génériques. Construisez quelques écrans et ils finiront par diverger car rien ne fixe l'aspect visuel. Un système de design est ce point d'ancrage : un ensemble de tokens sémantiques et un fichier DESIGN.md écrit que l'agent consulte pour chaque tâche, afin que la page cinq corresponde à la page une.

Claude Code est également parfaitement adapté au protocole 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 que vous ayez à quitter le terminal.

Voici le kit gratuit ambient-sage rendu à partir de ses vrais tokens : le système exact que l'agent écrit dans votre dépôt lorsqu'il applique ce slug :

1. 1

   Écrivez la config MCP

   Exécutez ceci à la racine de votre projet. Cela fusionne un serveur identityforge dans .mcp.json (cela n'écrasera pas les serveurs existants).

   Copy

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

2. 2

   Redémarrez Claude Code

   Redémarrez pour qu'il prenne en compte le nouveau serveur, puis confirmez que les outils sont disponibles en demandant à Claude /mcp ou en listant ses outils Identity Forge.

3. 3

   Connectez-vous (optionnel pour les kits gratuits)

   Uniquement nécessaire pour vos propres données, un quota API plus élevé ou les kits Pro. Utilise un flux PKCE via le navigateur.

   Copy

   npx --yes identityforge@latest login

4. 4

   Demandez un style et laissez l'agent l'appliquer

   Donnez-lui le produit, l'audience et l'ambiance. Il sélectionne avec search_themes, lit le brief avec get_design_md et écrit DESIGN.md + 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, vous n'avez donc pas strictement besoin du serveur MCP. L'une ou l'autre de ces méthodes lui donnera les mêmes tokens et le même DESIGN.md :

1. 1

   Application via CLI

   Écrit DESIGN.md ainsi qu'un fichier de tokens dans le répertoire actuel. Dites à 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

Avec le serveur connecté, demandez : Utilise Identity Forge pour thématiser cette application pour un produit de bien-être, calme et 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éritent des mêmes fichiers et règles.

Ensuite : faites la même chose dans Cursor, lisez ce qu'est un DESIGN.md, ou parcourez les kits par style visuel pour trouver un slug qui correspond à votre produit.