Actúa como un desarrollador senior fullstack especializado en PHP y diseño de interfaces enterprise. Tienes experiencia creando herramientas SaaS internas para departamentos de grandes corporaciones (Nestlé, Inditex, Renfe). Tu código es limpio, bien comentado, y tus interfaces siguen los estándares estéticos de herramientas como Notion, Linear o Stripe: fondo claro, tipografía profesional, mínimo uso de color, cero emojis decorativos.
Contexto: Soy formador de IA para empresas. Enseño a mis alumnos que un prompt pobre se puede mejorar drásticamente pasándolo secuencialmente por varios modelos de pensamiento (abogado del diablo, pensamiento divergente, SCAMPER, 6 Sombreros de Bono, TRIZ, pensamiento inverso, primeros principios, etc.). Actualmente hago esto manualmente, copiando y pegando entre chats. Necesito automatizarlo.
Necesito que construyas una aplicación web en PHP (sin frameworks) que haga lo siguiente:
- El usuario introduce un prompt básico en un textarea.
- Selecciona qué técnicas de mejora quiere aplicar de un grid de 9 opciones (3×3), cada una con nombre y descripción corta. Las técnicas son: Estructuración Experta, Abogado del Diablo, Pensamiento Divergente, SCAMPER, 6 Sombreros de Bono, TRIZ, Pensamiento Inverso, Primeros Principios y Refinamiento Final.
- Al pulsar un botón, el sistema ejecuta un pipeline secuencial: el resultado de cada técnica alimenta a la siguiente, llamando a la API de Google Gemini (AI Studio) en cada paso.
- Tras cada paso, una llamada adicional compara el prompt anterior con el nuevo y genera un «changelog» breve que evalúa si la técnica aportó valor real (rating: ALTO, MEDIO, BAJO o NULO). Esto es fundamental para que yo demuestre en clase qué técnicas aportan y cuáles no.
- El pipeline se ejecuta automáticamente de principio a fin. El usuario ve el progreso en tiempo real (barra de puntos, tarjetas desplegables por paso, y al final el prompt optimizado con botón de copiar).
- La página debe estar protegida con una contraseña simple por sesión PHP (configurable en un archivo de configuración).
- El endpoint de la API también debe verificar la sesión para evitar llamadas no autenticadas.
Arquitectura:
config.php: API key de Gemini, modelo por defecto, contraseña de acceso, y array de técnicas (cada una con nombre, descripción, prompt de sistema, y template de usuario con placeholder{PROMPT}).process.php: endpoint AJAX que recibe POST JSON, verifica sesión, y ejecuta un paso de mejora o una comparación, llamando a la API de Gemini vía cURL.index.php: toda la interfaz en un solo archivo (HTML + CSS + JS inline). Pantalla de login si no hay sesión, y la aplicación principal si la hay.
Requisitos de diseño de la interfaz:
- Tema claro, profesional, tipo herramienta enterprise.
- Paleta monocromática de grises cálidos con un solo acento azul corporativo.
- Tipografía: Plus Jakarta Sans para cuerpo, IBM Plex Mono solo para mostrar prompts.
- Tarjetas blancas con sombras sutiles, bordes finos, sin gradientes ni animaciones llamativas.
- Los changelogs deben colorearse sutilmente según el rating: verde suave para ALTO, ámbar para MEDIO, gris para BAJO, rojo suave para NULO.
- Responsive: el grid de técnicas pasa a 2 columnas en tablet y 1 en móvil.
- Botón de cerrar sesión discreto en la cabecera.
Requisitos técnicos:
- Sin base de datos, sin dependencias externas de PHP, sin frameworks JS.
- Las llamadas a Gemini deben usar el endpoint
generativelanguage.googleapis.com/v1beta/models/{model}:generateContent. - Timeout de 120 segundos por llamada (los modelos de razonamiento son lentos).
- Extraer el prompt mejorado del resultado buscando marcadores como «PROMPT MEJORADO:» o «PROMPT CORREGIDO:» en la respuesta.
- Las comparaciones se lanzan en paralelo (no bloquean el pipeline).
Entrega: Los 3 archivos PHP completos y funcionales, listos para subir a cualquier hosting con PHP 7.4+ y cURL.