Cómo crear una web con vibe coding: landing en 10 prompts

Cómo crear una web con vibe coding con Claude: lo que necesitas

A lo largo de esta guía uso un ejemplo inventado que construimos de verdad mientras la escribíamos: Sunrise Yoga, un estudio pequeño que quiere más primeras reservas de gente con trabajos de oficina. Cambia por tu propio negocio en cada paso. La misma secuencia sirve para un portafolio o una web personal si cambias la reserva por la única acción que quieres.

Crea una carpeta vacía como studio-site, pon tu logo y tus fotos en una carpeta images dentro de ella y abre la carpeta en la pestaña Code (la guía rápida de escritorio muestra dónde está todo). Esa es toda la preparación que necesitas para crear una web de negocio con IA sin programar.

Los prompts están escritos para Claude Code, pero funcionan en Lovable, Bolt o v0 con pequeños cambios de redacción, y en otros agentes de programación como OpenAI Codex, Cursor o Google Antigravity, donde solo cambian los nombres de los modos. Para comparar esas herramientas, mira las mejores herramientas de vibe coding, o Claude Code vs Cursor si estás eligiendo entre un agente y un editor de código con IA.

¿Se puede crear una web con vibe coding gratis?

Sí, para un borrador. Lovable, Bolt y v0 tienen planes gratis, pero cada uno limita cuánto puedes construir por día o por mes, y una página en tu propio dominio necesita un plan de pago. Claude Code no tiene plan gratis: viene con Claude Pro ($20 al mes, o $17 al mes con pago anual) y planes superiores (precios de Claude).

Los precios salen de las páginas oficiales de Lovable, Bolt, v0 y Vercel, revisadas en octubre de 2026.

¿Hasta dónde llega un plan gratis? La página de precios de Lovable indica "Build me a landing page, use images" a 1.70 créditos y los cambios pequeños desde medio crédito, así que los 5 créditos diarios cubren un primer borrador y unos cuantos arreglos. Reparte los diez prompts en varios días, o pasa a un plan de pago la semana antes del lanzamiento.

Los prompts para crear una landing page con vibe coding, en orden

Estos prompts de landing page para Claude están pensados para enviarse de uno en uno. Pega uno, lee la respuesta y pasa al siguiente solo cuando se cumpla el control de debajo.

Nuestra guía del modo plan de Claude Code explica con más detalle las opciones de aprobación y los demás modos.

Prompt 1: haz que te entreviste

Quiero una landing page de una sola página para mi negocio. Antes de
planificar nada, entrevístame. Hazme hasta 8 preguntas, de una en una,
sobre mis clientes, mi oferta, qué nos diferencia, las objeciones que
pone la gente y la única acción que quiero que hagan los visitantes.

Usamos de verdad cada prompt de esta guía, en Claude Code, para un estudio inventado llamado Sunrise Yoga. Así empezó el prompt 1:

Qué revisar: las preguntas deberían tratar de tus clientes, no de tecnología. Responde con detalle, porque tus respuestas son la materia prima de cada sección.

Prompt 2: acordar la estructura

A partir de mis respuestas, propón la estructura de la página de arriba
abajo. Para cada sección, da su función, un titular provisional y la
prueba que va ahí. Un solo objetivo: conseguir una reserva. Todavía sin código.

Qué revisar: un orden sensato para un negocio de servicios es un titular con botón de reserva, qué recibes, pruebas, cómo funciona, un precio desde, preguntas frecuentes que responden objeciones y una llamada a la acción final. El botón de reserva debería aparecer más de una vez, y cualquier sección que no sirva al único objetivo debería irse.

En nuestra prueba también miró las fotos antes de planificar, y detectó un problema que a una persona se le escaparía fácilmente:

Prompt 3: construir la primera versión

Aprueba el plan con Yes, manually approve edits: Claude Code pasa a Manual, así que apruebas cada cambio. En la app de escritorio, después de aprobar, cambia el selector a Manual o Accept edits (las ediciones de archivos pasan, los demás comandos siguen preguntando), porque el modo Plan no edita archivos.

