GPT-6 Astra POR FIN mata las webs basura hechas con IA transcript

Mira esta transición o esta web del café. El círculo se abre y se transforma en toda la página. Hoy vamos a crear webs así con GPT6 Astra. Te voy a decir tres claves y un truco para no empezar desde cero. Y empiezo con los trucos porque independientemente del modelo que uses, es importante que a la inteligencia artificial le des referencias. ¿Cómo le das referencias? pues viniéndote a páginas como la de awards.com, que te voy a dejar en la descripción, donde tienes muchísimas webs de altísima calidad.

Por ejemplo, podemos entrar a esta. Estos son webs que están premiadas en concursos de diseño. Fíjate, por ejemplo, en esta web, qué impresionante. O sea, está claro cuando entras a una de estas que no es la típica web que te podrías encontrar por internet, el cómo están pensadas, el cómo se desplaza el movimiento que tiene cuando haces scroll en las multicapas que que ves, ¿no? Las nuevas por aquí moviéndose, la foto de fondo.

Pues esto es lo que le tienes que dar la inteligencia artificial como base. Ojo, no es lo mismo que copiar, no como una copia, sino como base para que se inspire en los movimientos, en la forma de desplazarse, en la tipografía, en o al menos en las cosas que a ti te puedan gustar de una web de este estilo. Haciendo eso, puedes conseguir webs como esta, donde tienes aquí un titular enorme que destaca por jerarquía en una multicapa que ya queda bien de por sí, porque fíjate cómo se mueve respecto al fondo.

Y cuando haces scroll, inmediatamente se acerca la zapatilla, ves la suela de nuevo poniendo énfasis en el producto en este caso, de forma que toda la atención pues se va al producto, que es lo que nos interesa en este caso. Y es que para llegar a hacer webs así también tienes que tener en cuenta las tres claves que te decía al inicio. En primer lugar, un objetivo. Tienes que tener claro a quién le estás hablando, a la persona a la que le hablas, a quién te diriges.

En el caso de la web del café es pues alguien que quiere comprar café para casa. Tienes que saber cuál es la promesa que le estás haciendo a esa persona. Aquí vas a encontrar tu café. Café de calidad, Dona. Y por último, la preocupación que tu potencial cliente puede tener, que es que no sabe qué café elegir. Dona. Una vez que tengas esto claro, pasamos a la marca. Tienes que tener claro el color, la tipografía, el tono con el que te vas a dirigir a tus clientes y todo eso tiene que estar estructurado.

Mira, por ejemplo, este es mi diseño de marca. Yo tengo pues los colores que utilizo, ¿no? ¿Cuál es mi paleta de colores? ¿Qué tonalidades son válidas? Las diferentes tipografías dependiendo de si es un encabezado de nivel 1 2 3, mi logotipo, diferentes componentes. Todo esto es lo que va a hacer que cuando hagas una web sea consistente y esté a la altura de lo que espera. Y por último, dale una referencia como lo que acabamos de ver. entra en una página como la dewards.com, inspírate, busca páginas que estén que vayan con tu estilo, con lo que quieras transmitir y dáselas a la inteligencia artificial como referencia.

Siguiendo estos consejos, podrás tener una identidad visual fuerte, como es este caso de la página de Bruma, con letras que tienen remates, colores cálidos y oscuros y además ese humo, ¿no?, que apartas para ir descubriendo la botella. Y luego te das cuenta conforme vas bajando que esta identidad visual está a lo largo de toda la página, se mantienen esos colores, te acompaña durante el descubrimiento de la página, que por cierto está increíble, ¿no?

Esta transición muy rápido antes de seguir, si te está gustando, suscríbete, que subo contenido así todas las semanas, estoy empezando y me ayuda un montón. Y dime en los comentarios si quieres ver más cosas de este estilo. Aquí estoy para ti. Seguimos. Ahora bien, si algo tienen en común todas estas webs que he preparado, es que has ido usando mi skill de creación de webs animadas, la cual te voy a dejar totalmente gratuita dentro de mi grupo de WhatsApp.

Tienes el enlace abajo en la descripción. Te va a permitir crear webs de este estilo prácticamente sin ningún esfuerzo porque la skill tiene las instrucciones exactas de cómo debe de comportarse una página. ¿Y qué me dices de esta de aquí? Llama la atención, ¿verdad? Pues esto, aparte de que se le puede ocurrir a la puedes facilitárselo tú. ¿Cómo? Pues aquí va otro truco. Hay páginas como 21st.dev que te permiten encontrar componentes totalmente personalizados para tu página web.

