Anthropic Lanza Claude Design y diseña TODO transcript

Okay, Antropic acaba de hacer una jugada brutal. Acaban literalmente de lanzar Cloud Design y lo que hicieron es que integraron en solamente una herramienta, lo que antes te requería seis. Figma, Lovable, Bolt, Stitch, V0 e incluso Canba. Todas estas al mismo tiempo. En un solo prompt hablé con Cloud Design y me creó una réplica exacta de YouTube. Le pedí un dashboard para mi comunidad school y me lo armó por completo y me permitió crear proyectos en los que antes literalmente me demoraba horas.

Lo mejor es que después simplemente le puedes dar a exportar, pasar a Cloud Code y lo puedes dejar corriendo en menos de 10 minutos. Antes diseñar con IA era puro AI slop, cuadritos grises, interfaces genéricas, luces de neón y hoy día te está entregando aplicaciones dedicadas de arte. Y su lanzamiento fue tan impactante que las acciones de Figma bajaron un 7% apenas lo anunciaron. Esta es la herramienta que todas las personas, sobre todo los diseñadores, necesitan conocer porque vino a cambiar el diseño con inteligencia artificial como lo conocemos.

Así que si te quedas conmigo los próximos minutos te voy a mostrar uno, qué es Cloud Design, cómo funciona, qué puedes hacer con él, cómo se diferencia de las otras herramientas y cómo lo podemos empezar a usar. Vamos a crear una aplicación completa desde cero, es decir, vamos a crear toda la interfaz visual, vamos a aprovechar y estrujar esta herramienta al máximo. Después vamos a pasarla a Cloud Code y la vamos a dejar completamente funcional, conectándola a distintas APIs, herramientas, aplicaciones y dejándola publicada.

Y al final te voy a dejar el flujo exacto para que tú puedas empezar a replicarlo en tu casa, sea que quieres crear una landing page, una aplicación, un dashboard, literalmente lo que sea, con Cloud Design. Así que para el final del video vas a poder construir esto y mucho más con Cloud Design y vas a saber cómo aprovecharlo y sacarle el máximo provecho antes que todos. Antes de comenzar, te agradeceríamos mucho si es que me dejas un like en este video, no solamente porque me ayudas a mí y al canal, sino porque también le dices a YouTube y al algoritmo que te gusta este estilo de videos.

Así que sin más que decir, vamos a poner las manos a la obra y vamos a crear con Cloud. Okay, ahora sí voy a dejar el cloud atrás y vamos de lleno con Cloud Design. Cloud Design está superinesante, está funcionando hoy día con el modelo de Opus 4.7 que fue justo después de el lanzamiento y podemos entrar si es que entramos a cloud. Y nos vamos aquí al costado donde sale design. Nos vamos a encontrar con un workspace así y te va a hacer un pequeño video de una presentación.

Aquí nos van a salir los archivos y este, por ejemplo, es uno de los archivos con los que estoy trabajando. Este es el Community OS y a la izquierda voy a poder tener una conversación con cloud, es decir, necesito cambiar esto, necesito modificar esto y a la derecha podemos ir viendo que se va construyendo. Es una interfaz visual s super interesante. Y aquí tenemos los archivos que vamos creando. Entonces tenemos los assets, los uploads, ¿verdad? y todos los archivos que estarían componiendo un proyecto como este.

Lo más interesante también es que, bueno, es completamente interactivo y responsivo. Este es un proyecto en el que llevo trabajando ya un par de días, pero cuando salió Cloud Design lo intenté en un prompt y esto es lo que me dio. Esto es un prompt en el cual tuve un par de conversaciones más back and forth y me dejó con esto que lo encuentro realmente genial. Después intenté con otro proyecto y le dije, "Okay, vamos a replicar YouTube.

Exactamente. Mira, solamente le dije, créame una copia de YouTube." Y le di un par de parámetros más, como que se llame Ventube, ¿verdad? [risas] Que tenga al final los videos sobre mí y en fin. Y no creo esto que es una copia completamente responsiva también de YouTube. Si es que ves acá podemos ir apretando los distintos videos, podemos volver a acá, ¿verdad? Podemos ver las distintas categorías, cómo funciona, la vamos apretando.

Tenemos la sección de shorts, las suscripciones, ¿verdad? Tenemos los canales incluso. Entonces, es una genialidad. Al final es una genialidad. Todo esto lo hicimos un onehot. En el caso de que queramos exportar esto acá tenemos varias opciones. Tenemos la opción de descargar el proyecto como un ZIP y después se lo pasamos a Cloud Code, por ejemplo, o se lo pasamos a, no sé, cualquier persona o cualquier lo podemos subir en cualquier lugar en el que podamos hacer un deploy de los proyectos.

