El sitio web se está cargando y el Visor de Apps está funcionando normalmente, dale un momento. Si tarda más de 2 minutos, haz clic en el ícono de Refresh o revisa el panel de Console para ver si hay errores.

Los agentes pueden encontrar problemas durante la compilación, lo que ocasionalmente provoca errores en la página web. Haz clic en Resolve y los agentes lo repararán por ti; una vez corregido, la vista previa volverá a la normalidad. Los mensajes en rojo son una señal, no una crisis.

La eliminación de la insignia requiere Pro o superior. Haz clic en tu avatar en la esquina superior derecha, selecciona Settings, luego ve a Plans & Billing y elige el plan Pro o Max. Una vez actualizado, la insignia de Atoms se elimina automáticamente de tus páginas publicadas.

1. Abre Design Mode y selecciona el elemento exacto que está desalineado o tiene un estilo incorrecto.
2. Indica la página y el breakpoint, el problema actual, el resultado deseado y lo que no debe cambiar.
3. Usa instrucciones medibles como padding, alineación, ancho, color o comportamiento de ajuste de línea. Adjunta una imagen de referencia cuando la coincidencia visual sea importante.
4. Aplica un cambio y luego verifica los diseños de escritorio y móvil, además de estados importantes como carga, vacío, hover y error.
5. Si el resultado rompe otra área, vuelve a la última versión funcional y vuelve a intentarlo con un objetivo más acotado.

1. Confirma si el problema afecta solo al Visor de Apps, a la URL de Preview o también al sitio publicado.
2. Actualiza una vez, abre Preview en una nueva pestaña y prueba una ventana de incógnito.
3. Comprueba si la tarea o compilación actual sigue en ejecución. Espera a que termine antes de volver a intentarlo.
4. Si un mensaje explícito dice que el saldo de Cloud & AI es insuficiente o que la app está suspendida, abre Settings → Cloud & AI y revisa ese saldo. No recargues saldo basándote solo en una pantalla en blanco.
5. Registra cualquier error de Console o Network sin compartir cookies, tokens ni valores secretos.

Si la pantalla sigue en blanco, contacta a Support con el Chat Link, la URL completa del Viewer, la hora y zona horaria, los entornos afectados, una captura de pantalla y detalles de error depurados.

1. Comprueba si solo están afectados el Visor de Apps, la URL de Preview o el sitio publicado.
2. Actualiza una vez, abre Preview en una nueva pestaña y prueba una ventana de incógnito.
3. Comprueba si la tarea o compilación actual sigue en ejecución y espera a que termine.
4. Prueba la última versión que sabes que funcionaba. Si funciona, compara el cambio reciente que introdujo la pantalla en blanco.
5. Abre Settings → Cloud & AI solo cuando el producto informe explícitamente de un saldo insuficiente o de una app suspendida.

Si el problema continúa, contacta a Support con el Chat Link, la URL completa del Viewer, la versión, la hora y zona horaria, los entornos afectados, una captura de pantalla y el error depurado de Console o Network.

Preview y el sitio publicado son canales independientes. Guardar u obtener una vista previa no envía los cambios a producción.

1. Haz clic en Update en el panel Publish — Abre el panel Publish y haz clic en Update. Espera hasta que el estado muestre Up to date.
2. Haz una actualización forzada del sitio en vivo — Pulsa Cmd+Shift+R (Mac) o Ctrl+F5 (Windows), o abre la URL en una ventana de incógnito para descartar la caché del Navegador.
3. Comprueba el número de versión publicada — En el panel Publish, confirma que la versión coincide con lo que ves en Preview. Si difieren, publica de nuevo.
4. Prueba el subdominio Prod de la plataforma — Si usas un dominio personalizado, abre por separado la URL predeterminada de Prod. Si el subdominio Prod está actualizado pero el dominio personalizado no, el problema es la caché de DNS o CDN.

Si el problema persiste, proporciona la URL de Preview, la URL de Prod, capturas de pantalla comparativas lado a lado y la hora en que hiciste clic en Publish o Update.

Cuando el agente modifica el diseño o el estilo, puede romper sin querer el comportamiento responsivo en pantallas más pequeñas.

1. Primero obtén una vista previa en ancho móvil — Usa el selector de dispositivo en la barra de herramientas del Visor de Apps para cambiar a la vista móvil y comprobar el resultado antes de publicar.
2. Usa Design Mode en la vista móvil — Cambia a Design Mode mientras el selector de dispositivo está configurado en móvil. Haz clic en el elemento roto para que el agente apunte solo a ese componente en ese tamaño de pantalla.
3. Proporciona restricciones responsivas explícitas — Dile al agente exactamente cómo debe verse el diseño móvil. Ejemplo: "En pantallas de menos de 768px, apila las tarjetas en una sola columna y establece el padding en 16px."
4. Pide al agente que preserve las media queries existentes — Al solicitar cambios de escritorio, añade: "No modifiques ningún estilo responsivo o móvil existente."

Si el problema persiste, proporciona el Chat Link, una captura de pantalla del diseño móvil roto y una imagen de referencia del diseño esperado.

Si las imágenes aparecen rotas, muestran íconos de marcador de posición o no cargan:

