Recursos · Kit para desarrolladores
Tres ficheros para que una IA transforme cualquier sitio HTML + CSS + PHP al sistema visual institucional del IES Rosa Chacel. Sin frameworks, sin dependencias.
El kit · 3 ficheros
brand-prompt.md
Contexto completo para la IA
Copia su contenido como primer mensaje antes de pedirle a la IA que trabaje sobre tu código. Incluye paleta completa con reglas de uso, escala tipográfica, patrones de componentes, rutas del sistema de logos y normas de uso.
variables.css
Design tokens del sistema
Importa este fichero en tu proyecto para tener todos los tokens CSS disponibles con un solo @import. Incluye colores, tipografías, espaciado, sombras, radios y transiciones del sistema.
components.css
Componentes listos para usar
CSS completo del nav institucional, banda de color, botones, hero reducido, tarjetas y footer. Clases con prefijo .iesrc- para evitar colisiones con tu CSS existente.
El brand-prompt.md es contexto para la IA: explica el porqué de cada decisión de diseño para que el asistente tome buenas decisiones. Los ficheros CSS son para el navegador: puedes importarlos directamente sin tocar nada más. Separarlos permite que cada herramienta reciba exactamente lo que necesita.
Cómo usarlo · 4 pasos
Descarga los ficheros CSS
Coloca variables.css y components.css en la carpeta de estilos de tu proyecto. Enlázalos en el <head> antes de tu propio CSS:
<link rel="stylesheet" href="brand/variables.css">
<link rel="stylesheet" href="brand/components.css">
Copia el brand-prompt.md
Abre tu asistente de IA (Claude, ChatGPT, Gemini…) y pega el contenido completo de brand-prompt.md como primer mensaje de la conversación. Es el manual que la IA usará para tomar decisiones de diseño.
Pide la transformación
Con el contexto ya cargado, escribe a la IA algo como:
«Aplica la identidad institucional del IES Rosa Chacel a este fichero. Los assets de logos están en assets/logos/»
Y pega tu HTML o PHP en el mismo mensaje.
Ajusta con el asistente
La IA conoce los tokens, los componentes y las reglas de uso. Puedes pedirle ajustes específicos: «Cambia el botón principal a la variante PAI», «Añade la banda de color entre las dos secciones» o «El logo debe ser aleatorio en cada carga».