Para asistentes de IA
Una guía en Markdown generada desde este mismo kit, para que Claude, Copilot o Cursor escriban pantallas que respeten el sistema de diseño.
Genera la guía en tu proyecto
La guía no se escribe a mano: sale de los tokens del CSS, las propiedades de los componentes y los ejemplos de esta documentación, así que siempre coincide con la versión instalada.
php artisan maristas-ui:ia --agentes
# Escribe docs/maristas-ui.md y avisa a Claude Code, Cursor y Copilot
php artisan maristas-ui:ia --agentes
# Solo el resumen, sin ejemplos
php artisan maristas-ui:ia --resumen
# En otra ruta
php artisan maristas-ui:ia --ruta=storage/maristas-ui.mdQué hace --agentes
Agrega un bloque entre marcas a CLAUDE.md y AGENTS.md (si no existe ninguno, crea AGENTS.md). Volver a ejecutarlo actualiza ese bloque sin tocar el resto del archivo.
Los asistentes leen esos archivos al abrir el proyecto, así que la regla «usa el kit, no inventes estilos» queda activa sin que tengas que repetirla en cada petición.
<!-- maristas-ui:inicio -->
## Interfaz de usuario
Toda pantalla nueva o modificada usa el Maristas UI Kit. Antes de escribir vistas lee `docs/maristas-ui.md` y sigue sus reglas: componentes `x-maristas::*`, clases `.mr-*` y tokens `--maristas-*`; no inventes estilos.
<!-- maristas-ui:fin -->Cómo pedirle una pantalla
Con la guía en el proyecto basta con describir qué necesitas; no hace falta explicar el diseño.
Pide el resultado y las acciones, y deja que el asistente elija componentes.
Crea la pantalla de «Documentos del aspirante»: una tabla con búsqueda y
filtro por estado, selección de filas con acción en lote «Solicitar de nuevo»
y un botón principal «Agregar documento». Usa el Maristas UI Kit.
Sí
Qué contiene la guía Reglas obligatorias, tokens
--maristas-*, propiedades de cada componente x-maristas::*, la lista completa de clases .mr-* y el código de cada ejemplo del catálogo.
No
No la edites a mano Para cambiar una regla de diseño, cámbiala en el kit y regenera la guía en cada proyecto.