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: 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: 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: 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: Captura detalles esenciales del proyecto en un documento vivo que evoluciona junto con tu aplicación.
- 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: 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 (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».
- 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.
Estilos y tendencias de diseño
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: 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: 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: 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: 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: 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: 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: 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): 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: 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): 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: Un servicio o sistema para almacenar y gestionar datos, como imágenes, videos, documentos y cualquier otro tipo de archivo.
- Bucket: 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: 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: 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.