Recordemos que los proyectos son nada más que estas carpetas comprimidas. Ya, eso es al final un proyecto. Cualquier proyecto es muchos archivos comprimidos en una carpeta. Y si los compartimos y le damos acá a exportar, podemos exportarlo como ZIP, es decir, como el proyecto. Lo podemos mandar incluso a Canva o lo podemos mandar a Cloud Code. Y esto creo que es superinesante, ya lo vamos a ver más a detalle, pero podemos mandarlo y copiarlo.

Eh, y después podemos entrar y podemos abrirlo en Cloud Code y se va a quedar público en esta dirección de acá. Okay, ahora sí que sí, vayamos al bruto de lo que podemos hacer. Cuando empezamos acá, tenemos varias opciones y te va a salir un pequeño video superinesante sobre las cosas que se pueden hacer. Podemos acá crear un nuevo prototipo, podemos crear un nuevo slide deck, es decir, una presentación, podemos trabajar con alguna plantilla o podemos empezar un nuevo proyecto.

Creo que una de las cosas más interesantes también que está en su blog de lanzamiento es esto. Podemos crear literalmente todo. Ya vamos a ver todo lo que podemos crear, pero mira, aquí está creando un diseño interactivo de un gráfico, ¿verdad? de un mundo que está literalmente moviéndose de manera interactiva y empieza a agregarle los controles porque esto vamos a ver ahora que es un es supervisual. Esto es algo supervisual que podemos estar editando en la marcha y es mucho de corregir y de ver las cosas que estamos haciendo, eh, de seleccionar una cosa acá, oye, cambiemos esto, ¿verdad?

Cambiemos esta otra cosa. Aquí está empezando a crear los prototipos y también encuentro muy interesante que funcione con el Opus 4.7. Como podemos ver, acá está también ajustando las cosas de manera dinámica, pero la mayoría va a ser en base a conversación. Y aquí nos dicen algunas cosas para las que se pueden usar. Prototipos, podemos usar wireframes, que serían al final como como los alambres, por así decirlo, o los esquemas de alambres que nos sirven para ver cómo sería la navegación en una UX o UI.

Eh, tenemos las exploraciones de diseño, tenemos los pitchs, presentaciones, ¿verdad? marketing, frontier, design, etcétera. Una de las cosas que más me gusta y los mayores problemas que tenemos cuando generamos con inteligencia artificial es que no tenemos un branding continuo para las cosas que vamos creando. Esto fue directamente solucionado acá porque podemos importar todos nuestros brand assets que ya vamos a ver acá.

Eh, volviendo acá a cloud y volviendo al design, vamos a ver que tenemos todas estas cosas. Y si ponemos acá aprender sobre cloud, vamos a ver que tenemos muchas opciones. ¿Qué queremos hacer? Okay, supongamos que queremos hacer algo de producto in marketing. Vamos a continuar. Continuar. En fin, da igual. Y aquí tienes un par de recomendaciones. Te dicen, puedes empezar con los slides, puedes importar tu contexto, puedes eh apuntar a las cosas que quieres cambiar, puedes cambiar los valores en vivo, puedes exportarlo a distintos lugares y puedes guardarlo como un template.

En el caso de que quiera crear algo rápido, vamos a crear la opción de wireframe, que es como para empezar a crear rápido sin gastar quizás muchos tokens, que es como, okay, protemos, esto va acá, esto va acá, esta otra parte quizás, o High Fidelity de una. Supongamos que queremos crear una aplicación de de meditación. Okay, vamos a aprovechar que tenemos acá la rana. Esta es una rana que está meditando y este va a ser como nuestro eh nuestro brand asset. esta rana que está meditando, entonces va a ser algo como medio verde quizás medio natural, pero en el caso de que ya tenga algo, yo se lo podría importar directamente.

Lo voy a dejar acá, espero que no se caiga para que quede por el resto del video. Se puede ver ahí. Sí, perfecto. Entonces, vamos a crear a la rana meditadora. La ¿Dónde la vamos a crear? La vamos a crear como en un ambiente quizás de medio oak, medio medio como un árbol quizás o como algo como medio silvestre, no sé. Vamos a ver qué podemos hacer acá. Para este caso le voy a poner rana meditación y vamos a darle a crear High Fidelity.

Podemos crear otras cosas para este caso. Vamos a crear una aplicación de meditación para el celular. Cuando entremos acá, pues tenemos muchas opciones. Bueno, el design system es algo que quería cubrir también, que está super bueno, porque aquí podemos entrar y podemos empezar a importar ciertos skills como videos animados, prototipos animados, o sea, perdón, interactivos, un deck, ¿verdad?, un wireframe, eh, funciones para exportar los distintos formatos.

