23 de agosto de 2026

Cómo crear una página web para un cliente con IA, GitHub y Vercel

Guía paso a paso para crear una landing page de un cliente real: diseño orientado a conversión, mockup con IA, código con Codex, GitHub, SEO y despliegue gratis en Vercel.

Miniatura del video Cómo crear una página web para un cliente con IA, GitHub y Vercel — Tutorial completo: del repositorio y el diseño de la landing page al código, el SEO y el despliegue gratis en Vercel · Ver en YouTube

Qué vas a aprender en este proyecto

Crear una página web profesional no consiste únicamente en elegir entre HTML, React o cualquier otra tecnología. Antes del código hay que entender qué quiere conseguir el negocio, qué debe hacer el visitante y cómo vamos a mantener, probar y publicar el proyecto.

En este caso, el proceso completo incluye:

Crear un repositorio privado y versionar el trabajo con Git y GitHub.
Definir un único objetivo de conversión para la landing page.
Ordenar el contenido en secciones con una función concreta.
Pedir al cliente sus textos, imágenes y datos reales.
Crear un mockup con inteligencia artificial sin perder la estrategia original.
Convertir el diseño en código con Codex.
Probar la primera versión localmente y corregirla por iteraciones.
Optimizar la experiencia responsive, especialmente en móviles.
Añadir una base de SEO para recuperar tráfico orgánico.
Desplegar la web gratis en Vercel y compartir una URL de prueba.

1. Versionar la página web con GitHub desde el principio

Aunque el proyecto sea una landing page sencilla, conviene crear el repositorio antes de empezar. Un cliente puede solicitar cambios semanas o meses después, y algunas modificaciones pueden romper una versión que ya funcionaba. El historial de Git permite volver a un estado anterior y entender qué se cambió.

Crear el repositorio

En GitHub:

Creá un repositorio nuevo con un nombre reconocible, por ejemplo la-celeste-pesca.
Elegí visibilidad privada si el código y los recursos pertenecen a un cliente y no deben quedar expuestos.
Podés incluir un archivo README.md para documentar el proyecto.
Añadí un .gitignore acorde a las herramientas que vayas a utilizar. Si después instalás paquetes con npm, es imprescindible ignorar node_modules.
Creá el repositorio y copiá su URL SSH o HTTPS.

Clonar y comprobar la conexión

Desde la carpeta donde quieras guardar el proyecto:

git clone URL_DEL_REPOSITORIO
cd la-celeste-pesca
git status

git status muestra la rama activa —normalmente main— y los archivos modificados. Después de un primer cambio, el flujo básico es:

git add .
git commit -m "Configura la estructura inicial"
git push

No hace falta esperar a terminar toda la web. Es mejor crear commits en puntos estables: estructura inicial, primera versión del mockup, correcciones responsive, SEO y versión lista para presentar.

2. Diseñar una landing page con un único objetivo

Una discusión frecuente es si conviene usar React, HTML y CSS u otra tecnología. La elección técnica importa, pero no reemplaza la pregunta principal: ¿qué acción debe realizar el usuario?

La web del ejemplo vende excursiones de pesca deportiva. Su objetivo no es que el visitante explore decenas de caminos; es conseguir que una persona interesada inicie una conversación por WhatsApp.

Por eso, toda la página debe reforzar una sola conversión:

El hero explica el servicio de inmediato.
Los textos responden las dudas principales.
Los paquetes presentan las alternativas disponibles.
Las imágenes muestran la experiencia real.
La sección sobre el guía genera confianza.
Los botones conducen al mismo canal de contacto.

Propuesta de valor visible en el primer segundo

El primer bloque debe responder rápidamente:

¿Qué se ofrece?
¿Para quién es?
¿Dónde se ofrece?
¿Qué debe hacer la persona si le interesa?

En el proyecto, un encabezado como “Pesca deportiva guiada en Salto” comunica servicio y ubicación sin obligar al visitante a interpretar una frase genérica. Después se puede añadir una descripción breve y un botón claro: “Consultar por WhatsApp”.

Si la persona entiende la propuesta, seguirá leyendo. Si el hero no aclara qué vende la web, probablemente se irá antes de llegar al resto del contenido.

3. Darle una microfinalidad a cada sección

La página completa tiene una meta global, pero cada sección cumple una tarea más pequeña dentro del recorrido.