1. Comprueba las rutas de los archivos de imagen — Abre la sección Files y verifica que los archivos de imagen existan en las rutas referenciadas en tu código. El agente puede haber movido o renombrado archivos durante las ediciones.
2. Verifica el tamaño y formato del archivo — Las imágenes muy grandes o los formatos no compatibles pueden no cargarse. Comprime las imágenes o conviértelas a PNG, JPG o WebP.
3. Comprueba el almacenamiento en la nube — Ve a Settings > Cloud & AI para confirmar que tienes espacio de almacenamiento disponible.
4. Haz una actualización forzada — Pulsa Cmd+Shift+R (Mac) o Ctrl+F5 (Windows) para borrar las referencias de imágenes almacenadas en caché.

Si el problema persiste, proporciona el Chat Link, la URL de la imagen faltante y una captura de pantalla del estado roto.

Cuando el agente modifica elementos no relacionados o introduce regresiones en otras partes de la página:

1. Revierte — Ve a History y haz Remix desde la última versión estable. Esto restablece el contexto del chat mientras conserva tu código.
2. Usa Design Mode para aislar — Cambia a Design Mode y haz clic directamente en el elemento específico. Esto fija el alcance de edición del agente a ese componente.
3. Añade restricciones explícitas — Indica claramente qué NO debe cambiar. Ejemplo: "Cambia solo el color de fondo del encabezado a #1A365D. No modifiques la barra de navegación, el pie de página ni ningún otro componente."
4. Un cambio por prompt — Haz un cambio, verifica el resultado y luego continúa con el siguiente.

Si el agente sigue introduciendo regresiones en otros elementos, haz Remix desde una versión estable y vuelve a intentarlo con una instrucción de alcance muy acotado.

Si el panel de Preview muestra un error de compilación, un banner de error rojo o un mensaje sobre paquetes faltantes:

1. Usa el botón Resolve — Si aparece una notificación de Reporte de problemas en el Visor de Apps, haz clic en Resolve y la IA analizará y corregirá automáticamente todos los errores identificados. Si no aparece el botón Resolve, copia el mensaje de error exacto del panel de Console y pégalo al agente con: "Corrige este error de compilación: [mensaje de error]."
2. Comprueba los cambios recientes — Si el error apareció después de una edición específica, ve a History y compáralo con la última versión funcional para identificar qué cambio causó el problema.
3. Haz Remix desde la última versión funcional — Si el error es difícil de resolver, haz Remix desde tu último punto de control exitoso y vuelve a aplicar los cambios de forma incremental.
4. Comprueba la compatibilidad del paquete — Si el error hace referencia a un paquete específico, pídele al agente: "Comprueba si [package name] es compatible con la configuración actual del proyecto y corrige cualquier conflicto de versión."

Nota: Si el mensaje de error hace referencia a componentes de la plataforma (Visor de Apps, script de inicio, Publish, registro de despliegue) o a archivos internos de paquetes de terceros (p. ej., @vue/compiler-core, vite), esto puede ser un problema de la plataforma y no del agente. Contacta a Support con el mensaje de error completo.

Si el problema persiste, proporciona el mensaje de error completo, el Chat Link y una captura de pantalla del error.

Si el agente confirma que el cambio está hecho pero el resultado visual no ha cambiado:

1. Haz una actualización forzada — Pulsa Cmd+Shift+R (Mac) o Ctrl+F5 (Windows). Los cambios de CSS suelen quedar almacenados en caché por el Navegador.
2. Comprueba si hay conflictos de especificidad CSS — El agente puede haber añadido estilos que están siendo anulados por reglas existentes. Pídele al agente: "Comprueba si el estilo que solicité está siendo anulado por otra regla CSS y corrige la especificidad si es necesario."
3. Usa Design Mode para inspeccionar — Cambia a Design Mode y haz clic en el elemento. El editor visual de la izquierda muestra los colores, espaciado, tipografía y propiedades de diseño aplicados actualmente, para que puedas ver si se aplicó el cambio solicitado.
4. Verifica el archivo correcto — En proyectos con hojas de estilo globales y estilos a nivel de componente, el agente puede haber editado el archivo equivocado. Pregunta: "¿Dónde aplicaste el cambio? Muéstrame la ruta del archivo y la línea."

Si el problema persiste, proporciona el Chat Link, una captura de pantalla del elemento sin cambios y los valores de estilo exactos que solicitaste.

Design Mode utiliza el diseño visual para determinar a qué componente estás apuntando. Los elementos anidados o superpuestos pueden provocar una selección incorrecta.

1. Haz zoom — Acércate al área antes de hacer clic. Esto ayuda a distinguir componentes muy anidados.
2. Usa una descripción de texto como respaldo — Si al hacer clic repetidamente se selecciona el elemento equivocado, descríbelo en el chat. Ejemplo: "Selecciona el segundo botón dentro de la tarjeta de precios en la columna derecha."
3. Haz referencia por ruta de archivo — Si sabes qué archivo contiene el componente, díselo directamente al agente: "Edita el elemento en src/components/PricingCard.tsx, línea 42."

Si los problemas de selección persisten, proporciona una captura de pantalla resaltando el elemento que quieres y el Chat Link.