El Nuevo Claude Design 2.0 NO Es Solo para Diseñadores (Casos Reales de Trabajo)

Laura Cilleruelo shows how Claude Design 2.0 works for non-designers. Upload your brand assets and colors to build a custom Design System, then generate prototypes, animations, and 3D objects from simple prompts. Export as HTML, ZIP, or PDF, and import back to create reusable skills.
Chapters
Seguramente piensas que Cloud Design no es para ti porque no te dedicas al diseño, y precisamente por eso te estás perdiendo una de las herramientas más útiles e infravaloradas que tiene Cloud. Cloud Design no solo acaba de incorporar muchísimas funciones, sino que además ahora consume bastante menos, y tú y yo sabemos que eso es muy importante. Pero la pregunta de verdad no es qué trae de nuevo, la pregunta más importante es: ¿le sirve esto a un profesional normal que no es diseñador ni pretende serlo? En este vídeo vamos a comprobarlo con casos reales. Y vas a salir sabiendo si Cloud Design te sirve o no. Así que no me enrollo más y empezamos. Muy bien, lo primero que vamos a hacer es ver cómo podemos acceder a Cloud Design, de acuerdo. Para ello nos vamos a ir a nuestra sesión de Cloud en web y en la barra lateral izquierda, justo abajo, aquí tenemos Diseño. Haciendo clic aquí, automáticamente se nos va a abrir esta página donde ya estaríamos dentro de Cloud Design. Si Si por el contrario tú utilizas la app desktop igual que yo, pues abriendo nuestra app desktop, de igual forma en la barra lateral izquierda, justo abajo de todo, en el apartado inicio, si nos vamos a Cloud Code, no nos aparecería. Si lo ves aquí, nos vamos a ir a inicio y vamos a tener aquí diseño, y haciendo clic automáticamente se nos va a abrir igual que ha sucedido en la app web, se nos abriría la pantalla de Cloud Design. Muy bien, una vez dentro de nuestra plantilla de Cloud Design, y si no habías entrado con anterioridad, tenemos bastantes novedades. Te voy a estar dejando por aquí en uno de los laterales una, un pantallazo de la versión anterior, y vas a ver que nos han añadido, si te fijas aquí en toda esta parte inferior, estos templates, es decir, estas plantillas ya predispuestas que nos ha dado Cloud. En este caso quiero que te fijes que podemos crear animaciones, podemos hacer mockups, es decir, esbozos de experiencias de usuario, por ejemplo, de páginas web. Podemos crear incluso currículums, vitae, CVs para buscar trabajo, objetos en 3D. Podemos crear documentos basados en investigaciones que hayamos hecho, correos en HTML. Podemos hacer un sinfín de cosas, y ahora vamos a ver algunas de ellas para que puedas adaptarlo a tu trabajo, sea el que fuere. Muy bien, nos vamos a ir con una de las cosas más importantes que debes hacer en Cloud Design si realmente quieres sacarle partido. Lo que vamos a hacer es irnos a nuestra pantalla principal y quiero que te fijes aquí donde al lado del signo más tenemos Design System y aquí nos pone None. Si hacemos clic aquí vamos a ver que en este caso yo tengo varios design systems creados. ¿Qué es? Esto quiere decir que le he dado información sobre estas imágenes de marca, es decir, colores, logos, tipos, tipos de letras, para que cuando yo cree cualquier tipo de recurso utilizando este diseño de sistema siga siempre exactamente el mismo patrón. Además, si no tenemos el nuestro creado, que ahora vamos a hacer, cómo vamos a ver cómo hacerlo, aquí abajo tenemos algunos que ya nos propone Claude, pero mi consejo y la potencia absoluta de esta herramienta es que crees el tuyo para alejarte de lo que hace absolutamente todo el mundo. Muy bien, ¿cómo vamos a crearlo? Muy sencillo. Quiero que te fijes que justo aquí en la parte superior derecha tenemos este más. Muy bien, vamos a hacer clic aquí y se nos va a abrir este pequeño popup. Lo que vamos a hacer es darle a crear. Aquí vamos a hacer clic aquí y fíjate que lo primero que nos dice es que le demos el nombre de la compañía o bien el nombre de este diseño de sistema. Muy bien, lo que vamos a hacer es vamos a crear uno tú y yo juntos. En este caso voy a poner el design system de mi empresa de auditoría de IA para otras empresas. Vamos a poner OceFlow Media por aquí de nombre. Si tuviese un repositorio de GitHub, que ya hemos visto en el canal qué es esto, podríamos poner por aquí un enlace para que pudiera ir a extraer toda esa información. Lo mismo si tuviéramos un link, un link de código en nuestro ordenador. Pero lo que nosotros vamos a hacer es simplemente compartirle una carpeta que yo ya tengo en el escritorio de mi ordenador. Por lo tanto le vamos a dar a Browse y vamos a buscar esa carpeta que tengo por aquí. Fíjate, aquí tengo la carpeta Archivos Marca Ocio Flow Media y lo que voy a hacer es compartirle los tipos de letras, los colores de marca, diferentes logos que tengo, y además le voy a compartir también la voz y el tono de mi compañía, es decir, cómo nos dirigimos cada vez que hacemos alguna publicación pública, valga la redundancia, o algún documento dirigido para un cliente. Entonces le vamos a dar a abrir justo aquí. Si tuviésemos alguna otra sugerencia o nota que quisiéramos que tuviera en cuenta Claude, la añadiríamos aquí. Y luego, a continuación, lo siguiente va a ser darle a la parte superior derecha continuar con la generación. Y antes de ir a ver lo que nos acaba de crear Claude, quiero que tengas en cuenta lo que te voy a decir. Si has visto el vídeo anterior que tenemos de Claude Design, esto probablemente ya lo sabes. Si no lo has visto, no te preocupes porque ahora te lo voy a explicar, aunque al acabar este vídeo te recomiendo que vayas a verlo porque vemos cosas como crear un panel interactivo a través de un Excel en Claude Design. Pero bien, lo importante que quiero que sepas: Claude Design no es un generador de imagen. Claude Design construye las interfaces visuales que vemos, es decir, él trabaja básicamente con código. Por lo tanto, podemos decirle aquí queremos un botón cuadrado azul y que al hacer clic se nos abra otra pestaña. Él va a construir esta interfaz, pero si le pedimos que nos cree imágenes que son píxeles, como lo que puede hacer Nano Banana, no va a ser capaz y nos vamos a frustrar. Por lo tanto, si queremos generar imágenes o logos, nos vamos a ir a otras herramientas y después se las vamos a compartir a Cloud Design para que pueda utilizarlas en nuestras interfaces. Muy bien, después de unos 7 minutos aproximadamente, este es el diseño de sistema que nos ha dado Cloud simplemente partiendo del nombre que nosotros le hemos dado y de los archivos que le hemos compartido, de acuerdo. Si nos vamos al Design System, podemos ver por aquí todo el resumen en primer lugar que él ha hecho aquí arriba. Después ya nos ha creado algunos templates, es decir, algunas plantillas. Podemos ver, por ejemplo, aquí para una presentación podemos ver los colores, los distintos modelos de logo que yo misma le había compartido. Podemos ver los radios de los botones si queremos que lo utilicen algún tipo de plataforma web. Podemos ver los textos, el tipo de texto, los colores de acento. Podemos ver y retocar absolutamente todo, porque podemos venir aquí, si te fijas, podemos darle un feedback de qué nos ha parecido, cómo lo ha hecho, o podemos pedirle que lo edite de forma muy sencilla. Debo decir que me gustaba bastante más cómo podíamos modificar esto en la anterior versión, pero también tengo que decir que a pesar de no ser tan intuitivo, este es bastante más completo. Muy bien, ahora ya sabemos crear nuestro diseño de sistema, que además si venimos aquí y hacemos clic en Design System nos tiene que aparecer justo aquí. Para utilizarlo simplemente tendríamos que hacer clic en él. Lo pondremos a prueba en un ejemplo posterior, pero ahora quiero enseñarte algo tremendamente útil que yo misma he creado esta semana. Y es que hace unos días estaba trabajando en Cloud Code en un esbozo, un borrador para un aplicativo para un cliente. Además, lo hemos visto en alguno de los vídeos. Se trata de este asistente que te voy a mostrar ahora aquí. Si te fijas, vamos a darle a abrir y aquí lo que hemos creado ha sido un asistente comercial que pueda ayudar a hacer la prospección a estos comerciales, que les ayude a analizar diferentes empresas poniendo simplemente su nombre, y que automáticamente les ayude a generar pues un correo de prospección, que les ayude a hacer un seguimiento de la visita, incluso en esta parte que les ayude a generar una propuesta comercial en muy poquitos clics, de acuerdo. Entonces partíamos de esto de aquí Y yo lo que quería era que este aplicativo pudieran tenerlo en su app móvil cuando estuvieran en visita con un cliente. Quiero que te fijes en lo siguiente. Ya sabes que siempre te digo que no pienses en esto, en crear aplicativos que mañana puedas lanzar al mercado y que nos hagamos todos ricos. Esto no es real y requiere de muchísimo más proceso, pero sí que estas herramientas nos ayudan a poder crearnos soluciones propias que resuelvan problemas que nosotros tenemos en nuestro trabajo o en nuestra empresa. En este caso, como te digo, era un aplicativo interno que evidentemente nosotros desarrollaremos después. Pero quiero que te fijes en esto y que hagas la prueba. Créate un pequeño aplicativo que tú puedas necesitar en tu día a día. Y esto que nadie dice, y no entiendo por qué, porque es tremendamente útil, ponlo en práctica. Y es que Cloud Code, Cloud en general, está vinculado a Cloud Design. Por lo tanto, una vez yo he acabado mi aplicativo y me ha parecido muy bien. Fíjate en el comando que le he dado aquí, se trata de poner simplemente guión lateral en diagonal y le he dicho design sync, de acuerdo. Fíjate que ya nos aparece aquí simplemente poniendo este comando y dándole al intro. Lo que ha hecho Claude ha sido extraerme el design system de este aplicativo y justo al final Cuando ya lo ha sacado, fíjate, él va por aquí extrayendo todo lo necesario. Lo que ha hecho ha sido irse a Cloud Design y automáticamente cuando yo hago clic aquí y le doy a Design System, ya me aparece Asistente Comercial. Yo no he tenido que hacer absolutamente nada. Dándole ese comando, él automáticamente me ha creado el design system del aplicativo con colores, tipos de letras, absolutamente todo dentro de Cloud Design. Muy bien, una vez él ha acabado y he visto que ya me ha creado ese Design System, en ese mismo chat le he dicho: ahora necesito que me des un prompt para explicarle a Cloud Design en qué consiste nuestro aplicativo, porque él se va a encargar de la app móvil. Así que un poquito después aquí tendríamos ese prompt que yo he copiado tal cual, tal cual me he ido a Cloud Design. Quiero que lo veas por aquí y simplemente seleccionando aplicativo móvil, pegándole este prompt y enviándoselo, él aquí en pocos minutos me ha creado el aplicativo. Insisto, súper sencillo. Simplemente desde aquí yo he seleccionado el Design System de Asistente Comercial. Aquí en template podría directamente seleccionar aquí Mobile App Design o haciendo clic aquí nos aparecería en la parte baja, Mobile App, de acuerdo, y simplemente le pegaría el prompt y se lo enviaría. El resultado sería una app totalmente funcional. Podríamos elegir pues el nombre, en este caso del comercial. Aquí tendríamos los seguimientos que tendríamos planificados para hoy, leads que tendríamos por responder. Si nos fuéramos abajo, la prospección, por ejemplo, si quisiéramos Seleccionar esta empresa, podríamos hacer clic y analizarla. En ese momento nos buscaría todo tipo de informaciones públicas que podemos encontrar por internet, incluso la persona de contacto. Podríamos pasar directamente a redactarle un correo. Fíjate, por aquí tendríamos el correo, podríamos copiar e irnos a nuestra bandeja de correo y enviárselo, o enviado y pasar a visita. Pero como ves desde Cloud Code podemos arrastrar nuestros diseños y nuestras configuraciones directamente a Cloud Design. Y lo mismo podemos hacer del otro lado, que después veremos cómo. Muy bien, para el siguiente ejemplo he querido utilizar una de las nuevas funcionalidades, pero no al completo. Te lo explico. Mira, por aquí tenemos ahora la opción de crear objetos en 3D. Yo tengo un cliente que se dedica a la construcción, a la construcción de casas de madera, y normalmente cuando envían los presupuestos envía fotos estáticas entre tú y yo bastante feas. Entonces, ¿qué tal si pudiésemos crear algo interactivo y además con una imagen 3D desde Cloud Design? Y eso es lo que he intentado hacer. Para este caso no he seleccionado un template en concreto porque quiero unar lo que se puede hacer en un documento y también lo que podemos hacer en 3D, crear objeto 3D. Por lo tanto, no he seleccionado nada. Lo que he hecho ha sido decirle lo siguiente: te voy a compartir el documento de un presupuesto con imágenes y 2 archivos JPG. Quiero que crees un panel interactivo del presupuesto y que incluyas las dos imágenes como objetos 3D. Para ello, lo que he hecho, pues, hacer clic en el más, aquí attach file para poder añadir documentos. Y aquí lo que he hecho ha sido seleccionar por una parte este presupuesto que te va a estar apareciendo en pantalla, que como ves es un presupuesto con los datos, evidentemente los nombres de las personas cambiados, pero el presupuesto es totalmente real. Así es como se envía con este tipo de imágenes. Y como ves, pues no es demasiado bonito a la hora de enviarlo. Y además, 2 imágenes JPG donde, como te decía, se mandan los planos tal cual de cómo quedaría la propiedad. Entonces simplemente le vamos a compartir esto a Cloud Design y vamos a lanzarlo a ver qué nos hace. Muy bien, unos minutos después, aquí tendríamos el resultado. Fíjate, un panel interactivo tal y como le hemos pedido, donde están todos los precios, de acuerdo, basándose en todos los datos que le hemos compartido en nuestro documento, en nuestro doc. Aquí, si viniésemos e hiciésemos, por ejemplo, gastos de administración en función de las horas, todos los precios se verían modificados. En la parte inferior tenemos pues todos los detalles: alcance del suministro, que está incluido, que está excluido, obligaciones, datos técnicos. Y aquí esta prueba que hemos querido hacer con los modelos 3D, donde tendríamos una vista de cómo sería la casa al final acabada. Por aquí veo una cosita rara en las escaleras, pero yo creo que trabajando y dedicándole un poquito más de tiempo podríamos llegar a un resultado bastante mejor. Incluso aquí arriba, si te fijas, tenemos tanto el panel del presupuesto como la casa en 3D por sí sola. Esto, lo realmente interesante es poder enviárselo al cliente tal cual. Es totalmente diferente a lo que hace todo el mundo y muchísimo mejor a ese documento que acabamos de ver. Para ello, muy simple, vamos a hacer clic en Share en la parte superior derecha. Y aquí, además de poder descargarlo como PDF, en un proyecto HTML o un PowerPoint, podemos hacer Publish as Artifact. ¿Qué sucedería aquí? Simplemente podríamos publicarlo como si fuese una página web. Tendríamos un enlace que podríamos directamente enviar a nuestro cliente y que lo viese tal y como lo estamos viendo nosotros. Otros. Ahora nos vamos con otra funcionalidad, una de estas nuevas funcionalidades que es tremendamente útil, y se trata de las animaciones. Y antes de que pienses que tú no creas vídeos, que esto no te sirve, vamos a intentar pensar fuera de la caja, porque quizás creas vídeos corporativos, alguna vez tengas que ayudar a tu diseñador y darle la idea de lo que tienes en tu cabeza para una publicidad, o quieres que tu empresa esté en redes sociales pero no tienes tiempo de crear, o simplemente no tienes ganas, de acuerdo. Entonces, lo primero que yo para hacer esta prueba he querido hacer es, fíjate, créame una animación de la interfaz de Cloth Design actualizada a agosto 2016, perdón, 2026. Necesitamos ver algunos de sus templates y funcionalidades. Probablemente esta animación la hayas visto al inicio de este vídeo. Y después de enviarle esto, el resultado ha sido el siguiente. Muy bien, fíjate en que me ha dado una animación completa basándose en la interfaz de Cloth Design, de acuerdo, viendo tal y como le he pedido las distintas funcionalidades, seleccionándolas, haciendo todo el proceso completo para que podamos verlo y lo más importante, utilizarlo. Esto antes requería muchísimo tiempo de una persona y normalmente costaba bastante, de acuerdo. Y nos ha creado un vídeo de 25 segundos que en este caso yo he podido aprovechar para este vídeo de YouTube. Pero quiero que te fijes en otro uso. Muy bien, en este caso le he pedido que me cree un reel tomando como base mi pasado vídeo de YouTube donde hablábamos de esta nueva forma de crear skills grabando simplemente nuestra pantalla, que por cierto, si no lo has visto, te voy a dejar el enlace en la descripción del vídeo para que puedas ir a verlo, porque no tiene desperdicio, de acuerdo. Entonces, simplemente quiero que me crees, el reel basándote en la transcripción de mi último vídeo. Le he copiado la transcripción, después Claude me ha hecho algunas preguntas que yo por aquí le he respondido, y aquí en la parte lateral tendríamos estos 2 reels listos. Además, me los ha dado en 2 versiones con 2 ganchos diferentes para que yo pueda seleccionar, y aquí podría poner pues simplemente descargarlo y grabar una voz en off y publicarlo en redes sociales. O simplemente podría ponerme yo justo aquí delante hablando y describiendo lo que está pasando dentro del reel. Así que fíjate, tu primera skill en 3 pasos. Tú lo explicas, Claude repite. Nos ha hecho un reel de 40 segundos exactamente, nos pone por aquí. Además podemos ver los apartados, el gancho, qué es El paso número 1, el paso número 2, el paso número 3, la prueba que sugerimos al espectador que haga, el aviso que yo hago en el vídeo y el CTA. Este sería uno de ellos con este gancho. Y si nos vamos a la B, fíjate, deja de escribir prompts kilométricos y en este caso era tu primera skill en 3 pasos. En tan solo un par de clics y partiendo de otro tipo de contenido podría crearnos un reel completo listo para publicar. Atención al siguiente caso porque es tremendamente útil, pero es que además te voy a dar un truco que vas a poder utilizar no solo como en este ejemplo, sino que lo vas a aplicar a muchos otros. Si hay algo que toda empresa todavía continúa haciendo son flyers, folletos, documentos promocionales de algún tipo, y sea el tipo de empresa que sea. Entonces, si nos vamos a nuestra pantalla de Cloud Design, justo en la parte final de estos templates templates. Tenemos por aquí este template que dice Flare, de acuerdo. Entonces yo he hecho clic aquí, le he dicho lo siguiente a Claude, le digo: créame un folleto promocional para una formación sobre IA para empresas y profesionales. Como texto principal vamos a poner: si todo esto de la IA aún te suena a chino, la formación, le digo, será el 15 de septiembre a las 18 en Barcelona, y utiliza la imagen que te comparto como inspiración. Yo me he ido a Pinterest, he seleccionado una imagen que descargado una imagen que es esta de aquí porque me ha gustado bastante y quiero que se inspire en ella para poder crear mi folleto. Una vez enviado, Klout empieza a hacernos preguntas como aquí: ¿cómo se apuntan? Le contestamos la respuesta, sitio exacto, el precio, la duración, qué es lo que se llevan al asistir a esta formación, a quién le estamos hablando, si aparezco yo como ponente, el idioma en el que se va a hacer esta formación la, si quiero ver algunas variaciones, y también de la imagen de referencia me pregunta qué es lo que me ha gustado. Una vez le hemos enviado esto, vamos a irnos a la parte inferior derecha y le vamos a dar a continuar. Muy bien, después de unos minutos, esto es lo que nos habría creado Claude, además basándose en mi design system de OC Flow Media que hemos creado juntos antes tú y yo. Entonces aquí tendríamos este folleto, esta imagen mía que le he añadido yo, porque si recuerdas, en la imagen de la que partíamos, que era esta de aquí, que te voy a volver a compartir, esta de aquí aparecía esta imagen de este señor. Por lo tanto, me ha dejado un recuadro para que yo pudiese subir la mía directamente. Quiero que te fijes que es ligeramente distinta, porque como decíamos, Claude Design no es un generador de imagen, él ha entendido la composición y me ha dado algo bastante similar adaptado a mi imagen de marco. Marca. Pero aquí viene lo potente que te voy a mostrar. Esto tú podrías descargarlo, lo podrías descargar como un PDF, como un PowerPoint, incluso más formatos. Podríamos compartirlo directamente en Canva, en Plotcode. Pero lo que vamos a hacer aquí para poder reutilizarlo y tenerlo como una skill que podamos utilizar siempre que tengamos que hacer este tipo de documentos es lo siguiente: vamos a hacer clic en Project HTML y se nos va a descargar. Fíjate, le vamos a decir standalone HTML, le vamos a dar a exportar, de acuerdo, o bien en proyecto archivo, que aquí será en un zip, de acuerdo. Entonces, para este caso vamos a darle a proyecto archivo, no hay problema, y le vamos a dar a export. Una vez descargado, lo que vamos a hacer es irnos a nuestra pantalla de Claude normal, a nuestra interfaz normal, y vamos a hacer lo siguiente: le vamos a hacer clic en el más Añadir archivos o fotos. Vamos a seleccionar el zip que nos acabamos de descargar de Cloud Design y le vamos a decir a Cloud: te comparto el diseño de OceFlow Media para crear folletos, quiero que lo guardes como una skill que podamos reutilizar. Vamos a enviarle esto de aquí y automáticamente lo que va a hacer Claude es analizar este zip y crearnos directamente una skill que vamos a poder reutilizar para crear folletos o documentos promocionales siempre que queramos. Esto que acabamos de ver, crear una skill a partir de un diseño creado en Claude Design, vas a poder aplicarlo no solo a este ejemplo, a cualquier otro que tú necesites. Es decir, presupuestos, presentaciones, documentos corporativos, absolutamente lo que quieras lo tienes dentro de tu Claude y lo utilizas siempre que lo necesites. Y un apunte importantísimo, y como te adelantaba al inicio del vídeo, el uso de Cloud Design lo han optimizado. Es decir, podemos crear más utilizando menos tokens, y además el uso se ha unificado a nuestro uso general de Cloud. Ahora, tanto desde Cloud Design como desde tu aplicativo de Cloud, vamos a poder ir a la parte superior derecha. Si estás en Cloud Design, Usage, y aquí se te va a abrir, vas a ver que es el plan general que tú tienes. Ahora no tenemos dividido un uso específico para Cloud Design, y esto es tremendamente interesante. Te animo a que cojas estos aplicativos e intentes utilizar todas estas funcionalidades y aplicarlas a lo que a ti te puede servir. Si este vídeo te ha aportado aunque sea un poquito de valor, no olvides suscribirte, dejarlo en comentarios, y nosotros nos vemos la próxima semana.
More from Laura

El Error con Opus 5.5 y ChatGPT 6 que Comete el 95% (Qué Modelo Usar en Cada Caso)

Claude Ahora Recuerda Todo lo que le Cuentas (pero hay algo que NUNCA Guardará)

La verdad sobre las IAs chinas: ¿Gratis o estafa? #ia #tecnologia #noticias #kimik3 #deepseek

La Verdad de las IAs Chinas Que Nadie Te Cuenta: Gratis vs Realidad (Kimi K3, DeepSeek, Qwen y GLM)

Hablo a ChatGPT y Trabaja Solo en Mi Ordenador: 3 Casos Reales (y Lo Que Nadie Te Cuenta)





