Crea Webs de + $10.000 SIN Código por IA GRATIS 👨🏻‍💻 Tutorial con Alternativas Fáciles

Desde el boom de ChatGPT, han surgido numerosas inteligencias artificiales específicas para la creación de una página web. Sin embargo, aunque estas se creen rápido, el resultado podría no ser tan profesional, pareciendo una plantilla. Y es que, hasta ahora, para crear una web a medida, teníamos que invertir más tiempo y dinero. Pero, ¿y si te dijera que con las herramientas adecuadas de inteligencia artificial podrías crear webs valoradas en miles de dólares? Pues es justo lo que estaremos viendo en el vídeo de hoy. Para ello, estaremos pasando un prompt a un diseño web profesional que luego podamos seguir personalizando en Figma. Copiar los diseños de otras webs o crear efectos en 3D para conseguir algo al siguiente nivel. Y no nos quedaremos solo en el diseño, ya que convertiremos algunos diseños con un solo clic en una web lista para publicar. Además, todas las plataformas que estaremos viendo las podrás probar de una forma totalmente gratuita. ¿Suena bien? Pues conozcamos la primera plataforma. Como primera plataforma usaremos una que nos va a permitir pasar un texto a un diseño web bien trabajado o incluso el diseño de una aplicación profesional. Y esto es posible gracias a la aplicación de Galileo AI, que es esta plataforma de aquí. Antes de continuar, te recuerdo que todos los enlaces e información lo vas a tener abajo en la descripción. Y una vez cliques en el enlace de Galileo, aterrizarás a esta página de aquí, desde donde podemos ver diferentes ejemplos de otros usuarios que han estado creando tanto páginas webs como aplicaciones. Y más allá de estos ejemplos, pues también nos podría servir como inspiración. De hecho, si clicamos en un ejemplo como esta de aquí, vamos a poder ver el diseño que ha conseguido este usuario de aquí y el prompt que ha utilizado para poder generar esto. Aunque yo, para mostrar su funcionamiento, voy a cerrar aquí y la voy a estar creando desde cero. Así que hago scroll para arriba y clicaría el botón de Get Started for Free. Ahora aquí haríamos el registro, aunque yo utilizaré Google con la cuenta de Todos los Tutoriales. Rellenamos con nuestra información y le damos a continuar. Y una vez hagamos esto, nos van a pedir que seleccionemos alguno de sus planes de pago. Aunque debes de tener en cuenta que si deslizamos hacia abajo, pues podremos ver que para cada cuenta nos van a regalar 150 créditos, con la que podremos generar hasta 15 diseños y hacer 3 exportaciones en la aplicación de diseño de Figma. Así que aquí yo, en pruebas anteriores, cuando se me acaba el crédito, pues directamente me he creado otra cuenta para poder seguir utilizándola de forma gratuita. Sabiendo esto y volviendo para arriba, como yo no voy a elegir ningún plan de pago, clicaremos en Skip Now. Y desde aquí ya podríamos generar nuestra web. Para ello, clicamos en De texto a UI, y lo primero que nos van a preguntar es si queremos diseñar una aplicación móvil o una página web. Yo para este tutorial me estaré enfocando en las páginas webs, pero si te gustaría ver otro tutorial específico de aplicaciones, déjamelo por los comentarios, haré un vídeo al respecto. Aunque si estás interesado en saber cómo podría hacer una aplicación, te voy a dejar este vídeo aquí en donde ya lo estuvimos haciendo con inteligencia artificial. Y volviendo a Galileo AI, yo aquí le voy a hacer una descripción como una página web comercial minimalista y de lujo enfocada a la venta de casas. Así que imaginando que yo le voy a hacer la web a un negocio de bienes raíces, le voy a dar a Generate, y automáticamente ya empezaría a trabajar en nuestro diseño. Perfecto. Y como puedes ver, ya tendríamos estos dos diseños de aquí. Y para poder ver uno de ellos, le daríamos un clic y automáticamente ya nos aparecería más en grande. Y la verdad es que no está nada mal. Ahora lo que podríamos hacer sería seguir editándolo a nuestro gusto o con la imagen de marca del cliente a la cual le estemos presentando este diseño. Para ello, cerraríamos aquí y ahora vamos a tener 3 opciones. Por un lado, una pequeña edición clicando desde aquí en Editar tema, ya que simplemente clicando, por ejemplo, en el color oscuro y eligiendo un color principal, como por ejemplo este verde, así como el contorno de las líneas o el de las fuentes, cuando yo le dé a aplicar a tema, automáticamente ya se nos habría modificado aquí, al igual que en el segundo diseño que también nos ha generado. Otra de las cosas que podemos hacer es pedirle directamente a la inteligencia artificial que nos edite lo que queramos como si estuviésemos hablando con un diseñador web. Para ello clicaríamos en Edit y ahora le podría pedir cosas como añade un formulario para contactar, le doy a generar y listo, automáticamente ya tendríamos por aquí nuestro formulario. Ahora bien, si quisiéramos editar por nosotros mismos algunos unos detalles concretos, lo mejor sería hacerlo con Figma. Así que le daríamos un clic y ya lo habríamos copiado. Ahora podríamos venirnos a la plataforma de Figma, que se puede utilizar de forma gratuita, y si no la conocías, es la líder para los diseñadores web. Así que aquí, para poder utilizarla, le damos a Get Started, haríamos un registro. En el apartado de registro, importante que selecciones el plan gratuito y le das a continuar. Y desde aquí seleccionaríamos Diseño para Figma, seleccionamos y terminamos. Ahora, desde arriba a la izquierda, le vamos a dar a File y Nuevo diseño. Y desde aquí vamos a Comando+V si tienes un Mac o Control+V si tienes un Windows. Y cuando yo lo haga, pues automáticamente, como puedes ver, se nos ha pegado aquí el diseño que hemos generado en Galileo AI. Y desde esta plataforma lo interesante es que podemos modificar cualquier cosa. Es decir, si yo clico en el contáctanos, yo podría modificarlo, por ejemplo, a español simplemente escribiendo contacta ahora. Ya que si nos vamos al apartado de capas, vamos a ver que se nos han generado todas las capas que tiene nuestro diseño. Y de esta forma pues podríamos ultimar los detalles, cambiar las imágenes por la de nuestro cliente para poder presentar el diseño final. Si realmente queremos hacer una web profesional, debemos de conocer el concepto de las cookies, siendo este un pequeño archivo de datos que un sitio web guarda en el navegador de los usuarios para recordar información sobre ellos. Y esto es uno de los activos más importantes de una página web, ya que con esta información no solo podremos analizar lo que está pasando en nuestra página web, sino que también podremos impactar con campañas publicitarias a aquellos usuarios que hayan interactuado con nuestra web en plataformas como Google o las redes sociales como Facebook. Y es que, ya sea si quieres la web para venderla como un servicio o para un proyecto propio, deberás tener esto solventado, obteniendo el consentimiento de los usuarios que visitan tu sitio web para cumplir con los derechos de privacidad y regulaciones como el GDPR. Para ello, podrías utilizar una plataforma de gestión de consentimiento como la de Cookiebot de Usercentrics, que además cuenta con un plan gratuito con la que podrías empezar para tener todo esto controlado. Te dejo abajo el link también sobre esto. En este segundo bloque estaremos viendo otra plataforma que nos va a permitir crear un diseño funcional que luego podamos publicar como una web a golpe de un clic. Y esto lo podremos hacer con la plataforma de Relume, que es esta plataforma de aquí. Y para poder utilizarla, clicaremos en Start for Free, rellenaríamos con nuestros datos y le damos a crear cuenta. Y ahora desde aquí nos van a elegir entre uno de sus 3 planes, siendo uno de ellos gratuito. Así que yo voy a empezar por este de aquí. Y cuando hayamos puesto nuestros datos, ahora vamos a poder crear nuestro diseño clicando en nuevo proyecto. Y ahora, desde esta parte de la derecha, pondríamos la descripción de la empresa a la cual vamos a hacer este nuevo diseño de web. Así que yo en este caso me he inventado una academia que se llama Alejamia, que se enfoca en impartir cursos de inteligencia artificial. Aquí podríamos seleccionar el número de páginas que queremos que tenga nuestra web. En este caso, voy a seleccionar de 1 a 5. Y además podemos elegir el idioma, desde donde también tenemos disponible el español. Así que una vez ya tenemos todo esto Le doy a generar y automáticamente ya nos está empezando a generar aquí toda la arquitectura de la web, desde donde podemos ver las diferentes secciones de la página de inicio y 3 páginas adicionales que nos ha creado por aquí. En el caso de que no nos haya gustado, lo podríamos regenerar, pero en el caso de que sí nos cuadre, podríamos clicar a cada una de estas secciones y decirle que también nos genere todo el contenido simplemente clicando aquí. Así que yo voy a hacer lo mismo para cada uno de estos 4 bloques que nos ha generado, y listo, ya tendríamos toda la arquitectura web y cada uno de los componentes de las diferentes páginas de forma automática. Ahora lo que podemos hacer sería irnos a uno de los bloques, como por ejemplo el de inicio, y revisar los diferentes bloques que nos ha añadido, ya que cada uno de estos bloques es como si fuera un prompt con la que va a generar los diferentes contenidos de cada una de estas secciones. Yo, si quisiera modificar uno, como por ejemplo esta sección de email marketing, si quisiera pedir la suscripción para comunicar por ahí noticias de inteligencia artificial en lugar del de la academia, pues podría quitar esto y dejar solamente que es para actualizaciones sobre ella y el marketing digital. Y también clicando en el más vamos a poder añadir que la inteligencia artificial no haya añadido, pero en mi caso yo lo voy a dejar tal y como está. Y para que podamos ver esto de una forma más visual, clicaríamos en el botón de wireframe, desde donde podemos ver ahora todos los diferentes bloques que tendríamos, por ejemplo, en esta página de inicio. Y si hago aquí un zoom en el apartado del boletín de noticias, pues efectivamente está haciendo referencia a que son actualizaciones sobre el marketing y la inteligencia artificial tal y como yo se lo he especificado. En el caso que quiera modificar algo de aquí, yo lo podría hacer de forma manual escribiendo o incluso clicando en el botón de Ask AI, desde donde le puedo pedir que lo reescriba, lo ponga más corto, más largo, y al fin y al cabo que escriba por nosotros la inteligencia artificial aquello que queramos modificar. Otra de las cosas que podríamos hacer, si me vuelvo para arriba, es que clicando sobre cualquier bloque vamos a poder reemplazar el componente simplemente clicando en Replace Component, desde donde podríamos ver otros diseños. Y para cambiarlo simplemente le daríamos un clic y ya se habría aplicado, pero con los contenidos que nosotros le hemos dicho a la inteligencia artificial, en este caso con la academia llamada Alejami. Aquí del mismo modo lo podríamos copiar a Figma para poder seguir editándolo como hemos visto en el primer bloque. Pero lo más interesante de esta plataforma es que más allá de hacer un diseño, lo podríamos publicar como una web final con un solo clic. Y volviendo a Relume, ahora lo que podremos hacer será copiar este diseño a la plataforma de Webflow. Desde donde podríamos empezar a construir nuestra página web a código de forma gratuita, aunque nosotros gracias a la plataforma de Relume no necesitaremos ver ninguna línea de código. Así que lo primero de todo sería crearnos una cuenta clicando en Get Started y nuevamente nos pedirían un registro, así que yo lo voy a hacer con Google con la misma cuenta de siempre. Genial. Y una vez tengamos la cuenta, clicaremos en Nuevo sitio y ahora Empezar desde cero. Le damos un nombre y creamos. Y volviendo a Relume, si clicamos en cualquier página de aquí y seleccionamos estos 3 puntos, vamos a poder seleccionar la opción de copiar con este símbolo de aquí, que sería el de Webflow. Así que le voy a dar un clic y desde aquí tienes que tener en cuenta que para poder hacerlo necesitarás uno de sus planes de pago, aunque yo te voy a mostrar a cómo podrías hacer esto de una forma gratuita. Para ello le vamos a dar a Upgrade y desde aquí con su plan Started nos será suficiente, aunque ten en cuenta que este plan nos lo van a dar de forma gratuita durante los 7 primeros días. Así que le daremos un clic y una vez hayamos rellenado con nuestros datos y le hayamos dado a pagar a 0 euros, una de las cosas que yo te recomiendo que hagas automáticamente es que vuelvas al apartado de dashboard y desde tu perfil, que lo tendrás aquí arriba a la derecha selecciones la opción de gestionar cuenta y desde aquí automáticamente canceles el plan. De esta forma, pasados los 7 días, no te van a cobrar automáticamente tu tarjeta. Aunque en el caso que te haya cuadrado, pues simplemente tendrás que volver a suscribirte, pero evitando que te cobren sin darte cuenta. De hecho, esto es algo que ya he hecho con anteriores cuentas y, como puedes ver, siendo hoy 17 de mayo, el plan lo tengo cancelado, pero voy a poder disfrutar de él hasta el 24 de mayo. Y en el caso que me interese le volvería a dar a reactivar, pero de una forma manual. Aunque como no es mi caso, vuelvo a cancelar y confirmo. Y teniendo esto y volviendo para atrás, volveríamos a clicar en nuestro proyecto. Y ahora con esta prueba, pues como puedes ver, también se nos habría generado más páginas más allá de una que incluye el plan gratuito. Y ahora sí, en el caso que lo quiera copiar, nuevamente le doy a estos 3 puntos de aquí y le doy a copiar a Webflow. Clicaríamos en este botón de aquí y nuevamente clicaríamos en el botón de clonar en Webflow. Nuevamente le daríamos aquí un Ctrl+V para pegar. Perfecto. Y ya tendremos por aquí nuestra página web funcional, que además desde aquí pues vamos a poder editar, pero con el valor añadido de que si nosotros le damos a preview, vamos a poder previsualizar este diseño exactamente cómo se vería. Que además, como podemos ver, la inteligencia artificial de Relume nos ha añadido esta animación de aquí. Y en el caso que ya la hayamos adaptado y hayamos modificado alguna de las imágenes, lo que podríamos hacer sería parar la previsualización, y aquí arriba a la derecha lo que podríamos hacer sería publicar sitio web. Ten en cuenta que al ser gratuita lo vas a que poner con uno de estos dominios que incluyen su nombre de marca, aunque esto podría ser suficiente para poder mostrárselo a tu cliente potencial. Y en el caso de que hagas la venta, pues ya podrías registrar el dominio personalizado con uno de sus planes de pago. Aunque si te gustaría lanzar diferentes webs de forma gratuita, te voy a recomendar este otro vídeo de aquí, desde donde estuvimos viendo 5 alternativas para poder hacer esto. Aunque bueno, nada mal esta plataforma de Relume, pero ¿y si quisiéramos coger el diseño de una web que nos guste? En este tercer bloque veremos una plataforma que nos va a permitir coger cualquier elemento de otra web que nos guste para pegarla en nuestro diseño y partir de esa base. Y esto lo podremos hacer gracias a la plataforma de Framer, que es esta plataforma de aquí, que podríamos decir que es la competencia directa de Webflow, aunque en este caso cuentan con una extensión que podremos hacer lo que te acabo de comentar. Pero antes de nada nos tenemos que hacer el registro gratuito, así que le daremos a empieza tu sitio gratis, y aquí nuevamente yo lo utilizaré con la cuenta de Google. Una vez ya te ya tenemos el registro, ahora nos iríamos a otro link que te voy a dejar en la descripción, que sería una extensión de Google Chrome llamada HTML to Framer. Así que le damos a añadir a Chrome y clicamos en añadir extensión, lo fijamos. Y una vez tengamos esto, pues podríamos irnos a cualquier página web. Yo, por ejemplo, me he venido a la página web de Apple, ya que su diseño está bastante bien. Así que me voy a meter a modo de ejemplo en uno de sus últimos productos, como es este nuevo iPad Pro. Así que yo haría aquí un poquito scroll para abajo e imaginemos que a mí me gusta este bloque de aquí en donde aparece este texto, estos dos bloques aquí y este selector de seleccionar el color. Pues ahora lo que podría hacer sería clicar en la extensión de Framer y desde aquí fíjate como ya nos empieza a detectar cada uno de los elementos de esta página web. Y para poder clicarlo simplemente le daríamos un clic, aunque si quisiéramos copiar varios elementos, como nos dice aquí, mantendríamos pulsado el botón de Shift y podríamos ir seleccionando diferentes elementos. Ya que si por ejemplo aquí selecciono un cuarto, pues aquí ya se me pone que se han seleccionado 4 elementos. Una vez ya tuviese esto pues directamente me podría ir a Webflow y pegar con un Ctrl+V. Perfecto. Y ya automáticamente lo tendría por aquí, que yo además lo voy a poder ampliar, ya que por lo que veo me ha cogido todas las imágenes. Pero lo más interesante es que, más allá de poder coger exactamente su estilo, vamos a poder adaptarlo a la imagen de marca de la empresa a la cual estemos haciendo la web. En este caso, por ejemplo, podría clicar en más cerca y podría cambiarlo a más de lejos. Y de igual forma, pues, con cada una de estas imágenes o cualquier elemento que hayamos copiado. Nada más los diseños que podremos hacer hacer cogiéndolo de las webs que más nos gusten. Pero con el siguiente y último bloque, los resultados serán aún más sorprendentes. La última alternativa nos permitirá añadir diferentes animaciones en 3D en la propia página web, haciendo que esta sea algo único. Y esto lo haremos con la plataforma de Spline, que como puedes ver es una plataforma enfocada al desarrollo de diseños en 3D, desde donde tenemos diferentes ejemplos y diferentes herramientas para poder crear nosotros nuestras propias animaciones en 3D. Pero para que esto lo puedas aplicar de una forma rápida en una página web, lo más rápido sería irte a este enlace que también te voy a dejar abajo en la descripción, que es una página de Webflow junto a la de Spline, desde donde vamos a poder ver diferentes páginas web, como por ejemplo esta de aquí con estas bolas en 3D, que yo conforme muevo el cursor pues también se moverían. E incluso si hago un poquito scroll para abajo, pues podríamos ver todas estas animaciones de aquí, al igual que otras enfocadas para un producto concreto, como la de esta página de e-bikes, en donde si yo hago scroll para abajo, pues podemos ir viendo cómo este modelo 3D va interactuando acorde a mi comportamiento en la página web, haciendo que la experiencia de usuario sea especial. Esto, para ver un ejemplo, nosotros nos podríamos coger cualquier plantilla. Y siguiendo con el ejemplo de Apple, voy a seleccionar esta de aquí del iPhone 15 Pro, que me gustó bastante, ya que si hacemos scroll para abajo, pues podemos ver el móvil desde diferentes perspectivas acorde a la diferente información que nos van mostrando en esta página web. Y lo mejor de este enlace es que podremos clonar cualquiera de estos diseños que hay a nuestra cuenta de Webflow para poder seguir editándola. Para ello, sobre el diseño que nos guste, simplemente clicaríamos en clonar a Webflow, y teniendo seleccionado nuestro espacio, le daremos a crear sitio. Le damos un nombre como el Dandy y le damos a crear sitio. Una vez lo tenemos aquí, pues nuevamente lo podríamos editar. Por ejemplo, yo aquí la palabra iPhone la podría cambiar a Alejavi, y esta palabra de aquí la voy a cambiar, a modo de ejemplo, tutorial, dejando la frase de tutorial Alejavi 15 Del mismo modo, aquí podríamos cambiar cualquier elemento como los botones, las imágenes, aunque con esto ya tienes el concepto. Aquí nuevamente, si yo le doy a la previsualización, pues como puedes ver tendríamos este cambio que hemos aplicado, pero si hago scroll para abajo mantendríamos toda esta experiencia de la plantilla que hemos importado. Y aquí nuevamente, en el caso que nos guste, podríamos clicar aquí arriba a la derecha, publicar, y ya tendríamos nuestra web lanzada. Y bueno, ¿qué te ha parecido que hayamos podido hacer esto de una forma tan sencilla? Déjamelo por los comentarios y comparte si te gustó. Como estamos viendo, ahora podemos crear webs con diseños a medida sin tener los conocimientos técnicos que anteriormente eran necesarios. Y es que con estas inteligencias artificiales podemos construir prácticamente cualquier cosa. ¿Y tú qué vas a crear con ellas?