¿Las webs hechas con IA se adaptan bien al móvil?
¿Las webs hechas con IA se adaptan bien al móvil?
En general sí: lo que sale de una descripción usa maquetación flexible y se reordena en pantallas estrechas, así que una página normal se lee bien en el teléfono desde la primera construcción. Lo que no llega resuelto es el detalle táctil: tablas anchas, menús, formularios y juegos pensados para teclado. Eso se pide y se corrige.
La diferencia entre "se ve" y "se usa" es la que importa. Una página puede caber en la pantalla y aun así ser incómoda, y ese matiz es el que decide si alguien te escribe desde el móvil o cierra la pestaña.
¿Qué llega adaptado sin pedirlo?
La estructura. Las columnas se apilan una debajo de otra, las imágenes se ajustan al ancho disponible, el texto no se sale de la pantalla y los espacios se encogen de forma razonable. Esto es lo normal en una construcción de Zugo y no hace falta nombrarlo en el prompt.
También llega bien resuelto el tamaño base del texto. Es raro encontrarse con una página generada en la que haya que hacer zoom para leer un párrafo, porque las proporciones tipográficas se calculan sobre el ancho disponible y no sobre un valor fijo.
Y llega el orden de lectura. En pantalla estrecha lo primero suele seguir siendo lo primero: titular, promesa, botón principal. No es un detalle menor, porque cuando ese orden se rompe la página deja de tener sentido antes incluso de que se note el problema de diseño.
¿Qué es lo que falla casi siempre?
Los elementos que solo tienen sentido con un ratón. Se apilan correctamente y aun así no se pueden usar con el pulgar, que es el caso más frustrante porque a simple vista parece que está bien.
| Elemento | Cómo se rompe en el teléfono | Qué pedir |
|---|---|---|
| Tabla ancha | Se sale de la pantalla o encoge el texto hasta lo ilegible | Que se convierta en tarjetas apiladas |
| Menú de navegación | Los enlaces quedan pegados y se pulsa el equivocado | Menú desplegable con enlaces separados |
| Formulario | Los campos son estrechos y el teclado tapa el botón | Campos a ancho completo y botón visible al escribir |
| Botón secundario | Demasiado pequeño para el dedo | Altura cómoda y separación entre botones |
| Galería con hover | El efecto no existe sin ratón, la información se pierde | Que el dato importante esté siempre visible |
| Vídeo o mapa incrustado | Mantiene el ancho de escritorio y desplaza la página | Que se ajuste al ancho del contenedor |
La fila del hover es la más traicionera. Si un dato solo aparece al pasar el ratón, en un teléfono simplemente no existe, y el error no se ve nunca desde el ordenador donde estás revisando.
La del formulario es la más cara en consecuencias. Un botón de enviar tapado por el teclado es un contacto perdido, y es exactamente lo que estabas intentando conseguir con la página.
¿Cómo se comprueba de verdad?
Con un teléfono real en la mano, no encogiendo la ventana del navegador. Una ventana estrecha en el escritorio sigue teniendo puntero, no tiene teclado que tape media pantalla y no reproduce el peso del pulgar sobre los bordes.
Publica primero. El proyecto recibe una dirección del tipo tu-slug.zugo.run en cuanto lo publicas, así que abrir esa dirección desde el móvil es el camino más corto a la comprobación honesta. Cómo funciona ese paso está en cómo publicar el proyecto.
Luego haz el recorrido completo, no una ojeada. Entra por la portada, pulsa el botón principal, rellena el formulario hasta enviarlo y vuelve atrás. La mayoría de los fallos aparecen en el segundo o tercer paso, nunca en la primera pantalla.
Y prueba en horizontal una vez. Mucha gente gira el teléfono sin pensarlo, y hay diseños que en horizontal dejan el contenido en una franja central con dos vacíos enormes a los lados.
¿Qué ediciones arreglan cada problema?
Frases concretas que nombren el elemento y el cambio. Una petición vaga cuesta lo mismo que una precisa, pero solo la precisa se puede verificar después.
Para las tablas: "en pantallas estrechas convierte la tabla de precios en tarjetas apiladas, una por plan". Para el menú: "en móvil sustituye la barra de navegación por un menú desplegable con los enlaces bien separados".
Para los formularios: "los campos a ancho completo y el botón de enviar visible mientras se escribe". Para los botones: "aumenta la altura de los botones y separa los que van juntos para que no se pulse el de al lado".
Y una edición que conviene pedir siempre al final: "revisa toda la página en pantalla estrecha y arregla lo que se desborde". Es genérica a propósito, y funciona bien como última pasada cuando el resto ya está estable. Cómo se escriben estas correcciones sin mover cosas que no pediste está en cómo editar después de generar.
¿Los juegos generados se pueden jugar en el móvil?
Solo si lo pides de forma explícita. Es el caso donde la respuesta general cambia por completo, y conviene decirlo sin adornos: un juego 2D generado para teclado no tiene ningún control en una pantalla táctil.
La página del juego cargará, se verá el tablero y no pasará nada al tocar. Para el jugador eso es indistinguible de un juego roto, y es lo que va a pensar la persona a la que le mandes el enlace.
La solución se pide con las palabras del control que quieras: joystick virtual en un lado y botón de acción en el otro, zonas táctiles a izquierda y derecha, o gestos de deslizar. Después hay que probarlo con el pulgar, porque la mano tapa una parte de la pantalla y esa parte suele ser justo donde está el marcador.
¿Adaptarse a la pantalla es lo mismo que ir rápido?
No, y confundirlo lleva a diagnósticos equivocados. Una página puede estar perfectamente adaptada y tardar en cargar por culpa de imágenes pesadas, y otra puede cargar al instante y ser incómoda de usar con el dedo.
En el móvil los dos problemas se notan a la vez porque la conexión suele ser peor y la paciencia menor. Por eso conviene revisarlos por separado: primero que se use bien, después que cargue ligero, y no mezclar las dos cosas en la misma edición.
La imagen de cabecera es el sospechoso habitual del segundo problema. Una foto pensada para pantalla ancha se descarga entera aunque se muestre pequeña. El tema completo está en qué pasa con la velocidad de carga.
¿Cuánto cuesta dejar la versión móvil bien?
Menos de lo que parece, porque la base ya viene adaptada y solo pagas por los arreglos concretos.
| Acción | Créditos |
|---|---|
| Construcción del proyecto | 600 |
| Una edición en el chat | 300 |
| Plataforma multipágina, tres primeras páginas | 1200 |
| Cada página adicional de la plataforma | 300 |
| Edición en modo Hi-Fi | 600 |
Lo habitual es que la parte móvil se resuelva con dos o tres ediciones: menú, formulario y una pasada final de desbordes. El plan Pro cuesta $25 al mes y da 20.000 créditos, que son 66 ediciones, así que estas correcciones no son lo que consume el presupuesto.
El plan gratuito da 2400 créditos y Business cuesta $50 al mes con 20.000 créditos. Antes de entregarse, cada construcción se arranca en un entorno aislado, de modo que una versión que no abre no llega a tus manos. Eso detecta un proyecto roto, no un diseño incómodo en pantalla pequeña, que es otra cosa.
¿Dónde está el límite honesto?
La generación acierta con la estructura y no con tu contexto. No sabe que tus clientes entran casi todos desde Instagram en vertical, ni que la mitad usa un teléfono pequeño con una mano, y esas dos cosas cambian las prioridades del diseño.
Tampoco resuelve sola las interfaces densas. Un panel con muchas columnas, filtros y acciones por fila necesita una decisión humana sobre qué se sacrifica en pantalla estrecha, y esa decisión se toma por ediciones sucesivas, no con un prompt mejor escrito.
Y el límite de fondo: en un producto complejo Zugo no sustituye a un equipo de desarrollo. Para una página, una tienda pequeña o una herramienta interna, la versión móvil se deja bien sin ayuda externa. Para una aplicación grande con muchos estados, llega un punto en el que conviene tener a alguien mirando el código, que además es tuyo y se exporta a GitHub cuando quieras.
¿Qué hago ahora mismo?
Publica el proyecto y ábrelo en tu propio teléfono antes de enseñárselo a nadie. Haz el recorrido entero hasta enviar el formulario y anota lo que te haya costado tocar, que suele ser una lista corta y muy concreta.
Después pide una edición por problema y vuelve a mirar en el móvil entre una y otra. Es más lento que pedirlo todo junto y sale más barato, porque cada corrección se puede comprobar de un vistazo. Puedes empezar en Zugo.