Sección	Microfinalidad	Contenido recomendado
Hero o banner principal	Comunicar la propuesta de valor	Servicio, ubicación, beneficio y CTA
Introducción al servicio	Generar interés y cercanía	Qué incluye la experiencia y para quién es
Paquetes	Mostrar opciones y distintos tickets	Duración, capacidad, beneficios y consulta
Galería o clientes	Aportar prueba visual	Personas reales disfrutando el servicio
Sobre el guía	Construir confianza	Quién está detrás, experiencia y trato
Preguntas o formulario	Reducir fricción	Datos básicos y acceso directo a WhatsApp
Footer	Cerrar y orientar	Contacto, ubicación, redes y datos legales

En una web de servicios, saber quién está detrás es especialmente importante. El visitante no compra un producto anónimo: confía su tiempo, dinero y experiencia a una persona. Por eso, la sección “Sobre nosotros” no debería ser texto de relleno; tiene que aportar seguridad y alimentar la conversión principal.

Lo mismo ocurre con las fotografías. Mostrar clientes reales, grupos de amigos o familias disfrutando la actividad funciona como prueba social: permite imaginar el resultado antes de contactar.

4. Pedir al cliente toda la información necesaria

La IA no puede inventar correctamente los datos de un negocio real. Antes de diseñar, pedile al cliente:

Logotipo y versión alternativa si existe.
Fotografías originales en la mejor calidad disponible.
Imagen preferida para el hero.
Descripción del servicio y su diferencial.
Paquetes, capacidades, horarios y condiciones.
Nombre y presentación de la persona responsable.
Número de WhatsApp, ubicación y redes sociales.
Opiniones, resultados o imágenes de clientes con permiso de uso.
Referencias visuales y páginas que le gusten.

Conviene clasificar los archivos con nombres claros —por ejemplo hero-pesca.webp, guia-marcelo.webp o grupo-clientes-01.webp— en vez de trabajar con una carpeta llena de nombres automáticos.

También hay que filtrar lo que llega a producción. Subir imágenes duplicadas, mockups descartados y archivos demasiado pesados aumenta el tamaño del proyecto y puede afectar el tiempo de carga. Optimizá las imágenes que realmente se usan y conservá los originales fuera de la carpeta pública si no deben publicarse.

5. Crear el mockup con ChatGPT o una IA visual

En lugar de pedir “haceme una web moderna”, el proceso parte de una versión anterior que ya había funcionado con anuncios. La idea es hacer un rebranding: mantener la estructura estratégica y mejorar la presentación visual.

Un buen pedido para generar el mockup debería incluir:

Una captura completa de la página anterior.
Las imágenes reales proporcionadas por el cliente.
El tipo de negocio, público y ubicación.
El objetivo único de la página.
Las secciones que deben conservarse.
El estilo visual buscado: moderno, simple, cercano y legible.
La instrucción de trabajar primero solo el diseño, sin generar todavía el código.

Podrías estructurar el prompt así:

Rediseña esta landing page de pesca deportiva guiada en Salto, Uruguay.
Conserva la estructura de conversión de la referencia: hero con propuesta de
valor y CTA a WhatsApp, presentación del servicio, paquetes, galería de
clientes, sección sobre el guía, contacto y footer.

Usa las fotografías reales adjuntas, prioriza una estética moderna y simple,
y crea primero un mockup de página completa. El objetivo principal es generar
consultas por WhatsApp. No escribas el código todavía.

Por qué hay que limitar el alcance del prompt

La IA trabaja mejor cuando recibe contexto y restricciones. Si se le permite decidir simultáneamente estrategia, diseño, textos, estructura y tecnología, puede devolver una solución genérica o alterar partes que ya estaban validadas.

El mockup es una referencia, no el producto terminado. Revisá tamaños, jerarquía, contraste, uso de las fotografías, ubicación de los CTA y consistencia antes de pasar al código.

6. Convertir el mockup en código con Codex

Con el diseño aprobado como punto de partida, guardá el mockup dentro del contexto del proyecto y organizá los recursos en una carpeta pública, por ejemplo public/images. Luego explicale al agente de código exactamente qué debe construir.

El prompt de implementación debería especificar:

Qué imagen corresponde a cada sección.
Qué texto y datos deben utilizarse.
La URL real de WhatsApp.
La estructura exacta del mockup que debe respetar.
El comportamiento del menú, galería, popup y formulario.
Los criterios responsive.
Las tecnologías permitidas.
Que revise el proyecto existente antes de crear archivos.

