Diseña y previsualiza

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

Esta guía cubre cómo establecer 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 publicarlo.

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 hayas 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 apariencia anterior después de un cambio de theme. Consulta Si un theme no se ve bien más abajo.

Establece 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 en toda tu app, en lugar de configuraciones de un solo elemento.

Theme se usa mejor durante la etapa de preparación, antes de empezar a crear. Aplicar uno desde el principio hace que todo lo que generen los agentes lo siga desde el inicio.

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 cualquier cosa, muestra No theme applied yet, y el botón + a su lado crea un theme nuevo.
• 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 muestran 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 muestran 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 guardarlos o descartarlos antes de aplicar un theme nuevo.

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 Actualizar en tu theme actual y confirma Do you want to re-apply theme name? Tu proyecto pasará a usar la versión más reciente.

No tienes que actualizar. Si no lo haces, tu proyecto seguirá usando la versión que aplicaste.

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

Crear o editar un theme en Theme Manager

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

Sus ajustes 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 — el 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, campos de entrada, texto de cuerpo y monoespaciado — para que puedas evaluar un cambio de inmediato en lugar de adivinar. Usa el selector 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 avanzar y retroceder entre 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. Asígnale 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 del mismo modo 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 con cambios sin guardar pendientes.

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 cambio 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 apariencia anterior. Este es el problema más común. Un elemento al que se le dio 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 apariencia 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 frecuente y significa que la interfaz de tu proyecto no se creó 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, por lo 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 presionada 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 de None a Small, Medium, Large, XL, 2XL, 3XL y Full.
• Content — el texto del elemento.
• Style — familia tipográfica, grosor, 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, grosor, alineación y color para texto — junto con el control para eliminar y el campo de prompt descrito 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 guardar o descartar 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 hayas 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. Cómo 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 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 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.

Describe cambios en lugar de hacer clic

Cuando un cambio es más fácil de describir que de configurar haciendo clic, 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 hayas 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 se vea más tranquilo: 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 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 nueva del navegador.
• Console — abre el panel de registro cuando algo se vea mal.

Resultado esperado: tus cambios son visibles en cada página y en cada ancho de dispositivo que quieras 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: Refresh, el panel Console, Resolve y cómo reportar un error que persiste.

Hay 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 publiques. Selecciona Publish en la esquina superior derecha o Actualizar 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 fijado a la versión que elegiste, y tus cambios de diseño no aparecerán públicamente hasta que publiques una versión nueva.

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