Claude Design puede ser una herramienta súper poderosa, pero solamente si sabes cómo utilizarla.
En este video te voy a enseñar exactamente qué es, qué puedes hacer y cómo utilizarla.
Te voy a enseñar seis pasos de cómo puedes utilizarla y el paso número cinco es el más poderoso y la mayoría de la gente se lo salta.
Así que espérate para que conozcas todo el poder y todo lo que tiene Claude Design.
## Paso 1: Entrar a Claude Design y conocer la interfaz
Lo primero que tienes que hacer es irte a cualquier navegador y poner:
claude.ai/design
Cuando entras a Claude Design vas a tener aquí un par de diseños de lo que ya has hecho.
En este caso, si es tu primera vez en Claude Design, vas a ver que todo esto está vacío.
Del lado izquierdo tenemos cuatro opciones.
Tenemos Prototype, que justo es para hacer prototipos.
Si seleccionamos Prototype tenemos dos opciones:
Wireframe.
Y High Fidelity.
Wireframe es literalmente lo que dice que es.
Es solamente para maquetar, para ver cómo estaría la estructura de lo que vas a construir.
High Fidelity es de alta fidelidad.
Es decir, más real.
Cómo se vería realmente esta aplicación, esta página o lo que vayas a maquetar.
Después tenemos Slide Deck.
Son presentaciones estilo PowerPoint.
Tenemos Template.
Lo que tiene Template es que podemos empezar desde cero o podemos tomar algún template que ya existe en la librería de Claude Design.
Y podemos seleccionar Other, que literalmente es cualquier otra cosa.
Ahorita vamos a probar cada uno de ellos.
De este lado tenemos Recent.
Aquí salen todos los diseños más recientes que has hecho.
Tenemos Your Designs, que tiene todos los diseños que has creado.
Puedes tomar ejemplos de aquí para partir y hacer tus propios diseños.
También tenemos ejemplos como wallpapers, animaciones y diferentes ideas para que puedas partir de ahí.
Y por último tenemos Design Systems.
Esto ahorita lo vamos a revisar.
Es una locura y es lo mejor que tiene Claude Design.
## Paso 2: Crear un diseño desde cero
Vamos a empezar a diseñar.
Nos vamos a ir a Prototype.
Vamos a crear una landing page.
Aquí vamos a probar High Fidelity.
Le ponemos Create.
Tenemos cuatro opciones.
Te ofrece poder poner un Design System.
Ahorita lo vamos a revisar.
También puedes agregar screenshots de algo que te guste.
De otras páginas que llamen tu atención.
También podemos agregar código de alguna otra página que necesitemos utilizar como referencia.
O podemos traer un archivo de Figma.
Figma es un software de diseño que ayuda muchísimo.
Pero no te preocupes si no tienes ninguna de estas cuatro cosas.
En este caso vamos a empezar desde cero.
Si nos fijamos acá abajo ya dice:
HiFi Design.
Y también:
Interactive Prototype.
Vamos a pegar este prompt:
“Construye una landing page de una heladería de estilo vintage con una sección principal hero, menú destacado, historia de la marca, testimonios, ubicación y un pie de página.”
Lo mando y empieza a trabajar.
Y vean esto.
Me empieza a hacer preguntas sobre mi heladería para poder hacer la página lo mejor posible.
Me pregunta qué época vintage me inspira más.
Cómo se llama la heladería.
Y diferentes detalles.
Algo muy cool es que te pregunta cómo quieres tomar decisiones.
Le puedo poner:
“Decide por mí.”
Me hizo algunas preguntas acerca de mi negocio.
Le puse Icegot por Margot y ice cream.
Le puse decide por mí porque no tengo idea y prefiero que Claude decida.
Queda listo y le doy Continue.
Después de casi 10 minutos quedó mi framework.
Lo interesante no es solamente que se tardó 10 minutos en hacer esto.
También que esto se creó mientras yo podía estar haciendo un café o trabajando en cualquier otra cosa.
Y vean, ya salió.
Aquí podemos ir cambiando colores.
Podemos cambiar tipografía.
Podemos ir viendo todo.
Ya quedó.
Aquí puedo poner la foto de la heladería.
Está la opción de armar tu cono.
Podemos ir agregando sabores.
Puedo quitar helados, poner cono lleno.
Me dice cuánto me va a costar.
Aquí está nuestra historia que me inventé.
Nada más le dije que estamos en 1920, viajamos en el tiempo y llegamos al día de hoy.
Aquí está todo.
Horarios.
Información.
Todo listo.
## Crear una presentación con Claude Design
Ahora vamos a probar diseñar un Slide Deck.
Una presentación.
Va a ser muy similar.
Le pongo el nombre.
Va a ser el de la presentación.
Y le dije que no quiero speaker notes por ahora.
Le pego mi prompt:
“Crea una presentación animada para una heladería estilo vintage que busca inversionistas para expandir su concepto y abrir nuevas sucursales.”
Listo.
Ya quedó mi presentación.
Se tardó más o menos cinco minutos.
Aquí me salen mis tweaks para poder ir cambiando dependiendo del resultado.
Algo muy interesante es que el estilo que tiene mi presentación PowerPoint es muy distinto al que tiene mi página web.
Aunque son de la misma marca.
La presentación se ve increíble.
La idea de esta presentación es presentársela a inversionistas para ver si invierten en mi proyecto de Icegot.
## Crear una aplicación con Claude Design
Y por último quiero hacer un ejemplo más.
Vamos a irnos a Other.
Vamos a ponerle el nombre de la aplicación y crear.
Lo que queremos hacer ahorita es una aplicación de esta misma heladería.
Voy a pegar este prompt:
“Crea una aplicación móvil para una heladería de estilo vintage donde los clientes puedan consultar el menú, realizar pedidos, acumular recompensas y localizar sucursales cercanas.”
Le pongo Send.
Al igual que en la presentación y en la página web, me va a pedir más preguntas acerca de la aplicación.
Puedo ir respondiendo.
También puedo decirle:
“Quiero que tú decidas.”
Inclusive me pone ejemplos de imágenes vintage para ver cuál me gusta más.
Ya ni siquiera en palabras.
Puedo ir respondiendo y después le pongo Continue.
Y empieza a crear mi aplicación.
Mientras queda lista mi aplicación, te platico rápidamente quién soy.
Mi nombre es Margot.
Soy directora y fundadora de TRiAGE Business Health.
Ayudamos a empresas a implementar inteligencia artificial para maximizar su retorno de inversión desde el día uno.
También damos capacitaciones en empresas para que sus colaboradores puedan ser más eficientes utilizando estas herramientas.
Dependiendo del giro y los roles de cada colaborador hacemos capacitaciones personalizadas.
Si tienes interés, escríbeme al correo que dejo en la descripción o agenda un X-Ray completamente gratuito.
Listo.
Después de aproximadamente veinte minutos ya quedó mi aplicación móvil.
Aquí salen los tweaks para mejorar y cambiar todo.
Voy a cerrar esto y ya está mi aplicación.
Tiene todo para que sea funcional.
Puedo seleccionar:
Quiero mi chocolate.
Quiero dos bolas.
Quiero caramelo.
No, prefiero tres bolas y quiero que el tercero sea de menta.
Se genera mi helado.
Puedo regresar.
Puedo ver cómo se ve.
También puedo cambiar colores.
Puedo ver el menú.
Mis recompensas.
Cuántos helados llevo comprados.
Puedo cambiar mi topping extra por puntos.
También puedo ver las diferentes tiendas.
Obviamente esto no lo puedes poner en producción.
Esto no funciona como una aplicación real todavía.
Pero pensemos:
¿Cuándo habías podido hacer el diseño de una aplicación tan rápido y tan fácil?
## Paso 3: Refinar tu diseño
Aunque está increíble esta propuesta de diseño que me hizo Claude, hay cosas que quiero cambiar.
Por ejemplo, quiero poner aquí un helado.
Voy a dibujar un helado con su cereza.
Ya le puse el dibujo y le dije que me agregue un helado con cereza.
También podemos usar Show Tweaks.
Aquí podemos elegir:
Paleta de colores.
Intensidad.
Menú.
Hero.
Podemos cambiar si queremos una foto o un emblema.
También podemos ir dejando comentarios.
Estos comentarios no solamente funcionan para Claude, también funcionan para nuestro equipo en caso de que queramos compartirlo.
En la parte de markup podemos señalar elementos.
En Edit podemos definir lo que queramos.
Podemos cambiar fuentes.
Podemos hacer todos los cambios desde aquí.
Lo interesante es que no solamente podemos diseñar todo desde cero en minutos.
También podemos hacer cambios utilizando prompts.
## Paso 4: Exportar y compartir diseños
Vamos a pasar al número cuatro.
La parte de exportar.
Me quiero quedar trabajando aquí porque este framework de página es lo que más me ha gustado.
Arriba tenemos un botón que dice Share.
Podemos compartirlo con nuestro workspace.
Es decir, con personas de nuestro equipo para que puedan trabajar sobre el mismo proyecto.
También podemos copiar el link.
Podemos exportar:
PDF.
ZIP.
HTML.
Si no sabes cómo subir un HTML a internet para compartirlo, tengo otro video donde explico cómo hacerlo paso a paso.
No tienes que saber programar.
Es muy fácil.
También podemos usar Claude Code para meter funcionalidad a páginas, aplicaciones o cualquier cosa que creemos.
## Paso 5: Crear un Design System
Esta es la parte que para mí agrega más valor.
Quiero que vean cómo la identidad de esta página y la identidad de la presentación son completamente distintas, aunque son de la misma marca.
¿Por qué pasa esto?
Porque no tenemos un Design System que guíe todo para hacerlo con la misma identidad de nuestra empresa.
Si yo agarro y le presento a inversionistas esta página web, esta presentación y esta aplicación, me van a batear.
¿Por qué?
Porque no tienen la misma identidad.
Cuando nosotros creamos un Design System podemos tener toda la identidad de marca cargada ahí.
Y siempre que hagamos algo nuevo se va a hacer con esa identidad.
¿Cómo hacemos un Design System?
Nos vamos aquí.
Presionamos Design System.
Le ponemos Create.
Dentro de Create podemos empezar a cargar toda la información de nuestra empresa.
Podemos cargar:
Colores.
Tipografías.
Estilos.
Reglas visuales.
Después, cada diseño nuevo puede utilizar ese Design System.
Les quiero enseñar cómo quedó mi experiencia.
Le pedí a Claude que hiciera una aplicación.
Y me hizo esta aplicación.
Toda la identidad está completamente relacionada con mi marca de Al Chile Media.
Me voy a la página web de Al Chile Media.
Y si se fijan:
Mismos colores.
Mismas tipografías.
Mismo estilo.
Todo es muy similar.
¿Por qué?
Porque está siguiendo un Design System.
En conclusión:
El Design System es una maravilla.
Tienes que cargarle toda tu identidad de marca.
Y después puedes utilizarlo en cualquier diseño que hagas con Claude Design.
## Paso 6: Consideraciones importantes
Lo último es saber algunas cosas importantes.
Número uno:
Claude Design solamente está disponible actualmente en planes de pago.
Desde el plan de $20 puedes comenzar a utilizarlo.
Número dos:
Claude Design utiliza muchos créditos de Claude.
Mi recomendación es que empieces por algo pequeño.
Algo fácil.
Y después vayas creciendo.
Número tres:
Todavía estamos en fase beta.
¿Qué quiere decir?
Que todavía no es un producto completamente terminado.
Tiene errores.
Puede fallar.
Puede gastar muchos créditos.
Pero realmente vale la pena.
Número cuatro:
Esto es para hacer código y prototipos.
No es para hacer algo completamente funcional.
Si quieres algo que funcione al 100%, tienes que pasarlo a Claude Code o desarrollarlo en otro lugar.
Esto es principalmente para:
Demos.
Prototipos.
Diseños.
Validación de ideas.
No esperes que te entregue una aplicación completamente funcional o una página lista para producción.
Y eso es todo por hoy.
Espero que te haya gustado este video.
Si crees que le puede funcionar a alguien, recuerda compartirlo, darle like y suscribirte.
Muchas gracias.
Nos vemos en el próximo.