Para una landing page estática, HTML, CSS y JavaScript pueden ser suficientes. No es obligatorio introducir React o un framework si no aportan valor al alcance del proyecto. La tecnología debe responder a las necesidades de mantenimiento, rendimiento y crecimiento, no a una moda.

7. Probar la primera versión en local

Antes de publicar, levantá la web en tu computadora. En una página HTML sencilla podés utilizar la extensión Live Server de Visual Studio Code y seleccionar Go Live. En proyectos con npm, utilizá el comando de desarrollo definido por el proyecto, como npm run dev.

Durante la primera revisión del ejemplo aparecieron problemas normales:

Una imagen no cubría correctamente su contenedor.
Algunas dimensiones no coincidían con el mockup.
El popup mostraba las fotos como una cuadrícula poco atractiva.
Los iconos se veían anticuados.
Ciertos bloques tenían demasiado aspecto de plantilla generada.
La versión responsive necesitaba ajustes de encuadre y espaciado.

No conviene corregir todo con un pedido ambiguo como “mejoralo”. Es más efectivo dividir el feedback:

Ajustá primero el problema visual que más distrae, como el popup.
Comprobá el cambio en el navegador.
Corregí el encuadre de imágenes y las dimensiones.
Sustituí los iconos manteniendo un mismo sistema visual.
Simplificá los bloques que parezcan recargados.
Repetí la revisión en escritorio y móvil.

Para que una imagen llene un contenedor sin deformarse suele utilizarse object-fit: cover; aun así, hay que revisar el punto de enfoque para no cortar caras, peces u otros elementos importantes.

8. Guardar hitos con commits antes de seguir

Cuando la primera versión ya tiene una estructura útil, creá un punto de retorno:

git status
git add .
git commit -m "Implementa la primera versión del mockup"
git push

Desde ese momento podés experimentar con más tranquilidad porque la versión anterior permanece en el historial.

Si instalaste una librería de iconos con npm, se crearán package.json, un archivo de bloqueo y node_modules. Los archivos de dependencias sí deben versionarse; node_modules no, porque se reconstruye con:

npm install

Un .gitignore mínimo puede incluir:

node_modules/
.DS_Store
dist/

La carpeta de salida exacta depende de las herramientas del proyecto, así que revisá qué genera tu proceso de compilación antes de ignorarla.

9. Mejorar la versión final sin perder simplicidad

Después de varias iteraciones, la web del caso mantuvo la estructura inicial, pero con una estética más limpia:

Hero con la propuesta “Pesca deportiva guiada en Salto”.
Menú compacto y usable en pantallas pequeñas.
Botón de WhatsApp visible y coherente con la acción principal.
Galería simplificada con imágenes reales de clientes.
Paquetes más visuales y fáciles de comparar.
Iconos modernos con estados hover.
Formulario que reduce el esfuerzo antes de iniciar el contacto.
Footer consistente con el resto del diseño.

El criterio no fue añadir elementos por añadir, sino quitar fricción. Una landing de conversión debe hacer evidente qué se ofrece, demostrar confianza y facilitar el siguiente paso.

10. Diseñar primero para móviles cuando el tráfico lo exige

Una web responsive no es una versión de escritorio simplemente encogida. El contenido debe seguir siendo legible, fácil de tocar y visualmente claro en pantallas pequeñas.

En negocios turísticos, servicios locales y campañas que llegan desde redes sociales, gran parte del tráfico suele entrar desde el teléfono. Las métricas reales del cliente deben decidir la prioridad: en otro proyecto B2B puede dominar el escritorio, pero en ambos casos la experiencia tiene que funcionar correctamente.

Revisá como mínimo:

Hero legible sin desplazamiento horizontal.
Imagen con un encuadre adecuado en móvil.
Menú fácil de abrir y cerrar.
Botones de al menos un tamaño cómodo para tocar.
Texto sin líneas demasiado largas ni fuentes diminutas.
Tarjetas en una sola columna cuando no haya espacio.
Popup o galería que no desborde la pantalla.
Botón fijo de WhatsApp que no tape contenido.
Formularios con campos y teclado móvil apropiados.

Probá varios anchos desde las herramientas del navegador, pero, si es posible, verificá también la URL en un teléfono real.

11. Añadir SEO para conseguir visitas orgánicas

Si el objetivo es atraer clientes desde buscadores, el diseño no alcanza. La página necesita una capa de SEO local que ayude a Google a entender el servicio y su ubicación.

