Transcript
00:00:00Claude Design apareció y cambió todo lo relacionado con el diseño, pero en realidad es mucho
00:00:04más exagerado de lo que la mayoría cree.
00:00:05Y esta es exactamente la razón por la que lo que has visto en X no es la historia completa.
00:00:09Si crees que Claude Design está haciendo algo revolucionario o que esas demostraciones increíbles que circulan
00:00:13son prueba de que necesitas cambiarte a él, en realidad te equivocas.
00:00:17La herramienta en sí ni siquiera es la razón por la que esos diseños se ven tan bien, y la forma en que la gente
00:00:21la está usando está trabajando silenciosamente en su contra de una manera que la mayoría aún no ha notado.
00:00:25Claude Design fue promocionado como un producto revolucionario para la industria del diseño en el momento en que
00:00:29apareció.
00:00:30La gente comenzó a llamarlo un asesino de Figma o el fin de los diseñadores, y el impacto fue lo suficientemente grande
00:00:34como para que las acciones de Figma bajaran y su valoración se viera afectada.
00:00:38Es una herramienta para crear prototipos realistas, esquemas, diseños, presentaciones de negocios y otros
00:00:43tipos diferentes de diseños.
00:00:44Pero la realidad es que es más exageración que otra cosa.
00:00:47Es literalmente Claude Code reempaquetado como otra herramienta y vendido como tal, porque Claude Code puede
00:00:52hacer lo mismo y posiblemente más.
00:00:54Hay funciones como edición y comentarios en Claude Design, pero no hay nada aquí que
00:00:58Claude Code no pueda hacer si le das las herramientas adecuadas.
00:01:01Y cuando decimos que esto es Claude Code reempaquetado, no es porque no lo hayamos probado.
00:01:05Le dimos una instrucción simple, pidiéndole que creara un sitio web comunitario y respondimos a las preguntas
00:01:09que tenía.
00:01:10Creó dos diseños que eran impresionantes por sí solos y mucho mejores que la forma en que Claude
00:01:14solía generar páginas de destino anteriormente, pero aún tenían muchos problemas.
00:01:18Una versión se cortó en la sección de precios y no había pie de página, así que probamos
00:01:23cómo funcionaría Claude Code con una instrucción similar.
00:01:25Usamos Opus 4.7 con alto esfuerzo para comparar ambos, y el diseño que produjo estuvo
00:01:30a la par con las capacidades de Claude Design.
00:01:32Hubo algunos problemas, como que el color de fuente del botón de registro no se eligió correctamente,
00:01:37pero en general fue un diseño muy bien construido.
00:01:39Y esto fue a pesar de no tener el arnés de diseño y sin ninguna instrucción especial que
00:01:43Claude Design tiene incorporada, puramente por sí solo con nosotros sin proporcionar casi nada.
00:01:48Pero las demostraciones que debes haber visto por ahí parecen impresionantes, y hay algo oculto detrás
00:01:52de ellas.
00:01:53Lo que circula en las redes sociales se basa en la exageración más que en lo que la herramienta realmente
00:01:57hace por sí sola.
00:01:58La gente genera diseños siguiendo extensos flujos de trabajo y luego los presenta como si Claude
00:02:03Design hubiera construido todo de una sola vez.
00:02:05Pero esos mismos flujos de trabajo se pueden ejecutar en Claude Code directamente sin necesidad de Claude Design
00:02:09en absoluto.
00:02:10Así que, aunque este producto esté diseñado para diseñadores, deberían usar Claude Code en lugar de
00:02:14Claude Design, porque de esta manera podrán probar diferentes variaciones, experimentar
00:02:19más y obtener los mismos resultados, si no mejores, que Claude Design.
00:02:22Pueden iterar más veces con Claude Code en lugar de ser interrumpidos justo cuando el
00:02:26diseño realmente está progresando.
00:02:28Construir sobre lo que el sitio ya es en lugar de empezar de cero cada vez les da
00:02:32un mejor control sobre la dirección de cada diseño.
00:02:35Y debido a que todo lo que produce Claude Code es código real, con lo que terminan no es
00:02:39con un prototipo desechable, sino con algo que puede enviarse directamente al producto sin
00:02:43necesidad de ser reconstruido por otra persona después.
00:02:45Y además de todo esto, hay un problema de costos con Claude Design.
00:02:48Claude Code puede hacer las mismas cosas a un costo mucho menor, mientras que Claude Design se construye por separado
00:02:53y cuenta para límites que se ejecutan semanalmente, y no cuenta para sus otros límites,
00:02:57pero agota el uso a un ritmo mucho más rápido de lo que normalmente esperarías con modelos
00:03:02a través de otras aplicaciones de Claude.
00:03:03Esto afecta más a los diseñadores porque la cuota es tan baja que realmente no pueden experimentar
00:03:08de la manera que necesitan y su límite se agota después de solo unas pocas iteraciones de diseño.
00:03:12Y esto es exactamente de lo que mucha gente se está quejando.
00:03:15Cuando alguien estaba trabajando con él, agotó su límite de diseño rápidamente justo después de unas
00:03:1920 iteraciones de diseño, incluso cuando estaban en el plan máximo más alto.
00:03:23Y muchos otros dicen que alcanzan el límite en solo una hora y terminan con un diseño simple
00:03:27que es fácilmente implementable con Claude Code de una sola vez.
00:03:31Así que no es realmente utilizable en la práctica, ya que están alcanzando los límites antes de que puedan
00:03:35incluso terminar el flujo de trabajo en el que están trabajando, lo que lo hace mucho peor en comparación con los límites de
00:03:39Claude Code.
00:03:40La razón por la que el trabajo de Claude Design se ve tan impresionante es en realidad el lanzamiento del modelo Opus 4.7, no la
00:03:45herramienta en sí.
00:03:46Opus 4.7 es nuevamente el modelo de última generación con capacidades asombrosas y está funcionando
00:03:50mejor en todos los puntos de referencia.
00:03:52Pero la actualización que realmente importa aquí es la visión.
00:03:54Este modelo tiene una visión sustancialmente mejor y puede ver imágenes a una resolución mucho mayor
00:03:59de lo que era capaz anteriormente.
00:04:00Claude Opus 4.6 era capaz de analizar imágenes a una resolución de 1.15 megapíxeles, mientras que el
00:04:074.7 es capaz de analizar 3.75 megapíxeles.
00:04:10Así que eso implica que es capaz de entender el diseño a partir de una referencia mucho mejor.
00:04:14Si le das un diseño de referencia, procesa esa referencia con mucha más claridad y
00:04:18detecta cosas que antes se habría perdido.
00:04:20Con esta actualización del modelo, Anthropic cubrió la única brecha donde los modelos de Claude carecían
00:04:25y necesitaban un trabajo extenso, que era el diseño de interfaz.
00:04:27Este modelo es más elegante y creativo al completar una tarea y, por sí solo, produce
00:04:31interfaces y diseños de mayor calidad.
00:04:34Así que cuando Claude Design apareció, se presentó con mucha exageración debido a sus diseños increíbles,
00:04:38pero en realidad fue el modelo el que mejoró.
00:04:41No fue la herramienta la que se volvió tan increíblemente buena que dio como resultado los diferentes efectos visuales que
00:04:45ves.
00:04:46Claude Design fue otra forma inteligente de vender algo y crear exageración a su alrededor por parte de Anthropic.
00:04:50Ahora puedes obtener los mismos beneficios que obtienes en Claude Design en Claude Code 2 o posiblemente
00:04:55mejor.
00:04:56Puedes replicar el flujo de preguntas de Claude Design en Claude Code creando una habilidad simple.
00:05:00Cuando creas un proyecto en Claude Design, das una instrucción y hace muchas preguntas
00:05:04para poder determinar correctamente la dirección del diseño.
00:05:07Pide mucho más de lo que hace el modo de planificación de Claude Code, pero una habilidad puede hacer exactamente lo mismo.
00:05:11La habilidad contiene instrucciones sobre cómo ejecutar una sesión de preguntas al igual que Claude Design
00:05:16usando preguntas para llenar los vacíos que crea la instrucción y preguntando sobre lo que necesita ser construido.
00:05:21Define cuándo activar preguntas de seguimiento y cómo debería funcionar realmente el flujo.
00:05:25También incluye preguntas de ejemplo para ejecutar la sesión, una biblioteca de preguntas e incluso
00:05:30diseños ASCII de sitios para que pueda determinar la posición de los elementos en la página de
00:05:34destino.
00:05:35Cuando le das una instrucción, usa la habilidad y hace preguntas relacionadas con los vacíos que identifica
00:05:39al igual que Claude Design.
00:05:41Hace múltiples preguntas en diferentes áreas y, una vez que tiene toda la información
00:05:45necesaria para implementar, comienza a construir.
00:05:47La mejor parte es que genera código directamente, por lo que no hay entrega de diseño a código.
00:05:51Y con este enfoque, puedes iterar tanto como quieras sin preocuparte por quedarte
00:05:55sin límites en solo una hora.
00:05:57La generación de IU desde el mismo tipo de instrucción junto con el flujo de preguntas similar en
00:06:01Claude Code fue más o menos similar a lo que generó Claude Design.
00:06:05La principal diferencia es que Claude Design tenía una ventaja en ciertos aspectos donde hacía el
00:06:09sitio web más inmersivo al agregar pequeñas animaciones para que se vea más atractivo.
00:06:13Pero antes de seguir adelante, tengamos unas palabras de nuestro patrocinador.
00:06:16HeyGen. Probablemente hayas intentado hacer un video con
00:06:18una herramienta de IA.
00:06:19A los 20 minutos estás haciendo malabares con líneas de tiempo, regrabando voces en off y luchando contra una sincronización labial que parece
00:06:24un mal doblaje.
00:06:25HeyGen se salta todo eso.
00:06:26HeyGen es el generador de video de IA que acaba de lanzar una nueva CLI, lo que significa que un video de avatar de gemelo
00:06:31digital completo se puede generar con un solo comando.
00:06:34Sin línea de tiempo, sin cámara, sin equipo.
00:06:36Graba tu gemelo digital una vez y HeyGen te permite publicar constantemente sin volver a filmar,
00:06:40convirtiendo boletines informativos, archivos PDF, presentaciones de PowerPoint en videos.
00:06:44Genera videos multipantalla totalmente editados a partir de una sola instrucción con el agente de video y luego traduce
00:06:48para una audiencia global con sincronización labial completa.
00:06:51Construye con avatares, voces, agente de video, traducción y más en developers.heygen.com
00:06:56Los gemelos digitales requieren consentimiento verificado.
00:06:59Tu contenido nunca se utiliza para entrenar modelos públicos y toda la plataforma está construida para
00:07:03seguridad de grado empresarial.
00:07:04Empieza a enviar videos de calidad de estudio sin tocar una cámara.
00:07:07Haz clic en el enlace del comentario fijado y prueba HeyGen hoy mismo.
00:07:11La mayoría de los diseños con interacción de desplazamiento que quizás hayas visto en X cuando la gente mostraba
00:07:15Claude Design son solo sitios que usan fondos de video, lo que los hace parecer mucho más
00:07:20premium y da la impresión de que son más impresionantes de lo que realmente son.
00:07:24La mayoría de las demostraciones suelen ser solo instrucciones copiadas de sitios que proporcionan plantillas de instrucciones
00:07:28listas para usar.
00:07:29Las instrucciones incluyen un enlace a un video que debe usarse como fondo junto
00:07:33con pautas detalladas sobre cómo implementarlo.
00:07:36Por lo tanto, cualquier agente es capaz de implementar este tipo de sitio web, no solo Claude Design siempre
00:07:40que reciba instrucciones similares.
00:07:42Pero estas son solo instrucciones de muestra para sitios de exhibición.
00:07:45En realidad, las aplicaciones de grado de producción se construyen utilizando bibliotecas como Lenis, que es
00:07:49utilizada en muchas aplicaciones de producción, así como GSAP, que es una de las bibliotecas más populares
00:07:54para implementar animaciones suaves que hacen que la experiencia del sitio web sea mucho más inmersiva que
00:07:59antes.
00:08:00Para probar esto, descargamos un video y en nuestra instrucción simplemente le dijimos a Claude Code que
00:08:04usara el video como la sección principal junto con los temas de color que queríamos y implementó
00:08:08el resto del sitio web por su cuenta.
00:08:10Solo tuvimos que corregirlo una vez, donde tuvimos que explicar de qué se trataba el video.
00:08:14E incorporó el estilo perfectamente en la página de destino, haciéndolo mucho mejor que
00:08:18la versión anterior.
00:08:19El sitio web se implementó muy bien, lo cual es bastante poderoso dado lo simple que era la
00:08:23instrucción, e incluyó diferentes animaciones e interacciones que hicieron que esta parte del sitio
00:08:28fuera mucho más poderosa e interactiva que antes con las capacidades de Claude.
00:08:32Ahora, en Claude Code, también puedes complementarlo con más herramientas con facilidad en comparación con Claude
00:08:36Design, porque Claude Code es técnicamente más capaz y puede implementar cosas con mayor fluidez.
00:08:42Incluso puedes usar una habilidad de código abierto como "scrolly telling", que básicamente permite animaciones
00:08:46de narración con desplazamiento en tu proyecto.
00:08:48Entonces, con esta habilidad, Claude puede implementar fácilmente narración multinivel a partir de una instrucción simple
00:08:53y trabajar para crear animaciones que profundicen mucho más de lo que Claude Design
00:08:57podría hacer por sí solo.
00:08:59Además, si estás disfrutando de nuestro contenido, considera presionar el botón de hype porque nos ayuda
00:09:03a crear más contenido como este y llegar a más personas.
00:09:07Usar Claude Code en lugar de Claude Design hace que sea más fácil implementar interfaces de usuario porque con
00:09:11Claude Code puedes integrar sistemas de diseño integrados con facilidad al incorporar componentes
00:09:16de shadcn, aceternity o hero ui, que ya incluyen muchas animaciones preconstruidas.
00:09:22Esto reduce la necesidad de que el modelo averigüe cómo debe verse y comportarse cada componente
00:09:27y, en cambio, le permite concentrarse en mejorar el diseño general.
00:09:30Por lo tanto, el resultado es mucho más fácil de alcanzar en comparación con trabajar directamente en Claude Design por defecto.
00:09:35También puedes usar habilidades de diseño de interfaz de usuario u otras habilidades especializadas adaptadas a tu proyecto
00:09:39construidas con un creador de habilidades que analiza el estado actual del proyecto.
00:09:43Esto le ayuda a implementar funciones de manera más efectiva sin perder tiempo.
00:09:47Claude Code también es más flexible porque puedes conectar servidores MCP a él.
00:09:51Por ejemplo, puedes usar un servidor MCP de shadcn para que el agente pueda instalar los componentes correctos
00:09:56por su cuenta en lugar de que se le diga explícitamente qué usar y dónde.
00:09:59Del mismo modo, puedes usar varios MCP que ayudan a construir interfaces de usuario de manera más efectiva en lugar de confiar
00:10:04en un diseño puramente generado.
00:10:06Incluso con modelos como opus 4.7 y herramientas como Claude Design, los diseños generados directamente
00:10:11a menudo revelan que fueron producidos por un modelo porque tienden a seguir patrones similares.
00:10:16Pero el uso de bibliotecas establecidas ayuda a reducir este problema y hace que el resultado se sienta más natural
00:10:20y menos predecible.
00:10:22La mayor ventaja de usar Claude Code en lugar de Claude Design es que puedes conectarlo
00:10:26a git.
00:10:27Ahora, aunque también puedes conectar github a Claude Design, hay una gran diferencia
00:10:30en cómo funcionan ambos.
00:10:31La integración de git de Claude Design es bastante básica.
00:10:34Principalmente le permite buscar archivos desde un repositorio de github conectado y usarlos para
00:10:38entender los diseños.
00:10:39Pero su propósito se limita principalmente a leer y hacer referencia.
00:10:42Realmente no hace cambios en el repositorio.
00:10:45Claude Code, por otro lado, es muy diferente.
00:10:47Puede realizar operaciones completas de git como confirmaciones, ramificaciones y más.
00:10:51Entonces, si algo sale mal en tu implementación o si prefieres una versión anterior después de hacer
00:10:55cambios, puedes volver fácilmente a una versión anterior usando git.
00:10:59Eso es algo que no podrías hacer con Claude Design mientras lo usas, lo que convierte a
00:11:02Claude Code en un enfoque mucho más sólido.
00:11:04Para diseñar diferentes prototipos en lugar de ir a Claude Design o usar figma, es
00:11:09más efectivo si haces maquetas directamente en HTML.
00:11:12Para probar diferentes variaciones, también puedes hacer uso de agentes paralelos y árboles de trabajo
00:11:16para dividir tareas, similar a cómo Claude Design explora diseños pero de una manera gestionada por git,
00:11:21para que puedas mantener la mejor versión y descartar el resto fácilmente.
00:11:24Simplemente puedes darle una instrucción para usar subagentes en árboles de trabajo separados y pedir a cada agente que
00:11:29implemente una variación diferente del mismo diseño.
00:11:31Con eso, Claude generará agentes en espacios de trabajo separados.
00:11:35Usar agentes paralelos te ayuda a ahorrar tiempo y esfuerzo mientras exploras múltiples direcciones
00:11:39a la vez.
00:11:40Ahora, una vez que cada agente haya terminado su trabajo, obtienes múltiples variaciones que puedes revisar
00:11:44en cualquier momento y elegir la que mejor se adapte a tus necesidades.
00:11:47A partir de ahí, puedes hacer cambios y continuar construyendo la aplicación según el estilo exacto que
00:11:51más te guste.
00:11:52Y a pesar de no haber sido generado por Claude Design, cada uno de los diseños generados todavía tiene una
00:11:57apariencia estética con SVG adecuados creados completamente a través de código para representar elementos y un equilibrio mucho
00:12:02mejor general.
00:12:04Luego puedes fusionar tu versión preferida en la rama principal y eliminar los árboles de trabajo que contienen
00:12:08los diseños que no te gustaron.
00:12:09Las habilidades utilizadas aquí junto con otros recursos están disponibles en AI Labs Pro para este video
00:12:15y para todos nuestros videos anteriores, desde donde puedes descargar y usarlo para tus propios proyectos.
00:12:19Si has encontrado valor en lo que hacemos y quieres apoyar al canal, esta es la mejor manera
00:12:23de hacerlo.
00:12:24El enlace está en la descripción.
00:12:25Eso nos lleva al final de este video.
00:12:26Si te gustaría apoyar al canal y ayudarnos a seguir haciendo videos como este, puedes hacerlo
00:12:30usando el botón de súper gracias a continuación.
00:12:33Como siempre, gracias por mirar y nos vemos en el próximo.