Prompt Shape Creator
Next.js 16, TypeScript, React 19, Tailwind CSS v4, nodemailer
Problema
Los flujos de generación de imágenes frecuentemente carecen de una forma estructurada para recopilar briefings detallados de prompts de los clientes. Las solicitudes llegan como mensajes dispersos, sin detalles críticos sobre escena, personajes, estilo y preferencias técnicas.
Restricciones
Debe funcionar como formulario independiente sin requerir cuentas de usuario. El envío por correo electrónico debe ser confiable, con fallback para portapapeles cuando la API no esté disponible. El estado del formulario debe estar protegido contra cierre accidental de la página. Debe soportar contenido bilingüe (EN/PT) sin renderización del lado del servidor para detección de idioma.
Solución
Una aplicación Next.js 16 (App Router) con formulario de briefing estructurado en secciones lógicas (escena, personajes, estilo, preferencias técnicas, referencias). Usa useActionState + useTransition de React 19 para envío no bloqueante, nodemailer para SMTP, y un hook de autoguardado personalizado que persiste el estado en sessionStorage con protección beforeunload. Detección de idioma del lado del cliente alterna automáticamente entre inglés y portugués.
Resultado
Recopilación de prompts simplificada sin briefings perdidos. Fallback para portapapeles garantiza entrega incluso cuando el correo falla. El autoguardado previene pérdida de datos por navegación accidental. Accesible, amigable para impresión y responsivo en todos los dispositivos.