Ignite UI Theming MCP

Servidor MCP para igniteui-theming: un conjunto de mixins, funciones y variables Sass utilizados para crear temas para una variedad de frameworks de interfaz de usuario web.

GitHub

Prueba este MCPPatrocinado

Documentación

Ignite UI Theming - de Infragistics

El repositorio Ignite UI Theming recopila un conjunto de mixins, funciones y variables Sass utilizados para crear temas para una variedad de frameworks de UI desarrollados por Infragistics. El paquete de theming facilita enormemente la creación de paletas, elevaciones y estilos tipográficos para tus proyectos.

Estructura del Repositorio

Este repositorio es un monorepo de workspaces de npm con dos paquetes:

Paquete	Nombre	Descripción
`packages/theming`	`igniteui-theming`	Código fuente Sass, artefactos de compilación JSON, publicado en npm
`packages/mcp`	`igniteui-theming-mcp`	Código fuente del servidor MCP, compilado en `packages/theming/dist/mcp/`

El paquete igniteui-theming es el único artefacto publicado: incluye tanto la librería de theming Sass como el binario del servidor MCP.

El servidor MCP también está listado en el Registro MCP como io.github.IgniteUI/igniteui-theming. El server.json en la raíz del repositorio es su manifiesto de registro, publicado automáticamente en cada lanzamiento.

Comandos comunes desde la raíz del repositorio:

npm install    # install all workspace dependencies
npm run build  # build theming + MCP in dependency order
npm test       # run all tests across both packages
npm run lint   # lint all packages

Paletas

Proporcionamos cuatro paletas predefinidas: material, bootstrap, fluent e indigo, que tienen todos los colores necesarios junto con diferentes variantes de esos colores para que sea aún más fácil elegir la adecuada para tu caso. Así es como se ven:

Palettes

Para acceder a cualquiera de los colores de las paletas, puedes usar la función color:

background: color($light-material-palette, 'primary', 500);

Puedes profundizar en qué funciones y mixins de color contiene el paquete y cómo usarlos en la Página Wiki de Colores

Tipografía

Otro módulo valioso de nuestro paquete de theming es la tipografía, que te ayuda a mantener la consistencia en todo tu proyecto. También hay cuatro ajustes preestablecidos de tipografía para los cuatro temas que proporcionamos de serie.

Typography

Puedes configurar cualquiera de los tipos de letra usando el mixin typography, que acepta 2 argumentos (familia de fuente y escala tipográfica). Por defecto, la tipografía usa la familia de fuente y la escala tipográfica de material.

@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);

Aprende más sobre el módulo de tipografía del paquete consultando la Página Wiki de Tipografía

Elevaciones

El paquete de theming proporciona un ajuste preestablecido de sombras que se pueden usar para dar elevación a tus componentes. Son muy útiles con botones, tarjetas, barras de navegación, etc.

Elevations

Puedes configurar elevaciones de 0 a 24 usando la función elevation, que acepta el nivel de elevación como argumento:

box-shadow: elevation(12);

Aprende más sobre las elevaciones y sus capacidades en la Página Wiki de Elevaciones

Uso

Para usar Ignite UI Theming en tu aplicación, debes instalar el paquete igniteui-theming:

npm install igniteui-theming

A continuación, necesitarás usarlo en el archivo que desees de esta manera:

@use '.../node_modules/igniteui-theming/' as *;

También puedes usar solo una fracción del paquete:

@use '.../node_modules/igniteui-theming/sass/color' as *;

Proporcionamos ajustes preestablecidos para los temas material, bootstrap, fluent e indigo para las fracciones de color (paletas claras y oscuras), tipografía y elevaciones. Puedes importarlos en tu archivo scss de esta manera:

@use '.../node_modules/igniteui-theming/sass/typography/presets' as *;

Puedes leer más sobre lo que contiene el paquete en la Página Wiki

Linting y Pruebas

Para escanear el proyecto en busca de errores de linting, ejecuta

npm run lint

Para ejecutar la suite de pruebas, ejecuta

npm run test

Pruebas y Depuración

Vista Previa de Paletas

Ejecuta desde packages/theming. Pasa la paleta (material, bootstrap, fluent, indigo) y la variante (light o dark).

npm run preview:palette -- --palette=material --variant=light

Servidor MCP (Theming Asistido por IA)

El paquete Ignite UI Theming incluye un servidor de Protocolo de Contexto de Modelo (MCP) que permite a los asistentes de IA generar código de theming listo para producción para tus aplicaciones Ignite UI. Este servidor MCP es parte de la cadena de herramientas de desarrollo asistido por IA más amplia para Ignite UI.

¿Qué es MCP?

El Protocolo de Contexto de Modelo permite que los asistentes de IA (como Claude, GitHub Copilot y otros) se conecten a herramientas y fuentes de datos externas. El servidor MCP de Ignite UI Theming actúa como un asistente experto en theming que puede:

🎨 Generar paletas de colores con variaciones de tono automáticas
📝 Crear sistemas tipográficos siguiendo estándares de diseño
🌓 Construir temas completos para modos claro y oscuro
🎯 Personalizar componentes con tokens de diseño
✅ Validar colores para cumplimiento de accesibilidad

Inicio Rápido

La mayoría de los usuarios no necesitan clonar nada. El servidor se incluye dentro del paquete publicado igniteui-theming y está listado en el Registro MCP como io.github.IgniteUI/igniteui-theming: los clientes que admiten instalación desde registro pueden agregarlo por ese nombre, y todo lo demás usa la configuración npx que se muestra a continuación.