En fin, para este caso no vamos a armar el design system, pero creo que es super importante tenerlo en cuenta que existe ya. Eh, aquí podemos empezar a agregar los distintos assets y podemos tener una conversación normal como tendríamos con cualquier inteligencia artificial o con cualquier chatbot de cloud. La diferencia es que vamos a crear todo de manera interactiva. Para este caso vamos a usar el nuevo modelo Opus 4.7 y vamos a empezar a prontear y le voy a decir, vamos a crear una aplicación de meditación estilo como natural, estilo oak, es decir, como madera, como un color más pastel, quizás algo un poco más cálido.

La aplicación tiene que ser responsiva para celular. Vamos a imaginar que estamos modelando todo para celular. tiene que ser eh la aplicación completa. Después la vamos a conectar con Eleven Labs para generar las meditaciones. Entonces se tiene que conectar a la API. Todo gira alrededor de una rana porque las ranas son pacíficas y tiene que transmitir mucha paz. Quiero una opción de personalización de los colores pastel donde la persona pueda empezar a elegir como qué color pastel clarito puede elegir.

Entonces, vamos a jugar un poco como con este oak tree. Quiero que sea como una meditación que te produzca calma solamente al verlo. Tiene que ser responsivo. Okay, aquí me acaba dar esto y le voy a decir algo por el estilo de y tiene que tener una secuencia de onboarding para cuando me esté creando un poco la cuenta. tenga esta secuencia de onboarding donde me haga las preguntas un botón de play y pausa y que tenga al final eh una experiencia de usuario que sea muy flow.

Okay, a ver si es que lo entienda ahí le voy a dar a guardar. En este caso teníamos varias opciones. Nuevamente podíamos partir desde importar algún repositorio directamente o mandar algunas cosas, pero vamos a suponer que no sé, no sé que tenemos ya un branding, que tenemos algún logo, vamos a buscar algún logo para ver cómo se ajustaría un poco a nuestro branding y nuestra estética. Okay, entonces mira, aquí acabamos de empezar.

Nos empezó a [risas] mira esta genialidad. ¿Recuerdas cuando Cloud te empieza a hacer preguntas? Mira, aquí me está diciendo, "Okay, ¿cómo te estás imaginando a la rana?" Ya. Entonces, aquí tenemos ya toda una como todo un cambio de parámetro porque la IA en general no tiene gusto o no tenía gusto, ¿eh? Y era super slop, super feo todo, como que no no existe un criterio. Aquí me dice cuál de estos cinco como iconos o emojis o representaciones visuales encarna mejor tu visión de la rana meditadora, lo que es una genialidad.

A ver, para este caso creo que me gusta eh la primera. Creo que la primera está bastante buena. La la última es muy emoji. La segunda igual está buena, eso sí, pero vamos, supongamos que nos gustó más esa. ¿Qué paleta pastel oak te atrae más como base? Mira, genial. Eh, creo que esta me está gustando. Creo que la primera en este caso que debe incluir el onboarding. Okay, bienvenida con la rana. Nombre del usuario. Eh, pongamos como sí un par de preguntas.

Okay. Sorpréndeme. Lo voy a decir. Decide tú. ¿Qué pantallas principales debe tener la app después del onboarding? Okay. Home tu rana saludando, ¿verdad? Esta está buena. Aquí podemos elegir más de una. generador de meditación, play, okay, sonidos ambientales, respiración guíada, en fin, má cada perfil y esto, eh, nivel de experiencia, no sé, recordatorio, en fin, pero esto le voy a decir, decid tú que sea simple al final porque es un onboarding muy lento, hace que la gente no entre y perfil, decide tú si falta algo.

Recordemos que será simple. Perfecto. ¿Cómo se ve el reproductor de meditación? Vamos a elegir alguno de los de acá. ¿Cuál es el que nos puede gustar más? Creo que me gusta este. Este está bueno. Estilo tipo gráfico. Respira, respira, respira. Me gustó el primero. ¿Cómo quieres mostrar la integración a 11 laps? Pantalla de generación real, input, llamada API, audio, MOC, visual, animación generando, sin llamada real.

Eso ambas. MOC por defecto. Sí, con botón para conectar la API real. Se conectará directamente a mi APK siempre. ¿Qué tan profunda debe ser la personalización de colores? Solo elegir entre cuatro o cinco paletas predefinidas. Okay, no sé, ya decide tú qué tan animada debe sentirse la app media. Vamos por por ahí. ¿Qué twieres exponer? Paleta base. Entonces, mira, tenemos mucho, mucho que podemos elegir acá. Estado de onboarding, saltará cualquier paso, intensidad de animaciones, estilo de la rana.

Le voy a decir tú no más. Algo más. Referencias, cosas, sensaciones, cosas a evitar. Le voy a decir, te voy a adjuntar alguna imagen. Voy a entrar aquí a Bato Elements. Voy a buscar rana. [risas] Rana eh, rana logo. Okay, vamos a suponer que qué es lo que estamos buscando. Quizás lo voy a buscar en inglés porque por qué no si ya tengo esto en inglés. Frog logo. Aquí sí tenemos varias opciones de las ranas. Tenemos videos, templates de videos.

