Esto es increíble... El fin del debate de diseño entre Google Stitch y Claude
AAI LABS
컴퓨터/소프트웨어창업/스타트업사진/예술AI/미래기술
Transcript
00:00:00Gemini ha sido el modelo líder en cuanto a diseño a pesar de no estar a la par en otras áreas,
00:00:05especialmente con su herramienta de diseño Stitch, que hemos usado varias veces en nuestros flujos de trabajo.
00:00:09Esto mejoró aún más cuando Stitch lanzó su actualización 2.0 con múltiples funciones nuevas,
00:00:14llevándolo aún más lejos. Pero Anthropic también dio un paso adelante y entró en el espacio del diseño con el
00:00:19lanzamiento de Opus 4.7 y Claude design, que causó tal impacto que la gente empezó a llamarlo
00:00:24el fin de Figma. Pero la verdadera pregunta es, ¿cuál es realmente mejor? Así que para resolver esto,
00:00:30los pondremos a prueba en varias categorías y, al final, sabrás cuál
00:00:34se gana un lugar en tu flujo de trabajo. Tanto Claude design como Google Stitch tienen muchas funciones
00:00:39que los diferencian entre sí. Claude design se lanzó junto con Opus 4.7 y rápidamente
00:00:45ganó popularidad como el “asesino de Figma” por sus funciones interactivas. El modelo
00:00:49en sí mejoró mucho en diseño y, junto con su herramienta de diseño, sus creaciones progresaron bastante.
00:00:54Google Stitch, por otro lado, ha existido por un tiempo y no era tan bueno hasta que Google
00:00:58lanzó Gemini 3, el modelo que es increíblemente superior en diseño comparado con todos los demás modelos. Así que
00:01:04combinado con Stitch, los diseños mejoraron significativamente. Ahora veamos dónde
00:01:08cada uno toma la delantera realmente. Claude design tiene esta función donde puedes crear una presentación usando
00:01:13sus herramientas y escribir notas del orador dentro también. Pero Stitch no tiene nada parecido
00:01:17porque Stitch es solo para UI y no ofrece ninguna función para otros diseños más allá de interfaces móviles y web.
00:01:23En Claude design también puedes referenciar otros proyectos que quieras que el diseño siga
00:01:28conectando tu repositorio de GitHub, lo que básicamente permite a Claude importar los estilos de diseño
00:01:32desde allí y crear los siguientes diseños basándose en ellos. Stitch maneja esto de forma un poco distinta. Utiliza
00:01:37sistemas de diseño para la misma tarea, donde puedes copiar el sistema de diseño de otros sitios web
00:01:42alojados con solo proporcionar el enlace en Stitch; desde ahí importa el estilo exacto y
00:01:46crea un sistema que se utiliza en diseños posteriores. Cuando se trata de hacer cambios, Claude design permite
00:01:51re-promptear, pero también puedes hacer clic directamente en el área donde quieres los cambios y se reflejan
00:01:56en tu diseño. Puedes simplemente comentar directamente sobre cualquier cosa que quieras distinta y luego
00:02:00empieza a aplicar los cambios directamente en ella. Puedes acumular los comentarios y enviárselos a Claude
00:02:04todos juntos. Stitch va por el otro camino aquí. No puedes hacer cambios directamente en él, excepto para cambiar
00:02:09el texto. Así que si quieres cualquier cambio como color o tamaño de fuente, tienes que añadir un comentario en el área que
00:02:14selecciones o anotarlo, y luego enviar el comentario a Gemini para que incorpore tus cambios.
00:02:19La entrada de voz es otra diferencia. Claude design permite usar tu voz para dictar el prompt en lugar
00:02:24de escribir. Pero este es un punto donde Stitch gana porque la función de lienzo de voz en Stitch es
00:02:28básicamente una conversación en vivo que tienes con el modelo donde le cuentas todo sobre el diseño que
00:02:33quieres crear, y él hace preguntas relacionadas con el diseño y lo crea para ti,
00:02:37todo de forma conversacional. Stitch también tiene una función de vista previa en vivo en un panel separado donde
00:02:42puedes ver cómo luce tu diseño en escritorio, móvil y tableta, e interactuar con el diseño directamente.
00:02:47Claude design no tiene esta función de vista previa por separado. En su lugar, muestra la interfaz en el
00:02:52mismo panel donde puedes interactuar con los elementos directamente sin tener que ir a otra pantalla
00:02:57de vista previa, pero no puedes comprobar la adaptabilidad como sí puedes con Google Stitch. Claude design también
00:03:01está hecho para trabajar en equipos, por lo que permite compartir un proyecto con múltiples permisos como
00:03:06permisos de edición y de comentarios por separado, algo que Stitch no tiene. En Stitch solo puedes compartir
00:03:11el proyecto y dejar que todos trabajen en él en lugar de tener permisos separados como en Claude design.
00:03:15Así que a pesar de que Stitch es un proyecto mucho más maduro y Claude design es un proyecto
00:03:20recién lanzado, le daríamos los puntos a Claude design en cuanto a funciones. Claude
00:03:24design es un producto más nuevo que solo está disponible en los planes Pro, Max, Team y Enterprise de Claude.
00:03:30Stitch, por otro lado, está disponible gratis sin importar el plan y solo usa un sistema de
00:03:35créditos para rastrear el uso. Así que, en términos de utilidad, Stitch ofrece muchos más créditos.
00:03:40Permite 400 créditos de diseño diarios y 15 créditos de rediseño diarios, así que obtienes muchos créditos
00:03:46para usar incluso en un solo día, y los créditos mensuales son aún más. Normalmente, un diseño simple cuesta tres
00:03:51créditos y puede variar según la complejidad y el número de generaciones, así que podrás obtener muchos diseños.
00:03:56Claude design tiene límites separados que abarcan una semana. Este límite no
00:04:00afecta a tus otros límites de Claude code, por lo que puedes usar libremente otras funciones de Claude incluso si los
00:04:05límites de diseño terminan. Pero como dijimos en el video anterior, este límite es prácticamente inservible
00:04:10porque no te permite experimentar libremente y se agotará antes de que puedas usarlo para cualquier
00:04:15construcción sustancial, y esto es aún peor si estás en el plan Pro porque eso solo te permite
00:04:20experimentar con unos pocos diseños antes de agotarse. Así que, si realmente quieres sacar algo de
00:04:24Claude design, tendrías que cambiarte a sus planes Max. Así que comparando los costos de ambos, Stitch es
00:04:29el claro ganador por un amplio margen porque al menos te deja experimentar con diseños, cosa que
00:04:34Claude design no permite. Probamos ambas herramientas con el mismo prompt, con un breve resumen sobre el estilo del sitio y
00:04:39las secciones que queríamos. Claude design creó las tareas pendientes como suele hacer Claude code y empezó
00:04:44a trabajar. Y mientras Claude design se tomaba su tiempo, le dimos exactamente el mismo prompt a Google Stitch.
00:04:49Lo primero que hizo Stitch fue crear el sistema de diseño visualizando todo, desde los colores hasta
00:04:54la tipografía, iconos y botones. Incluso antes de que Claude design terminara, Stitch ya estaba listo. Creó una
00:04:59página de aterrizaje usando el mismo estilo de su sistema de diseño con un equilibrio total entre los colores
00:05:04principales y de acento. Claude design tardó mucho más y, tras finalizar, empezó a trabajar en los
00:05:09pasos de verificación. Cada parte del trabajo de Claude design era interactiva, a diferencia de la página estática de Stitch.
00:05:15En su primera ejecución, nos ofreció la opción de decidir entre los colores para los acentos y el tema principal
00:05:20para que pudiéramos hacer pequeños cambios nosotros mismos en lugar de re-promptear. En una prueba de calidad de diseño,
00:05:25le daríamos los puntos a Google Stitch porque su diseño era muy superior a los demás. Stitch utilizó
00:05:30creativamente la paleta de colores para que coincidiera con el estilo y encajara con el tono de la app, mientras que la elección de
00:05:34Claude design se sentía genérica y carecía de profundidad. Además, en términos de velocidad, Stitch también gana aquí porque
00:05:39Claude design tarda demasiado en cada diseño. Siempre que Claude design necesita añadir imágenes, crea SVGs
00:05:45y los integra en el diseño. A menos que proporciones tus propios recursos, depende de la generación
00:05:50de SVGs por completo. Google, por otro lado, tiene Nano Banana, su propio modelo de generación de imágenes. Así que
00:05:55Stitch lo integra directamente en el producto e incluso si no se lo dices explícitamente, usa la generación
00:06:00de imágenes para todas las secciones del diseño y los resultados son mucho mejores. No importa cuán alta
00:06:05sea la calidad de los SVGs, no pueden competir con un modelo de imagen. Así que en esta situación, Google Stitch
00:06:10es el claro ganador. Stitch no es realmente conocido por las animaciones porque su único enfoque es el diseño,
00:06:16pero aun así intentamos ver cómo las manejaba. Intentó añadir algunas, pero las animaciones no eran
00:06:21visibles directamente y solo se podían previsualizar en una pestaña aparte, y solo generó la revelación al desplazar
00:06:26en una sección de la página. Pero cuando le dimos la misma tarea a Claude design, añadió múltiples
00:06:32animaciones como una marquesina debajo de la sección hero. También se añadió la revelación al desplazar, pero estaba mucho
00:06:37más coordinada y bien aplicada a cada componente, no solo a la sección hero. Claude design
00:06:43es mucho mejor en animaciones que Stitch porque usa librerías populares como shaders y es capaz
00:06:48de crear animaciones mucho más interactivas que cambian de comportamiento con el movimiento del ratón y los clics.
00:06:54Así que en cuanto a animaciones, Claude design es el claro ganador. Además, si te gusta nuestro contenido,
00:06:59considera pulsar el botón de “hype” porque nos ayuda a crear más contenido como este y llegar a
00:07:04más personas. Para probar qué tan bien entendía cada uno la app y manejaba los cambios, les pedimos que crearan
00:07:09páginas de registro e inicio de sesión sobre la app existente. Stitch completó el diseño primero, usó el
00:07:14mismo sistema de diseño para cada página e implementó el mismo encabezado y pie de página en cada una. Pudimos
00:07:19ver cómo fluían con la función de prototipo y ver cómo cada botón se conectaba con el otro.
00:07:24La implementación de Claude design encajó mejor con la idea de la app y entendió mejor
00:07:28lo que se necesitaba. Construyó creativamente la página de login y en la página de registro incluso fue un paso
00:07:33más allá e implementó múltiples estilos de cuentas. También queríamos ver qué tan bien incorporaba
00:07:38cada uno los cambios. En Claude design solo añadimos comentarios, los enviamos juntos y empezó a
00:07:44implementarlos. En Stitch tuvimos que anotar las áreas donde queríamos cambios, pero el cambio no fue exactamente
00:07:49lo que queríamos. Simplemente añadió un pie de página en el lugar equivocado justo después de las citas, lo cual fue raro.
00:07:54En general, iterar con Stitch no es amigable porque para cada cambio solicitado crea una pantalla nueva
00:07:59y en un punto las pantallas se vuelven demasiado desordenadas. Claude design es una experiencia mucho mejor porque
00:08:04los cambios se reflejan directamente en el diseño y, como entiende la app, los implementa correctamente
00:08:09sin desviarse del estilo. Así que en cuanto a iterar en el diseño, Claude design es claramente
00:08:14la mejor opción. Cada herramienta tiene su propio sistema de diseño. Para Claude design, un sistema de diseño identifica tu
00:08:20marca porque esta herramienta está pensada para equipos que trabajan en kits de marca. Puedes añadir una descripción
00:08:25junto con fuentes, logotipos, recursos y todo lo demás, y crea un sistema completo que representa
00:08:30el estilo de tu marca. Para Stitch, el sistema de diseño es un archivo que no identifica una marca sino que
00:08:36representa un diseño en particular. Este archivo no se limita a Stitch. Puedes exportarlo y usarlo en
00:08:41cualquier agente y será entendido e implementado directamente. Como mencionamos antes, puedes importar
00:08:46sistemas de diseño de otros sitios web o crear el tuyo propio. Stitch ha liberado el archivo design.md
00:08:52que contiene comandos npm para la instalación y el formato adecuado. Cada sistema de diseño sirve para un
00:08:57propósito diferente, pero preferimos el de Google porque permite cambiar de plataforma fácilmente y no
00:09:02te encadena a Stitch. Ahora que hemos probado los diseños, es hora de hablar sobre cómo es el traspaso
00:09:07de diseño a código en cada uno. Como mencionamos anteriormente, Claude design ofrece más opciones de exportación
00:09:13con control de permisos. Permite exportar como pdf, diapositivas e incluso exportar a canvas para que puedas
00:09:18continuar tus diseños allí. Pero el patrón de traspaso que más usamos es el traspaso a Claude code
00:09:23porque ahí es donde más desarrollamos nuestras apps. Con solo copiar un prompt y pegarlo
00:09:28dentro de Claude code, copiará el diseño y lo implementará en la app. Google Stitch, por otro
00:09:33lado, tiene patrones de traspaso mucho mejores. Stitch tiene un MCP a través del cual puedes conectarlo a tu
00:09:39agente de programación y dejar que envíe prompts a Stitch para crear diseños y traerlos para implementarlos
00:09:44en la app. Claude design no tiene ninguna integración MCP, así que nos gusta el MCP de Stitch porque
00:09:49funciona al revés, lo que significa que los agentes de código pueden darle instrucciones en el lenguaje adaptado de Stitch y
00:09:53no tenemos que preocuparnos por un prompt adecuado para obtener los diseños que queremos. Stitch también permite
00:09:58exportar como código zip, pero tienes otras opciones también. Puedes exportarlo a Google AI Studio
00:10:04donde puedes seguir construyendo tu app usando los recursos del estudio y Firebase integrado directamente
00:10:09en la app, o podrías exportarlo directamente a Figma para trabajar con otras personas allí. Usamos la
00:10:14exportación MCP más que nada porque con esta integración no tenemos que preocuparnos por el traspaso y los
00:10:19agentes de código lo manejan fácilmente. También permite exportar como un PRD que puedes entregar a otras
00:10:25personas o agentes de código, permitiéndoles implementar la app fácilmente y sin problemas. Así que en cuanto al estilo
00:10:30de traspaso, Stitch es el claro ganador. Eso nos lleva al final de este video. Si quieres apoyar el
00:10:35canal y ayudarnos a seguir haciendo videos como este, puedes hacerlo usando el botón de “super thanks” de abajo.
00:10:40Como siempre, gracias por vernos y nos vemos en el próximo.