Lovable es una herramienta que convierte lo que escribes en una aplicación funcional. Tú describes el producto y la IA se encarga del diseño y la estructura. ¿Suena fácil verdad?
La realidad es que la calidad del resultado depende de cómo escribes el prompt. Si es genérico, obtendrás algo genérico. Si es claro y específico, el resultado mejora muchísimo. La diferencia está en dar contexto y dirección. Lovable necesita entender qué estás construyendo, para quién y cómo debería verse y comportarse.
En este artículo vamos a ver cómo escribir mejores prompts y más de 15 ejemplos listos para copiar y adaptar.
Lovable no adivina lo que tienes en la cabeza. Cuando le das contexto, detalles y límites, el resultado cambia por completo. Sigue estos pasos.
Antes de hablar de botones o secciones, explica qué estás construyendo. Qué es el producto, para quién es y qué problema resuelve. Ese contexto hace que Lovable tome mejores decisiones de estructura, tono y jerarquía.
Ejemplo ❌
“Crea una landing page con un hero, secciones de features y un CTA.”
Ejemplo ✅
“Quiero una landing page, la idea es tener un SaaS B2B que ayude a equipos de marketing a automatizar reportes de campañas. El público objetivo son marketers en startups y pymes. El problema es que pierden tiempo haciendo reportes manuales. Además, necesito un hero claro, beneficios, sección de cómo funciona y un CTA principal de ‘Empieza gratis’.”
Si no defines el estilo visual, Lovable va a tomar decisiones por ti. Y a veces acertará, pero muchas veces no será lo que tenías en mente.
No hace falta escribir un manual de diseño. Basta con indicar colores, sensación general, estilo de tipografía y nivel de espaciado. Cuando explicas cómo quieres que se vea y se sienta la interfaz, el resultado mejora mucho.
Ejemplo ❌
“Haz un diseño moderno.”
Ejemplo ✅
“Quiero un diseño minimalista con fondo blanco, mucho espacio en blanco, tipografía sans-serif tipo Inter, botones con borde redondeado medio y color de acento azul #2563EB. Estilo similar al dashboard de Linear, limpio y profesional.”
Si no defines qué pasa cuando alguien hace clic, envía un formulario o comete un error, Lovable lo resolverá a su manera.
Cuando incluyes estados e interacciones en el prompt, la interfaz se siente mucho más real.
Ejemplo
“Añade estado hover en los botones con ligero cambio de color. Muestra un indicador de carga al enviar el formulario con el texto ‘Enviando…’. Si todo va bien, enseña un mensaje de confirmación. Si hay un error, muestra un aviso claro debajo del campo correspondiente.”
Cuando intentas construir toda la app en un solo prompt, el resultado suele ser irregular. Demasiadas pantallas, demasiadas decisiones al mismo tiempo.
Con Lovable funciona mejor ir por partes. Primero una pieza, luego la siguiente. Así vas corrigiendo sobre algo concreto y no sobre un bloque enorme difícil de controlar.
Ejemplo ❌
“Crea toda la app de [nombre del producto] con landing, onboarding, dashboard, configuración, pricing y documentación.”
Ejemplo ✅
“Quiero empezar por la landing principal de [nombre del producto] con hero, beneficios y cómo funciona. Cuando esté cerrada, creamos el dashboard para usuarios registrados.”
Las referencias ahorran muchas explicaciones. Cuando mencionas productos conocidos, le das a Lovable un punto de partida.
Decir “estilo Notion” o “estructura como Figma” transmite en una línea lo que costaría varios párrafos describir.
Ejemplo
“Quiero un dashboard de tareas con estilo similar a Notion, minimalista y con bloques de contenido, pero con una barra lateral más cercana a Linear, con navegación clara e iconos simples.”
Aquí tienes 15 prompts organizados por tipo de interfaz. Están pensados para que los copies en Lovable y sustituyas los textos entre corchetes.
Puedes usarlos tal cual o adaptarlos a tu producto. La idea es que partas de una buena base y no de una página en blanco.
Puedes usarlo para crear una página de aterrizaje de un SaaS B2B o B2C.
“Crea una landing page para [nombre del producto], un SaaS que ayuda a [público objetivo] a [beneficio principal].
Contexto: El problema que resolvemos es [descríbelo en 1–2 frases]. Nuestra propuesta de valor es [frase clara y directa].
Estructura: Hero con titular fuerte y CTA ‘Empieza gratis’, sección de beneficios principales, sección ‘Cómo funciona’ en tres pasos, bloque de integraciones, testimonios breves y sección de pricing simplificada.
Elementos clave: Titular claro orientado al beneficio principal, CTA visible desde el primer scroll, beneficios explicados en tarjetas fáciles de escanear y prueba social que refuerce la credibilidad del producto.
Diseño: Estilo minimalista tipo Linear o Notion, fondo blanco, tipografía sans-serif tipo Inter, mucho espacio en blanco y color de acento [color principal].”
Para vistas internas de producto con gráficos, KPIs y tablas.
“Diseña un dashboard de métricas para [nombre del producto], una herramienta pensada para [público objetivo].
Contexto: El objetivo es que el usuario entienda rápidamente el estado de su negocio sin revisar múltiples pantallas.
Estructura: Barra superior con selector de fechas, tarjetas de KPIs principales, gráfico de evolución y tabla de registros relevantes.
Elementos clave: Métricas como MRR, usuarios activos, churn o las que apliquen al producto, con jerarquía clara.
Diseño: Estética B2B moderna similar a Stripe o ChartMogul, modo claro, colores suaves y estructura limpia.”
Para la primera experiencia de usuario al crear cuenta.
"Crea una pantalla de registro para [nombre del producto].
Contexto: Es la primera interacción del usuario, por lo que debe transmitir confianza y claridad.
Estructura: Formulario con campos básicos, checkbox de términos y explicación breve del beneficio de registrarse.
Elementos clave: Indicador de fortaleza de contraseña, estados de error claros y mensaje de confirmación tras el registro.
Diseño: Estilo limpio, amigable y coherente con el resto del producto.”
Para mostrar planes y convertir visitantes en clientes.
“Diseña una página de pricing para [nombre del producto] con tres planes principales.
Contexto: El objetivo es facilitar la comparación y dirigir al usuario hacia el plan recomendado.
Estructura: Toggle mensual/anual, tarjetas de planes con precio y beneficios, plan destacado visualmente y sección de preguntas frecuentes.
Elementos clave: CTA claro en cada plan y diferenciación visual del plan recomendado.
Diseño: Estilo moderno, claro y orientado a conversión.”
Para hacer cards estéticamente atractivas rápidamente.
“Crea una card de producto para un ecommerce de [tipo de producto].
Contexto: Debe ser visualmente atractiva y facilitar la decisión de compra rápida.
Estructura: Imagen principal, nombre, precio, etiquetas opcionales y botón ‘Añadir al carrito’.
Elementos clave: Estado hover, estado ‘agotado’ y valoración con estrellas si aplica.
Diseño: Estética limpia, con buena jerarquía y foco en la imagen.”
Para aumentar confianza en landings o páginas de venta.
“Diseña una sección de testimonios para la landing de [nombre del producto].
Contexto: El objetivo es generar confianza y reforzar la propuesta de valor.
Estructura: Tres o cuatro tarjetas con foto pequeña, nombre, rol y testimonio breve, además de un titular general de sección.
Elementos clave: Énfasis en credibilidad mediante citas o logos de empresas.
Diseño: Limpio y profesional, con buena legibilidad.”
Para confirmar acciones críticas (eliminar, enviar, publicar).
“Crea un modal de confirmación para una acción importante en [nombre del producto].
Contexto: Se utilizará para confirmar acciones irreversibles como eliminar o publicar.
Estructura: Título claro, texto explicativo breve y dos botones, uno principal de acción y otro secundario de cancelación.
Elementos clave: Diferenciación visual del botón principal y fondo oscurecido detrás.
Diseño: Simple, centrado en claridad y seguridad.”
Para la navegación principal en tu web o app.
“Diseña una navbar responsive para [nombre del producto].
Contexto: Debe facilitar la navegación tanto en desktop como en móvil.
Estructura: En desktop, logo a la izquierda, enlaces centrales y CTA destacado a la derecha. En móvil, menú hamburguesa con panel desplegable.
Elementos clave: Botón principal visible y comportamiento claro en scroll.
Diseño: Limpio, con fondo blanco y ligera sombra.”
Para cerrar tu web con navegación secundaria e info legal.
“Crea un footer completo para la web de [nombre del producto].
Contexto: Debe ofrecer navegación secundaria e información legal sin recargar.
Estructura: Logo y descripción breve, columnas de enlaces, iconos sociales y línea inferior con copyright.
Elementos clave: Organización clara por categorías.
Diseño: Sobrio, con fondo gris claro y tipografía consistente.”
Para listados de items (cursos, productos, proyectos) con filtros.
“Diseña una página de listado para [tipo de item] en [nombre del producto].
Contexto: El usuario necesita encontrar contenido de forma rápida y filtrada.
Estructura: Barra superior con búsqueda y filtros, grid o lista de tarjetas y sistema de paginación.
Elementos clave: Feedback visual cuando hay filtros activos.
Diseño: Estilo SaaS claro y fácil de escanear.”
Para cuando el usuario aterriza en una URL no existente.
“Crea una página 404 para [nombre del producto].
Contexto: Debe informar del error sin generar frustración.
Estructura: Mensaje principal claro, explicación breve y botón para volver a la home con enlaces útiles adicionales.
Elementos clave: Tono amigable y orientado a redirigir.
Diseño: Consistente con la marca, con un pequeño elemento visual.”
Para vistas tipo admin de gestión de registros.
“Diseña una tabla para gestionar [tipo de entidad] en [nombre del producto].
Contexto: Se utilizará en el panel interno para administrar registros.
Estructura: Columnas principales relevantes y columna final de acciones con editar y eliminar.
Elementos clave: Búsqueda, filtro por estado y paginación.
Diseño: Clara, fácil de escanear, con filas alternas ligeramente diferenciadas.”
Para la página de cuenta o perfil de un usuario logueado.
“Crea una página de perfil para [nombre del producto].
Contexto: El usuario debe poder gestionar su información personal y configuración.
Estructura: Secciones de información básica, preferencias y seguridad.
Elementos clave: Estados de guardado correcto y errores de validación.
Diseño: Consistente con el dashboard, limpio y ordenado.”
Para procesos en varios pasos (onboarding, configuración, checkout).
“Diseña un wizard de tres pasos para el onboarding de [nombre del producto].
Contexto: Debe guiar al usuario de forma clara durante el proceso inicial.
Estructura: Paso uno información básica, paso dos configuración inicial y paso tres confirmación y resumen.
Elementos clave: Stepper visual superior y validación antes de avanzar.
Diseño: Claro, progresivo y fácil de seguir.”
Para centralizar artículos, guías y recursos educativos.
“Crea una página de recursos para [nombre del producto].
Contexto: El objetivo es organizar artículos y guías para facilitar el aprendizaje.
Estructura: Hero sencillo, listado de artículos en tarjetas, filtros por categoría y CTA final para suscripción.
Elementos clave: Jerarquía clara de títulos y buena legibilidad.
Diseño: Limpio y centrado en contenido.”
Escribir buenos prompts en Lovable no va de encontrar una frase mágica. Va de tener claro qué estás construyendo, para quién y cómo debería verse y comportarse. Cuando das contexto y detalles, la IA deja de improvisar y empieza a acercarse mucho más a lo que tienes en mente.
Los 15 prompts que has visto son una base. Copia, adapta y ajusta según tu producto. Si quieres aprender a usar Lovable para construir productos reales sin escribir código desde cero, puedes empezar por nuestro curso gratuito en Lovable.
Descubre lo que puedes crear en 7 días, sin saber programar
Cada día, un proyecto que podrás construir sin escribir una sola línea de código, directo a tu bandeja de entrada.
Empieza Gratis
Academia de herramientas no-code y low–code
.svg){kind=icon}
