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.

​

Por qué usar herramientas de diseño

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.

​

Beneficios clave

• 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

​

Casos de uso comunes

• 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

​

Temas

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.

​

Características clave

• 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

​

Edición visual

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

​

Inicio rápido

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.
   Para acceder rápidamente a las ediciones visuales, usa el acceso directo Visual edits en el cuadro de instrucción.

3. Previsualiza y guarda cuando estés conforme con el resultado.

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.