Aquí en el menú izquierdo tienes varias categorías, tienes fondos, tienes bordes llamadas a la acción, por ejemplo. Y usar estos componentes es tan sencillo como venirte a uno de ellos, darle aquí abajo al botón de copiar prompt y dárselo a tu inteligencia artificial favorita, ya sea GPT6 Astra, Clot Fable, con Sonet, quien sea. va a entender este prom y tú no te complicas, no tienes que estar escribiendo nada directamente se lo das, le dices dónde lo quieres implementar, en qué parte de tu web lo quieres implementar y ya está.

Así de sencillo. Cualquier elemento que te guste de esta página, simplemente copias el prompt y listo. Y te aseguro que aquí hay cosas de una altísima calidad. Puedes venirte al apartado de destacados y aquí vas a ver pues los componentes más usados. Por ejemplo, este, que no sé muy bien para qué sirve, pero queda guay. efectos de este tipo, por ejemplo, que recrearlos, explicarle a la inteligencia artificial que nos haga una nube de puntos de este estilo, no es lo más sencillo del mundo, eh, así ya directamente vemos cómo queda y lo vas a saber replicar simplemente con pegarle el prom.

O fíjate en esta otra como conforme vas bajando las burbujas van subiendo, se oscurece como si estuviésemos metiéndonos en las profundidades del mar y se queda simplemente relegado a iluminarse por donde vamos pasando el cursor y nos va destacando aquí el fondo marino, van saliendo burbujas a la vez, de nuevo, manteniendo una coherencia y una identidad visual a lo largo de toda la página en estos colores azulados. Y para terminar, déjame que te muestre de nuevo la del café, porque para mí es de las más impresionantes, porque fíjate en el espacio que tiene la bolsa alrededor y cómo destaca el producto inmediatamente.

Primero ves la marca y el café y ya sabes de qué va. Nada más entrar a la página sabes que es de café. Aquí este efecto me gusta mucho cómo van pasando los diferentes tipos de café conforme hacemos scroll e incluso este detallito que al inicio no lo he enseñado porque al cambiar el tueste cambian las notas y el perfil que te muestra. Vamos que la interacción sirve para explorar el café y además si te fijas también cambia todo el color de la web.

Por ejemplo, altura va cambiando conforme vamos tostándolo menos o tostándolo más. Incluso este puntito está todo sincronizado de forma que mantiene pues esta armonía visual. Si seguimos bajando vemos como esta parte tiene un efecto de doble capa, ¿no? Con estas plantas abajo que hacen efecto como si fuese en 3D, ¿no? Nos da profundidad. Y si seguimos bajando, vemos esta transición que a mí me encanta, nos vamos dentro de la taza y volvemos a aparecer otra vez de fondo.

Sencillamente impresionante. [resoplido] Bien. Y para ir acabando a modo resumen, si te tienes que quedar con algo que sea con esto. En primer lugar tienes que tener clara la dirección, el mensaje que quieres transmitir, a quién te estás dirigiendo, qué promesa le vas a hacer a esa persona, qué va a conseguir al entrar en tu web y cuál es el problema que estás solucionando. Una vez que tengas claro esto, una vez que estén estas bases claras, es cuando puedes entrar a awards.com y empezar a buscar por referencias.

Aquí te puedes inspirar con webs que han ganado premios de diseño, donde la composición, la tipografía, los espacios, todo está perfecto, como has visto. Y si quieres ir un paso más allá, tienes 21st.d, donde puedes encontrar componentes personalizados para llevar tu web al siguiente nivel. Y recuerda que en mi grupo de WhatsApp, en la descripción, te voy a estar dejando la skill que he utilizado para hacer todas estas webs, la cual te va a facilitar muchísimo la vida. vas a ver cómo es un antes y un después el utilizarla y además dentroarás de cuándo va a ser la siguiente masterclass, que voy a hacer todo esto que has estado viendo en el vídeo en directo.

Voy a montar webs y otras muchas más cosas que no te esperas y me vas a poder preguntar dudas durante el directo. Así que espero verte dentro. Muchas gracias por llegar hasta el final del vídeo y nos vemos en el siguiente. Bueno, te dejo por aquí otro por si te apetece seguir viendo.