Cómo crear una landing page con Claude Code y publicarla gratis en Netlify

[00:00]Qué vamos a construir: landing, hosting y formulario

[00:00]En este video te voy a explicar cómo puedes generar una landing page en menos de 5 minutos, 100% generada por inteligencia artificial, aplicable para cualquier tipo de negocio porque la IA va a aprender sobre nuestro contexto, que además vamos a publicar online en un servicio llamado Netlify y que además va a incluir un formulario contacto que va a permitir que potenciales compradores nos contacten. Dicho esto, si tienes un negocio, en este canal hablamos de emprendedores y emprendedoras desde la transparencia y desde el barro que supone el día a día de montar un negocio. Así que estaríamos encantados de contactar. Contar contigo en esta aventura. Dicho esto, vamos al video. Lo primero que necesitaremos es una cuenta en Claude. En mi caso tengo la suscripción Pro y voy a estar utilizando Claude Code, la versión para escritorio para Mac que ofrece Claude, que es muy cómoda, pero es verdad que incluso con la versión Free creo que seríais capaces de seguir el mismo proceso que os voy a mostrar. Además, para el servidor utilizaremos Netlify que tiene opciones gratuitas y simplemente tendréis que crear una cuenta en este servicio y por último también necesitaréis una cuenta en este servicio llamado Web3Forms que lo que permitirá es configurar todo el backend necesario para que cuando alguien os contacte a través de la página web os llegue un correo electrónico a vuestro buzón de correo. Dicho esto, vamos a poner esa landing.

[00:40]Cuentas necesarias: Claude, Netlify y Web3Forms

[01:12]Carpeta del proyecto y prompt con los requisitos

[01:12]Lo que estáis viendo en mi pantalla es la aplicación para escritorio de Claude para Mac, donde yo estoy en la pestaña de código porque queremos programar obviamente una landing page. Y en este caso lo único que he hecho es configurar o crear una carpeta en mi escritorio llamado Landing Ejemplo Xavi y ahora lo que voy a pedirle son los requisitos de esta página web. He preparado este pequeño prompt donde indico lo que quiero, que en este caso es una landing page para una agencia de contenidos llamada Xavi Studio y le he listo también los servicios que quiero que tenga. Grabación de vídeo bajo demanda, edición de vídeo, creación de vídeos con IA, todos estos son servicios que ofrecemos nosotros como agencia que está creando esta página web.

[01:49]Plan mode y la app de escritorio de Claude

[01:49]Además, para acabar le digo, me gustaría pagar lo menos posible así que recomiéndame hosting también. De hecho, voy a decirle quiero utilizar Netlify porque sé que tiene una opción gratuita y aquí, importante, vamos a pedirle a Claude que se ponga en plan mode. Vamos a pedirle que planifique cómo crear esta página web. Por cierto, que no sé si lo he dicho, si no tenéis la aplicación para escritorio de Claude, la podéis descargar desde su página web. Creo que también está la versión para Windows. Es muy sencillo, la descargáis e iniciáis sesión con vuestra cuenta. Si es la primera vez que utilizáis Claude en su versión de escritorio, es posible que os pide algunos permisos antes de empezar a ejecutar todo lo que necesite ejecutar para crear la página web.

[02:27]Preguntas de contexto y plan propuesto

[02:27]Además, os hará algunas preguntas para entender mejor el contexto sobre vuestra propuesta. Por ejemplo, ¿qué estilo visual prefieres para la landing page? En este caso le vamos a decir colorido y creativo. ¿Tienes algún color corporativo? En mi caso, azul eléctrico. Y una vez Claude haya recogido toda la información, lo que va a hacer es presentarnos un plan, que en este caso dice así. Xavi Studios es una agencia de contenidos que necesita una landing page profesional para presentar sus servicios y captar clientes. No hay nada montado aún. El objetivo es gastar lo mínimo usando Netlify. Te comparte el stack tecnológico, HTML5, CSS3, JavaScript vanilla, Netlify... En total, coste 0€. También os comparte una propuesta de secciones, la Hero, los servicios, el formulario de contacto y un pie de página.

[03:08]Aprobar el plan y ver cómo escribe el código

[03:08]Como todo esto tiene buena pinta, voy a darle a Approve. Es verdad que antes de empezar a escribir código, lo normal será que os pida permiso para empezar a escribirlo. Así que vamos a darle a Allow y veréis cómo empieza a tachar To Do's de la checklist que ha creado en base al plan que nos ha compartido. Todavía no me hago la idea de lo loco que es tener un programador a tu servicio a través de Claude. Es increíble. Ahora lo que nos pide permiso es para abrir la landing page para que la podamos ver dentro de la aplicación para escritorio. Bueno, en este caso nos envía al navegador, dentro del navegador, en la versión local de nuestra página web. Incluso, como podéis ver por pantalla, en las versiones más recientes de Claude Code, nos permite visualizar el resultado de lo que está programando en directo sin salir de este chat.

[03:53]Verificación en móvil y recomendación de GitHub

[03:53]Lo cual facilita y agiliza mucho las cosas. Ya veis que tiene bastante buena pinta y además ahora verifica que se ve también correctamente desde la versión móvil. Dicho esto, también Claude nos recomienda crear un GitHub, es decir, una carpeta, un repositorio online para poder tener guardados los archivos que está creando. Es verdad que esto se puede obviar por el momento, pero es algo que todos los programadores hacen cuando crean un proyecto de software. En este caso lo vamos a obviar. Y nada, finalmente nos dirá todo verificado. Todas las secciones funcionan bastante bien. Tenemos la Hero, Servicios, Formulario, Footer y la landing que está completa y lista para desplegar en Netlify. Así que sin más, vamos a ello.

[04:26]Deploy manual en Netlify y cambio de dominio

[04:26]En este caso, ya estáis viendo mi cuenta de Netlify, donde lo que voy a hacer es irme a añadir un nuevo proyecto y deployar manualmente. Ahora simplemente iremos a seleccionar la carpeta en la que estamos trabajando, la subiremos y Netlify la deployará por nosotros. La publicará online para que sea accesible desde el exterior. Una vez veamos que está todo completado, vamos a ir a clicar a Open Production Deploy y como veis, ya tenemos nuestra página web en esta URL. Además, desde Domain Management podéis modificar el dominio en el cual queréis que se muestre esta página web. Por ejemplo, vais a poner Xavi Studio Ejemplo Save. Como veis, ya está la página web en nuestro dominio. ¿Qué faltaría?

[05:10]Configurar Web3Forms para recibir contactos

[05:10]Faltaría por ir de nuevo a Claude y decirle, ayúdame a configurar Web3Forms, para la cual necesitaremos una API Key que se puede obtener desde la página web de Web3Forms. Así que nada, si te ha gustado este vídeo y no quieres perderte próximos contenidos, suscríbete a este canal para emprendedores. ¡Nos vemos!