Construye el plan aprobado como index.html con un styles.css aparte,
pensado primero para móvil. Usa las fotos de la carpeta images. Donde
falte contenido real, escribe TODO y una nota breve en lugar de
inventarlo. Luego abre la página en el panel Browser para que la vea.

En modo Manual, Claude Code muestra cada archivo antes de escribirlo y espera tu respuesta:

Unos tres minutos después, la primera versión estaba lista. Aquí está al ancho de un teléfono, con el botón de reserva fijo en la parte inferior de la pantalla:

Lo más útil fue su mensaje final. En lugar de inventar reseñas, una dirección o horarios de clases, enumeró cada hueco para que lo rellenáramos nosotros:

Qué revisar: mírala primero al ancho de un teléfono. Cada hueco debería ser un TODO evidente, nunca texto inventado. En la pestaña Code, la página se abre en el panel Browser; si no lo hace, haz clic en la ruta de index.html en el chat.

Prompt 4: escribir los textos de verdad

Reescribe todos los textos para un [TIPO DE CLIENTE] ocupado que lee
en el teléfono. Titular: lo que recibe, en menos de 10 palabras. Usa
mis respuestas de la entrevista, no frases genéricas. Frases cortas.
Si una afirmación necesita un número o una reseña que no te he dado,
deja un TODO y apúntalo en una lista para mí.

Qué revisar: léelo en voz alta. Borra todo lo que un competidor podría pegar sin cambios en su propia web.

Prompt 5: darle el aspecto de tu marca

Aplica nuestra marca: color principal [CÓDIGO HEX], acento [CÓDIGO HEX],
logo en images/logo.png. La sensación debe ser [TRANQUILA Y PREMIUM, O
LUMINOSA]. Texto grande y legible, espacios generosos, dos fuentes como
máximo. Crea dos versiones de la sección superior en archivos separados
para que pueda compararlas.

Qué revisar: elige una y di por qué. "La segunda, porque la foto muestra la camioneta y el botón destaca" le enseña a la IA mucho más que "la segunda".

¿Por qué las webs hechas con vibe coding se parecen?

Porque sin una dirección concreta, las herramientas de IA recurren a los diseños que más han visto: un titular centrado sobre un degradado, una fila de tarjetas con iconos y una franja genérica de testimonios. Tus propias fotos, unos colores de marca fijos y una web de referencia con una razón concreta ("una foto grande con el botón encima") son lo que rompe el patrón. Si el borrador todavía parece una plantilla, envía esto:

Quita los degradados decorativos, los iconos de stock y las formas de
relleno. Usa nuestras fotos reales en grande, un solo color de acento y
más espacio en blanco. Luego dime qué sección todavía parece una
plantilla y por qué.

Prompt 6: conectar reservas y contactos

Haz que todos los botones de reserva lleven a mi página de reservas:
[URL DE LA PÁGINA DE RESERVAS]. Añade a la sección de contacto el
formulario de abajo, de mi [HERRAMIENTA DE CORREO O DE FORMULARIOS].
No construyas tu propio backend de formularios ni guardes datos tú.
[PEGA AQUÍ EL CÓDIGO DE INSERCIÓN]

Prompt 7: repaso de móvil y accesibilidad

Revisa la página buscando problemas de móvil y accesibilidad y
arréglalos: poco contraste en el texto, zonas táctiles pequeñas, falta
de texto alternativo, encabezados desordenados, campos de formulario
sin etiqueta y todo lo que no se pueda usar con teclado. Enumera lo que cambiaste.

Qué revisar: el texto principal debería llegar a una relación de contraste de al menos 4.5 a 1 con su fondo, el nivel WCAG AA para texto normal. Comprueba tú cualquier par de colores pegando los dos códigos hex en el verificador de contraste gratis de WebAIM:

