Cómo crear una landing page con IA (Lovable, Bolt o Claude Code)

Hay tres opciones principales para crear una landing page con IA en 2026:

Herramienta	Para quién	Plan gratuito
Lovable (lovable.dev)	Principiantes completos	5 créditos/día (30/mes)
Bolt.new (bolt.new)	Con algo de experiencia técnica	Tokens limitados
Claude Code (claude.ai)	Usuarios de Claude Pro o Max	Requiere plan de pago

Para esta guía usaremos Lovable, porque es la opción más amigable para quienes nunca han programado. Los pasos son muy similares en Bolt.new.

Si prefieres Claude Code, tenemos un tutorial dedicado: De cero a tu primera página web con Claude Code.

1. Ve a https://lovable.dev y aprieta Get started.
2. Regístrate con tu cuenta de Google o con tu email.
3. Elige el plan Free (puedes cambiar después).
4. Verás el editor: un chat a la izquierda y la vista previa de tu página a la derecha.

Lovable te da 5 créditos al día en el plan gratuito, y cada cambio que pides consume uno. Para una landing page simple es más que suficiente para empezar. Confirma los límites actuales en su página oficial.

Este es el paso más importante: cuanto más detallado sea tu prompt, mejor será el resultado.

1. En el chat de Lovable, escribe una descripción completa. Usa este modelo como guía:

Crea una landing page para [tu producto o servicio].
El público objetivo es [describe a tu audiencia].
La página debe tener:
- Título principal: "[escribe tu título aquí]"
- Subtítulo con la propuesta de valor principal
- Sección de 3 beneficios clave
- Sección de testimonios o prueba social
- Botón de llamada a la acción: "[tu CTA]"
Colores: [tus colores o estilo preferido].
Tono: [profesional / amigable / urgente / etc.].

Ejemplo real:

Crea una landing page para un curso en línea de fotografía para principiantes.
El público son adultos de 25 a 45 años sin experiencia técnica.
La página debe tener: título "Aprende a fotografiar lo que amas", subtítulo,
3 beneficios del curso, precios (básico $49 / pro $99) y un botón "Empieza hoy".
Colores oscuros con acento naranja. Tono motivador.

2. Aprieta Enter y observa cómo Lovable construye la página en segundos.

Lovable funciona como una conversación: puedes pedirle cambios en lenguaje natural sin tocar el código.

Ejemplos de instrucciones que puedes dar:

• “Cambia el color del botón principal a verde”
• “Agrega una sección de preguntas frecuentes con 4 preguntas”
• “El título está muy largo, hazlo más corto y directo”
• “Agrega un formulario para capturar correos antes del footer”
• “Haz que la página se vea bien en celular”
• “Agrega una meta descripción de SEO con la frase ‘curso de fotografía para principiantes’”

Cada instrucción consume un crédito. Sé preciso para aprovechar bien los créditos del plan gratuito.

Tip: si quieres cambiar el texto de la página directamente, Lovable permite editar algunos elementos con clic sobre la vista previa.

Cuando tu página esté lista:

1. Aprieta el botón Publish en la esquina superior derecha del editor.
2. Lovable te da un subdominio gratuito del tipo tu-proyecto.lovable.app.
3. Comparte esa URL: tu landing page ya está en internet y cualquiera puede verla.

Para conectar tu propio dominio (ej. miproducto.com), Lovable lo permite en los planes de pago. Otra opción es exportar el código y publicarlo gratis en Vercel, donde también puedes conectar tu dominio sin costo: tenemos el tutorial completo en Publica tu web gratis en Vercel.

Si no sabes por dónde empezar o quieres ahorrar créditos, Lovable ofrece proyectos de ejemplo:

1. En la pantalla inicial de Lovable, busca la sección Examples o Templates.
2. Elige el ejemplo que más se parezca a lo que necesitas.
3. Personalízalo con el chat: cambia textos, colores y secciones.

Partir de un ejemplo te ahorra créditos porque no construyes todo desde cero.

Si quieres explorar más allá de landing pages y crear aplicaciones o proyectos más complejos, ve al tutorial Cómo crear una aplicación con inteligencia artificial.

Problema	Solución
La página no se ve bien en celular	Pídele a Lovable: “Haz el diseño responsive para móvil”
Me quedé sin créditos	Espera hasta el día siguiente (se reinician) o actualiza al plan de pago
El resultado no parece lo que pedí	Sé más específico en el prompt; incluye detalles de colores, secciones y tono
Quiero editar el código directamente	Lovable tiene un modo de edición de código; o exporta a GitHub desde el menú
No encuentro el botón de publicar	El botón Publish está en la esquina superior derecha del editor
El texto de la página está en inglés	Especifica en tu prompt: “Toda la página en español”