Convertir un flujo en un prototipo interactivo con código
Los mockups estáticos no pueden responder "¿cómo se siente esto en realidad?". El AI in Design Report 2026 encontró que la generación de código fue el movimiento con mayor crecimiento interanual, y cerca de la mitad de los diseñadores dice haber llevado código generado por IA a producción. Describir un flujo y obtener un prototipo funcional de un solo archivo te permite probar interacciones reales en un día en lugar de un sprint.
Eres un prototipador front-end. Construye un prototipo interactivo autocontenido en un solo archivo para que pueda probar cómo se siente un flujo. Flujo: {{flow_description}}. Restricciones de diseño (colores, escala tipográfica, espaciado, componentes clave): {{design_constraints}}. Estados a incluir: {{states}}. Requisitos: - Un solo archivo: HTML con CSS en línea y JavaScript vainilla mínimo, sin dependencias externas, ejecutable con solo abrirlo en un navegador. - Accesibilidad incorporada: HTML semántico, controles de formulario etiquetados, orden lógico de encabezados, operabilidad completa por teclado, estados de foco visibles y contraste de texto de al menos 4.5:1. - Contenido de relleno realista pero claramente ficticio — nunca datos reales de usuarios ni nombres reales. - Haz que el camino principal sea completamente interactivo de punta a punta; deja las acciones secundarias como esqueleto con una nota visible de "no incluido en el prototipo". Restricciones: construye solo las pantallas y campos que describí — no inventes funciones, flujos ni texto adicionales. Este es un prototipo desechable para pruebas de usabilidad, no código de producción, así que prioriza la claridad sobre el ingenio. Después del código, enumera las decisiones de accesibilidad que tomaste y cualquier punto que deba revisar manualmente antes de probarlo.
Rellena tus datos y el prompt se actualiza al instante — luego cópialo.
Se entregó un único archivo index.html con un pago en tres pasos (carrito, envío, confirmación), navegable por teclado, con anillos de foco visibles y una paleta con contraste 4.5:1 que coincide con tus tokens. Incluye los estados de carrito vacío, carga y tarjeta rechazada; la acción "aplicar código de promoción" queda como esqueleto con una nota de "no incluido en el prototipo". **Decisiones de accesibilidad:** elementos form y label semánticos en cada campo, una región aria-live para el error, encabezados en orden. **Revisar antes de probar:** el orden de tabulación en el menú desplegable personalizado, y si el estado de error lleva una señal que no dependa solo del color (usa un ícono más texto junto al rojo).
El flujo de trabajo completo
- Describe el flujo, las restricciones de diseño y los estados que quieres probar.
- Genera el prototipo y ábrelo en un navegador.
- Haz una revisión de accesibilidad (teclado, contraste, lector de pantalla) y corrige los vacíos antes de probar.
- Prueba con usuarios y luego ajusta el prompt para refinar el flujo.
- Entrega especificaciones verificadas a ingeniería — no lleves código de prototipo desechable a producción sin revisión.
Cuidado con
Las interfaces generadas por IA suelen fallar las WCAG — contraste pobre, texto alternativo vago, marcado no semántico — y las herramientas de IA no son herramientas de accesibilidad. La responsabilidad legal bajo la ADA, la Sección 508 y las WCAG sigue siendo tuya, así que revisa cada pantalla generada.
El código del prototipo es desechable, para aprender, no una build de producción; llevarlo a producción sin revisión de ingeniería genera problemas de seguridad, rendimiento y mantenibilidad.
Nunca pegues diseños confidenciales o sin publicar, ni datos reales de usuarios, en herramientas de IA de consumo — usa contenido de relleno ficticio en los prototipos.
De dónde sale esto
Cada caso de uso de este sitio se basa en relatos reales de los diseñadores UX en activo — no lo inventamos nosotros.