TutorialesTutorials · PrincipianteBeginner
Cómo crear una landing page con IA (Lovable, Bolt o Claude Code)How to create a landing page with AI (Lovable, Bolt, or Claude Code)
Guía paso a paso para crear una landing page con inteligencia artificial usando Lovable, Bolt.new o Claude Code: desde la idea hasta publicarla en minutos, sin programar.Step-by-step guide to create a landing page with artificial intelligence using Lovable, Bolt.new, or Claude Code: from idea to published in minutes, no coding needed.
- Lovable
- Bolt.new
- Claude Code
Cómo crear una landing page con IA (Lovable, Bolt o Claude Code): en esta guía vas a construir una página web completa desde una descripción en texto, sin tocar código. Lo que antes tomaba días ahora toma minutos. Herramientas como Lovable o Bolt.new generan el HTML, el CSS y hasta el diseño responsive solo con tu descripción en lenguaje natural.
Toca cada paso para abrirlo y seguirlo.
How to create a landing page with AI (Lovable, Bolt, or Claude Code): in this guide you’ll build a complete web page from a text description, without touching code. What used to take days now takes minutes. Tools like Lovable or Bolt.new generate the HTML, CSS, and even the responsive design from your description in plain language.
Tap each step to open and follow it.
Antes de empezar: ten clara la información de tu landing page: para qué es, a quién va dirigida y cuál es el botón o llamada a la acción principal. Cuanto más específico sea tu prompt, mejor será el resultado.Before you start: have your landing page information ready: what it’s for, who it’s aimed at, and what the main button or call to action is. The more specific your prompt, the better the result.
1 Elige tu herramientaChoose your tool
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.
There are three main options for creating a landing page with AI in 2026:
| Tool | For whom | Free plan |
|---|---|---|
| Lovable (lovable.dev) | Complete beginners | 5 credits/day (30/mo) |
| Bolt.new (bolt.new) | With some technical experience | Limited tokens |
| Claude Code (claude.ai) | Claude Pro or Max users | Requires paid plan |
For this guide we’ll use Lovable, because it’s the friendliest option for those who have never coded. The steps are very similar in Bolt.new.
If you prefer Claude Code, we have a dedicated tutorial: From zero to your first web page with Claude Code.
2 Crea tu cuenta en LovableCreate your Lovable account
- Ve a https://lovable.dev y aprieta Get started.
- Regístrate con tu cuenta de Google o con tu email.
- Elige el plan Free (puedes cambiar después).
- 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.
- Go to https://lovable.dev and click Get started.
- Sign up with your Google account or email.
- Choose the Free plan (you can upgrade later).
- You’ll see the editor: a chat on the left and a page preview on the right.
Lovable gives you 5 credits per day on the free plan, and each change you request uses one. For a simple landing page it’s more than enough to get started. Confirm current limits on their official page.
3 Describe tu landing page con un promptDescribe your landing page with a prompt
Este es el paso más importante: cuanto más detallado sea tu prompt, mejor será el resultado.
- 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.- Aprieta Enter y observa cómo Lovable construye la página en segundos.
This is the most important step: the more detailed your prompt, the better the result.
- In the Lovable chat, write a complete description. Use this template as a guide:
Create a landing page for [your product or service].
The target audience is [describe your audience].
The page should have:
- Main headline: "[write your headline here]"
- Subtitle with the main value proposition
- A section with 3 key benefits
- A testimonials or social proof section
- Call-to-action button: "[your CTA]"
Colors: [your colors or preferred style].
Tone: [professional / friendly / urgent / etc.].Real example:
Create a landing page for a beginner online photography course.
The audience is adults 25-45 with no technical experience.
The page should have: headline "Learn to photograph what you love", subtitle,
3 course benefits, pricing (basic $49 / pro $99) and a "Start today" button.
Dark colors with orange accent. Motivating tone.- Press Enter and watch Lovable build the page in seconds.
4 Itera: pide cambios en el mismo chatIterate: request changes in the same chat
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.
Lovable works like a conversation: you can request changes in natural language without touching the code.
Examples of instructions you can give:
- “Change the main button color to green”
- “Add a FAQ section with 4 questions”
- “The title is too long, make it shorter and more direct”
- “Add a form to capture emails before the footer”
- “Make the page look good on mobile”
- “Add an SEO meta description with the phrase ‘photography course for beginners’”
Each instruction uses a credit. Be precise to make the most of free plan credits.
Tip: if you want to edit page text directly, Lovable lets you click on elements in the preview to edit them.
5 Publica tu landing pagePublish your landing page
Cuando tu página esté lista:
- Aprieta el botón Publish en la esquina superior derecha del editor.
- Lovable te da un subdominio gratuito del tipo
tu-proyecto.lovable.app. - 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.
When your page is ready:
- Click the Publish button in the top right corner of the editor.
- Lovable gives you a free subdomain like
your-project.lovable.app. - Share that URL: your landing page is now on the internet and anyone can view it.
To connect your own domain (e.g., myproduct.com), Lovable allows this on paid plans. Another option is to export the code and publish it for free on Vercel, where you can also connect your domain at no cost: we have the full tutorial at Publish your web for free on Vercel.
Atajo: empieza desde una plantillaShortcut: start from a template
Si no sabes por dónde empezar o quieres ahorrar créditos, Lovable ofrece proyectos de ejemplo:
- En la pantalla inicial de Lovable, busca la sección Examples o Templates.
- Elige el ejemplo que más se parezca a lo que necesitas.
- 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.
If you don’t know where to start or want to save credits, Lovable offers example projects:
- On Lovable’s initial screen, look for the Examples or Templates section.
- Choose the example that most closely matches what you need.
- Customize it through chat: change text, colors, and sections.
Starting from an example saves credits because you don’t build everything from scratch.
If you want to go beyond landing pages and create apps or more complex projects, see the tutorial How to create an application with artificial intelligence.
Si algo sale malIf something goes wrong
| 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” |
| Problem | Fix |
|---|---|
| The page doesn’t look good on mobile | Ask Lovable: “Make the design responsive for mobile” |
| I ran out of credits | Wait until the next day (they reset) or upgrade to a paid plan |
| The result doesn’t look like what I asked for | Be more specific in the prompt; include details about colors, sections, and tone |
| I want to edit the code directly | Lovable has a code editing mode; or export to GitHub from the menu |
| I can’t find the publish button | The Publish button is in the top right corner of the editor |
| The page text is in Spanish but I want English | Specify in your prompt: “Entire page in English” |
Preguntas frecuentesFrequently asked questions
¿Qué es una landing page?What is a landing page?
Es una página web de una sola pantalla diseñada para un objetivo concreto: presentar un producto, captar correos o invitar a una acción. No tiene menú ni distracciones: todo lleva al visitante al botón principal.
It's a single-screen web page designed for one specific goal: presenting a product, collecting emails, or inviting an action. There's no menu or distractions: everything leads the visitor to the main button.
¿Lovable, Bolt o Claude Code: cuál elijo?Lovable, Bolt, or Claude Code: which do I choose?
Para principiantes completos: Lovable (interfaz más simple, plan gratuito con 5 créditos/día). Para quienes tienen algo de experiencia con código: Bolt.new. Para quienes quieren control total y ya usan Claude: Claude Code con plan Pro.
For complete beginners: Lovable (simpler interface, free plan with 5 credits/day). For those with some coding experience: Bolt.new. For those who want full control and already use Claude: Claude Code with a Pro plan.
¿Puedo crear una landing page gratis con IA?Can I create a landing page for free with AI?
Sí. Lovable tiene 5 créditos gratuitos al día (hasta 30 al mes) y Bolt.new también tiene plan gratuito con tokens limitados. Para proyectos simples es suficiente. Confirma los límites actuales en sus páginas oficiales.
Yes. Lovable has 5 free credits per day (up to 30 per month) and Bolt.new also has a free plan with limited tokens. For simple projects it's enough. Confirm current limits on their official pages.
¿Puedo conectar mi propio dominio?Can I connect my own domain?
Sí. Lovable y Bolt.new dan un subdominio gratuito y permiten conectar tu propio dominio en los planes de pago. Si publicas con Vercel, conectar tu dominio es gratis; tenemos un tutorial completo para eso.
Yes. Lovable and Bolt.new give you a free subdomain and allow connecting your own domain on paid plans. If you publish with Vercel, connecting your domain is free; we have a full tutorial for that.
¿La landing page que crea la IA es optimizada para SEO?Is the landing page created by AI optimized for SEO?
Depende. Lovable y Bolt.new generan HTML con meta tags básicos, pero para SEO serio necesitas revisar el título, la descripción y los textos. Pídele a la IA que los ajuste en el mismo chat antes de publicar.
It depends. Lovable and Bolt.new generate HTML with basic meta tags, but for serious SEO you need to review the title, description, and content. Ask the AI to adjust them in the same chat before publishing.