Después intenta reservar desde tu propio teléfono con un solo pulgar.

Prompt 8: velocidad y lo básico del SEO

Haz que la página sea rápida y fácil de encontrar: redimensiona y
comprime cada imagen, aplica carga diferida a las imágenes que están
por debajo de la primera pantalla y añade un título, una meta
descripción, etiquetas Open Graph, un favicon y datos estructurados
LocalBusiness. Usa solo datos que te he dado.

La carga diferida (lazy loading) significa que las imágenes solo se cargan cuando el visitante se acerca a ellas, y las etiquetas Open Graph controlan cómo se ve tu enlace cuando alguien lo comparte en una app de mensajería. La configuración completa para buscadores, incluidos tu propio dominio y Google Search Console, está en cómo crear una página web con IA.

Prompt 9: que revise su propio trabajo

Revisa esta página dos veces: primero como un [TIPO DE CLIENTE]
escéptico y luego como un revisor web estricto. Enumera cada problema:
textos poco claros, información que falta, enlaces rotos, TODOs que
quedan, afirmaciones sin pruebas y problemas de diseño a 360px de ancho.
Ordénalos por impacto. No arregles nada todavía.

Qué revisar: arregla los primeros puntos de uno en uno, un mensaje por arreglo. Revisar desde un ángulo distinto al de la construcción saca a la luz problemas que se le escaparon al construir.

Prompt 10: preparar el lanzamiento

Prepara el lanzamiento: borra los archivos que no se usan, revisa cada
enlace, añade una página de privacidad breve que explique qué recoge el
formulario y adónde va, y escribe un README que explique cómo cambiar
precios, horarios y el número de teléfono. Guarda todo en Git con un mensaje claro.

La IA puede redactar la página de privacidad, pero no puede asumir la responsabilidad legal. Haz que revisen el texto según las normas del lugar donde viven tus clientes.

La checklist antes del lanzamiento

Cómo publicar una web hecha con vibe coding

Publicar significa poner tus archivos en un hosting para que cualquiera pueda abrir la página en una dirección pública. Cómo hacerlo depende de dónde la construiste:

• Hecha con Claude Code: ve a vercel.com/drop, arrastra la carpeta de tu proyecto a la página, elige un equipo y un nombre de proyecto y haz clic en Deploy (cómo funciona Vercel Drop). También puedes pedirle a Claude Code que la publique con la CLI de Vercel. El plan gratis Hobby de Vercel es para uso personal y no comercial, así que una landing page de negocio corresponde a Pro, a $20 al mes por puesto de desarrollador.
• Hecha en Lovable: haz clic en Publish arriba a la derecha, junto a Share, y luego otra vez en Publish. Lovable hace un análisis de seguridad rápido y la página queda en línea en una dirección lovable.app. Los cambios posteriores solo se publican cuando haces clic en Publish changes (documentación de publicación de Lovable).
• Hecha en Bolt o v0: Bolt aloja el sitio él mismo, con la marca de Bolt en el plan gratis, y v0 publica en Vercel, donde se aplica la misma regla de Hobby y Pro.

Conectar tu propio dominio se explica paso a paso en la guía de webs enlazada arriba. Cuando la página esté en línea, comparte el enlace con algunas personas que se parezcan a tu cliente y mira cómo la usan sin ayudarlas.

Problemas comunes y soluciones

Para más prompts listos, mira prompts y plantillas de Claude Code.

Qué hacer ahora

Lanza hoy los prompts 1 y 2. No necesitan nada más que la pestaña Code y lo que sabes de tus clientes, y muestran rápido si tu oferta está clara.

Construye y publica una vista previa antes de comprar un dominio o gastar nada en anuncios, y repasa la checklist de seguridad enlazada arriba antes de añadir inicios de sesión o guardar datos de clientes. El curso Builders cubre con más profundidad la psicología del cliente detrás de las landing pages y cómo conectar la captación de contactos y los pagos.