Eh, no quiero fotos, quiero eh no quiero quizás cosas de stock, quizás estoy buscando algo más gráfico. Okay, esta me gustó. Voy a copiarla directamente. También la podría descargar, que creo que va a ser un poco mejor. ¿Y por qué te estoy haciendo esto al final? Creo que es importante porque muchas veces las los logos y las cosas ya las tenemos creadas. Entonces, te voy a mostrar como en el caso de que ya la tuviéramos creada.

Sí, te voy a adjuntar la imagen del próximo mensaje y le vamos a dar a continuar. Okay, mira, aquí hay un par de cosas también interesantes que quiero mostrarte. Si es que vamos acá y vamos a las imágenes, por ejemplo, acá supongamos que no sé no gustó o tenemos estas imágenes acá y se las quiero adjuntar, simplemente las puedo arrastrar acá por mientras que está pensando y que está haciendo todas las cosas y puede empezar a trabajar.

Aquí te sale drop files here. Images, docs, references, Figma y Cloud will use the context. Alternativamente, también puedes elegir esta, puedes poner acá las descargas frog logo y puedes empezar a elegir todos tus archivos. Voy a abrirlos acá, le voy a decir, este es mi logo, eh, para empezar a crearlos y nos va a empezar a crear acá una barra de progreso, por ejemplo, esto. Estas son todas las cosas que vamos a hacer.

Copiar el logo al proyecto. Vamos a configurar el scaffolding de iOS. Vamos a definir el sistema de tokens, construir componentes bases, vamos a hacer el onboarding, home con rana saludando, generador de LAS, reproductor, etcétera. Vamos a esperar un ratito y vamos a ver qué es lo que hace, pero por mientras podemos ver que ya empezó a crear las carpetas y ya empezó a organizarse cómo se va a ver. Entonces, acá nos empezó a crear los componentes directamente, empezó a subirnos las cosas y aquí podemos ir dejando comentarios.

Estos comentarios son para, no sé, pues, si es que necesitas dejar algún feedback o algo para el equipo en un costado, lo puedes ir viendo acá y por mientras puedes ir viendo acá qué es lo que está haciendo y qué es en lo que está trabajando. Y después de ir a comerme una barrita, acaba de volver, sigue buscando, sigue trabajando, pero ya podemos [risas] ver una primera versión. Me di cuenta que la rana no está centrada.

Ahí la acabo de centrar, ¿eh? Y mira, tenemos aquí una primera versión que se ve realmente interesante, se ve super buena. Podemos ver las opciones de presentarlo, podemos verlo full screen mientras sigue trabajando. Y mira, aquí tenemos la esta tenemos la opción de generar la meditación. Aquí tenemos, voy a decir como quiero convertirme en un mejor escalador de roca. Después aquí tenemos algunas sugerencias, [risas] da igual, lo vamos a hacer de 3 minutos.

Y tenemos la voz que podemos previsualizar en el caso de que la conectemos. Tenemos la opción de crear la meditación. La rana está escuchando tu meditación dando la voz a la calma, ¿eh? Oh, qué genialidad. Me encantó ese pequeño ese pequeño detalle. Mira. Hola, soy Ira tu ranaguía. Me alegro mucho que hayamos venido a este espacio de tranquilidad. Vamos a explorar juntos el camino. Encuentra una posición cómoda. Respira profundamente por la nariz.

Imagina que te encuentras en el pie de una montaña hermosa. La roca escala bajo el sol. Obséras diferentes. Visualiza con tus manos. Mira con tus dedos. Okay, vamos a darle a escuchar. Y ahora estamos escuchando la rana mientras habla. No la estamos escuchando porque todavía no creamos como la parte de la Labs, pero vamos a hacer la conexión. Supongamos que hay que la rana está muy buena. Es horrible. Es horrible. Me encanta que sea horrible.

Okay, ahora sí está empezando a crear el onboarding, ¿verdad? Porque esto todavía no está listo. Vamos a ponerle ven. En fin, quiero soltar el strer. Y este es un onboarding como más guiado. Mira, aquí tenemos la opciones de colores. Okay, este botón está conmigo corrido quizás. Bienvenido. Ben, ahora sí, Geritación. Volvimos a lo mismo. Sonidos, ranas en el estanque. Deja que el mundo suene, lluvia sobre las hojas. Entonces, mira las aplicaciones que estamos creando acá.

Solamente habiendo hecho esto, todavía sigue trabajamos a dejarlo un par de minutos más. Y ahora sí podemos ver que acaba de terminar con los 14 pasos que está acá. Entonces, me voy a ir a mi perfil y voy a reiniciar el onboarding. Y me dice, "Hola, soy Ira. Voy a guiarte una actitud más profunda, una respiración a la vez. ¿Cuál es tu nombre?" Bueno, mi nombre es Ben. ¿Qué quieres hacer? Soltar el estrés, dormir mejor, encontrar enfoque, solo estar en paz.