Para ejecutarlo desde el código fuente en su lugar:

1. Clonar y Compilar

Clona el repositorio y compila:

npm install
npm run build

2. Configurar Tu Cliente de IA

El servidor MCP funciona con cualquier cliente compatible con MCP. Aquí tienes instrucciones de configuración para clientes populares:

VS Code (con extensiones compatibles con MCP)

Para desarrollo local - Crea o edita .vscode/mcp.json:

{
  "servers": {
    "igniteui-theming": {
      "command": "node",
      "args": ["/absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js"]
    }
  }
}

Usando el paquete publicado:

{
  "servers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming"]
    }
  }
}

WebStorm / IDEs JetBrains

Ve a Configuración → Herramientas → Asistente de IA → Servidores MCP
Haz clic en + Agregar servidor MCP
Configura:
- Nombre: igniteui-theming
- Comando: node (para local) o npx (para paquete)
- Argumentos:
  - Local: /absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js
  - Paquete: -y igniteui-theming
Haz clic en Aceptar y reinicia el Asistente de IA

Claude Desktop

Agrega a tu archivo de configuración:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

Para desarrollo local:

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "node",
      "args": ["/absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js"]
    }
  }
}

Usando el paquete publicado:

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming"]
    }
  }
}

Cursor

Crea o edita .cursor/mcp.json en tu proyecto:

Para desarrollo local:

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "node",
      "args": ["/absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js"]
    }
  }
}

Usando el paquete publicado:

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming"]
    }
  }
}

¿Qué Puede Hacer?

🎨 Crear Temas Completos

Simplemente describe tu tema a tu asistente de IA:

"Crea un tema oscuro de Material Design para mi aplicación Angular que se inspire en el esquema de colores Gruvbox."

La IA generará código Sass listo para producción con:

Paleta de colores con todas las variaciones de tono
Configuración tipográfica con escalas tipográficas adecuadas
Sombras de elevación
Importaciones y configuración específicas de la plataforma

🌈 Generar Paletas de Colores

"Genera una paleta de tema claro usando verde azulado como color primario y púrpura como secundario"

Obtén tonos de color perfectamente calculados siguiendo estándares de sistemas de diseño.

📝 Configurar Tipografía

"Configura tipografía usando la fuente Inter con escala tipográfica de Material Design para Web Components"

Obtén una configuración tipográfica adecuada con familias de fuentes y escalas tipográficas responsivas.

🎯 Personalizar Componentes

"¿Qué tokens de diseño están disponibles para el componente de botón?"

"Crea un tema de botón plano con fondo púrpura y texto blanco"

Descubre y personaliza estilos de componentes individuales usando tokens de diseño.

Capacidades Disponibles

El servidor MCP proporciona 8 herramientas y 16 recursos:

Herramientas (Acciones)

Herramienta	Descripción
`detect_platform`	Detecta automáticamente qué plataforma de Ignite UI usa tu proyecto
`create_palette`	Genera paleta de colores con cálculos de tono automáticos
`create_custom_palette`	Crea paleta con control detallado sobre tonos individuales
`create_typography`	Configura tipografía con familias de fuentes y escalas tipográficas
`create_elevations`	Configura sombras de elevación
`create_theme`	Genera tema completo (paleta + tipografía + elevaciones)
`get_component_design_tokens`	Descubre propiedades personalizables para componentes
`create_component_theme`	Genera código de tema específico para componentes

Recursos (Datos de Referencia)

Información de Plataforma: Configuración para Angular, Web Components, React y Blazor
Bibliotecas de Ajustes Preestablecidos: Paletas, tipografías y conjuntos de elevaciones preconstruidos
Guía de Colores: Mejores prácticas para selección y uso de colores
Esquemas de Sistemas de Diseño: Configuraciones Material, Bootstrap, Fluent e Indigo

Plataformas Soportadas

Angular - igniteui-angular
Web Components - igniteui-webcomponents
React - igniteui-react
Blazor - igniteui-blazor

Ejemplos de Interacción

Creando un tema de proyecto nuevo

Tú: "Estoy comenzando un nuevo proyecto Angular con Ignite UI. Crea un tema completo de Material Design con azul primario, coral secundario, tema claro y fuente Roboto"

IA: Usa la herramienta create_theme y genera código Sass completo listo para usar

Agregando modo oscuro

Tú: "Necesito una versión de modo oscuro con el mismo azul primario pero superficie oscura"

IA: Usa create_theme con variant: "dark" y genera código de tema oscuro

Personalizando componentes

Tú: "¿Qué propiedades puedo personalizar en el componente de tarjeta?"

IA: Usa get_component_design_tokens para mostrar los tokens disponibles

Tú: "Haz que la tarjeta tenga un fondo gris claro con una sombra sutil"

IA: Usa create_component_theme para generar código de tema del componente

Documentación Completa

Para documentación detallada que incluye:

Referencia completa de parámetros de herramientas
Todos los ejemplos de prompts
Diferencias específicas de plataforma
Guía de solución de problemas
Instrucciones de desarrollo

Consulta el README del Servidor MCP

Scripts de Desarrollo

# Build for production (theming + MCP)
npm run build

# Run tests
npm run test

# Debug with MCP Inspector (from packages/mcp)
npm run inspect

Contribuciones

¡Las contribuciones son bienvenidas! No dudes en enviar una Solicitud de Extracción (Pull Request).