Visor de Apps

¿Qué es Visor de Apps?

Cuando los Agentes de IA completan una tarea, el Visor de Apps aparece en la parte superior de la página. Te permite previsualizar tu app en vivo y realizar ediciones visuales directamente, sin necesidad de programar.

Antes de comenzar

• El procesamiento del Agente puede tardar un momento; por favor, espera con paciencia.
• Revisa el panel de Terminal a la derecha para ver el progreso detallado. El panel de Terminal muestra registros en tiempo real de lo que está haciendo el Agente de IA, incluida la creación de archivos, la generación de código y cualquier error encontrado durante el proceso de compilación.
• Haz clic en el ícono de actualizar en cualquier momento para volver a cargar la vista previa.

Cómo usar Visor de Apps

Paso 1: Espera a que se cargue la vista previa

Después de que los Agentes terminen, el Visor de Apps carga tu vista previa en la ventana principal de vista previa.

⏱️ Normalmente tarda de unos pocos segundos a un minuto.

Si tarda más de 2 minutos: haz clic en el ícono de actualizar en la barra de herramientas de Visor de Apps. Si sigue atascado, revisa el panel de Terminal para ver errores (consulta el Paso 3 a continuación).

Paso 2: Previsualiza tu app

Una vez cargada, puedes ver tu app en vivo en la ventana de vista previa.

• Escritorio / Tablet / Móvil — Usa la barra de herramientas de dispositivos en la parte superior de la ventana de vista previa para cambiar entre vistas y probar la capacidad de respuesta. La barra de herramientas muestra tres íconos que representan dispositivos de escritorio, tablet y móvil. Haz clic en cada ícono para ver cómo se ve tu app en diferentes tamaños de pantalla sin salir de la página.
• Abrir en una pestaña nueva— Haz clic en el ícono de flecha en la esquina superior derecha de la ventana de vista previa para abrir la vista previa en una pestaña del navegador separada. Esto es especialmente útil si la vista previa incrustada está bloqueada o no responde.

Paso 3: Revisa si hay errores (si algo parece incorrecto)

Si tu app no carga o parece dañada, revisa el panel de Console para ver mensajes de error.

El panel de Console está ubicado en el lado derecho de la pantalla, debajo de la pestaña de Terminal. Muestra registros del sistema y mensajes de error generados durante el proceso de compilación.

Si ves mensajes de error en rojo, normalmente incluyen:

• Una descripción de lo que salió mal
• El archivo y el número de línea donde ocurrió el error
• Un seguimiento de pila para ayudar a identificar la causa raíz

Para corregir los errores: (Para más detalles, consulta: Reporte de problemas)

• Haz clic en "Resolve" — la IA analizará y corregirá automáticamente todos los errores identificados.
• La vista previa se volverá a cargar una vez que se apliquen las correcciones. Puedes supervisar el progreso en tiempo real a través del panel de Terminal.

¿No aparece el botón "Resolve"?

Haz clic en "..." (más opciones) junto al mensaje más reciente del Agente y luego selecciona "Feedback" para reportar el problema a nuestro equipo de soporte. Incluye tu Chat Link y una captura de pantalla del error.

Paso 4: Modifica tu app

Método 1: Haz clic para editar (recomendado para cambios visuales)

Haz clic directamente en cualquier elemento dentro de la ventana de vista previa. Aparecerá un editor visual en el lado izquierdo de la pantalla, que te permitirá ajustar:

• Colores — Cambia el color del texto, el color de fondo o el color del borde con un selector de color
• Espaciado — Ajusta el padding, el margen y el espacio entre elementos
• Tipografía — Modifica el tamaño, el peso y la familia de la fuente
• Diseño — Cambia la alineación, la configuración de flexbox o las propiedades de la cuadrícula
• Contenido de texto — Edita el texto directamente en el editor

Una vez que hagas un cambio, la vista previa se actualiza al instante para que puedas ver el resultado en tiempo real.

El editor visual también incluye una pestaña Library donde puedes explorar y agregar recursos preconstruidos, como íconos, imágenes y componentes de UI, a tu proyecto.

Método 2: Describe en el chat

Dile al Agente de IA qué quieres cambiar usando lenguaje natural. Por ejemplo:

• "Haz el color de fondo más oscuro"
• "Reduce el padding alrededor del encabezado"
• "Cambia el color del botón a azul"

La IA entenderá tu solicitud y aplicará los cambios a tu app.

Referencia rápida

• Actualizar vista previa – Haz clic en el ícono de actualizar en la barra de herramientas de Visor de Apps para volver a cargar la ventana de vista previa.
• Cambiar vista del dispositivo – Usa los íconos de Escritorio, Tablet o Móvil en la barra de herramientas de vista previa para probar cómo se ve tu app en diferentes tamaños de pantalla.
• Abrir en una pestaña nueva – Haz clic en el ícono de flecha en la esquina superior derecha de la ventana de vista previa para abrir la vista previa en una pestaña del navegador separada.
• Ver registros de errores – Revisa el panel de Console en el lado derecho de la pantalla para ver mensajes de error y registros del sistema.
• Corregir errores automáticamente – Haz clic en el botón "Resolve" en la notificación de Reporte de problemas para permitir que la IA corrija automáticamente todos los errores identificados.
• Editar elementos visuales – Haz clic en cualquier elemento dentro de la ventana de vista previa para abrir el editor visual en el lado izquierdo.
• Reportar un problema – Haz clic en "..." → "Feedback" en cualquier mensaje del Agente para reportar problemas al equipo de soporte.

Preguntas frecuentes

¿Por qué mi Visor de Apps muestra una pantalla de carga?

La pantalla de carga significa que el sitio web se está cargando. El Visor de Apps funciona normalmente. Espera un momento para que la vista previa se cargue correctamente. Si tarda más de 2 minutos, intenta hacer clic en el ícono de actualizar o revisar el panel de Console para ver errores.

¿Por qué mi Visor de Apps muestra mensajes de error en rojo?

Los Agentes pueden encontrar problemas durante el proceso de compilación, lo que ocasionalmente puede causar errores en la página web. Haz clic en "Resolve" y los Agentes corregirán el error por ti. Una vez corregido, Visor de Apps volverá a mostrarse normalmente, así que no hay necesidad de preocuparte por la aparición de mensajes de error en rojo.

¿Por qué no puedo eliminar la insignia de Atoms de mi página publicada?

La eliminación de la insignia requiere Pro o superior. Puedes Actualizar en cualquier momento desde Configuración → Planes y facturación. Después de actualizar, la insignia se eliminará automáticamente de tus páginas publicadas.

Para actualizar, haz clic en tu avatar en la esquina superior derecha, selecciona Configuración y luego ve a Planes y facturación. Elige el plan Pro o Max y completa el proceso de actualización. Una vez que actualices, la insignia de Atoms ya no aparecerá en tus páginas publicadas.