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

Así es cómo crear una web con vibe coding: describes la página a una herramienta de IA con palabras normales, miras lo que construye y la guías con prompts de seguimiento cortos hasta que quede bien, sin escribir código tú. Lo que separa un resultado genérico de una página que consigue clientes es el orden de los prompts. Abajo tienes una secuencia de 10 prompts para una landing page de negocio de una sola página, con qué revisar después de cada uno.

Si la idea del vibe coding es nueva para ti, lee primero qué es el vibe coding. Esta guía es la sesión práctica.

Lo que necesitas para este tutorial de vibe coding

A lo largo de esta guía uso un ejemplo inventado: un servicio de lavado y detallado de autos a domicilio que quiere más reservas de dueños de autos de la zona. Cambia por tu propio negocio en cada paso.

Crea una carpeta vacía como detailing-landing, 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). Los prompts están escritos para Claude Code, pero funcionan en Lovable, Bolt o v0 con pequeños cambios de redacción.

Los prompts para crear una web con vibe coding, en orden

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.

Una buena entrevista suena así:

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.

Prompt 3: construir la primera versión

Aprueba el plan y luego cambia al modo Manual o Accept edits, 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.

Qué revisar: mírala primero al ancho de un teléfono. Cada hueco debería ser un TODO evidente, nunca texto inventado.

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".

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. 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, incluido Google Search Console, está en 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

Publica la página

• Hecha con Claude Code: arrastra la carpeta a Vercel Drop, o pide a Claude Code que la publique con la CLI de Vercel (cómo funciona Vercel Drop). El plan 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 (precios de Vercel).
• Hecha en Lovable: haz clic en Publish arriba a la derecha y otra vez en Publish, 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), y un dominio propio requiere un plan de pago, desde Pro a $25 al mes (planes de Lovable).
• Hecha en Bolt o v0: ambos tienen su propio flujo de publicación. Bolt aloja el sitio él mismo, y v0 publica en Vercel.

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

Cuando la sesión se tuerce

Para más prompts listos, mira prompts y plantillas de Claude Code. Los permisos, los modos y la opción de deshacer se explican con más detalle en cómo usar 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 lee ¿el vibe coding es malo? 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.