Las Ediciones Visuales te permiten refinar tu proyecto de IA directamente desde la vista previa en vivo después de generado. Puedes hacer clic en texto, seleccionar elementos de la página, actualizar opciones de estilo, o usar una indicación dirigida para cambiar partes específicas de la página.

Es útil cuando tu sitio generado por IA está casi terminado, pero aún necesitas pulir el texto, el espaciado, los colores, botones, imágenes, íconos o el diseño. Los cambios se muestran primero en la vista previa en vivo, y no se aplican al proyecto hasta que los guardes.

📝 Nota: el modelo de IA solo se activa cuando envías una indicación explícita. Los cambios visuales directos hechos con los controles de edición no requieren generación por IA.

Los controles disponibles cambian según el elemento seleccionado:

Paso 1: Abre el Estudio de IA y entra al proyecto que quieres actualizar.

Paso 2: Haz clic en Ediciones Visuales en el área de indicaciones, en la parte inferior izquierda del constructor.

Paso 3: Haz clic en un elemento de la vista previa para empezar a editar.

Haz clic en cualquier elemento de la vista previa para abrir el panel de Ediciones Visuales. Los controles se adaptan automáticamente según lo que hayas seleccionado — texto, botones, imágenes, íconos, contenedores o elementos de diseño. Los controles de color y espaciado aparecen cuando aplican al elemento seleccionado; los colores de tema de tu proyecto aparecen junto a la paleta completa de Tailwind, y hay controles de margen y padding.

La edición en línea es ideal para cambios rápidos de texto. Haz doble clic en un elemento de texto y escribe directamente sobre la página.

Los controles de íconos facilitan reemplazar o redimensionar íconos Lucide sin editar código. Al seleccionar un ícono Lucide, puedes abrir una biblioteca buscable de más de 1,600 íconos y elegir un reemplazo que se aplica al instante sin recargar la página. También puedes redimensionar los íconos seleccionados.

Al seleccionar una imagen, puedes cambiar la URL para reemplazarla, actualizar el texto alternativo, y usar el menú desplegable de Diseño para elegir el resultado visual que quieres.

Selecciona uno o más elementos y describe el cambio que quieres hacer. Para un solo elemento, es útil para cambios como hacer una sección más moderna, mejorar el espaciado dentro de un contenedor, suavizar el estilo de un botón, o hacer que un componente combine mejor con el resto de la página.

Para varios elementos, es útil para aplicar un estilo consistente entre componentes repetidos — como igualar el estilo de botones, alinear el espaciado entre contenedores, actualizar tarjetas o columnas repetidas, o aplicar el mismo color a un grupo de elementos seleccionados.

Las Ediciones Visuales usan un flujo de vista previa primero, para que puedas revisar los cambios antes de aplicarlos al proyecto. Esto ayuda a evitar actualizaciones accidentales y te da espacio para probar distintos estilos o cambios de contenido.

Haz clic en Guardar para aplicar la edición al proyecto. Si sales del modo de edición visual sin guardar, tus cambios se descartarán.

Si una edición afecta el elemento equivocado, crea un estilo no deseado, o no coincide con tu diseño previsto, haz clic en Descartar para eliminar los cambios sin guardar y volver a la versión anterior.