​
Conceptos clave

  • IA (Inteligencia Artificial): Tecnología que permite a las máquinas simular la inteligencia humana, permitiéndoles aprender, razonar y resolver problemas.
  • Prompt: Un comando basado en texto utilizado para instruir a un modelo de IA. Dentro de Lumi, los prompts son la herramienta fundamental que usarás para crear y modificar cada componente de tu aplicación.

​
Términos específicos de Lumi

  • Modo Discusión: Más que un generador de código, Lumi actúa como un socio de desarrollo interactivo. Te guía a través de la planificación, la depuración y el lanzamiento, ayudándote a construir con confianza.
  • Modo Edición: El entorno para realizar cambios directos en el código y el contenido de tu aplicación.
  • Editar: Una herramienta impulsada por IA con controles visuales nativos de Tailwind para un refinamiento preciso e intuitivo.
  • Remix: Duplica cualquier proyecto para usarlo como un nuevo punto de partida. Hacer un remix te permite experimentar con cambios y explorar ideas mientras conservas la versión original.
  • Vista previa: Una vista interactiva en vivo para probar características y contenido antes de publicar tus cambios.

​
Producto y desarrollo

​
Gestión de productos y estrategia

  • MVP (Producto Mínimo Viable): La versión más simple de un producto con las características justas para atraer a los primeros usuarios y validar la idea principal.
  • Roadmap: Un plan de alto nivel que describe la visión, dirección y próximas características de un producto a lo largo del tiempo.
  • Solicitud de característica: Una sugerencia de usuarios o partes interesadas para una nueva capacidad o mejora.
  • Historia de usuario: Una descripción breve y simple de una característica desde la perspectiva del usuario final.
  • Recorrido del usuario: El camino que un usuario sigue para lograr un objetivo dentro de tu producto.
  • Persona: Un perfil ficticio y detallado de un usuario objetivo, creado a partir de la investigación para guiar las decisiones de diseño y desarrollo.

​
Conceptos de ingeniería

  • PRD (Documento de Requisitos del Producto): Un documento que detalla el propósito, las características y las especificaciones técnicas de un producto para guiar al equipo de desarrollo.
  • API (Interfaz de Programación de Aplicaciones): Un conjunto de reglas que permite que diferentes aplicaciones de software se comuniquen e intercambien datos. Los tipos comunes incluyen las API REST y GraphQL.
  • Refactorizar: El proceso de reestructurar el código para mejorar su calidad y mantenibilidad sin cambiar su funcionalidad.
  • GitHub: Una plataforma popular para el control de versiones y el desarrollo de software colaborativo.

​
Datos y analítica

  • Pruebas A/B: Comparar dos versiones de una página web o característica para ver cuál funciona mejor.
  • Tasa de conversión: El porcentaje de usuarios que completan un objetivo específico, como registrarse o realizar una compra.
  • Tasa de cancelación (Churn Rate): El porcentaje de usuarios que dejan de usar tu producto durante un período específico.
  • Tasa de retención: El porcentaje de usuarios que continúan usando tu producto a lo largo del tiempo.
  • Seguimiento de eventos: Monitorear acciones específicas del usuario (como clics o envíos de formularios) para comprender la interacción.

​
UI/UX y desarrollo frontend

​
Desarrollo frontend

  • Frontend: La parte de una aplicación que los usuarios ven e con la que interactúan, incluyendo la interfaz de usuario y la experiencia general.
  • React: Una popular biblioteca de JavaScript para construir interfaces de usuario dinámicas, especialmente para aplicaciones de una sola página.
  • Gradiente: Una transición suave entre dos o más colores.
  • Tailwind CSS: Un framework de CSS “utility-first” para construir rápidamente diseños personalizados directamente en tu HTML.
  • Sistema de diseño: Una colección estandarizada de componentes reutilizables y directrices que asegura la consistencia del diseño en todo un producto.

​
Conceptos de diseño UI/UX

  • Color de acento: Un color de contraste utilizado para resaltar elementos clave como botones o enlaces.
  • Tema: La apariencia general de una aplicación, definida por su esquema de colores, tipografía y diseño.
  • Diseño responsivo: Un enfoque que asegura que tu aplicación se vea y funcione bien en cualquier dispositivo, desde ordenadores de escritorio hasta teléfonos móviles.
  • Above the Fold: El contenido visible en una página web sin necesidad de desplazarse. Es un espacio privilegiado para información importante.
  • CTA (Llamada a la acción): Un aviso, como un botón o enlace, que anima a los usuarios a realizar una acción específica (p. ej., “Registrarse”, “Comprar ahora”).

​
Estructura de la página y navegación

  • Encabezados: Títulos (H1, H2, etc.) que estructuran el contenido y establecen una jerarquía visual clara.
  • Pie de página (Footer): La sección en la parte inferior de una página web, que generalmente contiene enlaces, información de contacto y avisos legales.
  • Migas de pan (Breadcrumb): Un rastro de navegación que muestra la ubicación actual de un usuario en un sitio (p. ej., Inicio > Productos > Portátiles).
  • Favicon: El pequeño icono que representa tu sitio web en la pestaña de un navegador o en los marcadores.
  • Meta Title: El título de la página que se muestra en los resultados de los motores de búsqueda y en las pestañas del navegador, crucial para el SEO.
  • Meta Description: El breve resumen de una página web que se muestra en los resultados de búsqueda para atraer clics.
  • URL canónica: Una etiqueta que indica a los motores de búsqueda la versión preferida de una página para evitar problemas de contenido duplicado.
  • URL Slug: La parte de una URL fácil de usar que identifica una página específica (p. ej., /quienes-somos).
  • Sitemap: Un archivo que lista todas las páginas de tu sitio web para ayudar a los motores de búsqueda a indexarlas eficazmente.
  • Barra de navegación (Nav Bar): El menú principal que proporciona enlaces a las secciones clave de tu sitio web.
  • Enlaces de omisión (Skip Links): Enlaces de accesibilidad que permiten a los usuarios omitir la navegación y saltar directamente al contenido principal.
  • Paginación: Un sistema para dividir largas listas de contenido en páginas separadas.
  • Enlace de anclaje: Un enlace que desplaza al usuario a una sección específica en la misma página.
  • Página 404: Una página de error personalizada que se muestra cuando un usuario intenta acceder a una URL que no existe.

