> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Personaliza proyectos con herramientas de diseño

> Usa herramientas de diseño para aplicar y personalizar temas, modificar elementos de la interfaz y mantener una marca coherente en todo tu proyecto.

Las **herramientas de diseño** reúnen todo lo que necesitas para personalizar visualmente tu proyecto, desde temas globales hasta ajustes visuales detallados. Puedes gestionar la apariencia general de tu proyecto mediante **Temas** o hacer cambios rápidos y específicos usando **Ediciones visuales**, sin escribir código ni consumir créditos.

Para acceder a las herramientas de diseño, ve a la **Vista de diseño** desde el botón `+` junto a Vista previa.

<img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/images/changelog-design-view-11-26-25.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=08a6483a1839b8ed34bfb420913293df" alt="Changelog Design View 11 26 25 Pn" width="937" height="277" data-path="images/changelog-design-view-11-26-25.png" />

<div id="why-use-design-tools">
  ## Por qué usar herramientas de diseño
</div>

Las herramientas de diseño permiten a todo el mundo —diseñadores, especialistas de marketing y compañeros no técnicos— realizar cambios de diseño de forma visual, mantener la identidad de la marca y trabajar con mayor rapidez.

<div id="key-benefits">
  ### Beneficios clave
</div>

* **Branding coherente:** Aplica temas compartidos que reflejen la identidad de tu marca
* **Iteración más rápida:** Actualiza el diseño y el texto visualmente, sin necesidad de código ni instrucciones
* **Edición accesible:** Usuarios sin conocimientos técnicos pueden hacer cambios de diseño con confianza
* **Vista previa en tiempo real**: Mira cada cambio visual en tiempo real antes de publicar

<div id="common-use-cases">
  ### Casos de uso comunes
</div>

* Diseñadores que mantienen la coherencia de la marca en múltiples proyectos
* Responsables de marketing que lanzan nuevas páginas de campaña sin salirse de las guías de marca
* Product managers que perfeccionan directamente la maquetación y los textos
* Equipos que crean rápidamente prototipos y variantes con estilos visuales compartidos

<div id="themes">
  ## Temas
</div>

Los **temas** definen el sistema de estilos principal de tu proyecto —colores, tipografías, espaciados y radios de borde— y forman la base de la identidad de tu marca.

<div id="key-capabilities">
  ### Características clave
</div>

* **Aplicar:** Elige entre las plantillas prediseñadas de Lovable o aplica un tema personalizado
* **Crear:** Genera un tema a partir de tu proyecto actual
* **Importar:** Sube un archivo CSS personalizado (como `index.css` o `globals.css`) para convertirlo en un tema
* **Personalizar:** Edita colores, tipografía y espaciado directamente en la interfaz
* **Compartir:** Los temas están disponibles para todos los miembros de tu espacio de trabajo
* **Vista previa:** Prueba los cambios en tiempo real antes de aplicarlos

<div id="visual-editing">
  ## Edición visual
</div>

El modo **Edición visual** te permite cambiar tu proyecto visualmente, directamente en la página. Está diseñado para realizar ajustes rápidos e intuitivos con control total sobre el diseño y el espaciado.

### Funcionalidades clave

* **Selecciona varios elementos** para hacer ediciones por lotes manteniendo pulsada la tecla `⌘ Command` (Mac) o `⊞ Win` (Windows).
* **Controles de diseño** para alineación y posicionamiento
* **Ajusta márgenes y relleno (padding)** en cada lado de los contenedores
* **Edita texto, colores y fuentes** directamente desde la barra lateral
* **Formato de texto mejorado** con saltos de línea y estilos en línea
* **Reemplaza imágenes** subiendo archivos o añadiendo URLs de imagen
* **Genera imágenes con IA** editando imágenes con instrucciones

<div id="quick-start">
  ## Inicio rápido
</div>

1. Abre la **vista de diseño** desde el botón `+` junto a Vista previa.
2. Alterna entre las pestañas **Themes** y **Visual edit** para trabajar en el diseño de tu proyecto en el panel izquierdo.

   * Ve a **Themes** para seleccionar un tema o crear el tuyo propio y aplicarlo al proyecto.
   * Ve a **Visual edits** para seleccionar elementos en la vista previa en tiempo real y editarlos visualmente.

   <Tip>
     Para acceder rápidamente a las ediciones visuales, usa el acceso directo **Visual edits** en el cuadro de instrucción.
   </Tip>
3. **Previsualiza y guarda** cuando estés conforme con el resultado.

<Warning>
  Personalizar visualmente tu proyecto no consume créditos, excepto cuando:

  * Realizas cambios en elementos dinámicos.
  * Le das una instrucción a Lovable Agent para modificar el diseño. Usa las herramientas de diseño en su lugar.
</Warning>