Supongamos que es esto. Vamos a elegir qué diferencia queremos. Me gustó esta. Toca para empezar. Esta parte está Okay, estoy listo. Bienvenido, Ben. Entremos. Y nuevamente podemos entrar a verificar que las cosas estén funcionando. Bien, cambia el color que respira con la rana. Genial. Recordatorio diario. Modo noche, podemos activarlo, desactivarlo, voz de la rana. Y en fin, estando acá vamos a poder elegir eh solamente respirar, podemos elegir ciertos sonidos, ¿verdad?, que podemos cargarle simplemente en un archivo MP3 y después hoy vamos a generar una meditación.

Generemos la meditación. Quiero ser el mejor escalador de roca del mundo, pero quiero comer McDonald's todos los días. Estoy en paz con mi decisión. [risas] Va a ser 3 minutos y queremos que nos lo que nos lo vaya diciendo Luna. Okay. Tejiendo palabras suaves, dando voz a la calma. Quiero ser el mejor escalador de roca del mundo, pero comer McDonald's todos los días. Estoy en paz con mi decisión. Ese es el lo que estamos haciendo hoy.

Vamos a explorar juntos un lugar muy especial dentro de ti, un lugar donde conviven tus sueños y tus placeres. Acomódate en un lugar tranquilo. Ahora te invito. Imagina que estás frente a una montaña de roca, pero espera, en la base de la montaña es algo más. Es dorado, es cálido y es familiar. Es la comida que amas. está ahí no juzgando, solo existiendo y tú lo amas también. [grito ahogado] Okay, aquí tenemos probablemente la meditación más absurda, pero la encuentro genial que podemos haber al momento de estar escuchando.

Tenemos [resoplido] una visualización bastante buena de ira la rana que nos está aquí acompañando en esta meditación. Después, si es que volvemos atrás vamos a ver qué quedó guardada acá. Supongamos que quiero cambiar algo. Voy a ir y voy a ir simplemente acá y le voy a decir, "Oye, quiero que la rana sea, no sé, le puedo decir, quiero que la rana sea eh azul, ¿verdad? O quiero que la rana tenga una corona o quiero que el botón sea de este color." En fin, aquí funciona ya como cualquier bot en específico.

Alternativamente, y una cosa que encontré genial es que podemos empezar a editar así. Entonces, supongamos que quiero que esto esté arriba y le agregamos la nota. Le voy a decir, eh, quiero que la cita, entre comillas, esté arriba de la rana. La rana justo abajo. Cambiemos de lugar. Y voy a hacer esto acá. Y voy a hacer esto. ¡Ups! Esto acá. Okay. Y le voy a dar a mandar en este caso. Y podemos ver que se está eh procesando la solicitud que acabamos de mandar.

Deberíamos esperar unos segundos y debería empezar a hacer el cambio. Ahora sí tenemos la diferencia que acaba hacer el cambio y voy a decir, "No me gustó." Hagamos fallback a la versión anterior para que veas que también se pueden hacer los cambios directamente por acá. Entonces, le pedimos un cambio del método con el edit aquí arriba a la derecha, eh, o el trow, que también podría ser. En este caso, mejor dicho, aquí dibujamos y tenemos también el edit, que es como ya una parte un poco más visual, que es mucho más familiar.

Entonces, acá, por ejemplo, supongamos que no quiero que diga sonidos. Voy a hacer, ups, ¿cómo salgo? ¿Cómo vuelvo acá? Todavía estoy partiendo acá. Vamos a recargar para la nueva versión. Vamos a irnos atrás. Recargar. Y ahora sí, supongamos que no sé, pues quiero editar esta parte que sale sonidos y quiero que salga como, no sé, pues, sonidos o vamos a cambiarlo, vamos a ponerle audio. No tengo idea. Se cambia así de simple.

Okay, vamos a volver a sonidos porque te hacía más sentido. Estando acá ya listo, podemos volver a desactivar la parte de editar y podemos ver que sigue haciendo los cambios y volviendo a la versión anterior, es decir, haciendo un fallback de versión. Supongamos que me gustó la versión final con la que estamos. Simplemente voy a darle aquí a exportar, eh, y vamos a conectar la Cloud Code, que es exactamente lo que vamos a hacer.

Pero antes mostrarte y comentarte que todos los archivos de diseño los puedes encontrar bajo la opción de design files. Si es que nos vamos aquí a los uploads, vamos a ver que tenemos los logos que subimos inicialmente, tenemos los componentes que vendrían siendo el onboarding, el jugador, ¿verdad? o el perfil, la UI, los tokens, etcétera. Y tenemos los assets, que son otros assets con los que estamos trabajando. Tradicionalmente, cuando creábamos aplicaciones, lo que necesitábamos hacer era tener un front, ¿verdad?

