Ajusta el aspecto de tu app y luego previsualiza el resultado antes de publicarla.

Design se abre junto a tu vista previa en vivo y te permite cambiar el aspecto de tu proyecto sin escribir código.

Esta guía explica cómo configurar estilos globales con Theme, editar elementos individuales con Editor visual, reemplazar imágenes desde Library, describir cambios en lenguaje natural y revisar tu trabajo en distintos dispositivos antes de que se publique.

Cómo funciona Design

Cuando los Agentes de IA completan una tarea, el Visor de Apps aparece en la parte superior de la página. Selecciona Design para abrir el panel de diseño a la izquierda de la pantalla, con tu vista previa en vivo al lado. Tiene tres pestañas:

• Theme establece reglas globales para toda la app: colores, fuentes y efectos. Es mejor usarlo antes de empezar a crear.
• Editor visual ajusta los elementos que has seleccionado. Funciona en cualquier proyecto, en cualquier momento.
• Library reemplaza imágenes o genera nuevas.

Theme establece las reglas y Editor visual perfecciona los detalles. Selecciona Exit para cerrar el panel.

El panel Design se abre a la izquierda. Hasta que selecciones algo, Editor visual te pedirá que elijas un elemento.

Antes de empezar

Antes de abrir Design, asegúrate de que:

• Tu proyecto tenga una compilación completada. Design se abre desde el Visor de Apps, que aparece solo 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 theme solo afecta a los estilos compartidos. Los elementos creados con valores fijos conservan su aspecto anterior después de un cambio de theme. Consulta Si un theme no se ve bien más abajo.

Configura estilos globales con Theme

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

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

Elige un theme

La pestaña Theme se abre con un campo Search Themes y agrupa los themes en secciones:

• Current Theme — lo que usa tu proyecto ahora. Antes de aplicar nada, muestra No theme applied yet, y el botón + a su lado crea un nuevo theme.
• Default Theme — 14 ajustes preestablecidos 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 enseñan su paleta. No se pueden eliminar.
• My Theme — themes que has creado o personalizado. Estos se pueden renombrar y eliminar.

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

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

Para aplicar uno:

1. Selecciona el theme 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 theme que elegiste y ahora aparece en Current Theme.

Nota: Si tienes cambios sin guardar en Editor visual, Atoms muestra Unsaved Changes y te pide que los guardes o descartes antes de aplicar un nuevo theme.

Actualiza un theme aplicado

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

Para usarla, selecciona Update en tu theme 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 como está, tu proyecto seguirá usando la versión que aplicaste.

Nota: Si tu app no se ve como el theme que seleccionaste, es posible que se hayan sobrescrito elementos individuales en Editor visual. Esas sobrescrituras apuntan a contenido específico y sobreviven a un cambio de theme.

Crea o edita un theme en Theme Manager

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

Sus ajustes están 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 — el Radius de las esquinas y una Shadow que controlas por color, opacidad, desenfoque, expansión y desplazamiento.

La vista previa junto a ellas está construida con componentes reales — formularios de inicio de sesión, botones, campos de entrada, texto de cuerpo y monoespaciado — para que puedas evaluar un cambio de inmediato en lugar de adivinar. Usa el interruptor claro/oscuro debajo para revisar 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 theme 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.

Guarda un theme

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

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

Nota: Las ediciones no se conservan hasta que las guardas. Atoms te detendrá y te ofrecerá guardar o descartar si intentas aplicar un theme diferente mientras aún hay cambios sin guardar.

Reutiliza un theme en varios proyectos

Theme Manager tiene Export e Import debajo de la vista previa. Exporta un theme 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 para que su proyecto coincida con el tuyo.

Si un theme no se ve bien

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

Lo que puedes ver en su lugar es un theme que se aplica correctamente pero no afecta a todo. No hay mensaje de error para esto: simplemente se ve mal.

Parte de tu app conserva su aspecto anterior. Este es el problema más común. Un elemento al que se le asignó un valor fijo, un color o una fuente específicos establecidos directamente sobre él, en lugar de uno de los estilos compartidos de tu app, no puede verse afectado por un cambio de theme, así que conserva su aspecto anterior y puede desentonar con todo lo que lo rodea. Corrígelo en Editor visual o pide a los agentes en el chat que reemplacen el valor fijo por los estilos de tu theme.

El texto se vuelve difícil de leer. Un theme 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 theme más cercano a tu diseño actual.

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

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

Edita elementos individuales con Editor visual

Selecciona un elemento en la vista previa para editarlo. Para trabajar en varios a la vez, mantén pulsado Ctrl y haz clic en Windows, o Cmd y haz clic en Mac.

Importante: Los controles de propiedades descritos abajo actúan sobre un elemento a la vez. Cuando tienes varios elementos seleccionados, cámbialos describiendo lo que quieres en el chat; consulta Describe cambios en lugar de hacer clic.

Una etiqueta sobre tu selección indica el nombre del elemento y su tamaño — el tamaño de fuente para texto o las dimensiones para un contenedor — para que puedas confirmar que tienes el elemento que querías y no su contenedor.

La pestaña Editor visual muestra entonces las propiedades disponibles para ese elemento, agrupadas en secciones:

• Layout — margen y relleno.
• Appearance — color de fondo, opacidad y radio de las esquinas. Radius va desde None hasta Small, Medium, Large, XL, 2XL, 3XL y Full.
• Content — el texto del elemento.
• Style — familia tipográfica, peso, tamaño, alineación del texto y decoración.
• Class — las clases de estilo aplicadas al elemento, contraídas de forma predeterminada.

Las secciones que aparecen dependen de lo que hayas seleccionado: un elemento de texto ofrece Content y Style, mientras que un contenedor puede mostrar solo Layout, Appearance y Class.

También aparece una barra de herramientas flotante sobre tu selección con los controles más comunes a mano — fuente, peso, alineación y color para texto — junto con el control de eliminación y el campo de prompt descrito más abajo.

Los cambios aparecen en la vista previa a medida que los haces. Para abandonarlos, usa Discard en la parte inferior de la vista previa.

Guarda tus cambios

Las ediciones no se conservan hasta que las guardas. Una vez que hayas hecho un cambio, Discard y Save aparecen en la parte inferior de la vista previa.

• Save conserva tus cambios.
• Discard los descarta y devuelve el elemento a su estado anterior.

Resultado esperado: los botones desaparecen una vez que guardas, y tu cambio ya forma parte del proyecto.

Nota: Si intentas salir de Design, aplicar un theme diferente o usar Seleccionar para chatear con trabajo sin guardar pendiente, Atoms muestra Unsaved Changes y te pide que guardes o descartes antes de continuar.

Guardar conserva el cambio en tu proyecto. No lo publica en tu sitio en vivo; consulta Publica tus cambios.

Con un elemento seleccionado, Editor visual muestra sus propiedades. La barra de herramientas flotante sobre la selección alterna entre describir un cambio y editarlo directamente.

Consejos:

1. Usa Editor visual para cambios cosméticos y el chat para cambios estructurales como páginas nuevas, funciones nuevas o lógica de backend.
2. Para hacer el mismo cambio en una fila de tarjetas o botones, selecciónalos todos con Ctrl-click o Cmd-click y describe el cambio una sola vez en el chat. Editar cada uno mediante los controles de propiedades significa repetirte.

Reemplaza imágenes con Library

Library aplica una imagen al elemento que has seleccionado, así que empieza eligiendo dónde debe ir la imagen.

1. Selecciona el elemento que quieres cambiar en la vista previa. Hasta que lo hagas, Library muestra Select an element to start visual editing.
2. Abre la pestaña Library y elige una fuente: Image, Generate o Upload.
3. Aplica tu imagen. La forma de hacerlo depende de su origen. Para una imagen integrada, pasa el cursor sobre ella y selecciona Use asset. Para una imagen que hayas generado o subido, selecciona su miniatura final.
4. Revisa la vista previa. La imagen se aplica de inmediato al elemento seleccionado.
5. Selecciona Save en la parte inferior de la vista previa o Discard para deshacerlo.

Resultado esperado: el elemento que elegiste muestra la nueva imagen, y los botones Save y Discard desaparecen una vez que guardas.

La pestaña Library con categorías de imágenes y Popular Images.

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 de retroceso 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 requiere 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 final 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 subidas 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 subes se aplican seleccionando su miniatura en su lugar.

Describe cambios en lugar de hacer clic

Cuando un cambio es más fácil de describir que de hacer clic paso a paso, puedes pedírselo a los agentes. Hay dos lugares para hacerlo, y ambos actúan sobre lo que tengas seleccionado en ese momento.

• La barra de herramientas flotante sobre tu selección. Aparece una pequeña barra de herramientas sobre el elemento que has elegido. Sus dos iconos alternan entre describir un cambio y editar propiedades directamente. Escribe en Ask the Atoms to change… y envíalo.
• La entrada de chat debajo del panel Design. Cuando hay un elemento seleccionado, la entrada muestra una etiqueta Design y el prompt Ask the Atoms team to modify the selected element…, para que los agentes apliquen tu instrucción a ese elemento y no a todo el proyecto.

La barra de herramientas flotante se sitúa sobre tu selección. La etiqueta de la izquierda muestra a qué elemento se aplicará la instrucción.

Describe el resultado, no el mecanismo:

- "Haz que esto sea más calmado: más espacio en blanco, encabezado más pequeño."

- "Haz que el estilo de este botón coincida con el de la página de precios."

Las instrucciones vagas como "haz que se vea mejor" dan resultados impredecibles.

Nota: Hacer clic en una propiedad en Editor visual la cambia de inmediato. Enviar un prompt pide a los agentes que hagan el trabajo, lo que tarda más. Para un cambio simple de color o espaciado, edita la propiedad directamente.

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 theme y tipografía que se ven bien en escritorio a menudo fallan en móvil, así que revisa siempre la versión 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 — ve 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 pretendas admitir.

Recupérate de un problema de vista previa

Si la vista previa parece desactualizada, sigue cargando o muestra errores en rojo, el problema está en la vista previa y no en Design. 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.

Una cosa específica de Design: si parece que tus ediciones han desaparecido, comprueba si las guardaste. Los cambios sin guardar se descartan cuando sales de Design; consulta Guarda tus cambios.

Publica tus cambios

Los cambios de Design permanecen en tu proyecto de trabajo hasta que publicas. 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.