> ## 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. # Glosario > Aprende los términos clave de desarrollo que necesitas para desenvolverte y usar Lovable de forma eficaz.
## Conceptos generales
* **AI (Inteligencia Artificial):** La simulación de procesos de inteligencia humana por parte de máquinas, especialmente sistemas informáticos, que permite realizar tareas como el aprendizaje, el razonamiento y la resolución de problemas.​ * [**Instrucción**](https://docs.lovable.dev/tips-tricks/prompting)**:** Un fragmento de texto o una entrada que guía a los modelos de IA para generar resultados o realizar ciertas tareas.​ Forma parte de la funcionalidad central de Lovable y, mediante instrucciones, puedes crear o modificar un componente o elemento específico en tu aplicación.
## Términos específicos de Lovable
* [**Chat Mode**](https://docs.lovable.dev/features/labs#chat-mode)**:** Lovable va más allá de solo generar código; se convierte en un asistente interactivo que te guía en cada fase del desarrollo. Ayuda a las personas fundadoras a pensar de forma crítica, planificar eficazmente, depurar con inteligencia y lanzar con confianza. * **Edit Mode**: La acción de realizar cambios o modificaciones en el contenido o el código.​ * [**Edit**](https://docs.lovable.dev/features/precision-edit#visual-edits)**:** Una herramienta que permite desarrollo con IA mediante controles visuales nativos de Tailwind para facilitar el refinamiento. * **History:** El sistema para rastrear y gestionar los cambios en tu aplicación y tu código a lo largo del tiempo.​ * [**Knowledge**](https://docs.lovable.dev/features/precision-edit#knowledge-files)**:** Captura detalles esenciales del proyecto en un documento vivo que evoluciona junto con tu aplicación. * [**Labs**](https://docs.lovable.dev/features/labs)**:** Funciones experimentales dentro de Lovable dedicadas a probar y mostrar funcionalidades nuevas, innovadoras o en desarrollo.​ Estas pueden modificarse o eliminarse en cualquier momento. * **Remix:** Puedes remezclar un proyecto público existente o uno de los tuyos. La creación de un remix te permite reutilizar el estado actual de un proyecto como punto de partida y seguir construyendo sobre él. Es una excelente forma de explorar nuevas ideas, hacer ajustes o iterar con diferentes cambios mientras conservas la versión original. Ten en cuenta que no es posible remezclar proyectos cuando Supabase está conectado. * **Preview:** Permite a los usuarios ver o probar contenido en vivo o funcionalidades antes de que se finalicen o se publiquen, de forma interactiva. * **Diff:** Una comparación que muestra las diferencias entre dos versiones de un archivo o de código.​ * **/index:** Se refiere a la página principal o predeterminada de un sitio web o una aplicación, a menudo llamada "index.html" o "index.js". * [**Lovable API - Build with URL**](https://docs.lovable.dev/integrations/build-with-url)**:** La función Lovable API - Build with URL te permite crear aplicaciones de forma programática pasando instrucciones e imágenes mediante parámetros de URL. Esto permite una integración fluida con sitios web, herramientas internas o flujos de trabajo de automatización, de modo que las personas usuarias puedan generar aplicaciones de Lovable con un solo clic.
## Conceptos de producto y desarrollo
### Gestión de producto y estrategia
* **MVP (Minimum Viable Product)** – Una versión de un producto con las funciones mínimas necesarias para satisfacer a los primeros usuarios y validar una idea antes del desarrollo a gran escala. * **Roadmap** – Un plan estratégico de alto nivel que describe la visión, la dirección y las funciones previstas de un producto a lo largo del tiempo. * **Feature Request** – Una sugerencia formal o informal de usuarios o partes interesadas para una nueva funcionalidad en un producto. * **User Story** – Una descripción breve y sencilla de una funcionalidad o requisito escrita desde la perspectiva de un usuario final. * **User Journey:** La serie de pasos que sigue un usuario para lograr un objetivo específico dentro de un producto o servicio.​ * **Persona:** Una representación ficticia de un usuario objetivo, basada en investigación, que sirve para guiar decisiones de diseño y desarrollo.​
### Conceptos de ingeniería
* **PRD (Product Requirements Document):** Un documento detallado que describe los objetivos, las funcionalidades y las especificaciones de un producto para guiar su desarrollo.​ * [**API**](https://lovable.dev/blog/2025-01-28-the-power-of-apis) **(Application Programming Interface):** Una manera de que distintos servicios se comuniquen entre sí. Piensa en ella como un protocolo que indica qué tipo de información puedes obtener o enviar entre sistemas. Los tipos más comunes son las APIs REST, que usan muchos sitios, y las APIs GraphQL, que ofrecen una forma más flexible de consultar datos. * **Refactor:** El proceso de reestructurar código existente sin cambiar su comportamiento externo para mejorar su legibilidad, mantenibilidad o rendimiento. * **GitHub:** Una plataforma web para control de versiones y desarrollo de software colaborativo usando Git.​
### Datos y analítica
* **Pruebas A/B** – Método para comparar dos versiones de una página web o funcionalidad para determinar cuál ofrece un mejor rendimiento según el comportamiento de los usuarios. * **Tasa de conversión** – Porcentaje de usuarios que completan una acción deseada, como registrarse o realizar una compra. * **Tasa de abandono** – Porcentaje de usuarios que dejan de usar un producto durante un período determinado. * **Tasa de retención** – Porcentaje de usuarios que continúan usando un producto a lo largo del tiempo. * **Seguimiento de eventos** – Monitoreo de acciones específicas de los usuarios (por ejemplo, clics en botones, envío de formularios) para obtener información sobre su comportamiento y nivel de interacción.
## Guía práctica de desarrollo de UI/UX y frontend
### Desarrollo frontend
* **Frontend:** La parte de una aplicación de software con la que los usuarios interactúan directamente, que abarca la interfaz y la experiencia de usuario.​ * **React:** Una biblioteca de JavaScript desarrollada por Facebook para crear interfaces de usuario, en particular aplicaciones de una sola página.​ * **Degradado:** Una transición gradual entre dos o más colores o tonos en un diseño. * **Tailwind CSS**: Framework CSS de utilidades (utility‑first) y de código abierto que ofrece un conjunto completo de clases predefinidas, lo que permite a las personas desarrolladoras crear diseños personalizados directamente en su HTML aplicando estas utilidades a los elementos. * **Sistemas de diseño:** Colección de componentes reutilizables, guías y estándares que garantizan coherencia y consistencia en el diseño en todo un producto o marca.
### Conceptos de diseño UI/UX
* **Accent Color:** Un tono distintivo usado para resaltar elementos clave en un diseño, que a menudo se alinea con o complementa el color principal de la marca para aumentar el atractivo visual.​ * **Theme:** Un conjunto coherente de decisiones de diseño, incluidas las paletas de colores, las tipografías y las estructuras de página, que definen la estética general y la experiencia de usuario de una aplicación o sitio web.​ * **Responsive Design:** Un enfoque de diseño web que garantiza que el contenido se adapte de forma fluida a distintos tamaños y orientaciones de dispositivo, ofreciendo una experiencia de usuario óptima. * **Above the Fold:** La parte de una página web visible para los usuarios sin necesidad de desplazarse, crucial para captar la atención y comunicar de inmediato la información esencial. ​ * **CTA (Call to Action):** Una llamada a la acción, normalmente en forma de botón o enlace, que anima a los usuarios a realizar una acción específica, como «Sign Up» o «Learn More». ​
### Estructura de página y navegación
* **Encabezados (títulos):** Elementos de texto que introducen y organizan secciones de contenido, normalmente con distintos niveles (por ejemplo, H1, H2) para establecer una jerarquía de contenido clara.​ * **Footer (pie de página):** La sección inferior de una página web, que normalmente contiene información complementaria como datos de contacto, enlaces de navegación y avisos legales. ​ * **Breadcrumb (ruta de navegación):** Una ayuda de navegación que muestra la ubicación actual del usuario dentro de la jerarquía de un sitio, a menudo representada como una lista horizontal de enlaces. ​ * **Favicon** – Un icono pequeño que se muestra en la pestaña del navegador, en los marcadores y en los resultados de búsqueda, y que normalmente representa una marca o un sitio web. * **Meta Title (title tag)** – El título de una página web que aparece en los resultados de los motores de búsqueda y en las pestañas del navegador, influyendo en el SEO y en las tasas de clics de los usuarios. * **Meta Description** – Un breve resumen del contenido de una página web que se muestra en los resultados de los motores de búsqueda y que está pensado para mejorar la visibilidad y la participación de los usuarios. * **Canonical URL** – Una etiqueta utilizada para especificar la versión preferida de una página web, lo que ayuda a evitar problemas de contenido duplicado en la indexación de los motores de búsqueda. * **URL Slug** – La parte de una URL que identifica una página concreta en un formato legible (por ejemplo, `example.com/product-name`). * **Sitemap** – Un archivo estructurado (XML o HTML) que proporciona una lista de las páginas de un sitio web y ayuda a que los motores de búsqueda las indexen de forma eficiente. * **Navigation Bar (nav bar)** – Un menú horizontal o vertical que proporciona enlaces a secciones esenciales de un sitio web para facilitar la navegación. * **Skip Links** – Enlaces ocultos que permiten a los usuarios omitir contenido repetitivo y navegar directamente al contenido principal, mejorando la accesibilidad. * **Paginación** – Un método para dividir el contenido en varias páginas, utilizado habitualmente en blogs, resultados de búsqueda y listados de productos para mejorar la experiencia del usuario. * **Anchor Link** – Un hipervínculo que dirige a los usuarios a una sección específica dentro de la misma página en lugar de cargar una página nueva. * **Página 404** – Una página de error personalizada que se muestra cuando un usuario intenta acceder a una URL que no existe y que lo guía de vuelta a contenido relevante.
### **Elementos de notificaciones y comentarios**
* **Toast:** Una notificación breve y no intrusiva que aparece temporalmente para informar a los usuarios del resultado de una acción o proporcionar información sencilla. ​ * **Snackbar** – Similar a un toast, pero que normalmente se muestra en la parte inferior de la pantalla con acciones opcionales (por ejemplo, "Deshacer" en un elemento eliminado). * **Tooltip** – Un pequeño cuadro emergente que proporciona información adicional al pasar el cursor por encima de un elemento o al enfocarlo. * **Badge** – Un pequeño indicador visual, que a menudo se usa en íconos o botones para mostrar notificaciones, recuentos o cambios de estado. * **Loading Spinner (Loader)** – Un indicador visual que representa un proceso en curso, como cargar una página o enviar un formulario. * **Progress Bar** – Una barra horizontal que indica el porcentaje de finalización de una tarea o proceso. * **Skeleton Loader** – Una interfaz de marcador de posición que imita el diseño del contenido final mientras se carga, lo que mejora la percepción del rendimiento.
### Superposiciones y ventanas emergentes
* **Popover:** Una superposición temporal que muestra información u opciones adicionales relacionadas con un elemento específico de la interfaz, que normalmente aparece tras una interacción del usuario. ​ * **Dialog (Modal):** Una ventana que aparece delante del contenido principal para captar la atención del usuario y que a menudo requiere una acción antes de volver a la interfaz principal. * **Drawer (Sidebar Panel)** – Un panel que se desliza desde un lateral de la pantalla para mostrar opciones de navegación o de configuración sin interrumpir el contenido principal. * **Lightbox** – Una ventana modal que muestra imágenes o contenido multimedia en una vista ampliada, atenuando el fondo para mantener el foco. * **Alert Box** – Un cuadro de mensaje generado por el sistema o por la aplicación que informa a los usuarios de información importante, como errores o advertencias. * **Button:** Un elemento en el que se puede hacer clic y que inicia una acción o evento, como enviar un formulario o abrir un cuadro de diálogo.​ * **Switch (Toggle):** Un control de alternancia que permite a los usuarios cambiar entre dos estados, como encendido y apagado, a menudo similar a un interruptor físico. ​ * **Tabs** – Un componente que organiza el contenido en vistas separadas dentro de una sola interfaz, lo que permite a los usuarios cambiar entre secciones sin salir de la página. * **Stepper (Wizard)** – Un componente usado para procesos de varios pasos, que muestra a los usuarios en qué paso se encuentran y los guía hasta completar el flujo. * **Pagination** – Un patrón de interfaz que divide el contenido en páginas, utilizado a menudo para resultados de búsqueda o aplicaciones con gran cantidad de contenido. * **Breadcrumb** – Una ayuda de navegación que muestra la ubicación actual del usuario dentro de la jerarquía de un sitio, a menudo representada como una lista horizontal de enlaces. * **Accordion** – Una sección plegable que se expande o contrae para mostrar u ocultar contenido de forma dinámica. * **Dropdown Menu** – Una lista de opciones que aparece cuando el usuario hace clic o pasa el cursor sobre un botón o campo, que se usa a menudo para navegación o selección.
### Formularios y elementos de entrada
* **Form:** Una colección estructurada de campos de entrada que permite a los usuarios enviar datos, como información de contacto o consultas de búsqueda.​ * **Radio Group:** Un conjunto de botones de opción relacionados que permite a los usuarios seleccionar solo una opción entre múltiples alternativas. * **Checkbox:** Una casilla interactiva que los usuarios pueden marcar o desmarcar para seleccionar o deseleccionar una opción, lo que permite múltiples selecciones dentro de un conjunto.​ * **Text Field (Input Field)** – Un elemento básico de la interfaz donde los usuarios pueden introducir texto, como en barras de búsqueda, formularios de inicio de sesión o comentarios. * **Text Area** – Un campo de entrada más grande diseñado para texto multilínea, que se usa habitualmente para mensajes o formularios de comentarios. * **Select (Dropdown Select Box)** – Un elemento de la interfaz que permite a los usuarios elegir una opción de una lista predefinida, normalmente presentada como un menú desplegable. * **Date Picker** – Un elemento de la interfaz que permite a los usuarios seleccionar una fecha en un calendario en lugar de escribirla manualmente. * **Slider (Range Selector)** – Un control que permite a los usuarios establecer un valor dentro de un rango desplazando un control a lo largo de una barra. * **File Upload Field** – Un componente que permite a los usuarios seleccionar y subir archivos desde su dispositivo. * **Autocomplete (Typeahead Search)** – Un campo de texto que sugiere dinámicamente resultados coincidentes a medida que los usuarios escriben, mejorando la usabilidad en las búsquedas. Puedes usar estos términos en cualquiera de tus instrucciones para describir un estilo específico que intentas conseguir. * **Neobrutalismo:** Una tendencia de diseño web caracterizada por elementos crudos y sin pulir, tipografía llamativa y alto contraste, inspirada en la arquitectura brutalista de mediados del siglo XX. ​ * **Retro:** Diseño que incorpora estilos, motivos y elementos de décadas pasadas, evocando nostalgia y una estética vintage.​ * **Hacker:** Una estética que refleja la cultura hazlo tú mismo (DIY) y de código abierto, a menudo con tipografías monoespaciadas, fondos oscuros e interfaces inspiradas en terminales.​ * **Glass (Glassmorphism):** Un estilo de diseño que utiliza elementos translúcidos con efecto de vidrio esmerilado, con sombras y bordes sutiles para crear profundidad.​ * **Nudy:** Un enfoque de diseño minimalista que utiliza paletas de colores nude o neutros para crear una estética suave y discreta.​
### Recursos de diseño y assets
* [**21st.dev:**](https://21st.dev/) Un registro comunitario de código abierto que ofrece componentes de UI de React minimalistas, modernos y reutilizables, basados en Tailwind CSS y Radix UI, diseñados para ayudar a ingenieros de diseño a lanzar interfaces de usuario pulidas de forma más eficiente. * [**Dribble:**](https://dribbble.com/) Una comunidad en línea líder donde diseñadores y profesionales creativos muestran su trabajo, descubren inspiración de diseño y se conectan con posibles clientes o colaboradores. * [**Noun Project:**](https://thenounproject.com/) Una plataforma que proporciona una amplia colección de iconos y fotos de stock gratuitos, lo que permite a los usuarios acceder a recursos visuales para diversos proyectos. * [SVG Repo:](https://www.svgrepo.com/) Una amplia biblioteca con más de 500.000 vectores e iconos SVG con licencias abiertas, que permite a los usuarios buscar, explorar, editar y descargar gráficos adecuados para todo tipo de proyectos. * [Google Fonts:](https://fonts.google.com/) Una biblioteca gratuita de fuentes optimizadas para la web, que ofrece a diseñadores y desarrolladores una amplia selección de opciones tipográficas para mejorar sus proyectos. * [Typewolf:](https://www.typewolf.com/) Un recurso que ayuda a los diseñadores a seleccionar las combinaciones de fuentes perfectas para sus proyectos mostrando tipografías populares y ofreciendo listas de fuentes cuidadosamente seleccionadas.
## Desarrollo de backend y bases de datos
### Fundamentos de backend
* **Backend:** La infraestructura del lado del servidor de una aplicación que se encarga del procesamiento de datos, el almacenamiento y la lógica de negocio.​ * [**Supabase**](https://docs.lovable.dev/integrations/supabase)**:** Una plataforma de backend como servicio de código abierto que proporciona una base de datos Postgres, autenticación, API instantáneas y funcionalidades en tiempo real. * **Webhooks** – Callbacks HTTP basados en eventos que notifican a aplicaciones externas cuando ocurren acciones específicas.
### Gestión de bases de datos y consultas
* **CRUD (Create, Read, Update, Delete):** Las cuatro operaciones básicas que se realizan sobre los datos en una base de datos o aplicación.​ * [**SQL (Structured Query Language)**](https://supabase.com/docs/guides/database/overview)**:** Un lenguaje de programación específico de dominio diseñado para gestionar y manipular bases de datos relacionales, que permite realizar tareas como consultar, actualizar y organizar datos. * **PostgreSQL** – Una potente base de datos relacional de código abierto conocida por su escalabilidad, extensibilidad y cumplimiento de las propiedades ACID.
### Conceptos específicos de Supabase
* [**Edge Function**](https://supabase.com/docs/guides/functions)**:** Funciones TypeScript del lado del servidor, distribuidas globalmente en el Edge, cerca de tus usuarios. Se pueden usar para recibir webhooks o para integrar tu proyecto de Supabase con terceros como Stripe, Anthropic o Resend. * [**RLS (Row-Level Security)**](https://supabase.com/docs/guides/database/postgres/row-level-security)**:** Una característica de las bases de datos que permite controlar el acceso a filas específicas de una tabla según los roles o atributos de los usuarios; básicamente permite definir reglas de autorización granulares y escribir reglas SQL complejas que se adapten a las necesidades únicas de tu negocio. * [**Storage**](https://supabase.com/docs/guides/storage)**:** Un servicio o sistema para almacenar y gestionar datos, como imágenes, videos, documentos y cualquier otro tipo de archivo. * [**Bucket**](https://supabase.com/docs/guides/storage/buckets/fundamentals)**:** En Supabase Storage, un bucket es un contenedor independiente que organiza archivos y carpetas, determina el modelo de acceso (público o privado) y define restricciones de subida, como el tamaño máximo de archivo y los tipos de contenido permitidos. * [**Endpoint**](https://supabase.com/docs/guides/api)**:** En el contexto de Supabase, un endpoint es una URL específica que permite a los clientes interactuar con la base de datos mediante llamadas a una API RESTful, lo que habilita operaciones como crear, leer, actualizar o eliminar datos. * [**Authentication Provider:**](https://supabase.com/docs/guides/auth) Entidad o servicio que verifica las credenciales de los usuarios y permite el acceso seguro a aplicaciones o sistemas. En el contexto de Supabase, los proveedores de autenticación incluyen diversos métodos como inicios de sesión con contraseña, enlaces mágicos, contraseñas de un solo uso (OTP), inicios de sesión con redes sociales e integraciones de Single Sign‑On (SSO), lo que facilita una autenticación de usuarios flexible y segura.
### Seguridad y autenticación
* **OAuth** – Un protocolo de autenticación ampliamente utilizado que permite a los usuarios iniciar sesión en aplicaciones usando servicios de terceros como Google, Facebook o GitHub. * **Autenticación de dos factores (2FA)** – Una medida de seguridad que requiere que los usuarios proporcionen dos formas de verificación antes de acceder a una cuenta. * **CORS (Cross-Origin Resource Sharing)** – Una política de seguridad que controla qué sitios web o aplicaciones pueden acceder a recursos de un servidor.