Y tener un back, ¿ya? O sea, tenemos el full stack developer que conecta el frontend con el backend. Front-end siendo la parte visual, backend siendo la parte funcional de atrás. Lo que acabamos de crear acá es un front-end, por así decirlo, con leves tintes de backend, pero es un front-end. Aquí estamos trabajando la pura UI, por eso se llama cloud design, ya porque estamos trabajando UI, algo muy parecido a lo que hacía Google Stitch, por ejemplo, o Lovable o Bolt, solamente que esos también te integraban levemente backend para poder tener integraciones después más sencillas y más directas a Cloud Code.

Supongamos que nos gustó esta versión. Tenemos aquí las ranas. Volvimos a marco porque es como la parte por default y les digo que me gustó. Me gustó. Lo voy a publicar y pasar a Cloud Code. ¿Por qué le estoy mandando esto? Bueno, para que sepa si hay que hacer algún cambio o no, dejarlo listo para llegar y publicar, pero en teoría, si es que está completamente funcional, acá lo podemos hacer. Para pasarlo a Cloud Code.

Ya vimos cómo se hacía. Tenemos que ir acá a donde sale exportar. Vamos a o descargarlo de ZIP o vamos a pasarlo y hacer un handof a cloud Code. ¿Por qué está interesante esto de decirle? Porque mira, cuando le decimos que vamos a publicarlo y pasarlo a Cloud Code, empieza a escribir aquí un eh empieza a hacerlo el copy, ¿verdad? Y empieza a escribir el RMImi, que vendría siendo como un poco como de contexto de las cosas que necesitamos hacer o de lo que se preparó o se armó.

No sé si es que se hace automáticamente cuando le hacemos el handof a Cloud Code, pero en este caso igual me gusta decirlo porque creo que tiene bastante sentido. ¿Qué significa hacer un handof a cloud code? Significa, okay, acabamos de crear un template, por así decirlo. Creamos un template en Cloud Design. Vamos a importar este template que creamos en Cloud Design dentro de Cloud Code. Como vemos acá, tenemos un prom que es busca este archivo de diseño, lee su RMI e implementa los aspectos del diseño.

Este de acá es el API que acabamos de crear o el llamado API y estamos llamando a un identificador único que es el identificador único con el que venimos trabajando acá. Okay, entonces, fetch this design, implement meditaciones imperiales html. Si quieres que tenga algo o el agente tenga un par de detalles más sobre lo que tiene que implementar, se los podemos dejar acá. Entonces, podemos hacer un onehot de implementación en Cloud Code, lo que es una genialidad.

Entonces, aquí le voy a decir, implementa meditaciones imperiales y vamos a eh crear o a conectarlo también con Eleven Labs. Te voy a dar en los próximos mensajes la API de Eleven Labs para que podamos crear todas las cosas de manera dinámica y si necesitas una clave de Open Router para poder hacer las generaciones de el LLM. Vamos a ver si es que me tomó bien las cosas. Eleven la Sí. Y Open Router para las generaciones de LLM.

Alternativamente, elige tu mejor camino o vida para darle un poco más de libertad. Voy a copiar el comando y ahora sí vamos a entrar a Eleven Laabs para entrar a Eleven Labs, perdón, a Eleven Laabs va a copiar el comando. Y ahora sí voy a entrar a Cloud Code. Para entrar a Cloud Code y trabajar en Cloud Code tenemos muchas opciones. Podemos hacerlo a nivel de terminal, podemos usar un IDE como cursor o VS Code o antigravity o podemos hacerlo dentro de la aplicación de Cloud Code.

Cloud Code tuvo un rebranding superinesante hace poco y la nueva interfaz de Cloud se ve realmente genial, genial. O sea, está super parecido a un IDE. De hecho, hay gente que dice que está intentando de comerse un poco los IDE dentro de Cloud Code. Todavía no tenemos una manera como de visualizar bien los archivos a mi opinión, entonces todavía sigo prefiriendo los ID. Pero por fin es prácticos. Vamos a hacer el push acá.

Voy a correrlo a nivel local. Voy a elegir una nueva carpeta agente de ranas y le voy a pegar el prompt que acabamos de crear o nos acaba de dar cloud design. Ya. Entonces tenemos Cloud Design, que corre a nivel de nube, es decir, en la aplicación, no directamente en la aplicación de de escritorio, sino en la aplicación web. Y aquí le voy a dar permitir siempre voy a darle acá eh omitir permisos, que es un modo que te permite al final estar apertando menos veces.

