Para IA

Konfront UI está escrito para que lo lean personas y agentes. Conecta tu herramienta de IA para que genere interfaces que respeten el sistema desde el primer intento.

Fuentes de contexto

llms.txt

/llms.txt

Índice de toda la documentación en un archivo de texto. Es lo primero que un agente debe leer.

Páginas en Markdown

/md/componentes/<slug>.md

Cada página de componente existe también en Markdown: uso, reglas Konfront y código, sin ruido visual.

Servidor MCP

npx shadcn@latest mcp

El servidor MCP de shadcn le da al agente el catálogo del registro para buscar e instalar componentes.

llms.txt y Markdown

Apunta tu agente a /llms.txt para que conozca la estructura del sistema. Cuando necesite el detalle de un componente, que lea su versión en Markdown en lugar del HTML: es más corta y no pierde nada importante.

curl https://ui.konfront.mx/llms.txt
curl https://ui.konfront.mx/md/componentes/button.md

Servidor MCP

El servidor MCP de shadcn lee los registros de tu components.json, incluidos @konfront y el namespace de tu cliente. Con él, el agente busca componentes, revisa ejemplos y los instala con el CLI. Configura primero el registro siguiendo Instalación.

Claude Code

npx shadcn@latest mcp init --client claude

Cursor

npx shadcn@latest mcp init --client cursor

Si prefieres configurarlo a mano, crea .mcp.json en la raíz del proyecto (en Cursor, en .cursor/mcp.json):

.mcp.json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Después puedes pedirle cosas como estas:

  • «Muéstrame los componentes disponibles en el registro @konfront».
  • «Instala el botón, la tarjeta y el badge de @konfront».
  • «Arma un formulario de contacto con los componentes de @konfront».

Plantilla de AGENTS.md

Copia estas reglas en un solo archivo de guías del proyecto. Usa el que ya exista (AGENTS.md, CLAUDE.md, .cursorrules o Guidelines.md); si no hay ninguno, crea AGENTS.md en la raíz. Si el archivo ya tiene reglas propias, agrega esta sección sin borrar lo demás.

AGENTS.md
# Konfront Design System — reglas obligatorias
- Tipografía: siempre Inter Tight (400/500/700; títulos en Bold 700, nunca 600). Iconos: Phosphor, Regular por defecto, Fill solo para estados. Nada de Tabler, Lucide ni Inter a secas.
- Color: solo los tokens de index.css. Azul de marca único #013DCE (hover/pressed por capa negra). #1D72F1 solo en texto ≥24px. Links en --primary. Violeta #9747FF solo para IA y controles de demo. Ningún hex suelto ni clase de la paleta default de Tailwind.
- Badges de estado: fondo -soft y texto tono 900 (--success-text, etc.). Los tonos 500 son solo iconos y puntos, nunca fondo de botón.
- Botón success: bg-success-strong (#0B4F2C) + texto blanco + CheckCircle, solo para confirmar o cerrar un estado positivo, uno por vista. Nunca #12B669 ni #158A4D como fondo con texto de 13px.
- Componentes: shadcn/ui tematizado + src/components/konfront para lo propio. No crees variantes nuevas sin registrarlas.
- Estructura interna: sidebar 240 (colapsable 64), barra superior 48, contenido máx. 1440, padding 32. Vista cliente: barra 56, contenido máx. 1040, responsive hasta 390px.
- Forma: radios 4/6/8/12/24. Tarjeta con borde + shadow-xs; la sombra es el último recurso.
- Sin tablas por defecto. El Checklist nunca es una tabla plana: stepper de etapas → resumen → grupos colapsables → filas de paso (alto mín. 48).
- Dos espacios (Operativo y Organizacional) con navegación y home propios. Nunca mezclar módulos de ambos en un menú ni crear un home transversal.
- Vista cliente: nunca Checklist, pasos, porcentajes, siglas de área, atrasos, bloqueos, estatus semanal, transcripciones, minutas ni chat del KB. Solo notificaciones de hito.
- Automático, reversible, auditable: todo estado automático se puede revertir y el toast ofrece Deshacer. Ninguna reversión borra historial.
- Contenido generado por IA siempre con badge "Generado" y citas. El chat nunca inventa.
- Al rediseñar: no cambiar textos, orden de secciones, campos ni lógica.
- Español de México (sin "Choose File" nativo), lang="es-MX", números con es-MX, tabular-nums en métricas. Contraste AA, foco visible con anillo --ring, todo operable con teclado.

Paquete de contexto por cliente

Contexto del cliente para agentes

Planeado

Cada tema publicado incluirá un paquete con sus tokens, las restricciones que aplicó el solver de contraste y las reglas de la plantilla, listo para pegar en el proyecto del cliente. Así el agente sabe, por ejemplo, que en ese cliente los links van en el color secundario.