¡Gemini 3 acaba de reventar las animaciones web! Y esto puedes hacer 🔥

A veces, los detalles menos visibles son los que definen lo inolvidable. Google ha esprintado respecto a sus competidores con la inteligencia artificial. Tiene Nano Banana Pro, mejor para lo visual, Gemini 3, mejor para programar, y otras funciones que nos ayudan a crear en cuestión de minutos lo que antes solo podía hacer un equipo completo de profesionales. Para comprobarlo, estaremos creando animaciones web que luego podrás aplicar a tus proyectos o incluso ofrecerlo como servicio a clientes potenciales. Desde crear páginas con animaciones, hacer animaciones interactivas, efectivas, replicar estilo de webs sorprendentes, o hasta añadir bloques premium con detalle. Lo mejor es que cada flujo de trabajo lo podrás aplicar hoy mismo y con herramientas de inteligencia artificial que podrás utilizar de una forma gratuita. ¿Suena bien? Pues veamos el primer caso. Vamos a comenzar creando páginas con animaciones en esta. Para ello estaremos utilizando el siguiente flujo. Primero estaremos utilizando la plataforma de Flow para crear las imágenes que vayamos a utilizar en las diferentes páginas y animaciones, ya que desde ahí lo convertiremos al formato vídeo. Luego nos complementaremos con otras herramientas para quitar marcas de agua y pasarlo a un formato óptimo para la web. Por último, saltaremos a Google AI Studio para poder aplicar todo esto de forma real y funcional. Venga, pues vamos a empezar saltando a Flow, herramienta por la cual nosotros vamos a poder crear nuestra imagen a través de Nano Banana Pro de forma ilimitada. Para ello tenemos que clicar en esta opción y seleccionar el apartado de crear imagen. Fíjate que ahora sobre el apartado ajustes vamos a poder seleccionar este modelo de Nano Banana Pro y cada vez que lo usemos vamos a tener un coste de 0 créditos. Algo que también podremos encontrarnos en versiones gratuitas tal y como estás viendo desde aquí. Y esto se debe a una reciente actualización por el que han extendido el modelo de Nano Banana Pro a casi todos sus productos. Sabiendo esto, vamos a estar creando de forma original la página de 404, una página que nos solemos encontrar cuando no se encuentra la información de ese sitio. Para hacer eso, todo lo que tenemos que hacer desde Flue sería describir el diseño de la página 404. Yo para ello voy a estar cogiendo estos prompts que he preparado, que te lo voy a dejar en un documento abajo en la descripción. Y para ello voy a estar cogiendo el primero para pegarlo por aquí y que me pueda crear una página 404 en donde aparezca un robot amigable como si estuviese despistado y con las letras atrás de 404. Ya teniendo esto por aquí, le voy a decir que quiero que cree 2 imágenes a la vez. Le doy a enviar y segundos más tarde, y al primer intento, ya tendríamos estas dos opciones que la verdad es que ambas son muy válidas. Yo sin embargo me voy a estar quedando con esta imagen de aquí, ya que realmente me ha gustado todos esos colores degradados y cómo ha integrado todo. Y con esto ya tendríamos una página original que ahora podremos animar. Para hacer esto, primero tendríamos que salir y desde la imagen que nos guste le daríamos a añadir a prompt. Una vez lo tenemos aquí elegido, tendríamos que cambiar de la función de crear imagen a la de pasar de foto a vídeo. Y ahora en el apartado prompt le vamos a pedir que los elementos de esa imagen lo vaya introduciendo con una transición suave de una en una, y que al final emule como si el robot estuviese perdido. Con esto nuevamente lo enviamos, y poquito más tarde ya tendríamos un par de resultados. En primer lugar, siendo este vídeo de aquí, que la verdad es que luce bastante bien. Y luego tendríamos este otro resultado, que a mí en lo personal me ha gustado un poco más, ya que realmente termina exactamente igual que como empieza. Para tener ese efecto de bucle. Ten en cuenta que esto lo vas a poder simular simplemente en el apartado de frame añadiendo ambas imágenes para que tenga ese efecto de bucle. Y una vez tengas el vídeo que te ha gustado, que en mi caso va a ser este, vamos a clicar en descargar y vamos a seleccionar que nos lo suba de calidad a 1080. Le damos un clic y ya empezaría a procesar la descarga. Una vez tenemos este resultado, buena calidad, es hora de quitarle la marca de agua que tenemos abajo a la derecha. Para ello podemos saltar a esta herramienta de aquí, desde donde nosotros tenemos que clicar en subir vídeo. Seleccionaríamos el vídeo que nos acabamos de descargar y al subirlo simplemente tenemos que marcar donde tenemos la marca de agua, en este caso esta zona de aquí. Le damos a remover ahora y poquito más tarde podríamos tener un resultado como este. Una vez tenemos nuestro vídeo, es hora de pasarlo al formato web para que sea compatible con lo que queremos hacer. Para hacer esto podemos utilizar la herramienta de Ezgif. Seleccionaríamos el vídeo que ya no tiene la marca de agua y le damos a subir vídeo. Una vez hemos hecho esto, tenemos que cambiar el tamaño a original hasta 1280 y le damos a convertir a WebP. Una vez procesado, ya tendríamos esta especie de GIF que nunca terminaría, ya que hemos hecho ese efecto bucle, y al estar en este formato, siempre que termine va a volver a iniciar. Así que ahora simplemente clicaríamos en guardar y de esa forma ya lo tendríamos en nuestro dispositivo. Con esto ya tendríamos el recurso listo para poder incluirlo en cualquier página web. Yo para ello voy a estar utilizando este blog de inteligencia artificial que creé previamente en Google AI Studio. Y aquí, como puedes ver, pues realmente tenemos un montón de artículos de inteligencia artificial, pero ahora voy a poder incluir este recurso de páginas de 404 cuando alguien llegue a esta página para que lo vea de una forma más original. Para hacer esto posible, primero tenemos que subir todos nuestros recursos a una nube para que podamos utilizar esas URLs e incluirlas en cualquier página web. Para hacer esto posible, yo estaré utilizando la de Supabase, otra herramienta con versión gratuita desde la cual nosotros vamos a poder clicar en esta carpeta de almacenamiento. Desde aquí podríamos crear una nueva carpeta, ponerle un nombre, crearlo, y clicando en subir archivos podríamos elegir este formato que acabamos de crear para que ya desde aquí podamos copiar la URL disponible para compartir con cualquier herramienta. Así que en mi caso voy a pegar la URL y justamente por aquí arriba del todo le voy a pedir justo ese cambio, en donde le digo que me añada una ruta 404 donde aparezca una animación integrada manteniendo solamente la cabecera de este sitio web. Clico en enviar y poquito más tarde fíjate lo que tendríamos por aquí, ya que tenemos la animación perfectamente integrada en esta página web teniendo este 404 Pero además todo esto es totalmente funcional, ya que realmente está dentro de la página web. Y si yo ahora clicase, por ejemplo, en el logotipo, pues volvería al inicio, teniendo así una página totalmente original e interactiva que podamos incluir. Lo que acabamos de ver realmente nos ayuda a conseguir resultados muy originales, aunque realmente tenemos que saltar entre diferentes plataformas. Pero ahora bien, si quieres conocer una herramienta que es capaz de hacer casi cualquier cosa de forma autónoma, debes de conocer a Manus AI. Un agente de inteligencia artificial que se encargará del trabajo para dejarte centrarte en las decisiones. Y recientemente ha lanzado su modo más potente llamado Manus 1.6 Max, que mejora la recuperación de información, hojas de cálculo, desarrollo web, análisis de datos y procesamiento paralelo. ¿Y en qué se traduce esto? En un aumento de más de 19% por tener resultados de mayor calidad y precisión. Añadir funciones avanzadas de diseño donde puedes seleccionar una imagen, otra parte como esta y pedirle cambios con esas referencias. Y ahora también podrás desarrollar aplicaciones móviles de cualquier tipo, ya sean iOS de iPhone o para Android, y en cuestión de minutos sin saber programar. Todo esto ya está disponible para poder utilizar y gracias a que Manus AI son los patrocinadores de este vídeo, me han dejado un enlace especial que te lo voy a dejar abajo en la descripción para que puedas probarlo por ti mismo. Y una vez sabemos esto, veamos el segundo caso. Vamos a estar viendo ahora cómo podemos añadir animaciones interactivas dentro de una página web. Para hacer esto vamos a estar diseñando las imágenes, en este caso a través de Google AI Studio. Luego, de una forma similar, estaremos utilizando Flow para animar esas imágenes. Nuevamente pasaremos por el proceso de quitar marcas de agua y convertirlo en un formato compatible web. Y por último estaremos creando una página desde cero en donde estaremos integrando esta función interactiva con el recurso que vamos a crear. Para hacer este ejemplo yo voy a estar utilizando esta lata de Doctor Pelejavi. Una imagen que, como puedes ver, es muy simple, ya que tenemos un fondo blanco. Aunque esto lo vamos a cambiar por inteligencia artificial, ya que si yo me vuelvo a ULI Studio y me voy a la versión chat, al seleccionar desde aquí el modelo de Nano Banana, si yo clico en este icono y le adjunto la imagen que acabas de ver, ahora lo que podemos hacer sería describir cómo queremos que sea el primer fotograma de imagen comercial que vamos a utilizar en nuestra web. En este caso, yo para ello voy a estar cogiendo nuevamente un prompt que te voy a dejar en el documento, y al pegarlo desde aquí, básicamente le estoy pidiendo que me cree una imagen comercial comercial con fondo oscuro que podamos utilizar para esta nueva animación. Algo interesante desde Google AI Studio es que nosotros vamos a poder forzar el radio de aspecto. En este caso voy a seleccionar uno horizontal y con esto le voy a dar a Run. Tras hacer esto, ya podríamos encontrarnos una imagen como esta de aquí, que la verdad es que luce muy profesional, tonos oscuros de fondo, una leve sombra. Y con esto podríamos partir de cómo queremos que inicie la animación. Ahora nos faltaría ver la segunda imagen de cómo queremos que finalice. Para ello yo voy a estar cogiendo este segundo prompt, desde el cual por cierto te vas a encontrar que está subrayado en amarillo, siendo esto una variable que tú podrías modificar. En este aspecto yo la acabo de pegar por aquí y la variable que voy a modificar son los ingredientes que quiero que aparezcan. En mi caso sería cerezas y hielo. Clic en Run y nada, unos 30 segundos más tarde y al primer intento ya tendríamos esta segunda imagen, que la verdad es que luce muy profesional, teniendo lo que sería el líquido de la bebida, las cerezas, el hielo y al fin y al cabo todo lo que necesitamos para hacer nuestra animación. Así que ahora desde aquí lo podríamos descargar. Y teniendo ambas imágenes, vamos a animarlas con Flow. Para ello, volviendo a un nuevo proyecto, vamos a seleccionar nuevamente la función de pasar de imagen a vídeos. Y en la primera imagen subiríamos el primer frame, y en la segunda justamente la otra imagen. Desde el documento copiaríamos el prompt para animar esto, lo pegaríamos aquí, y nuevamente la variable ingrediente la sustituiríamos. En mi caso, nuevamente con cerezas y hielo. Le doy a enviar y después, aproximadamente un par de minutos, ya tendríamos 2 vídeos. Y viendo, por ejemplo, este primero de aquí, pues veríamos cómo la lata empezaría a girar y luego haría una explosión con todos los ingredientes que le hemos incluido. Algo que viene genial, sobre todo si queremos crear una página web para este producto. Así que yo voy a estar quedando con este primer vídeo de aquí, por lo que nuevamente lo voy a descargar en el formato de 1080. Y ahora voy a repetir el mismo proceso que hemos visto en el primer caso para quitar quitar la marca de agua, añadirlo a ese formato optimizado para la web y subirlo a Supabase para que tengamos la URL pública que podamos incluir a UI Studio. Bien, ya lo acabo de hacer y como puedes ver tendría la fotografía del frame 1, que esta también la he subido ya que le voy a pedir a la IA que primero utilice esta imagen de forma estática para que no se mueva hasta que el usuario interactúe con el sitio web. Y luego también le voy a subir este formato de vídeo que es el que hemos visto, que ahora estaría sin marca de agua y con esta animación en bucle para que siempre esté animado. Ya teniendo ambas, vamos a volver a Google AI Studio, solo que ahora acabaríamos de venir al apartado de Build. Y desde aquí yo le voy a poner el siguiente prompt, en donde básicamente le estoy diciendo que esté creando una página web de un refresco de cereza y le estaría compartiendo las URLs de lo que quiero que aparezca. Este prompt ten en cuenta que también lo vas a tener en la documentación. Así que ya teniendo todo esto, simplemente clicamos en Build y fíjate lo que tendríamos por aquí al primer intento. Para poder verlo mejor lo voy a poner en fullscreen. Y por aquí, como puedes ver, tendríamos este refresco de la marca Pelejavi, una edición limitada. Tenemos también por aquí algo más de información que justamente no cubriría a esa lata que luego se va a animar. Y ahora, conforme yo hago scroll hacia abajo, pues como podemos ver, estaría haciendo esta animación perfectamente para que podamos ver la página web con una serie de detalles que capten más la atención de nuestro cliente potencial. Y es que con esto ya no solamente hablamos de incluirle recursos que tengamos nosotros, sino que realmente le vamos a dar ese estilo diferencial que va a ayudar a que llame mucho más la atención aquello que queremos mostrar en una web. Ten en cuenta también que yo, en mi caso, si me voy arriba del todo, esta animación ya estaría en bucle, ya que solamente le he puesto el primer fotograma que quiero que se quede parado hasta que el usuario deslice hacia abajo. Pero también le podrías dar el fotograma segundo y decirle que esta animación lo haga simplemente una vez o cada vez que el usuario haga scroll. Antes de que continuemos con el siguiente caso, ten en cuenta que tenemos abiertas las plazas de mi curso intensivo de inteligencia artificial. Aquí vas a estar durante 8 semanas conmigo por videollamada para que me puedas preguntar cualquier duda de una forma más cercana. Ten en cuenta que ahora, por ser inicios de año, durante menos de una semana hemos habilitado un cupón especial para que te puedas sumar, ya que a mediados de este mes vamos a cerrar las plazas. Dicho esto, a ver si te veo por clase. Y ahora sí, vamos a continuar con el tercer caso. En donde estaremos viendo cómo podemos coger los mejores estilos de otros sitios web para que realmente nosotros podamos partir de un diseño muy profesional del cual nos hayamos inspirado. Para ello nos vamos a estar apoyando de la página de Mobbin, plataforma por la cual están todos los diseños de las páginas más importantes. Luego estaremos utilizando una técnica con Gemini para sacar en formato JSON todos los puntos clave de ese diseño. Y ya una vez tenemos eso, nuevamente nos vamos a ir a Google AI Studio para crear ese sitio web con todos los detalles que hemos extraído a través de esta técnica. Para ello, empezando con Mobin, ten en cuenta que vas a tener un montón de categorías para que puedas encontrar aquello que estés buscando. Aquí, de hecho, si hacemos scroll hacia abajo, vamos a poder encontrar las principales páginas como Shopify, Airbnb, Folk, Wise y demás. Así que aquí, clicando por ejemplo en esta primera de Airbnb, que es mundialmente conocida por ser una herramienta que permite alquilar las casas para tener una fuente de monetización, pues pensé: ¿Por qué no crear una aplicación que en lugar de alquilar una casa para que la persona pueda dormir, pues que sea para términos más profesionales, como por ejemplo hacer un set de grabación, una reunión o similar? Y que de esa forma la persona pueda alquilar durante el día por horas, pero que por la noche no entre cualquier desconocido. Pues ahora con esta técnica lo que voy a intentar hacer va a ser coger todos estos diseños que tenemos de Airbnb, pero aplicarlo a ese nuevo modelo de negocio. Para hacer esto voy a coger la página principal, así que voy a clicar en copiar. Y sobre un nuevo chat de Gemini le doy a pegar. Y una vez ya tenga la primera imagen cargada, voy a hacer lo mismo con esta segunda imagen de aquí. Así que lo copio y lo pegaría por aquí. Y esto también lo podríamos hacer con tantas páginas como queramos replicar su estilo. Yo en este caso simplemente voy a coger las dos más principales. Así que ahora sobre el documento voy a estar cogiendo este prompt que analiza todo al detalle para sacarme todos los puntos claves en el formato JSON. Así que todo lo que tendría que hacer sería pegar el prompt por aquí, le doy a enviar, y poquito más tarde ya me estaría diciendo todo en formato JSON, teniendo un desglose de todos los elementos que tendríamos en esa imagen para que ahora lo podamos replicar por inteligencia artificial. Así que con toda esta información, yo ahora voy a clicar en copiar, me he vuelto a WebAI Studio, apartado de Build, le pego todo este JSON. También, para ayudar, nuevamente le voy a copiar las imágenes del cual hemos estado extrayendo toda esta información. Y justo por aquí arriba, como solamente tenemos el apartado de estilo, le voy a detallar con un prompt todas las funcionalidades que quiero que tenga este modelo de negocio que te acabo de comentar. Así que ya teniendo esto, voy a clicar nuevamente en el apartado de Build. Y poquito más tarde, y al primer intento, fíjate qué resultado tenemos por aquí, ya que nos ha creado una nueva página llamada Locaset. Y desde aquí pues podemos ver que tendríamos una visual muy similar a la de Airbnb con todos estos filtros. También nos aparecería este apartado de mi cuenta. Y además, si yo entro, por ejemplo, en esta localización de Brooklyn, pues podría ver un montón de imágenes y lo que sería este nuevo Airbnb, pero que funcionaría por horas para que realmente nosotros podamos trabajar allí, ya sea por motivos de reunión o por hacer algún tipo de grabación. Y es que con esto podemos decir adiós a esa primera entrega que nos suele hacer la inteligencia artificial con algo que a lo mejor es funcional, pero que visualmente no es nada atractivo y luego nos requiere un montón de tiempo en iterar. Hasta conseguir un resultado que esté a la altura. Vamos a saltar ahora con el cuarto caso, en donde estaremos viendo cómo ahora vamos a poder replicar los estilos de un sitio web existente sin necesidad de extraerlo en el formato JSON. Para ello, imagina que tú estás navegando por internet y te topas con una página que visualmente está muy bien, pero que a lo mejor no es tan conocida y no está en herramientas como la que hemos visto. Una página como podría ser esta de Pioneer, que como puedes ver es totalmente interactiva, y además yo conforme hago scroll hacia abajo pues tenemos un montón de animaciones por el cual quizás nosotros queramos inspirarnos para crear una página web que sea muy sorprendente. Pues ahora todo lo que tendríamos que hacer sería copiar la URL de este sitio web, venirnos a esta página web, que también te la voy a dejar abajo en la descripción, desde la cual si nosotros pegamos por aquí la URL y le damos a ver fuente, pues automáticamente la inteligencia artificial nos habría extraído todo el HTML y estilos que tiene esta página web. Sí que es cierto que aquí no vamos a tener las animaciones que hemos visto anteriormente, pero realmente esto es un proceso que vamos a poder mezclar tanto con el primer y segundo método que hemos visto para crear esos recursos de formato animado, y luego este otro que nos ayuda a crear esos estilos, pues por ejemplo teniendo una página web que funciona con scroll hacia abajo. Para ver cómo funcionaría esto, voy a clicar aquí en copiar para tener todo este HTML, y ahora sobre un nuevo chat voy a pegar por aquí todo ese HTML. Solo que realmente aquí, como solamente queremos tener en cuenta lo que son los estilos, le voy a dar un espacio por aquí arriba para decirle lo que yo quiero. En este caso, que basándose en el HTML adjunto me cree otra web con animaciones similares interactivas para una web profesional de una inmobiliaria llamada Alejavi Laria. Clico en Build y poquito más tarde fíjate lo que tenemos por aquí. Nuevamente, aquí no puede tener en cuenta todas las animaciones de los vídeos porque eso es un recurso que tenemos que preparar, pero tenemos un montón de detalles como este cursor que se ha convertido en mi ratón, que fíjate cómo va cambiando dependiendo del fondo que tiene. Y además también tenemos una visual que realmente va jugando con ese scroll hacia abajo. Yo, por ejemplo, estaría deslizando hacia abajo y fíjate cómo realmente tenemos diferentes animaciones para poder ver todo el contenido de esta página. Además, ten en cuenta que al tener todo esto desde Willy Studio, ten en cuenta que vas a poder compartirlo con algún cliente potencial en el caso de que necesite ver ese primer borrador antes de hacer ese proyecto de forma real, ya que realmente, volviendo a Willy Studio, ten en cuenta que clicando en el botón de compartir app se te va a generar desde aquí una URL que tú de hecho vas a poder publicar e incluso compartir con este botón de copiar la URL para que pueda acceder. Otra cosa que podemos hacer también sería llevarnos todo el proyecto a la herramienta de GitHub. Simplemente tenemos que iniciar sesión, darle un nombre, le daríamos también una pequeña descripción, lo pondríamos en público en el caso que queremos que todo el mundo pueda acceder a él, y si le damos a crear repo en Git, pues automáticamente nos empezaría a sincronizar todos estos archivos. Y luego, ya una vez tenemos todos estos archivos, lo podríamos guardar Y ya una vez tenemos todo esto en GitHub, luego podemos irnos a herramientas como Vercel, que es gratuita, o incluso una premium como la de Hostinger para poder publicar todo esto bajo un dominio y que empiece a funcionar de forma real. Vamos a saltar ahora al caso 5, en donde estaremos viendo cómo puedo mejorar también diferentes componentes, ideal para trabajar en esos pequeños detalles de páginas web que quizás ya estén funcionando pero que tengan un margen de mejora. Para hacer esto posible, ten en cuenta que existen herramientas como por ejemplo Aceternity, UIverse o Twenty First, herramientas por la cual tenemos un montón de componentes que luego vamos a poder copiar y pegar en cualquier proyecto. Para ver esto voy a saltar, por ejemplo, a la de Twenty First, siendo esta plataforma de aquí desde la cual vamos a poder ver un montón de animaciones muy interesantes, como por ejemplo podría ser la de este robot que se mueve acorde a cuando se mueve el ratón, o incluso otros como en cajitas de información que se van coloreando conforme se va pasando el cursor. Lo cierto es que hay un montón de categorías que tenemos por todo este apartado de aquí. A mí personalmente las que más me gusta sería la de UI component, ya que realmente te ayuda a incluir cosas muy concretas a tu sitio web. Por ejemplo, si quisiera añadir alguna animación de las cartas que tienen por aquí, pues yo podría hacer scroll hasta encontrar una que me guste, como por ejemplo esta de aquí, que podría ver que cuando el ratón se acerca pues se llena de puntitos. Y esto es algo que podríamos replicar, por ejemplo, en esta página web que tenemos, que realmente, aunque luzca muy bien y profesional, realmente fíjate que cuando dejo el cursor por encima de alguno de estos botones, pues realmente se iluminan, pero creo que con esas partículas podrían quedar aún mejor. Para hacer eso, todo lo que tendría que hacer sería clicar aquí en el apartado de copiar prompt, y al copiarlo ya simplemente tendría que pegarlo en cualquier herramienta donde esté este proyecto que esté utilizando inteligencia artificial y lo va a incorporar de forma automática. Aquí en mi caso yo esta página la tengo sobre Horizon, y para que puedas ver que esto funciona en cualquier sitio web, simplemente yo tendría que pegar aquí todo el código que hemos copiado de la anterior plataforma, solo que aquí arriba le voy a especificar dónde quiero exactamente que ponga ese cambio. En mi caso, diciéndole por aquí que añada esa animación solamente a los botones que ya tenemos en esta página web. Así que ahora lo envío y pocos segundos más tarde me diría que ya lo tenemos incorporado. Así que si yo ahora esto lo amplío, si dejo el cursor en cualquier botón, como por ejemplo este de aquí, fíjate cómo ahora tenemos esta animación. Y por cierto, lo ha sabido adaptar perfectamente a la imagen de marca que tenemos en este sitio web, porque fíjate que por aquí tenemos este diseño de cuadraditos y realmente eso lo ha replicado en todos los botones que ves por aquí, no solamente los que se ven de forma más visible, ya que si realmente bajo justamente al apartado del final, pues puedo ver que esto se estaría replicando en todos los botones del sitio web. Y sí, con esto ya no estamos hablando de hacer mejoras desde cero, sino que realmente vamos a poder integrar e incorporar pequeñas mejoras a componentes para que marquen esa diferencia de profesionalidad que muchas veces marca la diferencia. Volviendo a Twenty First, ten en cuenta que más allá de modificar componentes que ya tengamos, también podríamos incluir alguno nuevo. Para ello, imagina que yo quisiera incorporar alguna sección de iconos de clientes que tengamos. Pues para ello buscaría esa categoría de clientes, buscaría entre todos los diseños que ya tenemos por aquí y clicando en uno cualquiera, como por ejemplo este de aquí. Aparte de esto, también podría ver cómo quedaría en clarito clicando en este botón de aquí. Así lo podría ver con este fondo blanco, pero en mi caso, como tengo el modo oscuro, lo voy a dejar en modo oscuro. Nuevamente le voy a dar a copiar prompt, y al pegarlo y cargarlo, si me voy abajo del todo, fíjate cómo ya tendría por aquí esa animación de logotipos, en este caso ficticios porque lo he hecho rápido, pero que también estaría jugando con mi ratón, de que cuando lo toco se estaría iluminando dependiendo del icono que yo estaría mirando. Y es que con esta técnica, ya sea que queramos mejorar algún componente y asistente o incluir alguno que veamos que pueda sumar, realmente lo vamos a poder hacer todo en cuestión de pocos minutos inspirándonos de los diseños que mejor funcionan. Vamos a terminar rápidamente con el último caso, siendo este el sexto, en donde no podíamos dejarnos fuera la herramienta de Stitch, una plataforma de Google que está específicamente pensada para hacer diseño web. Y es que si saltamos a esta herramienta, nuevamente vamos a tener una interfaz donde tenemos los modelos más avanzados de Gemini, en este caso Gemini 3 Pro junto a los modelos de Nano Banana. Y desde aquí nosotros vamos a poder hacer diseños de cualquier tipo de sistema operativo, como por ejemplo podría ser la de un dispositivo móvil o incluso una app web en este formato más de ordenador, que son los que hemos estado haciendo hasta ahora. Así que por cambiar, yo en este caso voy a seleccionar el formato app. Y desde aquí, ahora que viene la nieve, imagina que yo quisiese crear una aplicación para que las personas que quieren aprender a hacer esquí o snow puedan encontrar todo lo que necesiten desde ahí. Pues yo simplemente poniendo este prompt tan escueto, si clico en enviar, pues en cuestión de unos 4 minutos más tarde y al primer intento tendría un montón de pantallas de lo que podría ser mi aplicación. Pero para poder verlo todo de una mejor forma, lo que podría hacer también sería seleccionar las pantallas, clicar en generar, y ahora si clico en prototipar, poquito más tarde tendríamos lo que parece la ventana de un móvil, que esto si lo clicamos y le damos a interactuar Ya lo tendríamos totalmente funcional. Y aquí, como puedes ver, pues tendríamos todo perfectamente funcionando para que podamos ver cómo realmente podría funcionar todo. Además de esto, ten en cuenta que también podríamos hacer una previsión de cómo van a funcionar nuestros diseños para que lo podamos presentar antes de ponerlo en producción. Para hacer esto, ten en cuenta que sobre cualquier diseño, como por ejemplo este de aquí, si yo lo selecciono, voy a tener desde Gemini una nueva función que se llama predecir mapa de calor. Y si yo le doy un clic aquí, pues poquito más tarde me estaría creando a través de Nanobanana Pro cómo podría ser ese mapa de calor para que podamos trabajar en esos elementos más claves por el cual los usuarios van a clicar más. Lo mejor además también de utilizar la plataforma de Stitch es que luego todo el proyecto que tú tengas por aquí vas a poder clicar en More, luego seleccionar Exportar, e incluso podrías seleccionar este apartado de Google AI Studio para que cuando cliques en Build ya automáticamente se vaya toda esa información para que podamos crear esa aplicación totalmente funcional y que luego en próximos pasos incluso podamos añadirle de inicio de sesión, pasarlas de pago y publicarlo en un hosting propio, cosa de la que ya estuvimos viendo en todo detalle por este vídeo de aquí. Con todo esto podemos cubrir cambios a todos los niveles, y es que los detalles no solo cuentan, son lo que cuentan.