Enter, enter, enter, enter. Y lo que está haciendo ahora es dentro de la aplicación web, es decir, a un nivel local, está haciéndonos el despliegue, haciendo el llamado API. ¿A qué? Bueno, a este ID que nos acaba de crear, que este ID está conectado a nuestro proyecto de las ranas meditaciones eh imperiales, ranas sen, no sé cómo se va a llamar todavía, pero en fin. Y mira, me dijo, "No puedo acceder al archivo devuelve 404 desde web fetch, probablemente requiere autenticación de cloud UI, no accesible desde el CLI." Le dije, "Vamos nuevamente." Y esta vez le copié, pero sin el prompt extra, es decir, le copié de nuevo esto, justamente esto.

Copy command, se lo mandé acá y ahora sí parece que me lo pudo leer bien y extrajo todos los archivos. Antes parece que no estuvo bueno que le haya puesto la anotación. Okay, bien. Eh, es un paso que podemos hacer después. quería intentar de hacer un onehot, pero en fin, aquí está haciendo el eh web fetch de el proyecto en específico. Y bueno, ahora sí, después de unos minutos, la app está implementada y probada. El preview está visible desde el launch y me está pidiendo un par de cosas. me está pidiendo el Open Router AP y elev laps.

Voy a entrar acá, voy a ir la laps, voy a crear una nueva AP, lo voy a poner para este caso app rana porque la voy a borrar. No restringir en este caso, no restringirlo. Creit limit, no. Y vamos a crear la llave acá. Voy a copiar la llave y le voy a poner eleven las. Alternativamente, yo también le puedo poner esto, pero como en este caso voy a borrar las dos AP keys como que en general igual siempre se las termino subiendo así.

Después me voy a ir acá, voy a irme a personal, voy a irme a get AP key nuevamente en Open Router, voy a crear una llave. Esta llave va a expirar en un día, cosa que cuando suba este video ya no esté. Y le vamos a poner algún nombre que va a ser rana imperial meditadora. Eh, vamos a darla a crear para este caso. No la perdí. Vamos de nuevo. ¿Puedo verla o no? Editar. No la perdí. Vamos de nuevo, entonces. Okay, perfecto.

Ahora sí, copiar y la vamos a subir y open router. Okay, ahora sí, nuevamente esto yo lo podría haber hecho, lo podría haber directamente puesto en el ENV, pero para fines rápidos al final también se lo paso n más y le digo como, "Okay, ponla n más si al final es lo mismo, si es que no voy a estar compartiendo mis archivos con otras personas o acceso a mi computador." y le acabo de cargar los créditos avens, que me di cuenta que no tenía y le vamos a preguntar si está todo listo para probarla.

Ahora sí me dice que debería estar listo. Tengo que abrir el local hosto. Abrimos el local host aquí en nuestro servidor y hola, soy Ira. Empecemos. Tu nombre es Ben. Vamos a continuar. Quiero soltar el estrés. Vamos a respirar más despacio. Calio. Vamos a Listo. Quiero entrar y vamos a generar una meditación. Quiero ser un convertirme en super sayayin. Sé que lo tengo en mí, solamente quiero desbloquearlo. Vamos a crear la meditación y la rana empieza a escuchar mi intención.

Vamos a ver. Eh, aquí me nuevamente me empieza a dar las cosas. Recordemos, esto está corriendo a nivel local. Si quisiera desplegarlo a un nivel público, tendría que hacerle un deploy en Versel o directamente en Netlify o en cualquier lugar que me permita hacer un deploy público. En ocasiones se puede hacer hasta en el mismo GitHub. Lo importante y lo que hay que tener en cuenta, si es que llegamos a hacer eso es que también tenemos que tener un proceso de autenticación.

Autenticación quiere decir que es una persona que se loguea, se crea una cuenta, se verifican los datos para que no empiece a spamearte o no exista como ataques o no te saquen todos los créditos, ¿verdad? o puedas verificar y puedas empezar a cobrar y todo. Y eso generalmente lo hacemos con Supase. Mira, hola, me alegra que estás aquí, sé cómo te sientes. Tranquilo, eso no eres tú, eh, no es el estrés que cargaste tú.

Bajo tus pies, el super sayayin no nace del enojo. Hola, soy y aquí lo estamos escuchando. No sé si se logra apreciar esto, pero Ira, me alegra que estés aquí. Cierra los ojos suavemente, como si los párpados fueran hojas que caen sobre el agua. Respiras que crearla, no tienes que merecerla. Ya está. Como el fuego vive en la madera esperando ser despertado. Gracias por estar. Okay, aquí me está hablando de la llama y nuevamente se queda acá guardado porque se crea y se generan a nivel local.

Y esta creo que es la frase que más me gustó. Ante las palmas de tus manos. Puedes notar el calor en ellas. Ese calor es tuyo. El super saajin no nace del enojo, nace del amor. El superajing no nace del enojo. Me encantó. Okay, ahora sí ya tenemos la aplicación funcionando. ¿Cómo la llevaríamos a producción realmente? Nuevamente sistema de autenticación con Supabase, después deploy en algún lugar, Versel o Netlify, por ejemplo.

