Alucinante, lo nuevo de Google. Mira,

esta aplicación la acabo de instalar en

mi móvil, la he diseñado yo. Es

totalmente funcional y no he escrito ni

una sola línea de código y lo he hecho

gratis. Hacerla han sido dos proms e

instalarla en mi móvil un clic. Gracias

a tres herramientas que Google acaba de

actualizar con novedades brutales y casi

nadie está hablando de ello. Hoy lo

vamos a ver en tres niveles. Con la

primera herramienta, creamos una

identidad de marca y una web

automáticamente. Con la segunda

herramienta, diseñamos una web y una app

con precisión profesional. Y con la

tercera, convertimos ese diseño en esto

que ves aquí, una app de Android

instalada en tu teléfono. Todo paso a

paso para que tú puedas crear la tuya

ahora.

Y empezamos por el primer nivel, el

nivel fácil. Vamos a ver la

actualización de Pomeli. Si os acordáis,

esta herramienta de Google es una

herramienta gratuita que a partir de tu

página web extraía el ADN de tu marca y

te permitiría crear creatividades para

promocionar tu marca en redes sociales.

Pues bien, han aplicado un cambio

radical a cómo puede funcionar esta

herramienta. Ya no necesitas una página

web para crear este ADN. Ahora puedes

proporcionar el ADN a partir de

diferentes imágenes y él automáticamente

te crea la página web. por lo que han

invertido el flujo de trabajo. Y no solo

esto, han incorporado un agente que te

ayuda a utilizar la herramienta de un

modo más sencillo y también te crea unas

guías de marca automáticamente. Vamos a

ver cómo funciona. De modo que

simplemente accedemos directamente a la

página web de Pomeli. Os dejaré el

enlace en la descripción y una vez aquí,

pues ya podemos empezar a crear nuestro

ADN de marca. Si le damos a empezar,

podemos ver cómo nos pide la página web,

pero aparece este botón. No tienes aún

una página web. Y si clicamos en él, lo

que podemos hacer es proporcionarle toda

la documentación de nuestra página web,

sean imágenes, sean textos donde la

describimos para que él construya el ADN

de marca y luego nos pueda crear la

página web. En mi caso, he preparado

esta información. He creado una marca de

bebidas nootrópicas energéticas que no

existía, que se llama Lucit, y tengo

pues la imagen del producto, como podría

ser la versión en botella y también la

versión en lata. Además, he creado

también un conjunto de imágenes

contextualizadas del producto. Aquí

podéis ver, pues, la imagen de la lata

en diferentes situaciones. Esto también

se lo voy a proporcionar y además de

esto, pues también le proporcionaré el

logo, que es este de aquí. Y lo más

interesante, también le proporcionaré

una guía muy detallada de qué es esta

marca. Y con todo esto, Pomeli sacará el

ADN de esta marca y me creará la página

web, por lo que yo simplemente accedo a

la opción de subirle los archivos y una

vez aquí, pues le cargo todos esos

archivos y automáticamente la gente de

Pomeli analiza toda esta información y

una vez lo ha hecho me aparece este

botón donde me preguntan si quiero

generar el ADN de mi marca, por lo que

voy a hacerlo y aquí empieza a crear el

ADN de mi marca donde automáticamente

rellenará todos estos campos, pues el

nombre, el logo, las fuentes, los

colores, si tengo algún eslogan, los

valores de marca y bueno, en general

toda la información necesaria para

trabajar con una marca y hacer nuevas

creatividades. Y aquí podemos ver el

resultado. Ha identificado correctamente

el nombre. Si lo hubiese hecho mal, lo

podríamos editar fácilmente simplemente

con el lapicito. Podemos ver cómo

también ha identificado correctamente

las tipografías que había en el

documento que os he mostrado antes en

PDF. Aquí podéis ver cómo ha utilizado

la Cormoran Garabon y la DMS. Y si nos

vamos al documento vemos como estas son

las dos tipografías que estaban

definidas en él. Ha identificado también

correctamente los colores y si bajamos

un poco más, lo que sí que es verdad que