Para el ejemplo, una búsqueda relevante es “pesca deportiva en Salto”. La palabra clave debe aparecer de manera natural en los lugares que describen la página:

Título SEO y title del documento.
Un único encabezado principal h1.
Primer párrafo o presentación del servicio.
Algún encabezado secundario cuando tenga sentido.
Texto alternativo descriptivo de las imágenes.
URL breve y legible.
Meta description orientada a la intención de búsqueda.

Ejemplo de metadatos:

<title>Pesca deportiva guiada en Salto, Uruguay | La Celeste Pesca</title>
<meta
  name="description"
  content="Viví una jornada de pesca deportiva guiada en Salto, Uruguay. Consultá paquetes para familias y grupos por WhatsApp."
/>

También conviene:

Comprimir imágenes y usar formatos modernos como WebP o AVIF.
Definir width y height para reducir saltos de contenido.
Utilizar HTML semántico y una jerarquía correcta de encabezados.
Añadir datos de contacto y ubicación consistentes.
Crear contenido que responda dudas reales sobre la experiencia.
Conectar un dominio propio y registrar el sitio en Google Search Console.
Medir consultas, clics y fuentes de tráfico para iterar con datos.

12. Desplegar la página gratis en Vercel

Con la versión revisada y subida a GitHub, el despliegue básico es directo:

Iniciá sesión en Vercel y abrí el dashboard.
Seleccioná Add New Project.
Conectá GitHub si todavía no lo hiciste.
Importá el repositorio del cliente.
Revisá framework, comando de compilación, carpeta de salida y directorio raíz.
Pulsá Deploy y esperá a que termine la compilación.
Abrí la URL generada y repetí las pruebas principales.

Si index.html está en la raíz del repositorio, normalmente el directorio raíz debe ser .. Si todo el sitio vive dentro de otra carpeta, configurá esa carpeta como Root Directory. No confundas el directorio raíz del proyecto con public: esta última suele reservarse para archivos estáticos, pero la configuración exacta depende del framework o de la estructura elegida.

Vercel crea una dirección temporal bajo su propio dominio. Esa URL sirve para mostrar la web al cliente antes de publicarla definitivamente:

“La primera versión ya está disponible. Revisala desde esta URL y pasame los cambios en una lista para preparar la siguiente entrega”.

Cuando el cliente apruebe el resultado, conectá un dominio propio desde la configuración del proyecto. Un .com, el dominio territorial correspondiente o una extensión coherente con la marca pueden funcionar; la elección debe considerar disponibilidad, confianza, recordación y estrategia local.

13. Cómo presentar la web al cliente

Compartir una URL no reemplaza un proceso de revisión ordenado. Acompañá la entrega con:

Objetivo de esta versión.
Enlace de prueba.
Secciones o funcionalidades ya terminadas.
Aspectos que todavía sean provisionales.
Fecha límite y formato para enviar cambios.
Próximo paso: correcciones, aprobación, dominio y publicación.

Pedí que el cliente agrupe el feedback en una lista. Así evitás modificar una sección mientras llegan mensajes contradictorios por distintos canales.

Antes de la entrega final, confirmá que el número de WhatsApp, los textos, precios, horarios, imágenes y enlaces sean los definitivos. También acordá quién tendrá acceso a GitHub, Vercel y el registrador del dominio.

Checklist final antes de publicar

La IA como herramienta para desarrolladores

La principal conclusión del proyecto no es que la IA haga innecesario al desarrollador. Es que puede reducir muchísimo el tiempo entre una idea, un mockup y una primera versión funcional.

Una web que antes podía requerir varios días puede alcanzar una versión presentable mucho más rápido si ya existe una estrategia clara, buenos recursos del cliente y una persona capaz de evaluar lo generado. Esa última parte es fundamental: la IA puede producir código y alternativas visuales, pero alguien debe definir la conversión, detectar errores, priorizar la experiencia móvil, revisar el SEO y decidir cuándo el resultado está listo para un usuario real.

Usala para acelerar tareas, explorar diseños y automatizar trabajo repetitivo. El valor profesional sigue estando en entender el problema del cliente y dirigir la solución completa.

Próximos pasos

Mirá el video completo en YouTube para seguir el proceso en pantalla.
Si querés ofrecer este tipo de trabajo, complementá la parte técnica con una estrategia para conseguir tu primer trabajo como programador.
Tomá una landing page propia o de práctica y repetí el flujo: objetivo, estructura, mockup, código, pruebas, GitHub, SEO y despliegue.

En este artículo