Edición visual y vista previa

La edición visual funciona directamente en el Visor de Apps. Usa la barra de herramientas debajo de la vista previa para seleccionar elementos, editar texto, reemplazar imágenes, aplicar un tema y previsualizar tus cambios antes de publicar.

Usa Select element para cambios asistidos por IA, Edit Text para cambios directos de texto y Theme para estilos globales como colores, fuentes y efectos.

Cómo funciona la edición visual

Cuando los agentes de IA completan una tarea, el Visor de Apps aparece en la parte superior del proyecto. La barra de herramientas de edición visual se encuentra debajo de la vista previa.

• Select element te permite seleccionar uno o más elementos y pedir a los agentes que los modifiquen.
• Edit Text te permite editar texto directamente en la vista previa.
• Theme abre los controles del tema para los estilos globales.

La barra de herramientas se puede contraer cuando no la necesites.

Antes de empezar

Antes de empezar a editar, asegúrate de que:

• Tu proyecto tenga una compilación completada. Las herramientas de edición visual están disponibles desde el Visor de Apps después de que los agentes terminan una tarea.
• Sepas que los cambios no están en vivo hasta que publiques. Tu URL pública no se ve afectada hasta que publiques la versión actualizada.
• Sepas que un tema solo afecta a los estilos compartidos. Los elementos creados con valores fijos conservan su apariencia anterior después de un cambio de tema. Consulta Si un tema no se ve bien más abajo.

Establece estilos globales con Theme

Un tema es el sistema de diseño de tu proyecto. Define variables globales — paletas, tipografía y espaciado — que se aplican en toda tu app, en lugar de configuraciones en un solo elemento.

Theme se usa mejor durante la etapa de preparación, antes de que empieces a construir. Aplicar uno desde el principio significa que todo lo que generen los agentes lo seguirá desde el inicio.

Elige un tema

Selecciona Theme en la barra de herramientas debajo del Visor de Apps. El panel Theme incluye un campo Search Themes y agrupa los temas en secciones:

• Current Theme — lo que tu proyecto usa ahora. Antes de aplicar cualquier cosa, muestra No theme applied yet, y el botón + junto a él crea un tema nuevo.
• Featured Theme — 15 preajustes seleccionados por diseñadores. Cada uno se muestra como una vista previa de una página creada con él, con su nombre y una fila de muestras que muestran su paleta. Estos no se pueden eliminar.
• Your Theme — temas que has creado o personalizado. Estos se pueden renombrar y eliminar.

Cada tema aparece como una vista previa de una página creada con él, con su nombre y una fila de muestras que muestran su paleta, para que puedas evaluar la dirección antes de aplicarlo.

La pestaña Theme, con un tema aplicado en la parte superior y tus temas guardados debajo.

Para aplicar uno:

1. Selecciona el tema que quieras.
2. Atoms pregunta "Do you want to apply theme name?"
3. Selecciona Apply para confirmar o Cancel para volver.
4. Revisa la vista previa.

Resultado esperado: la vista previa se actualiza al tema que elegiste y ahora aparece en Current Theme.

Nota: Si tienes cambios de texto o imagen sin guardar, Atoms te pide que los guardes o descartes antes de aplicar un tema nuevo.

Actualizar un tema aplicado

Un punto en la pestaña Theme significa que hay disponible una versión más reciente de tu tema aplicado.

Para usarla, selecciona Update en tu tema actual y confirma Do you want to re-apply theme name? Tu proyecto usará entonces la versión más reciente.

No tienes que actualizar. Si lo dejas así, tu proyecto seguirá ejecutando la versión que aplicaste.

Nota: Nota: Si tu app no se ve como el tema que seleccionaste, es posible que elementos individuales tengan estilos que sobrescriben el tema. Esas sobrescrituras apuntan a contenido específico y sobreviven a un cambio de tema.

Crear o editar un tema en Theme Manager

Selecciona + junto a Current Theme para crear uno desde cero, o abre un tema existente para cambiarlo. Cualquiera de las dos opciones abre Theme Manager, donde ajustas con precisión un tema frente a una vista previa en vivo.

Sus configuraciones se encuentran en tres pestañas:

• Color — los roles de color que usa tu app, agrupados por propósito: Base Colors, Card, Popover, Primary, Secondary y más. Cada rol tiene su propio valor, así que cambiar Primary afecta a todos los elementos que lo usan.
• Fonts — tus tipografías Serif, Sans-serif y Mono.
• Effects — Radius de las esquinas y una Shadow que controlas por color, opacidad, desenfoque, expansión y desplazamiento.