​
Notificaciones y feedback

  • Toast: Una pequeña notificación temporal que proporciona una breve retroalimentación sobre una acción.
  • Snackbar: Similar a un toast, pero a menudo aparece en la parte inferior de la pantalla y puede incluir un botón de acción (p. ej., “Deshacer”).
  • Tooltip: Un cuadro emergente con información adicional que aparece al pasar el cursor sobre un elemento.
  • Insignia (Badge): Un pequeño marcador visual en un icono o botón para indicar un recuento, estado o notificación.
  • Spinner de carga: Un icono animado que indica que un proceso se está ejecutando en segundo plano.
  • Barra de progreso: Una barra visual que muestra el progreso de finalización de una tarea.
  • Skeleton Loader: Una interfaz de marcador de posición que imita el diseño del contenido final, mejorando la percepción de la velocidad de carga.

​
Superposiciones y pop-ups

  • Popover: Una superposición que proporciona contexto adicional u opciones relacionadas con un elemento específico.
  • Diálogo (Modal): Una ventana que aparece sobre el contenido principal y requiere la interacción del usuario para ser cerrada.
  • Panel lateral (Drawer/Sidebar): Un panel que se desliza desde un lado, que generalmente contiene navegación o configuraciones.
  • Lightbox: Una ventana modal que muestra medios como imágenes en una vista ampliada y enfocada.
  • Cuadro de alerta: Un mensaje del sistema que informa a los usuarios sobre información crítica, errores o advertencias.
  • Botón: Un elemento en el que se puede hacer clic y que desencadena una acción.
  • Interruptor (Switch/Toggle): Un control que permite a los usuarios cambiar entre dos estados, como encendido y apagado.
  • Pestañas (Tabs): Un componente que organiza el contenido en diferentes vistas entre las que un usuario puede cambiar.
  • Asistente paso a paso (Stepper/Wizard): Un proceso guiado de varios pasos que muestra a los usuarios su progreso.
  • Acordeón: Una serie de paneles plegables utilizados para organizar y revelar contenido.
  • Menú desplegable: Una lista de opciones que aparece cuando un usuario interactúa con un botón o campo.

​
Formularios y entradas

  • Formulario: Un conjunto de campos para recopilar datos del usuario, como un formulario de registro o de contacto.
  • Grupo de botones de radio: Un conjunto de opciones donde el usuario puede seleccionar solo una.
  • Casilla de verificación (Checkbox): Un control que permite a los usuarios seleccionar una o más opciones de una lista.
  • Campo de texto: Un cuadro de entrada estándar para la introducción de texto de una sola línea.
  • Área de texto: Un cuadro de entrada más grande para texto de varias líneas, como comentarios o mensajes.
  • Selector (Select/Dropdown): Una lista desplegable para elegir una opción de un conjunto predefinido.
  • Selector de fecha: Una interfaz de calendario que permite a los usuarios seleccionar una fecha fácilmente.
  • Deslizador (Slider): Un control para seleccionar un valor de un rango continuo.
  • Carga de archivos: Un componente que permite a los usuarios subir archivos desde su dispositivo.
  • Autocompletar: Un campo de entrada que sugiere resultados a medida que el usuario escribe.

​
Estilos y tendencias de diseño

Usa estos términos en tus prompts para definir la estética que quieres lograr.
  • Neobrutalismo: Un estilo de diseño crudo y de alto contraste con tipografía audaz y elementos sin refinar.
  • Retro: Un diseño que evoca nostalgia utilizando estilos de décadas pasadas.
  • Hacker: Una estética inspirada en las interfaces de terminal, con fondos oscuros y fuentes monoespaciadas.
  • Glassmorphism: Un estilo que utiliza capas translúcidas similares al vidrio esmerilado para crear profundidad.
  • Nudy: Un enfoque minimalista que utiliza paletas de colores suaves y neutros para una apariencia discreta.

​
Desarrollo backend y bases de datos

​
Fundamentos del backend

  • Backend: El lado del servidor de una aplicación que maneja datos, lógica y operaciones principales.
  • Webhooks: Mensajes automatizados enviados desde aplicaciones cuando algo sucede, permitiendo el intercambio de datos en tiempo real.

​
Gestión de bases de datos

  • CRUD (Crear, Leer, Actualizar, Borrar): Las cuatro operaciones fundamentales para la gestión de datos.
  • SQL (Lenguaje de Consulta Estructurado): El lenguaje estándar para gestionar y consultar datos en bases de datos relacionales.
  • PostgreSQL: Una potente base de datos relacional de código abierto conocida por su fiabilidad y características avanzadas.

​
Seguridad y autenticación

  • OAuth: Un estándar de autenticación que permite a los usuarios iniciar sesión con cuentas de terceros como Google o GitHub.
  • Autenticación de dos factores (2FA): Una capa de seguridad que requiere que los usuarios proporcionen dos formas de identificación para iniciar sesión.
  • CORS (Intercambio de Recursos de Origen Cruzado): Un mecanismo de seguridad que controla cómo se puede acceder a los recursos de tu servidor desde otros dominios.