se ha inventado es el tagline, pero

bueno, me ha proporcionado uno nuevo.

Pensad que esta herramienta no está tan

pensada para alguien que ya tiene creada

su marca, sino para que la gente le

proporcione unas nuevas líneas con las

que trabajar. ha identificado

correctamente los valores de marca, la

estética y el tono, por lo que con todo

esto él ya puede empezar a trabajar. Le

doy a let's go y aquí ya me da todas las

opciones de lo que puedo hacer con lo

que ha creado. Puedo crear campañas, que

esto es algo que ya os expliqué en

vídeos anteriores. Puedo hacer

photoshooots de producto, que esto es

algo muy interesante, pero que también

ya os expliqué. Y las dos novedades,

puedo crear una página web o puedo hacer

un libro con las guías de marca. Vamos a

hacer estas dos cosas. Le voy a clicar

en página web y automáticamente, sin que

yo haga nada, me va a hacer una

propuesta de página web para este

producto. Y aquí vemos que nos ha creado

esta primera versión de la página web.

Si le damos a preview en New Tab, la

podemos ver a página completa. Vemos que

la ha hecho en inglés. Ahora os enseño

cómo solucionar esto, pero lo

interesante es ver cómo ha utilizado los

diferentes recursos. Es cierto que no ha

utilizado el archivo del logo, pero sí

que ha utilizado el resto de imágenes

que le he proporcionado y me ha creado

una página web, pues con una estructura

bastante arquetípica. Primero muestra el

producto un poco en qué consiste y qué

es lo que lo diferencia, presenta el

producto como tal y dos secciones más

terminando de contextualizar la marca. Y

si nos fijamos, pues aquí arriba los

enlaces funcionan correctamente. Como

podéis ver, una página web funcional,

pero que de entrada tiene un problema.

que está en inglés. ¿Podemos solucionar

esto? Pues sí, de un modo muy sencillo.

Simplemente le damos aquí al botón de

edit y le decimos algo como esto. Quiero

que toda la web esté en español. Y aquí

le podría enviar el mensaje. Y fijaros

que si lo que ha sucedido es que hemos

actualizado el ADN de nuestra marca,

pues aquí tenemos como opciones para

actualizar directamente la página web

con las nuevas líneas de estilo. No es

el caso, simplemente voy a aplicar este

cambio. Y si os fijáis, mientras crea

esta segunda versión de la página web,

aquí abajo vemos cómo nos va creando

todo un histórico, por lo que es muy

fácil recuperar la versión que más nos

guste. Y aquí tenemos la nueva versión.

Si le doy a previsualizar, podemos

comprobar como ahora todos los textos

están en español, el amanecer de la

calidad mental, la explicación del

producto y si vamos bajando, pues podéis

comprobar como todo está traducido

perfectamente, por lo que es muy fácil

editar y iterar nuestra página web. Y

finalmente decir que si queréis que esta

página sea pública y otras personas

puedan acceder a ella, pues tenéis que

publicarla simplemente dándole a este

interruptor de aquí. automáticamente se

habilita el enlace y con este enlace

pues ya la podríais compartir con quien

quisieseis o utilizarla como landing

page para alguna campaña. Hay una cosa

que me pasa constantemente. Encuentro

una herramienta de inteligencia

artificial nueva, voy a probarla y no

está disponible en España, bloqueada.

Cada vez me pasa más con modelos nuevos,

con herramientas en fase beta o con

nuevas funciones. Solo funcionan desde

Estados Unidos. Cuando me pasa esto, yo

lo soluciono con Surchar, que dispone de

más de 4,500 servidores en 100 países.

Me conecto a Estados Unidos y ya tengo

acceso en el ordenador y en el móvil.

Funciona igual. Además, tiene otra

función que utilizo mucho, el

alternative ID. Cuando quiero probar una

herramienta nueva y me pide registro, no

doy mi correo real. Surfshar me genera

una identidad alternativa con un correo

temporal. Pruebo la herramienta y si no

me interesa, no me llega spam de por

vida. Y aparte de poder acceder a sitios

bloqueados, hay otro aspecto básico. Tu