La vista previa junto a ellos está construida con componentes reales — formularios de inicio de sesión, botones, entradas, texto del cuerpo y monoespaciado — para que puedas evaluar un cambio de inmediato en lugar de adivinar. Usa el interruptor de claro y oscuro debajo para comprobar ambos, porque una paleta que funciona en superficies claras puede perder contraste en las oscuras.

Debajo de la vista previa también tienes Undo y Redo para recorrer tus cambios, y Reset para devolver el tema a su estado inicial.

Theme Manager. La vista previa se actualiza a medida que cambias un valor, y los controles debajo cubren deshacer, rehacer, exportar, importar y restablecer.

Guardar un tema

1. Selecciona Save.
2. Dale un Theme Name, o conserva el sugerido.
3. Selecciona Save para confirmar.

Resultado esperado: tu tema aparece en My Theme en la pestaña Theme, con su paleta mostrada como muestras. Aplícalo de la misma manera que cualquier otro tema.

Nota: Las ediciones no se conservan hasta que las guardas. Atoms te detendrá y te ofrecerá guardar o descartar si intentas aplicar un tema diferente con cambios sin guardar pendientes.

Reutilizar un tema entre proyectos

Theme Manager tiene Export e Import debajo de la vista previa. Exporta un tema a un archivo y luego impórtalo en otro proyecto para reutilizar la misma dirección de diseño, o compártelo con un compañero de equipo para que su proyecto coincida con el tuyo.

Si un tema no se ve bien

Aplicar un tema no es una comprobación de compatibilidad, por lo que normalmente no falla. Un tema reemplaza los valores de estilo compartidos sobre los que está construida tu app, lo que significa que cualquier tema del selector normalmente puede aplicarse a cualquier proyecto.

Lo que puedes ver en cambio es un tema que se aplica correctamente pero no llega a todo. No hay mensaje de error para esto — simplemente se ve mal.

Parte de tu app conserva su apariencia anterior. Este es el problema más común. Un elemento al que se le dio un valor fijo, un color específico o una fuente establecida directamente en él, en lugar de uno de los estilos compartidos de tu app, no puede verse afectado por un cambio de tema, por lo que conserva su apariencia anterior y puede chocar con todo lo que lo rodea. Selecciona el elemento afectado y describe el cambio en el chat del proyecto.

El texto se vuelve difícil de leer. Un tema oscuro aplicado a un diseño pensado para superficies claras puede dejar el texto con muy poco contraste. Ajusta los elementos afectados en Editor visual, o elige un tema más cercano a tu diseño existente.

Atoms te dice que el tema no se puede aplicar. Es poco común, y significa que la interfaz de tu proyecto no se construyó sobre el sistema de temas de Atoms. Usa Editor visual en su lugar — todo sigue siendo posible elemento por elemento.

Importante: Elige un tema pronto siempre que puedas. Cuando los agentes construyen con un tema ya aplicado, usan sus estilos compartidos desde el principio, por lo que menos elementos terminan con valores fijos a los que un cambio de tema posterior no puede afectar.

Editar elementos con Editor visual

1. Pasa el cursor sobre la barra de herramientas de edición visual y selecciona Select element.
2. La barra de herramientas muestra Click to select, Ctrl/Cmd + Click for multiple.
3. Selecciona un elemento en la vista previa. Para seleccionar varios elementos, mantén pulsado Ctrl en Windows o Cmd en Mac mientras seleccionas.
4. Tus selecciones se adjuntan al chat del proyecto. La barra de herramientas muestra el número seleccionado, como Edit 1 selection in chat window.
5. Describe el cambio que quieres en el chat del proyecto y envía tu mensaje.
6. Selecciona Select element de nuevo para salir del modo de selección.

Usa el chat del proyecto para cambios como diseño, colores, espaciado, estilo o cambios que afecten a varios elementos seleccionados.

Editar texto directamente

1. Selecciona Edit Text en la barra de herramientas debajo del Visor de Apps.
2. Cuando aparezca Click text content to edit, selecciona el texto que quieras cambiar.
3. Edita el texto directamente en la vista previa.
4. Puedes editar varios elementos de texto antes de guardar. La barra de herramientas muestra el número de ediciones pendientes, como 1 text change o 2 text changes.
5. Selecciona Save para conservar todos los cambios de texto pendientes, o Discard para eliminarlos.

También puedes hacer doble clic en el texto mientras usas Select element para empezar a editarlo directamente.

Guardar o descartar tus cambios