Después le conectaría quizás algún pago como Stripe, ¿verdad? para poder hacer pagos y poder no estar irme o no irme a bancas rota directamente. Y bueno, y creo que eso sería lo principal para poder lanzar esta aplicación a producción. Sup te funciona super bien si es que quieres autenticar los créditos, pero ya aquí estamos entrando en todo un área que no es la idea de este video, que es el desarrollo fullstack de una aplicación de cloud design más cloude.

Ahora, esto creo que es una genialidad porque en solamente unos minutos logramos crear una aplicación que se ve visualmente superatractiva, quizás no es la mejor rana, pero entiendes a lo que voy. Está super bueno. Se respetó completamente nuestro branding, se respetó completamente nuestro design system. Si es que entramos acá, por ejemplo, a Cloud AI Design y nos vamos a alguna de las cosas que estábamos creando, por ejemplo, supongamos que no sé, me voy a ir de esta y voy a abrir otra cosa, podemos empezar a importar las cosas desde nuestro sistema de diseño.

Cada sistema de diseño va a ser una empresa distinta en este caso. Y si quieres empezar a respetar tu propio branding, nuevamente create new design system, nos vamos a ir acá a crear y podemos empezar a subir todos nuestros archivos. Entonces, aquí vamos a subir todos nuestros fonts, todos nuestros logos, vamos a subir eh incluso un código de GitHub si es que tenemos ya algo deploy de alguna página o lo que sea. Eh, tenemos aquí el company name, qué es lo que hace, etcétera, para tener más contexto.

Y cada vez que empecemos a diseñar algo, eres un diseñador y quieres diseñar un flyer eh, y quieres respetar los brand guidelines, vas a elegir el system design o el design system, mejor dicho, de la empresa uno. Después, si quieres trabajar para otra empresa, vas a elegir la empresa B o la empresa DO. Después la empresa C, la empresa D continuamente respetando los brand guidelines. Superútil para los diseñadores. Por ejemplo, si es que trabajas, no sé, te invento en una universidad y le creas los gráficos a la universidad y tienes que respetar estrictamente estos gráficos, le subes aquí todos los content guidelines y se empiezan a respetar. y hace 1 2 3 con el mismo estilo.

Lo mismo si trabajas para un restaurant o lo mismo si es que manejas más de una marca. Sigues los content guidelines o el system guideline en este caso o el branding, que también sería otra manera de decirlo y empiezas a masificar toda esa producción. Alternativamente puedes crear landing pages, puedes crear literalmente lo que se te ocurre, aplicaciones funcionales y las puedes hacer aquí. Entonces, la IA ya está en un punto que puede diseñar las cosas a un nivel estético s super avanzado y super bueno.

Y si es que lo llegamos a conectar con Cloud Code, ahí sí que se vuelve una brutalidad porque se lanzó el Opus 4.7, se muestra que funciona bastante bien con este sistema de diseño. Entonces al final lo que podemos hacer es s super potente, pero es clave también si es que eres diseñador y estás recién entrando, por ejemplo, en este mundo, que empieces a entender cómo funciona Cloud Code, porque ahí es donde está el valor, porque si aprendes a usar Cloud Code, vas a poder levantar cualquier aplicación, cualquier sistema, cualquier página web en segundos y que hoy día pueden ser visualmente muy atractivas.

Así que si te interesa aprender de Cloud Code, tengo un video de más de 3 horas donde cubrimos todo el proceso de Cloud Code. Es completamente gratuito, te lo voy a dejar al final de este video para que lo veas. eh es el curso más completo que existe en español de Cloud Code y también si es que te interesa profundizar un poco más en la inteligencia artificial, la creación de contenido con IA, las automatizaciones con inteligencia artificial, lo puedes ver todo esto en Imperio Digital, también la comunidad de automatizaciones e a más activa hispanohablante, donde somos más de 700 miembros y podemos o estamos mejor dicho, todo el día creando nuevas cosas.

Creo que eso al final es lo importante, que estamos todo el día creando, no nos quedamos tranquilos y tenemos cinco sesiones de manera semanal, cuatro o cinco sesiones para que entres y empieces a aprender a usar la inteligencia artificial con casos de usos reales. El link va a estar abajo en la descripción. Y por último, si te gustó este video, no sabes cuánto te agradecería si es que me dejas un like, no solamente porque me ayudas a mí y me ayudas al canal, sino porque tú también le dices a tu YouTube que este tipo de contenido te gustó, porque estás interactuando con él, así que me sirve mucho, te lo agradecería mucho.

Si es que no, también te lo agradezco por haber llegado hasta acá. Y nuevamente te voy a dejar el video de Cloud Code de más de 3 horas acá el curso completo y algún video que te recomienda YouTube y si te lo recomienda es por algo. Ya nos vemos.