Crea con IA un prototipo de app que funcione y ponlo delante de personas reales

Por qué un prototipo que funciona dice más que una maqueta

Las pantallas estáticas prueban si a la gente le gusta cómo se ve algo. Rara vez prueban si sabe usarlo, porque quien prueba tiene que imaginar qué pasa después de cada toque, y quien dirige la sesión acaba narrando el producto. Un prototipo interactivo que responde de verdad elimina esa narración. Quien prueba escribe en un campo real, ve cambiar un total real y llega a un estado vacío real cuando borra el último elemento. Su confusión es sobre tu diseño, no sobre los huecos del prototipo.

También cambia las preguntas que puedes hacer. Con una maqueta preguntas “¿usarías esto?”, y la gente responde por cortesía. Con algo que funciona puedes plantear una tarea (“añade el turno del próximo martes y mira cómo afecta a tus horas semanales”) y observar dónde duda.

Decide qué tiene que demostrar el prototipo

Antes de describir nada, escribe las una o dos preguntas que la prueba debe responder. Así el proyecto se mantiene pequeño y las sesiones, centradas. Las habituales son:

• Comprensión: ¿sabe la gente para qué sirve la pantalla principal en unos segundos?
• La tarea principal: ¿pueden completar sin ayuda la única tarea para la que existe el producto?
• El momento delicado: ¿qué pasa en el caso límite que te genera dudas: una lista vacía, un error que deshacer, un nombre largo que se corta en dos líneas?
• Disposición: después de usarlo, ¿cambiarían su hoja de cálculo, su libreta o su app actual por esto?

Lo que no sirva a esas preguntas puede quedarse fuera o simularse. Una página de ajustes que nadie abrirá en una sesión de veinte minutos es esfuerzo perdido, por fácil que sea generarla.

Cómo describírselo a Anticode

Describe a la persona, la tarea y las pantallas en unas pocas frases, y di cómo deben ser los datos de ejemplo. Por ejemplo: “Un prototipo de app para intercambiar turnos en el equipo de una cafetería. Pantallas: el cuadrante de esta semana, una solicitud para cambiar un turno y una lista de solicitudes de cambio abiertas. Usa ocho empleados de ejemplo y una semana realista. Marca los datos como de demostración”. El Architect responde con un plan breve (nombre, pantallas, estilo, funciones) y puede hacer hasta tres preguntas cuando la respuesta cambia el resultado, cada una con respuestas sugeridas que puedes tocar.

Cuando eliges Build it, el modelo escribe la app completa como un único documento HTML, y puedes ver cómo llega el código. Las nuevas apps también pueden abrirse en un navegador sin interfaz a anchos de teléfono y de portátil, con capturas de pantalla y clics de prueba, y los errores se devuelven para corregirlos, cuando ese servicio de revisión está disponible.

Que las partes simuladas sean honestas

Las apps de Anticode se ejecutan en un entorno aislado sin red, así que cualquier cosa que normalmente necesitaría un servidor se simula dentro de la página: los otros usuarios son personas de ejemplo, los mensajes “enviados” van a una lista local y una pantalla de inicio de sesión acepta cualquier cosa. La app los marca como datos de demostración donde importa. Mantén esas etiquetas visibles durante las pruebas. Quien cree que usa un sistema real toma decisiones distintas y más arriesgadas que quien sabe que es un modelo, y en esta fase quieres el segundo tipo de comentarios.

Lo que sí se conserva es cualquier cosa que la app guarde en el propio navegador de quien prueba. Si alguien añade tres elementos, cierra la pestaña y vuelve mañana, los elementos siguen ahí en ese dispositivo. Eso basta para un estudio tipo diario durante una semana, siempre que cada participante use un solo teléfono o portátil.

Hacer las sesiones y cambiar el prototipo

1. Publica el prototipo en su dirección de anticode.dev y envía el enlace a quienes lo van a probar. No hay nada que instalar.
2. A las partes interesadas, envíales en su lugar un enlace de revisión para clientes: pueden abrir la vista previa actual sin cuenta y dejar comentarios ligados a una sección. Los enlaces caducan a los 14 días por defecto y puedes revocarlos.
3. Después de cada ronda, pide los cambios con palabras normales (“pon el botón de cambio en cada tarjeta de turno”). Los cambios recientes se guardan en el historial de versiones (hasta un número que fija tu plan), así que puedes mostrar la primera ronda y la tercera una al lado de la otra, o volver atrás.

Lo que no puede probar un prototipo en un solo navegador

Ten claro el límite. Un prototipo en un entorno aislado funciona en un dispositivo cada vez, así que no puede probar:

• Nada que ocurra entre personas: notificaciones reales, listas compartidas, dos participantes viendo los cambios del otro.
• Inicio de sesión real, permisos o recuperación de cuentas.
• Datos externos en vivo, pagos o funciones de IA dentro de la app (solo pueden imitarse con respuestas de ejemplo fijas).
• El rendimiento con volúmenes reales de datos o redes lentas.

Cuando la idea supera las pruebas, la exportación a Next.js es el paso hacia un producto real. Cubre las apps y te da un proyecto estándar de App Router en TypeScript con Postgres mediante Prisma, inicio de sesión por correo, roles de cliente y de personal y un área de administración. Es un punto de partida que un desarrollador ampliará, no una app multiusuario terminada, y puedes enviarlo al repositorio de GitHub que elijas. La guía para exportar a Next.js explica lo que incluye. Si necesitas funciones multiusuario de producción sin escribir código, quizá te convenga más una herramienta sin código con su propio backend que cualquiera de las dos.

Preguntas frecuentes

¿Es un generador de prototipos de apps con IA o una herramienta de diseño?

Crea código que funciona, no marcos en un lienzo. Obtienes una app real en el navegador, adecuada para pruebas de usabilidad; si necesitas archivos de diseño al píxel para un equipo de diseño, usa una herramienta de diseño junto a ella.

¿Pueden usarlo en el teléfono quienes lo prueban?

Sí. La app publicada es una página web que funciona en el navegador del teléfono, y lo que guarda se queda en ese teléfono.

¿Puedo ver lo que introdujeron los participantes?

No lo que guardaron dentro de la app, que se queda en su dispositivo. Si añades un formulario de comentarios o de contacto, esos envíos te llegan por correo y al panel.

¿El prototipo se convierte en la app real?

Puede ser el punto de partida. La exportación a Next.js lo convierte en un proyecto con base de datos e inicio de sesión sobre el que un desarrollador puede trabajar.