Los cambios directos de texto e imagen no se aplican hasta que los guardas. Cuando hay cambios pendientes, la barra de herramientas muestra el número de cambios junto con Discard y Save.

• Save aplica todas las ediciones directas pendientes.
• Discard elimina las ediciones pendientes y devuelve los elementos afectados a su estado anterior.

Si intentas salir del modo de edición con cambios pendientes, Atoms muestra:

Cambios sin guardar

Tienes cambios sin guardar. Guarda o descarta los cambios antes de salir del modo de edición.

Selecciona Cancel para seguir editando o Discard para salir sin conservar los cambios.

Guardar actualiza el proyecto de trabajo. No actualiza el sitio en vivo hasta que publiques.

Reemplazar una imagen

1. Entra en el modo Select element.
2. Selecciona la imagen que quieras reemplazar.
3. Elige una imagen de la biblioteca de imágenes, o usa el control de carga en la imagen seleccionada.
4. Comprueba el reemplazo en la vista previa.
5. Selecciona Save para aplicar el cambio de imagen, o Discard para eliminarlo.

Si también introduces una instrucción en el chat del proyecto, el reemplazo de imagen y la instrucción del chat se pueden enviar juntos.

La pestaña Library con categorías de imágenes e imágenes populares.

De dónde vienen las imágenes

Image es la colección integrada. Usa Search assets para algo específico, o explora una categoría — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings y People, con More tags para el resto. Seleccionar una categoría la abre; usa la flecha hacia atrás para volver. Popular Images debajo muestra una selección general. Pasa el cursor sobre cualquier imagen y selecciona Use asset para aplicarla.

Generate crea una imagen nueva a partir de una descripción, y necesita un plan Pro o Max. Escribe lo que quieres en Describe the image you want to generate y selecciona Generate. Los resultados aparecen debajo del campo. Selecciona una miniatura terminada para aplicarla a tu elemento.

Upload añade tu propio archivo mediante arrastrar y soltar, pegar o hacer clic. Las imágenes pueden estar en formatos JPEG, PNG, GIF, BMP, TIFF o WEBP, de hasta 4 MB. Las imágenes cargadas aparecen debajo del área de carga — selecciona una para aplicarla.

Nota: Use asset aparece solo en las imágenes integradas. Las imágenes que generas o cargas se aplican seleccionando su miniatura en su lugar.

Describe los cambios en el chat

Después de seleccionar uno o más elementos con Select element, describe el resultado que quieres en el chat del proyecto.

Por ejemplo:

• "Haz que esta sección sea más tranquila, con más espacio en blanco y un encabezado más pequeño."
• "Haz que estos botones coincidan con el estilo de la página de precios."

Sé específico sobre el resultado previsto. Instrucciones como "haz que se vea mejor" pueden producir resultados impredecibles

Previsualiza tus cambios

Usa la barra de herramientas sobre la vista previa:

• Device view — cambia entre tamaños de pantalla para probar la capacidad de respuesta. Los cambios de tema y tipografía que se ven bien en escritorio a menudo se rompen en móvil, así que comprueba siempre el móvil antes de publicar.
• Page selector — muévete entre las páginas de tu app.
• Refresh — recarga la vista previa si parece desactualizada.
• Open in a new tab — visualiza la app a ancho completo en una pestaña separada del navegador.
• Console — abre el panel de registros cuando algo parezca estar mal.

Resultado esperado: tus cambios son visibles en cada página y en cada ancho de dispositivo que pretendes admitir.

Recuperarte de un problema de vista previa

Si la vista previa parece desactualizada, sigue cargando o muestra errores en rojo, el problema puede estar en el Visor de Apps en lugar de en tus ediciones visuales. Consulta Solución de problemas de compilación y vista previa para ver los pasos de solución de problemas — Refresh, el panel Console, Resolve y cómo reportar un error que persiste.

Si parece que tus ediciones directas de texto o imagen han desaparecido, comprueba si las guardaste. Los cambios sin guardar pueden descartarse cuando sales del modo de edición — consulta Guardar o descartar tus cambios.

Publica tus cambios

Las ediciones visuales permanecen en tu proyecto de trabajo hasta que publiques. Selecciona Publish en la esquina superior derecha, o Update si el proyecto ya está en vivo.

Nota: Si tu proyecto usa Specify Versión en lugar de Always Latest, el sitio en vivo permanece bloqueado en la versión que elegiste, y tus cambios de diseño no aparecerán públicamente hasta que publiques una nueva versión.

Para los errores que los agentes reportan durante una compilación, consulta Reporte de problemas.