Asigne un sistema de diseño a Claude Code

Claude Code no mantiene el estado del diseño. Cada prompt comienza de cero, por lo que recurre a los mismos valores predeterminados seguros: Inter, un fondo slate-950, un acento violeta y tarjetas genéricas. Tras construir algunas pantallas, estas empiezan a divergir porque nada fija la apariencia. Un sistema de diseño es ese ancla: un conjunto de design tokens semánticos y un DESIGN.md escrito que el agente consulta en cada tarea, asegurando que la página cinco coincida con la primera.

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

Aquí tiene el kit gratuito atmospheric-botanical renderizado a partir de sus tokens reales, el mismo tipo de sistema que el agente escribe en su repositorio al aplicar cualquier slug de kit (los comandos aquí utilizan ambient-sage):

1. 1

   Escribir la configuración de MCP

   Ejecute esto en la raíz de su proyecto. Integra un servidor identityforge en .mcp.json (no sobrescribirá los servidores existentes).

   Copy

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

2. 2

   Aprobar el servidor

   Reinicie para que reconozca el nuevo servidor y confirme que las herramientas están disponibles escribiendo /mcp: el panel mostrará los servidores conectados y el número de herramientas disponibles.

3. 3

   Iniciar 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 de navegador.

   Copy

   npx --yes identityforge@latest login

4. 4

   Solicite una apariencia y deje que el agente la aplique

   Indique el producto, la audiencia y el estado de ánimo. El agente preseleccionará opciones con search_themes, leerá el brief con get_design_md y escribirá el DESIGN.md y los 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 no necesita estrictamente el servidor MCP. Cualquiera de estas opciones le proporcionará los mismos tokens y el mismo DESIGN.md:

1. 1

   Aplicación vía CLI

   Escribe el DESIGN.md y un archivo de tokens en el directorio actual. Indique a Claude que lea el DESIGN.md y vincule los tokens a su capa de estilos.

   Copy

   identityforge apply ambient-sage

2. 2

   Registro de shadcn

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

   Copy

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

Con el servidor conectado, solicite: Use Identity Forge to theme this app for a wellness product, calm and minimal. Claude puede llamar a search_themes({ description: "wellness product, calm and minimal" }), elegir ambient-sage, leer su DESIGN.md y ejecutar apply_theme. A continuación, refactorizará los componentes para usar design tokens semánticos como bg-background, text-foreground y bg-primary, siguiendo las reglas del kit para tarjetas, sombras y tipografía de visualización. Las pantallas posteriores heredarán los mismos archivos y reglas.

Siguiente: haga lo mismo en Cursor, lea qué es un DESIGN.md o explore kits por estilo visual para encontrar un slug que se adapte a su producto.

• Model Context Protocol - Documentación de Claude Code: Los servidores MCP con alcance de proyecto se encuentran en .mcp.json en la raíz del proyecto, y Claude Code solicita aprobación antes de utilizarlos; el panel /mcp muestra los servidores conectados y el número de herramientas.

• Model Context Protocol - Claude Code Docs: Los servidores MCP con alcance de proyecto se encuentran en .mcp.json en la raíz del proyecto, y Claude Code solicita aprobación antes de utilizarlos; el panel /mcp muestra los servidores conectados y el número de herramientas.