Domina el 90% de Claude Design en 15 Minutos (Casos Reales de Empresa)

Laura Cilleruelo shows how to use Claude Design to turn spreadsheets and newsletters into interactive dashboards, social media carousels, and branded documents in 15 minutes. Upload your fonts, logos, and colors to build a Design System that generates consistent components automatically. Export as ZIP, HTML, PowerPoint, or PDF.
Chapters
Clothesign no es lo que parece, ni es un generador de imágenes ni un simple editor. Es una herramienta que además de crear toma tu material existente y lo transforma en algo profesional en minutos. Hoy te muestro las funcionalidades que más te van a servir con ejemplos reales sin importar tu sector ni si eres diseñador. Y además veremos la función que casi nadie conoce ni utiliza y que cambia por completo cómo trabajas con Clothesign. Así que no me enrollo más y y empezamos. Nos vamos a ir directamente con los ejemplos, pero antes, ¿cómo podemos acceder a Claude Design? Muy bien, vamos a poder acceder a él desde nuestra cuenta en la web app, de acuerdo, en la parte lateral. Y aquí Diseño, simplemente haciendo clic aquí ya podemos acceder, o yéndonos directamente a claude.ai/design. Una vez dentro se nos va a abrir esta pantalla y vamos a ir viendo todas las funcionalidades en práctica con nuestros ejemplos. Ahora nos vamos con la primera, Prototype. Esta funcionalidad nos va a permitir generar webs, aplicativos, paneles interactivos, y es lo que vamos a hacer exactamente con nuestro primer ejemplo, donde vamos a convertir un Excel financiero en un panel interactivo. Para hacerlo, muy simple: nombre del proyecto, le vamos a poner Dashboard financiera empresa de construcción. En este caso, en Design System, que es una funcionalidad que después vamos a ver, lo vamos a dejar en None, y vamos a elegir High Fidelity. Si hiciéramos wireframe, estaríamos creando un borrador, un prototipo antes de la versión final, pero nosotros nos vamos a ir directamente con la versión final y le vamos a dar a Create. Esta es la pantalla que se nos va a abrir cuando hayamos creado nuestro proyecto y nos vamos a ir a la barra lateral izquierda. Como te digo, el resto de funcionalidades las vamos a ir viendo con los ejemplos. Nosotros a continuación lo que vamos a hacer es darle al más que tenemos en la parte inferior izquierda, Attach File, y le vamos a compartir un Excel. Quiero que te fijes en este Excel porque no estamos hablando de un Excel simple, sino es un Excel muy complejo con diversas pestañas, cálculos de costes, nóminas, CAPEX, absolutamente de todo. Entonces, una vez le hemos compartido este Excel, vamos a venir a nuestra barra lateral izquierda donde tenemos nuestro chat y le vamos a decir lo siguiente: utiliza aquí, analiza el Excel que te comparto y créame un panel interactivo limpio y muy claro. Debes estructurarlo de forma lógica y fácil de entender. Quiero que aquí te fijes que el prompt importa. No basta con que le digamos créame un panel interactivo. También en Claude Design tenemos que tener especial cuidado en las instrucciones que le estamos dando. Una vez tenemos nuestras instrucciones claras, simplemente le vamos a dar a Send y Claude Design se va a poner a hacer su magia. Muy bien, después de unos minutos, esto es lo que ha hecho Claude Design. Ha revisado primero qué tipo de archivo era, ha detectado que era un Excel, y aquí fíjate lo que dice: voy a analizarlo de forma estructurada con un script para entender cada pestaña. Esto es gracias al prompt que le hemos dado. Después, como te digo, de varios minutos, lo que nos ha construido es esto de aquí, un panel interactivo totalmente funcional. Fíjate con los, las gráficas, lo más importante, correcto y que corresponde con el Excel. Una comprobación que ya he hecho. Aquí tendríamos los resultados, la tesorería, las obras. Podríamos ver cualquier tipo de obra, la que está en curso, finalizada, en riesgo, según el tipo de obra, si es obra pública, residencial, industrial, con todos los datos correspondientes, los cobros que hemos realizado y también los costes. Aquí tenemos varias cosas interesantes. Quiero que te fijes en la parte superior derecha. Aquí podríamos añadir comentarios si estuviéramos trabajando en equipo y nos permitiría comunicarnos entre nosotros sobre este mismo archivo. Aquí también podríamos editar. Fíjate que podríamos venir, cambiarle el el color de fondo y, por ejemplo, ponérselo más oscuro, azul, absolutamente lo que quisiéramos. Podríamos cambiar también el tipo de letra automáticamente y también su tamaño. Aquí además tenemos markup. ¿Qué quiere decir esto? Que podríamos directamente seleccionar una parte y decirle a Claude exactamente qué cambio queremos que haga. Y claro, tú podrías decirme: oye, Laura, esto está muy bien, pero para utilizarlo una vez. ¿Qué pasa si yo quiero reutilizarlo muchas veces? Muy bien, pues Claude nos da esta opción. Nos podemos ir a la parte superior izquierda donde está el nombre de nuestro proyecto, hacer clic en la flechita y poner duplicar como template, como plantilla. Esto va a hacer que se genere esta duplicación y nosotros cada vez que tengamos un Excel podamos irnos allí y hacer exactamente lo mismo, porque Claude Design ya sabe lo que debe hacer. Y ahora nos vamos con el segundo ejemplo donde vamos a utilizar la funcionalidad más potente de Claude Design. Se trata de la creación de contenido para redes sociales, publicidad, algo que da muchísima pereza, pero que cualquier empresa o profesional necesita. Pero antes, quiero evitar que cometas el fallo típico que casi todo el mundo comete, y es crear contenido con IA sin un sistema. Y entre tú y yo, esto no sirve para nada. Te recomiendo que le eches un vistazo a este recurso gratuito de HubSpot, la lista de tareas para la creación de contenido con IA, un checklist muy simple pero completísimo que te ordena todo el proceso paso a paso y te quita de encima el bloqueo de no saber por dónde empezar. Son 6 pasos que van desde definir tu estrategia, a crear ideas que conecten con tu audiencia y reutilizar una pieza de contenido en varios formatos. Y lo que más me gusta, el último paso: crear una guía de estilo para que la IA escriba siempre con la voz de tu marca. Justo lo que vamos a ver ahora mismo con Claude. Te dejo el enlace en la descripción del vídeo y fijado en el primer comentario para que puedas descargarla. Y muchas gracias a HubSpot por ser el patrocinador de este vídeo. Para este segundo ejemplo, como ya te adelantaba, vamos a ver la funcionalidad más potente para mí que tiene Claude Design. Evidentemente, esta funcionalidad la vas a poder utilizar para la creación de contenido y cualquier otra cosa. Para ello, en nuestra pantalla principal de Cloud Design nos vamos a ir aquí, justo donde pone Design System, de acuerdo. Vamos a hacer clic aquí. ¿Para qué sirve esto de aquí? Esto nos va a permitir crear una imagen de marca que se va a mantener consistente y se va a aplicar en todo aquello que nosotros creemos. Para hacerlo, muy sencillo. Fíjate, aquí tenemos, yo ya tengo el mío creado por aquí. Ahora vamos a crear uno juntos. Y aquí tenemos Create New Design System. Aquí le vamos a dar a Create y se nos va a abrir esta pantalla que tienes aquí. Aquí le vamos a poder poner el nombre de nuestra compañía, en este caso vamos a decir Claridad Artificial. A continuación vamos a poder pues ponerle un link de GitHub si tenemos un repositorio con todos nuestros datos ahí. Le podemos cargar directamente directamente códigos si así lo queremos. Le podemos crear un template, es decir, una plantilla de Figma. Y aquí fíjate, el más sencillo y el que vamos a utilizar ahora, que es añadir las letras, los logos o cualquier cosa que tengamos sobre nuestra marca. Nosotros aquí vamos a darle a Browse para poder cargar desde el ordenador. Y yo ya tengo una carpeta que te voy a mostrar a continuación con todos estos datos. Fíjate en esta carpeta de aquí, Archivos marca Claridad Artificial. Yo aquí tengo las fuentes, el tipo de letras. Fíjate, en un muy simple que utilizo. Le doy los colores de la marca, le doy las diferentes versiones de logo que tengo, incluso un mockup de colores y estilos. Y aquí lo que voy a hacer simplemente es seleccionar estas de aquí y le voy a dar a abrir. Aquí fíjate que ya se nos han cargado. Simplemente nos iríamos a la parte superior derecha donde pone continue generation. Aquí nos dice que va a tardar alrededor de 5 minutos y simplemente tendríamos que darle a Generate. Una vez han pasado estos 5 minutos, fíjate lo que ha sucedido. Por aquí nos pone cuál es nuestro logo, los pilares de la marca. Otra vez de nuevo el mockup del logo nos da los colores, también la paleta principal, los neutros cálidos. Nos da también en qué colores va, qué colores va a utilizar para cada tipo de texto. También aquí, en cuanto a los componentes, pues si tenemos botones, si tenemos tarjetas, ya nos dice cómo las va a poner. Y aquí lo interesante es que nosotros le podemos decir looks good si nos gusta, o podemos venir aquí y decirle needs work. Y aquí simplemente podríamos decirle qué es lo que no funciona y qué es lo que queremos cambiar. Para mí ya funciona, me gusta. Fíjate, incluso en un campo de suscripción, si hiciéramos una página web, así es como aparecería. Podríamos revisar cada uno de ellos y una vez lo tuviéramos todo en looks good, aprobado, tendríamos nuestro diseño de sistema listo para utilizar. De nuevo, en nuestra pantalla principal de Cloud Design, si nos fuéramos a Design System, tiene que aparecerte ya aquí tu diseño de marca. Si tuvieras más de uno, aquí te aparecería más de uno. Y luego, a la hora de crear cualquier tipo de contenido, en la parte lateral izquierda, aquí donde pone Design System. Si le damos al desplegable, te aparecería pues el tuyo, y si tienes alguno más. Vamos ahora a utilizar este design system en una creación real. Para ello nos vamos a ir a la segunda funcionalidad de Cloud Design, en este caso Slide Deck. Esto nos va a permitir generar presentaciones e incluso contenido para redes sociales. En este caso vamos a hacer un carrusel que podamos utilizar tanto en Instagram como en LinkedIn, por ejemplo. Para ello le vamos a dar de nuevo un nombre a nuestra creación. Le vamos a poner carrusel. Aquí ya tenemos seleccionado nuestro diseño de sistema. Aquí, si fuera una presentación, podríamos darle clic y lo que haría sería ponernos abajo anotaciones que nos ayudarán a la hora de hacer esa presentación. Pero en este caso, al ser un carrusel para redes, no nos hace falta. Y le vamos a dar a Create de nuevo. Y como en el caso anterior, se nos va a abrir esta pantalla de aquí. Donde nosotros vamos a poder darle pues su instrucción, su prompt, y además compartirle si necesitamos algún tipo de archivo. Quiero que te fijes que tenemos primero Design System con este loguito en naranja, pero nosotros ya tenemos aquí el nuestro seleccionado, por lo tanto no nos hace ninguna falta. Aquí tendríamos Add screenshot, es decir, si quisiéramos compartirle una captura de pantalla de algún modelo que nos hubiera gustado, de algún ejemplo, de acuerdo. Entonces aquí haríamos Click. Quiero que te fijes en lo que va a suceder y se nos va a abrir. Simplemente tendríamos que añadirle la imagen que quisiéramos. Aquí podríamos añadirle código que ya hubiéramos generado con Cloud Code, por ejemplo, o compartirle en el último caso una plantilla de Figma. Muy bien, nosotros en la parte inferior le vamos a dar nuestro prompt y quiero que te fijes que le digo quiero que inspirándote en las estructuras y diseños del ejemplo de carrusel que te voy a compartir, generes un carrusel de mi marca con este contenido. Lo que yo he hecho aquí ha sido convertir una de mis newsletters en un carrusel, slide por slide, es decir, diapositiva por diapositiva, y le doy ya el contenido. Y antes de que le mandemos esto a lo loco, voy a evitarte una frustración que necesito que entiendas a la perfección. Claude Code no es un generador de imagen ni de vídeo. Es decir, si le pides que te genere una imagen o un logo, vas a acabar totalmente frustrado porque lo que te va a dar es una completa porquería. Claude Design es una herramienta de creación visual que genera código, en este caso el código que necesitamos para la parte visual de webs, apps, paneles interactivos. Por lo tanto, si le pedimos que genere imágenes o logos, no va a servir para nada ni va a hacer un buen trabajo. Sabiendo esto y después de haberle compartido nuestro prompt, lo que voy a hacer es hacer clic en el más. De acuerdo. Aquí quiero que te fijes, antes de compartirle los documentos, que tenemos esta parte de Manage Connectors. Quiere decir que si esta carpeta la tenemos, por ejemplo, en Drive y la tenemos conectada a nuestra cuenta de Cloud totalmente normal, también vamos a poder conectarnos a ella desde Cloud Design. Y además vamos a poder utilizar las skills que tengamos instaladas o que hayamos creado. Para este caso, lo que vamos a hacer es Attach File de nuevo, y aquí yo le voy a compartir, tal y como le decía, por ejemplo, el estilo estilo de un carrusel de un creador que me gusta muchísimo. Entonces le voy a compartir sus plantillas y además también le voy a compartir una foto mía, porque como hemos dicho, él no es bueno generando imágenes. Aquí le vamos a dar a abrir y automáticamente, cuando ahora lo haya cargado, le vamos a dar a send. Después de algunos minutos, esto es lo que nos ha hecho Claude Design. Fíjate que por aquí ha puesto mi foto, tu IA no funciona porque la estás complicando. Aquí tendríamos cada una de las diapositivas. Importante, por aquí tenemos nuestro logo de marca porque hemos elegido nuestro design system con nuestro nombre, nuestros colores. Y aquí, como hemos visto en el caso anterior, podríamos venir a cualquiera de las partes, darle a editar, podríamos cambiarle el fondo, cambiarle también el tamaño de la letra, el tipo de letra. Podríamos pedirle a Claude, pues, que aquí nos cambie, por ejemplo, el texto. Elimina la palabra absurda, para ponerlo como ejemplo. Y aquí lo que va a hacer automáticamente, fíjate, aquí en la parte lateral izquierda podemos ver cómo él ahora está trabajando y nos ha quitado la parte de absurda. Muy bien, ¿cómo podríamos descargarlo si ahora queremos utilizar este carrusel de aquí? Muy sencillo, nos vamos a ir a la parte superior derecha donde pone share, y aquí nos va a decir share link si queremos compartirlo con nuestro equipo de trabajo. Export, y aquí vamos a poder exportarlo pues en un archivo zip, en un HTML directamente, en una presentación PowerPoint, o incluso en un PDF, para que después podamos tenerlo disponible para publicarlo allá donde queramos. Quiero enseñarte algo también tremendamente útil. Fíjate aquí que le he dicho, necesitamos crear un diseño coherente y común para todos nuestros presupuestos. Esto es algo muy común para profesionales y empresas donde mandamos un doc simple y soso, incluso un Excel. A veces no tenemos un sistema común y Cloud Design ayuda muchísimo en esto. Le digo a continuación te voy a compartir el doc y quiero que basándote en nuestra imagen de marca, es decir, en nuestro system design, crees un documento claro, visual y sin obviar ningún dato. Simplemente de esta forma, con este prompt y compartiéndole el doc. Este sería el presupuesto que me ha generado Cloud Design sin modificar absolutamente nada del contenido, simplemente adaptándolo a la imagen de marca. Si yo quisiera utilizar esto para siempre, como hemos visto en el primer ejemplo, nos vamos a ir a la parte superior izquierda, nuestra flechita, duplicar como template, como plantilla, y lo tendríamos disponible para utilizarlo siempre que quisiéramos. En este vídeo hemos visto algunos ejemplos prácticos de cómo puedes utilizar Cloud Design para tu uso profesional e incluso empresarial, y además para aquel stack que es partido a esa cuota de tu suscripción de cloud que ya estás pagando. Si este vídeo te ha aportado aunque sea un poquito de valor, no olvides darle like, compartirlo con quien pueda necesitarlo, 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)





