--- lastModified: 2026-10-10 type: feature title: "Pruebas de diseño adaptable para tiendas" description: "Revisa con Runner AI las páginas de tu tienda en ordenador, tableta y móvil. Describe fallos de diseño y comprueba las correcciones antes de publicar." category: ai-websites h1: "Pruebas de diseño adaptable antes de publicar tu tienda" keyword: "pruebas de diseño adaptable" legacyKind: structured --- Las **pruebas de diseño adaptable** en Runner AI parten de tu tienda actual y de una tarea concreta del cliente. Cambia la vista previa entre ordenador, tableta y móvil, revisa la misma página y describe el fallo con su ruta y el resultado esperado. Obtendrás una corrección revisable del proyecto, no una garantía de que una vista de dispositivo cubra todos los navegadores o procesos de compra. ## Empieza las pruebas de diseño adaptable con una tarea Elige una ruta y una acción que el cliente deba completar. En una ficha de producto puede ser seleccionar una variante disponible y llegar al carrito. En una colección, encontrar un producto sin que un filtro tape los resultados. Usa el catálogo real y el contenido aprobado para comprobar los textos e imágenes que verá el comprador. Antes de empezar, anota el resultado esperado y las partes de la tienda que deben permanecer iguales. Indica el control afectado y la vista donde aparece el problema. No sustituyas los títulos largos por ejemplos cortos para hacer que el diseño encaje. El [creador de tiendas móviles con IA](/es/ai-ecommerce-mobile-store-builder) trata la fase anterior de diseño; esta página se centra en revisar una tienda existente. ## Compara las vistas de ordenador, tableta y móvil La vista previa de Runner AI ofrece tres opciones de formato. La de ordenador ocupa el espacio disponible, mientras que tableta y móvil usan marcos fijos. Cambiar el marco modifica el espacio de la vista previa sin crear otro proyecto de tienda. Puedes comparar así el mismo contenido cuando cambia la distribución. Recorre la página desde el encabezado hasta la última acción. Busca texto recortado, imágenes que oculten el producto, botones superpuestos y desplazamiento horizontal. Abre los menús y utiliza los controles: que un botón sea visible no demuestra que el siguiente estado funcione. Repite la misma tarea en cada vista. Los marcos son un primer paso, no una matriz completa de navegadores ni un simulador físico. Comprueba por separado otras anchuras y dispositivos reales cuando importen el tacto, el teclado móvil o los pagos. ## Convierte un fallo en una edición concreta Un informe reproducible incluye ruta, vista, estado inicial, acción, resultado esperado y resultado observado. Una captura puede mostrar una superposición, pero explica también qué acción impide al comprador. Por ejemplo, indica que la lista de variantes tapa Añadir al carrito en la vista móvil, en lugar de pedir un rediseño completo de la ficha. Entrega a Runner AI ese encargo acotado con datos de catálogo verificados, textos aprobados y normas de marca. Pide conservar las secciones ajenas al problema y devolver los cambios de código para revisarlos. El [editor de sitios web con IA](/es/ai-website-editor) explica el proceso de edición y las solicitudes sobre elementos cuando Design Mode está disponible. Tras guardar la corrección y cargar la vista actualizada, repite primero el fallo original y después las otras vistas. Un arreglo móvil puede cambiar el espacio o los controles en tableta y ordenador. ## Revisa el resultado antes de publicar Una prueba correcta en la vista previa aporta evidencia del escenario observado. Confirma que se cargó la página adecuada, que el contenido importante permanece y que la acción llega al estado esperado. Revisa la versión actual, no una captura anterior. Si la página depende de inventario, búsqueda o carrito, verifica esos datos en el sistema que los gestiona. Publicar es otra decisión. Un diseño adaptable no confirma métodos de pago, envíos, impuestos ni analítica. Usa un entorno de prueba autorizado para comprobar compras y un teléfono real para las interacciones móviles de mayor riesgo. El [diseño web moderno](/es/modern-website-design) cubre cambios más amplios de navegación y estructura. Mantén visibles los fallos pendientes y repite la tarea tras cada corrección. ## Preguntas frecuentes ### ¿Qué datos necesita Runner AI para corregir el diseño? Proporciona la tienda, ruta, vista, estado inicial, acción y resultado esperado. Describe el fallo observado y adjunta una captura cuando ayude. Añade datos verificados del catálogo y las secciones que deben conservarse. Las pruebas de diseño adaptable necesitan una condición de éxito observable, no una petición genérica de mejorar la apariencia. ### ¿La vista móvil sustituye a un teléfono real? No. El marco móvil permite revisar la distribución, pero no reproduce todos los dispositivos o navegadores. Comprueba las tareas importantes en dispositivos reales cuando intervengan gestos táctiles, teclado, orientación, interfaz del navegador o pagos. La vista previa no certifica dispositivos ni mide su rendimiento. ### ¿Comprobar la vista previa publica mis cambios? No. Revisar y publicar son pasos separados. Comprueba la corrección guardada en ordenador, tableta y móvil, y verifica la tarea del cliente y los sistemas conectados. Un resultado visual correcto solo confirma el escenario observado, no todas las rutas o condiciones de compra. [Explora todas las funciones de Runner AI](/es)