actividad en internet no es privada. Tu

proveedor de internet puede ver por

dónde navegas. Y si te conectas al wifi

de un hotel o una cafetería, cualquiera

en esa red puede interceptar tu tráfico.

Surfshar cifra toda tu conexión. Navegas

y nadie sabe qué estás haciendo ni desde

dónde. Una cuenta sirve para todos tus

dispositivos, ordenador, móvil y tablet,

sin límites. El enlace lo encontrarás en

la descripción y si usas el código

Xavier 2026, te llevas 4 meses extra en

tu suscripción. Tienes 30 días para

probarlo. Si no te convence, te

devuelven el dinero. Y antes de pasar al

siguiente nivel, donde veremos las

actualizaciones que han hecho en Stitch,

que también nos permite crear una página

web, pero nos lo permite hacer con mucho

mayor control y mucho más completa,

vamos a ver la segunda novedad que hay

en Pomeli, que es esta de aquí, la

posibilidad de crear un Brandbook, un

manual corporativo. Cuando clicamos en

este elemento del menú, pues

automáticamente se pone a crearlo. Y

este es el resultado que obtenemos, un

manual corporativo que podemos compartir

vía un enlace si le damos a publicar o

que incluso lo podemos descargar en PDF.

Y aquí tenemos el resultado, un manual

corporativo que podemos compartir

perfectamente por email con cualquier

persona que nos tenga que ayudar a crear

creatividades con la marca siguiendo una

línea. Es un poco básico, es decir, no

hay mucha información y no está

superdarrollado, pero es más que

suficiente para que cualquier persona

pueda entender cómo debe trabajar con

esta marca. Y una vez vistas las

novedades de Pomeli, subimos de nivel y

pasamos al nivel dos. Nos vamos a las

novedades de Stitch. Stitch, si no la

conocéis, es la herramienta de Google

que nos permite diseñar y prototipar

rápidamente tanto páginas web como

aplicaciones. Por ejemplo, aquí hay un

proyecto antiguo donde lo que le pedí

fue que me generase el diseño de una

página web. Y aquí podéis ver el tipo de

diseño que nos hace de un modo muy muy

rápido. No os preocupéis porque ahora

vamos a crear una con las cinco

novedades que presentaron en el Google

IO y que podéis usar gratis. Y es que en

este hilo de X nos resumen estas cinco

novedades. El streaming, es decir, la

posibilidad de ver trabajar en tiempo

real cómo diseña Stitch, la posibilidad

de empezar con un diseño ya existente,

que es un poco lo que hemos hecho con

Pomeli, pero mucho más potente. La

posibilidad de pedirle ediciones

concretas en los diseños que va haciendo

sin tener que regenerar toda la

pantalla, la posibilidad de crear

también HTMLs dinámicos y de importar y

exportar a diferentes plataformas. De

este modo, el streaming se refiere a

esto que estáis viendo ahora. Podemos

ver cómo Stitch trabaja en tiempo real y

nosotros podemos intervenir y hacer

sugerencias o cambiar la dirección de su

trabajo. También podemos empezar a

partir de documentación propia de

nuestro diseño, bien sea a partir de

simplemente un archivo design.md MD o de

documentación como la que hemos subido a

Pomeli. También podemos hacer este tipo

de ediciones específicas, por ejemplo,

cambiar el color de un botón y que ahora

no se rediseñe toda la pantalla y crear

este tipo de gráficos como, por ejemplo,

que las estrellas se muevan. Aquí lo

podéis ver, esta es otra de las

novedades. Y finalmente podremos

exportar a más plataformas estos diseños

para hacerlos funcionales lo más rápido

posible. Pero vayamos por partes y

centrémonos sobre todo en estas nuevas

capacidades de diseño que son realmente

muy interesantes. Vamos allá con el

ejemplo práctico. El proyecto consistirá

en volver a crear una página web para

esta bebida. A ver si lo hace mejor que

Pomeli, que debería hacerlo. De modo que

volvemos a Stitch y lo que vamos a

hacer, lo primero de todo, es probar

