Asigne un sistema de diseño a Cursor

El Agente de Cursor genera funcionalidades completas rápidamente, pero en cada generación puede tomar decisiones de estilo distintas. Sin un sistema fijo, el espaciado, los colores y las formas de los componentes varían entre archivos. Un sistema de diseño proporciona al Agente un conjunto de tokens semánticos y un DESIGN.md escrito, para que los componentes posteriores sigan las mismas reglas que el primero.

Cursor es compatible con MCP de forma nativa. El Agente puede utilizar herramientas para buscar, obtener y aplicar un kit mientras trabaja, además de leer los archivos que el kit instala.

A continuación se muestra el kit gratuito teal-rose-institute-grid renderizado a partir de sus tokens reales. Los comandos de esta guía utilizan ambient-sage; ambos son gratuitos y se instalan de la misma manera:

1. 1

   Escribir la configuración de MCP

   Ejecute esto en la raíz de su proyecto para integrar el servidor en .cursor/mcp.json.

   Copy

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

2. 2

   Activar el servidor en Cursor

   Abra Customize en la barra lateral, busque el servidor identityforge y actívelo. Reinicie Cursor si las herramientas no aparecen.

3. 3

   Iniciar sesión (opcional para kits gratuitos)

   Copy

   npx --yes identityforge@latest login

4. 4

   Indique al Agente que aplique el tema a su aplicación

   Defina el producto, la audiencia y el tono; el Agente preseleccionará opciones con search_themes, leerá el brief con get_design_md y lo aplicará con 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"]
    }
  }
}

Para que el Agente sea coherente incluso fuera de un turno de aplicación de kit, añada una regla de proyecto en .cursor/rules/ indicándole que aplique estilos basándose únicamente en los tokens semánticos y que siga el DESIGN.md. Esto complementa bien al kit: los tokens definen los valores y la regla garantiza que el código generado los utilice siempre.

---
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

   Aplicación vía CLI

   Escribe el DESIGN.md y un archivo de tokens en el directorio actual; pida a Cursor que los vincule.

   Copy

   identityforge apply ambient-sage

2. 2

   Registro de shadcn

   Instala las variables CSS del kit directamente si utiliza shadcn/ui.

   Copy

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

Consulte la misma configuración para Claude Code y Windsurf, o comience desde la guía fundamental.

• Model Context Protocol - Cursor Docs: Cursor lee los servidores MCP del proyecto desde .cursor/mcp.json y permite activarlos o desactivarlos desde Customize en la barra lateral.
• Rules - Cursor Docs: Las reglas del proyecto se encuentran en .cursor/rules como archivos .mdc con frontmatter; cualquier archivo markdown simple en esa ubicación es ignorado por el sistema de reglas.

• Model Context Protocol - Cursor Docs: Cursor lee los servidores MCP del proyecto desde .cursor/mcp.json y permite activarlos o desactivarlos desde Customize en la barra lateral.
• Rules - Cursor Docs: Las reglas del proyecto se encuentran en .cursor/rules como archivos .mdc con frontmatter; cualquier archivo markdown simple en esa ubicación es ignorado por el sistema de reglas.