> ## Documentation Index
> Fetch the complete documentation index at: https://help.chateea.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Ediciones visuales en AI Studio

> Edita textos, imágenes, íconos, colores y espacios directamente en la vista previa de AI Studio.

Las ediciones visuales te permiten pulir un proyecto de AI Studio directamente sobre la vista previa. Haces clic en un texto, un botón o una imagen y lo cambias al momento, sin abrir el editor de código ni escribir una instrucción para cada detalle.

Son ideales cuando el sitio generado ya está casi listo y solo falta ajustar textos, espacios, colores, botones, imágenes, íconos o la disposición. Los cambios se ven primero en la vista previa y no se aplican al proyecto hasta que guardas.

> [!NOTE]
>
> La IA solo se usa cuando envías una instrucción. Los cambios hechos con los controles visuales **no consumen tokens**.

## Ventajas

* **Edición directa** sobre la página, sin código ni IA.
* **Cambios de texto rápidos:** doble clic y escribes.
* **Instrucciones dirigidas:** seleccionas uno o varios elementos y describes el cambio.
* **Sin consumo de tokens** en las ediciones directas.
* **Vista previa antes de guardar.**

## Qué puedes editar

Los controles se adaptan al elemento que seleccionas:

| Elemento | Qué puedes cambiar |
| - | - |
| **Títulos y textos** | Contenido, tipografía, alineación, color y estilo |
| **Botones** | Texto, estilo, tipo, espaciado y colores |
| **Imágenes** | Origen de la imagen, ajuste y texto alternativo |
| **Íconos** | Cambiar el ícono, su tamaño y su estilo |
| **Contenedores y secciones** | Espaciado, bordes, sombras, fondos y disposición |

## Entrar al modo de edición visual

1. Abre **AI Studio** y entra al proyecto.
2. Haz clic en **Ediciones visuales** en el área de instrucciones, abajo a la izquierda del constructor.
3. Haz clic en un elemento de la vista previa para empezar.

## Cómo editar

### Seleccionar para ver los controles

Haz clic en cualquier elemento para abrir el panel de ediciones visuales. Cuando aplica, verás controles de color (con los colores del tema de tu proyecto junto a la paleta completa) y controles de margen y relleno para ajustar el espaciado.

### Editar texto en la página

Haz doble clic en un texto y escribe directamente.

### Cambiar íconos

Al seleccionar un ícono puedes abrir una biblioteca con más de 1.600 íconos, buscar uno y reemplazarlo al instante, sin recargar. También puedes cambiar su tamaño.

### Ajustar imágenes

Al seleccionar una imagen puedes cambiar su URL para reemplazarla, actualizar el texto alternativo y elegir en el menú **Diseño** cómo se acomoda dentro de su espacio.

### Usar instrucciones sobre elementos seleccionados

Selecciona uno o varios elementos y describe el cambio en lenguaje natural:

* **Un elemento:** "Haz esta sección más moderna", "Mejora el espacio dentro de este contenedor", "Suaviza el estilo de este botón".
* **Varios elementos:** unificar el estilo de varios botones, alinear el espaciado entre contenedores, actualizar tarjetas o columnas repetidas, o aplicar el mismo color a un grupo.

## Guardar o descartar

* Haz clic en **Guardar** para aplicar los cambios al proyecto.
* Haz clic en **Descartar** si un cambio afectó al elemento equivocado o no te gustó; vuelves a la versión anterior.

> [!WARNING]
>
> Si sales del modo de edición visual sin guardar, los cambios se pierden.

## Preguntas frecuentes

> **¿Tengo que activar algo para usar las ediciones visuales?**
>
> No. Abre el proyecto y haz clic en **Ediciones visuales** en el área de instrucciones.

> **¿Consumen tokens?**
>
> Las ediciones directas no. Solo consumen uso de IA las instrucciones que envías sobre elementos seleccionados.

> **¿Puedo editar varios elementos a la vez?**
>
> Sí. La selección múltiple sirve para cambios coordinados, como espaciado uniforme o estilos compartidos.

## Artículos relacionados

> **[AI Studio](https://help.chateea.com/docs/ia/ai-studio.md)**
>
> Guía completa del constructor con IA.

> **[Editor de código](https://help.chateea.com/docs/ia/editor-de-codigo-ai-studio.md)**
>
> Para cambios que requieren tocar el código.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.