esta nueva función donde podemos subir

nuestros archivos para que empiece a

trabajar en el diseño. Lo que viene a

ser este botón de aquí, empieza con tu

diseño, simplemente clicamos y aquí lo

que lo que haré será proporcionarle la

misma información que le proporcioné a

Stitch, esa guía de diseño más todas las

imágenes. Una vez cargado, podéis ver

que hay la opción de donarle

instrucciones adicionales. De momento no

lo voy a hacer, simplemente le voy a dar

a continuar. Y lo que nos hace es

crearnos un prom con todo este contexto

donde la instrucción es crear un sistema

de diseño sobre el cual podremos crear

nuestra página web. Lo que sí voy a

hacer es seleccionar ya desde el

principio que nuestro objetivo es crear

una página web. Y en cuanto al modelo,

pues vamos a trabajar con el tres flash,

que supongo que será la última versión.

Le damos a generar y a la gente se pone

a trabajar. Tal y como podéis ver, ha

cargado todos los recursos que le había

proporcionado las diferentes imágenes y

además también ha cargado ese documento

donde estaba la guía de cómo debía

trabajar y poco a poco va creando los

diferentes elementos de el sistema de

diseño, que sería esto de aquí, donde ha

seleccionado los colores, la tipografía,

otra vez la ha identificado

correctamente, la Cormorang, Garamon y

la DMS. Y si nos vamos a la respuesta de

la gente, pues podemos ver como me dice

que ya ha terminado y que ya podríamos

empezar con la creación de la landing

page para este producto, por lo que

vamos a hacerlo y en vez de pedirle

simplemente que diseñe una landing page,

vamos a ser un poco más ambiciosos. Le

vamos a pedir que genere toda la página

web, un proyecto con cuatro páginas

donde en la instrucción pues le defino

cómo debe ser exactamente cada una de

estas páginas, la página de inicio, la

página de producto, la página de quienes

somos y la página de compra. Por lo que

simplemente me voy aquí abajo en la caja

de texto, pego esta instrucción y si os

fijáis ya tiene seleccionado este

sistema de diseño que se acaba de

generar, por lo que debería respetar

perfectamente todas las normas. Se lo

envío y vamos a ver cómo trabaja. Vemos

cómo se vuelve a activar el agente, se

pone a pensar y aquí vemos cómo empieza

a crear todas y cada una de las

pantallas. En total debe generar cuatro

pantallas distintas. Aquí lo veis, ya

las tiene listas. Y aquí vemos cómo

empieza a trabajar y va generando las

pantallas realmente en tiempo real.

Fijaros, por ejemplo, en esta segunda

pantalla cómo vemos como el cursor va

trabajando y va diseñando cada uno de

los elementos. En principio, ahora,

según lo que han presentado, nosotros

podríamos intervenir para darle

instrucciones y que modifique su manera

de trabajar. Pero como podéis ver, lo

vamos a dejar trabajar para que termine

de momento estos cuatro diseños y

podemos ir viendo exactamente cómo

diseña cada una de estas cuatro

pantallas. Y la verdad es que de momento

esto tiene muy buena pinta, está

respetando perfectamente los colores,

las tipografías y la verdad es que el

diseño que está haciendo pues de momento

pues puede ser más o menos convencional,

pero sí que es bastante coherente y

atractivo. Vamos a dejar que termine. Y

aquí tenemos los diseños terminados, la

página de producto, quiénes somos,

inicio y compra. Y podemos irnos, por

ejemplo, a la página de inicio, donde

vemos, creo que el único error de bulto

que ha hecho Stitch como es alucinar

esta lata que no tiene nada que ver con

el producto que le habíamos

proporcionado, aunque en general, como

veremos, sí que ha utilizado las

imágenes de referencia que le había

proporcionado al inicio, es decir, estas

imágenes de aquí las ha utilizado en el

resto de páginas e incluso en esta

propia página de inicio, tal y como

podemos ver en esta sección de aquí o en

esta sección de aquí. Vemos que ha

creado las páginas con un diseño

totalmente coherente, con un diseño, yo

