Claude Code no tiene estado respecto al diseño. Cada prompt comienza desde cero, por lo que recurre a los mismos valores predeterminados seguros: Inter, un fondo slate-950, un acento violeta y tarjetas genéricas. Construyes algunas pantallas y empiezan a diferenciarse porque nada fija la apariencia. Un sistema de diseño es ese ancla: un conjunto de tokens semánticos y un archivo DESIGN.md escrito que el agente consulta en cada tarea, para que la página cinco coincida con la página uno.

Claude Code también encaja perfectamente con MCP. Una vez conectado el servidor, el agente no solo recibe archivos estáticos: puede navegar por el catálogo, leer el informe completo de un kit y aplicarlo, todo desde dentro de tu sesión sin que tengas que salir de la terminal.

Aquí tienes el kit gratuito ambient-sage renderizado con sus tokens reales: el sistema exacto que el agente escribe en tu repositorio cuando aplica este slug:

1. 1

   Escribe la configuración de MCP

   Ejecuta esto en la raíz de tu proyecto. Fusionará un servidor identityforge en .mcp.json (no sobrescribirá los servidores existentes).

   Copy

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

2. 2

   Reinicia Claude Code

   Reinicia para que detecte el nuevo servidor y luego confirma que las herramientas estén disponibles pidiéndole a Claude /mcp o listando sus herramientas de Identity Forge.

3. 3

   Inicia sesión (opcional para kits gratuitos)

   Solo es necesario para datos propios, una cuota de API más alta o kits Pro. Utiliza un flujo PKCE a través del navegador.

   Copy

   npx --yes identityforge@latest login

4. 4

   Pide un estilo y deja que el agente lo aplique

   Dale el producto, la audiencia y el estado de ánimo. El agente hará una selección con search_themes, leerá el informe con get_design_md y escribirá DESIGN.md + tokens con 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 puede ejecutar comandos de shell, por lo que estrictamente no necesitas el servidor MCP. Cualquiera de estas opciones le proporciona los mismos tokens y el archivo DESIGN.md:

1. 1

   Aplicación vía CLI

   Escribe DESIGN.md más un archivo de tokens en el directorio actual. Dile a Claude que lea DESIGN.md y conecte los tokens con tu capa de estilos.

   Copy

   identityforge apply ambient-sage

2. 2

   Registro de shadcn

   Si usas shadcn/ui, esto instala las variables CSS del kit directamente en el tema de tu proyecto.

   Copy

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

Con el servidor conectado, pregunta: Usa Identity Forge para tematizar esta aplicación para un producto de bienestar, tranquilo y minimalista. Claude puede llamar a search_themes({ description: "wellness product, calm and minimal" }), elegir ambient-sage, leer su DESIGN.md y ejecutar apply_theme. Luego refactoriza los componentes para usar tokens semánticos como bg-background, text-foreground y bg-primary, mientras sigue las reglas del kit para tarjetas, sombras y tipografía. Las pantallas posteriores heredarán los mismos archivos y reglas.

Siguiente paso: haz lo mismo en Cursor, lee qué es un DESIGN.md o explora kits por estilo visual para encontrar un slug que encaje con tu producto.