00:00:00Así que las actualizaciones nunca se detienen.
00:00:02Anthropic acaba de lanzar Claude Design,
00:00:05que ahora nos da una interfaz para crear aplicaciones web,
00:00:09sitios web, prácticamente lo que queramos
00:00:11a través de la interfaz de Claude.
00:00:13Esta es su versión de Google Stitch.
00:00:16Y como pueden ver en este video de demostración,
00:00:18se trata de darte la capacidad de retocar todo,
00:00:21desde lo macro a lo micro con estos diseños.
00:00:23Y no hablamos solo de aplicaciones web,
00:00:25también estamos hablando de diseños móviles.
00:00:27Y es un poco gracioso porque cuando hablamos de
00:00:28Anthropic y Claude Code,
00:00:30una de sus mayores debilidades es el diseño front-end.
00:00:32Así que ver que ahora están saliendo
00:00:34con una aplicación completa
00:00:36que maneja esta debilidad es genial.
00:00:39En este video, les voy a mostrar cómo funciona.
00:00:41Haremos una demostración rápida
00:00:42para que puedan probarlo ustedes mismos.
00:00:43Claude Design fue creado pensando en Opus 4.7
00:00:46y está disponible si tienes cualquier plan
00:00:49desde Pro Max hasta Enterprise.
00:00:51Y hace de todo, desde prototipos hasta maquetas
00:00:53y presentaciones de PowerPoint.
00:00:54Y es algo que podemos exportar a cosas
00:00:57como Microsoft PowerPoint o enviarlo a Canva.
00:00:59Una de las cosas geniales de esto es el diseño de marca.
00:01:01Puedes darle una base de código,
00:01:03digamos, el código de tu sitio web,
00:01:05y extraerá todos los activos de marca del sitio
00:01:09para que coincidan colores y tipografía
00:01:11con el diseño en el que estás trabajando.
00:01:12Para empezar, solo ve a claud.ai/design
00:01:15y te llevará a una página web que se ve así.
00:01:18De inmediato a la izquierda, tenemos varias opciones:
00:01:20prototipos, presentaciones, plantillas u otros.
00:01:23Aquí abajo, como les mencionaba,
00:01:25tenemos la capacidad de crear un sistema de diseño.
00:01:27Si voy a configurar el sistema de diseño,
00:01:29puedo poner algo como el nombre de mi empresa,
00:01:33y luego proporcionar ejemplos de mi sistema.
00:01:36No es obligatorio hacer esto,
00:01:38pero ayudará si ya tienes algo
00:01:40con lo que quieres que coincida.
00:01:41Puedes darle el enlace a tu GitHub.
00:01:43Incluso puedes arrastrar la carpeta.
00:01:45Si tienes la base de código en tu computadora,
00:01:48puedes arrastrarla aquí,
00:01:49o simplemente añadir fuentes, logos y activos,
00:01:51así como cualquier otra nota.
00:01:52Lo que hice fue seleccionar la carpeta en mi equipo
00:01:55con los activos de mi sitio web,
00:01:57y luego pulsé continuar hacia la generación.
00:01:59Al hacer esto, especialmente con códigos grandes,
00:02:01primero, no va a subir todo el código.
00:02:03Va a identificar qué archivos tienen sentido.
00:02:05Y segundo, aparecerá una ventana emergente diciendo:
00:02:07"Oye, esto puede tardar de 15 a 20 minutos",
00:02:09mientras procesa todos tus archivos.
00:02:11Si quieres hacer algo desde cero,
00:02:12también puedes hacerlo totalmente.
00:02:13Empezaremos un nuevo prototipo.
00:02:16Lo llamaremos demostración de Chase.
00:02:17Tenemos dos opciones.
00:02:18Puedes hacer un esquema básico,
00:02:20o ir directamente a una maqueta de alta fidelidad.
00:02:23Haremos la maqueta.
00:02:25Eso nos llevará a esta página.
00:02:26Y de nuevo, me da vibras de Stitch aquí.
00:02:28Así que le diré:
00:02:29"diseñemos un gráfico interactivo de tema oscuro"
00:02:31"que muestre cómo fluye la cultura entre ciudades,"
00:02:33"un globo rotatorio con ciudades unidas por rutas brillantes".
00:02:35Esto es lo mismo que hicieron en la demo,
00:02:37pero me interesa ver si lo que obtenemos
00:02:40coincide con el activo que mostraron en el video,
00:02:43y qué tipo de diferencias vamos a ver.
00:02:45¿Cuánto lo exageraron en su anuncio?
00:02:47Así que vamos a enviarlo.
00:02:48Por cierto, como pueden ver aquí,
00:02:50también podemos elegir cosas como el modelo.
00:02:52Puedes adjuntar archivos.
00:02:53Puedes usar voz e importar lo que quieras.
00:02:55De inmediato, empieza a hacernos preguntas,
00:02:57lo cual me gusta mucho.
00:02:58Es casi similar al modo de plan en Claude Code.
00:03:02¿En qué tipo de cultura pensamos?
00:03:04Hagamos un estilo de globo mixto.
00:03:07Hagamos esta ruta de flujo.
00:03:13Eso se ve genial.
00:03:14¿Qué queremos para la paleta de colores?
00:03:16Hagamos multi-tono.
00:03:18Y me encanta el hecho de que
00:03:20ahora estemos recibiendo estas sugerencias.
00:03:21Si entro en Stitch, no voy a recibir esto realmente.
00:03:24En otras herramientas tampoco suele pasar.
00:03:26Una de las cosas más potentes de Claude Code,
00:03:29y lo hemos hablado en otras lecciones de diseño,
00:03:31es tener este intercambio de ideas
00:03:33para detectar los puntos ciegos de nuestro plan.
00:03:37Que me haga todas estas preguntas es algo enorme.
00:03:39Me está preguntando bastantes cosas.
00:03:40Incluso Claude Code solo suele hacer unas tres.
00:03:43Usaremos arrastrar para rotar.
00:03:45¿Qué ciudades deberíamos destacar?
00:03:47Hagamos las 10 principales.
00:03:49¿Cuánta interfaz de usuario?
00:03:50Hagamos un panel completo.
00:03:53Estilo general.
00:03:54Hagamos estilo editorial.
00:03:58Nos quedaremos con editorial.
00:04:00¿Qué debería poder retocarse?
00:04:02Uf, haremos el flujo y la paleta de colores.
00:04:07Haré que haga tres cosas.
00:04:08Continuemos.
00:04:09Y luego a la izquierda, tras responder eso,
00:04:11se configura su progreso.
00:04:12De nuevo, similar a lo que veríamos en Claude Code
00:04:15si estuviera en modo plan ejecutando tareas.
00:04:17Y por cierto, esto es obviamente algo
00:04:19que tienes que hacer en la aplicación web.
00:04:22No es algo que esté disponible en la terminal
00:04:24por razones obvias dada su naturaleza gráfica.
00:04:27Y por lo que estoy leyendo,
00:04:29no creo que esto se vaya a implementar nunca
00:04:30en la app de escritorio, o quizás sí en algún momento.
00:04:33Pero por ahora, hay que hacerlo mediante Claude.ai.
00:04:35Mientras esto se construye,
00:04:36hablemos de algunas dudas que podrían tener,
00:04:38como: ¿en qué se diferencia esto
00:04:39de darle esta misma instrucción
00:04:41en la ventana de chat o usar Claude Code
00:04:43y simplemente decir, oye, quiero que
00:04:45construyas esta cosa interactiva?
00:04:47Y dejar que simplemente,
00:04:48cree algún tipo de aplicación web con eso.
00:04:50La respuesta, siendo muy reduccionistas, es nada.
00:04:54Al final, solo está escribiendo código.
00:04:55Va a ser lo mismo.
00:04:56La diferencia es, y de nuevo,
00:04:58si has hecho cualquier diseño front-end,
00:05:00aunque sea una simple página de aterrizaje,
00:05:02entiendes el poder de ser capaz
00:05:04de ver estas cosas visualmente y compararlas.
00:05:05Por eso Google Stitch es tan genial,
00:05:08porque lo asombroso de Stitch
00:05:09no es necesariamente su filosofía de diseño,
00:05:11aunque creo que es muy buena.
00:05:12Es el hecho de tener una interfaz
00:05:13donde puedo ver visualmente varias opciones
00:05:15y editarlas de esta manera.
00:05:17Y luego, cuando me gusta, pasarlo a código.
00:05:18Cuando haces todo priorizando el código
00:05:20desde el diseño, es difícil.
00:05:22Es un poco tosco.
00:05:23Es difícil tomar un medio visual
00:05:26y ponerlo en lenguaje natural,
00:05:28que se convierte en código,
00:05:29que se vuelve visual, y acertar de verdad,
00:05:32especialmente al principio.
00:05:33Yo necesito ver las cosas visualmente.
00:05:34Al menos yo, necesito ver opciones.
00:05:36Así que tener esto es increíble.
00:05:38Es un gran paso adelante para Anthropic y Claude Code
00:05:41porque este ha sido un punto débil real.
00:05:42Por eso ves que aplicaciones como Pencil
00:05:45se están volviendo tan populares,
00:05:46porque te dan ese medio visual
00:05:48para lidiar con este tipo de cosas.
00:05:49Y una nota rápida, como ven aquí abajo,
00:05:51estas son aplicaciones completas.
00:05:53Es esencialmente prototipado.
00:05:55Puedes tener estas cosas llamadas APIs.
00:05:58Deberían pensar en esto más,
00:06:00no solo como una herramienta de diseño visual tipo Canva.
00:06:03Deberían pensar en esto más
00:06:04en términos de Google Studio,
00:06:05como el tipo de herramienta que es Google AI Studio.
00:06:07Aquí está el resultado.
00:06:08Fue con el estilo editorial.
00:06:10Podemos ver el globo aquí mismo.
00:06:12Puedo arrastrarlo con el ratón.
00:06:14Podemos ajustar la velocidad de rotación, el brillo,
00:06:18cambiar la paleta.
00:06:19Eso está bastante genial.
00:06:21Y luego tiene como pequeños textos por aquí.
00:06:25Ahora hablemos de poder editar esto.
00:06:27Primero, tenemos esta sección de retoques arriba.
00:06:30Los retoques solo tienen que ver con la velocidad
00:06:33y todo eso.
00:06:34Puedo dejar comentarios, editar o dibujar.
00:06:37Y también podemos ponerlo en pantalla completa
00:06:39para ver cómo se vería de verdad.
00:06:41Es interesante en pantalla completa.
00:06:42Se ve mucho, mucho mejor, la verdad.
00:06:44Pero digamos que quiero hacer una edición.
00:06:46Obviamente podríamos volver a la ventana
00:06:49de instrucciones y pedírselo.
00:06:50Si voy a editar, puedo ser mucho más minucioso.
00:06:55Esto me recuerda al editor de Cursor
00:06:58o incluso a algo como Lovable.
00:06:59Puedo seleccionar las ciudades individuales.
00:07:04Si selecciono el globo en general, aparecerá aquí.
00:07:07Y puedo cambiar cosas como el color.
00:07:11Eso se ve horrible, la altura y demás.
00:07:14Así que tengo la capacidad de ser muy específico
00:07:16con lo que quiero cambiar, lo cual es genial.
00:07:18Mejor que decir por texto:
00:07:19"Oye, quiero cambiar el tamaño de esto".
00:07:21Simplemente lo selecciono aquí y lo edito así.
00:07:24También podemos poner comentarios.
00:07:25Puedo hacer clic en cualquier elemento.
00:07:27Igual que al editar, pero en lugar de cambiar
00:07:29estos números específicos,
00:07:31hago clic en el globo y dejo un comentario como:
00:07:34"¿Podemos hacer el globo más grande?"
00:07:37Enviar a Claude.
00:07:40Y crea una cola de comentarios.
00:07:41Si no quieres enviarlo a Claude de inmediato,
00:07:43puedes hacerlo en cualquier momento
00:07:45y él empezará a trabajar.
00:07:46Además de eso, también podemos dibujar.
00:07:48Así que puedo decir, "Bueno,
00:07:50quiero una luna por aquí".
00:07:52Pongamos una luna.
00:07:53Quiero ver a Artemis 2 volando por aquí.
00:07:56Cosas así.
00:07:56Luego aquí, también tenemos el archivo de diseño.
00:07:58Puedes echar un vistazo
00:08:00al código que hay bajo el capó.
00:08:02Y por último, tenemos la capacidad de exportar
00:08:04y compartir esta creación.
00:08:05Si pulso exportar, puedo bajarlo como un zip.
00:08:07Puedo exportarlo como PDF, PowerPoint, enviarlo a Canva.
00:08:11O algo que también es súper genial es pasárselo
00:08:13a Claude Code.
00:08:14Me da el comando para llevar esto
00:08:15dentro de Claude Code, lo cual es estupendo.
00:08:17Y aquí es donde lo dejo por hoy.
00:08:18Sé que ha sido rápido y directo,
00:08:19pero solo quería mostrarles
00:08:21cómo navegar por esto y qué es posible.
00:08:23Esperen un análisis profundo mañana o pasado,
00:08:26donde les mostraré cómo sacarle el máximo partido.
00:08:29Como siempre, cuéntenme qué les ha parecido.
00:08:31Si quieren acceder a la Masterclass de Chase AI,
00:08:33está en los comentarios fijados. ¡Nos vemos!