creo, bastante equilibrado. Deberíamos

repasar el copy, que seguramente es lo

más pobre, porque en principio Stitch es

una herramienta de diseño, no está tan

enfocada en escribir los textos para

vender, pero podemos ver cómo ha

completado todas y cada una de las

páginas correctamente, por lo que es una

herramienta ideal para crear una página

web que luzca profesional de un modo muy

muy rápido. Y lo interesante es que

podemos seguir probando algunas de las

novedades que os he mencionado al

principio. Por ejemplo, esta imagen de

aquí, que os decía que es una imagen que

no es correcta, podemos probar de

cambiarla con la función de inedit.

Primero lo vamos a hacer de modo manual.

Simplemente vamos a seleccionar esta

función del lapicito, clicar encima de

él y darle a abloat imagía

sustituir esta imagen. Aquí lo podéis

ver. Tenemos la lata deit que conserva

esta animación. Y ahora vamos a hacer

una edición con inteligencia artificial.

Por ejemplo, en la propia página de

inicio nos podemos fijar en el color de

los botones está este naranja. Y por

ejemplo, si nos vamos al final tenemos

este comenzar ahora que está en azul.

Pues le podemos pedir que cambie el

color de este comenzar ahora por el

naranja. Para hacerlo, ¿cómo se hace?

Después seleccionamos la página de

inicio. Aquí podéis ver cómo se ha

quedado seleccionada y con el lapicito

seleccionamos también el botón. Le damos

a editar con inteligencia artificial y

se nos carga en el contexto del chat y

le pedimos algo como esto. Cambia el

color del botón por el naranja de la

hoja de estilo y hazlo un poco más

grande con un efecto de liberación

cuando haga hover con el ratón, es

decir, cuando pase por encima con el

ratón. Se lo envío. Y aquí podéis ver

cómo el agente se pone a editar el

elemento

y automáticamente ha editado solo el

elemento en cuestión y me pongo encima

del botón a ver si vibra. Tengo este

elemento seleccionado y aquí podéis ver

efectivamente como cuando me pongo

encima con el ratón cambia de color y

además vibra, por lo que es una manera

muy muy fácil de tener un control casi

total sobre los diseños que nos hace

Stitch. Y ahora vamos a probar otra de

las novedades, la posibilidad de que

renderice HTML animado y que incluso

cree pequeñas ilustraciones en SVG. Por

lo que voy a seguir trabajando en esta

página de inicio y le voy a decir que me

cambie este fondo por un fondo coherente

donde haya una ilustración SVG de un

bosque en una noche estrellada y que las

estrellas estén animadas. Lo voy a hacer

con una instrucción como esta. Quiero

que el fondo incluya una ilustración

sutil de un bosque en formato SVG

coherente con el diseño y que esta

ilustración siempre queda anclada en la

parte inferior de la sección y que

conservando el azul corporativo como

fondo aparezcan estrellas encima y que

estas estén animadas de modo que

aparezcan estrellas fugaces. Se lo envío

y vamos a ver si conseguimos hacerlo.

Vemos como la dibuja en tiempo real.

Aquí podemos ver la ilustración, podemos

ver la imagen, vemos como están

apareciendo las estrellas y ahora

faltará que aparezcan las estrellas

fugaces. Y aquí tenemos el resultado.

Podemos ver el bosque al fondo y como de

vez en cuando alguna estrella fugaz

aparece y se desplaza a través del

fondo. ¿Lo habéis visto? Como iba un

poco lento y aparecían con poca

frecuencia, le he pedido que me haga una

versión donde las estrellas se vean de

un modo un poco más continuo, que es

esta versión de aquí. Aquí podéis ver

como acaba de pasar una, acaba de pasar

otra y, en general, pues ha cumplido

perfectamente con la instrucción. Ha

puesto el bosque abajo, ha conservado el

color de fondo, me ha puesto estrellas y

de vez en cuando aparece una estrella

fugaz. Y ya hemos visto cuatro de las

cinco novedades de Stitch. la

posibilidad de importar nuestros

archivos, el hecho de que Sit diseñe en

tiempo real, poder editar elementos

concretos y además esta capacidad para

renderizar HTML con movimiento. Pero nos

queda una, la última, la posibilidad de

exportar. Fijaros que ahora mismo si le

doy a exportar me dice que no tengo

ninguna pantalla seleccionada. Para

exportar siempre debemos seleccionar las

pantallas que queremos exportar. Y

cuando le damos a exportar podemos ver

todas las opciones que tenemos. Las

nuevas, ¿cuáles son? pues NLF, Lovible,

Bolt. Pero en este vídeo voy a hacer

otro ejemplo con Google i Studio. ¿Por

qué? Porque hay otra novedad que aún no

os he contado. Y para hacer una

demostración de exportación, me he

preparado un proyecto un poco distinto.

Es este de aquí. Son tres pantallas para

una aplicación de móvil, una aplicación

que debería desarrollarse para entorno

Android. ¿Por qué? Porque hay otra

novedad interesante en este caso, en

Google. Ahí estudio cómo es el hecho de

que ahora, en principio, con una sola

instrucción, podemos crear aplicaciones

para Android y instalarlas

automáticamente en nuestro dispositivo,

por lo que vamos a ver si lo podemos

hacer a partir de un diseño de Stitch.

Para ello, simplemente voy a seleccionar

estas tres pantallas, me voy a ir aquí a

export, voy a seleccionar Studio y le

voy a decir construir con i Studio.

Automáticamente saltamos a Google i

Studio. Parece que hay un vídeo de

presentación que nos vamos a saltar. Y

aquí en este momento le voy a decir que

quiero crear una app en Android y la

instrucción va a ser la siguiente. Tu

objetivo es programar la lógica y la

interfaz de una aplicación web tipo

Pomodoro para Android. Y aquí pues

simplemente le explico en qué consisten

cada una de esas tres pantallas de las

que le he cargado el diseño y le doy a

construir. Y Google Studio ya ha

terminado. Este es el resultado del

primer prom. No le he dado ninguno más.

Es una aplicación sencilla, por lo que

espero que lo haya hecho bien. Nos hace

una previsualización en el propio Google

Studio, pero espero poder instalarlo en

mi dispositivo en un click tal y como

nos prometió Google. Dicho esto, vamos a

ver aquí en qué consiste esta aplicación

y si funciona correctamente. Es un

pomodoro donde podemos arrancar pues

periodos de trabajo. Cuando se terminase

ese periodo de trabajo, pues podríamos

ir a un periodo de descanso. Es también

un pomodoro donde añadir tareas. Aquí

podríamos ver algunas tareas que están

cargadas. Y cuando clicamos en ellas,

pues las podemos marcar como hechas o

aún por hacer. Y finalmente tenemos una

pantalla de ajustes de la aplicación.

Vemos que funciona correctamente. Ahora

falta por comprobar si la podemos llevar

a nuestro móvil, por lo que simplemente

voy aquí y le voy a dar a instalar. Como

podéis ver, tenemos que dar algunos

pasos previos, como activar el modo

desarrollador, activar la función de USB

de buging y luego conectar el móvil al

PC para poder instalarlo. Vamos a

hacerlo. Todo hecho, vamos a instalarlo

vía USB. Seleccionamos mi móvil y le

damos a conectar. Y parece que está

instalando la aplicación en el móvil. Y

listo, ya lo tenemos, nuestra aplicación

en el móvil para poder probarla y jugar

con ella. decir que parece que funciona

correctamente, es decir, funciona

exactamente igual que en Google Studio.

Puedo ir saltando entre pantallas. La

verdad es que se ve bastante mejor en el

móvil que no en Google Studio, pero lo

cierto es que he podido crear una

aplicación de Android en una sola

instrucción a partir del diseño que

había hecho en Stitch. Ya lo ves, ahora

con lo nuevo del ecosistema de Google es

muy fácil hacer tanto webs como

aplicaciones, incluso aplicaciones

Android. Si te has quedado con ganas de

saber más acerca de Pomel y Stitch, pues

te dejo estos dos vídeos aquí.