Este repositorio de código abierto acaba de clonar el diseño de Claude (¡y es BUENO!)
CChase AI
컴퓨터/소프트웨어창업/스타트업AI/미래기술
Transcript
00:00:00Claude Design tiene que ser la mejor herramienta que he usado jamás.
00:00:02Eso es en realidad completamente inutilizable.
00:00:05A pesar de que le pago a Anthropic 200 dólares al mes por su plan 20X.
00:00:10Alcanzo los límites de uso semanales en Claude Design en menos de una hora.
00:00:14Esto es más que frustrante, pero afortunadamente para ti y para mí,
00:00:17hay esperanza porque se acaba de lanzar un nuevo repositorio de código abierto,
00:00:22que básicamente clona a Claude Design y lo convierte en una habilidad que podemos usar.
00:00:23Se llama Huashu Design y está construido sobre los mismos mensajes del sistema
00:00:28que usa Claude Design.
00:00:32Y hoy vamos a ponerlo en una prueba frente a frente contra Claude Design para
00:00:33ver si realmente vale la pena nuestro tiempo. Porque si lo vale,
00:00:37podríamos tener una salida de la cárcel de límites de uso de Claude Design.
00:00:41Huashu Design resuelve el problema de que Claude Design sea una herramienta increíble,
00:00:45pero que realmente no puedes usar por más de una hora antes de alcanzar los límites
00:00:50de uso.
00:00:54Así que lo que hicieron fue tomar todos los mensajes del sistema y las filosofías de diseño de
00:00:55Claude Design y convertirlo en un repositorio de GitHub de código abierto,
00:00:58que es esencialmente solo una habilidad que podemos cargar en Claude Code o Codex o
00:01:02realmente cualquier agente de codificación, igual que Claude Design.
00:01:07Es capaz de hacer prototipos interactivos para aplicaciones web o aplicaciones móviles.
00:01:10Podemos hacer presentaciones, diseño de movimiento, infografías, etcétera, etcétera.
00:01:13Y es capaz de hacer todo esto con una sola habilidad porque en realidad hay
00:01:17mucho sucediendo bajo el capó. Por ejemplo,
00:01:21tiene acceso a 20 archivos Markdown de análisis profundo que explican qué hacer para presentaciones,
00:01:24diferentes estilos de diseño, mejores prácticas de animación.
00:01:28Así que, aunque es una habilidad en la superficie,
00:01:31prácticamente tiene acceso a 20 mini habilidades.
00:01:33También tiene acceso a una serie de componentes, medios y activos que puede aprovechar
00:01:35cuando diseña cosas para ti.
00:01:40Y tiene toda una cadena de herramientas ejecutable.
00:01:42Por lo que le da la capacidad de tomar un archivo HTML y convertirlo en MP4 o
00:01:44usar Playwright para verificar realmente que lo que diseñó para ti en
00:01:50papel realmente funciona en la vida real. Y al igual que Claude Design,
00:01:53podemos ver diferentes variaciones. Tenemos el sistema completo de ajustes.
00:01:56Y la mejor parte es que, como es una habilidad, si estoy dentro de Claude Code,
00:02:00se basa en ese uso, ya sea que tenga el plan 5X o 20X,
00:02:05no estoy limitado por este límite de uso aparentemente arbitrario de
00:02:08Claude Design, pero pongámoslo a prueba.
00:02:13Entonces, lo que vamos a hacer es ver qué tan bien funciona realmente
00:02:16en términos de diseñar una página de destino desde cero.
00:02:18Luego vamos a ver cómo hace casi lo mismo,
00:02:22pero si le damos activos sobre los cuales construir, similar al sistema de diseño de Claude Design,
00:02:24y luego, por último, veremos qué tan bien funciona con las presentaciones y, a lo largo del camino,
00:02:29compararemos esto con Claude Design frente a frente.
00:02:33Para que podamos ver si esto realmente vale la pena. Pero antes de hacer eso,
00:02:36unas breves palabras de su patrocinador favorito: yo mismo. Así que, justo el mes pasado,
00:02:39saqué la clase magistral de Claude Code y es la forma número uno de pasar
00:02:43de cero a desarrollador con IA, especialmente si no vienes de un entorno técnico.
00:02:46Actualizo este curso cada semana.
00:02:51Y acabo de sacar los módulos de agentes de iOS de Claude Code.
00:02:53Así que si eres alguien que quiere aprender cómo aprovechar mejor esta herramienta,
00:02:56entonces necesitas echarle un vistazo. Puedes conseguirlo dentro de Chase AI.
00:03:01Además, habrá un enlace para eso en el comentario fijado. Así que comencemos.
00:03:04Entonces, el mensaje que le doy a Claude Code,
00:03:08y que usará esta habilidad Huashu Design en todo momento, es usar la
00:03:09habilidad de diseño para crear una página de destino para mi producto SaaS ficticio, Lighthouse,
00:03:13haciendo las preguntas que necesites antes de que empecemos. Ahora,
00:03:17también le he dado este mismo mensaje a Claude Design.
00:03:21Así que Huashu regresa con seis preguntas preguntando qué hace Lighthouse, el objetivo,
00:03:24el ambiente, las secciones necesarias, las variaciones. Y sabes,
00:03:29¿debería crear contenido ficticio o tengo un texto copiado?
00:03:34Claude Design hizo preguntas similares,
00:03:37aunque profundiza un poco más y, obviamente, debido a su naturaleza gráfica,
00:03:40me da algunas cosas para elegir en términos de la dirección visual
00:03:44que realmente puedo ver. Así que para Huashu, le estoy diciendo,
00:03:48hagamos un enfoque analítico. Vamos por el desarrollador individual.
00:03:50Dije que quiero ver múltiples tipos de ambientes y estilos,
00:03:54y de esa manera realmente puedo comparar las variantes.
00:03:57Y también quiero que haga el texto por sí solo. Y para Claude Design,
00:03:59le dije prácticamente lo mismo y también quería tres variantes que pudiera
00:04:02ver una al lado de la otra.
00:04:05Así que esto es lo que se le ocurrió a Claude Design versus lo que se le ocurrió a Huashu.
00:04:06Y apagaré mi cámara para que podamos ver esto mejor.
00:04:11Entonces, echemos un vistazo a lo que puso Huashu en una página.
00:04:16Podríamos haber tenido que hacer tres páginas separadas,
00:04:19pero esto nos permite ver todo a la vez. Bueno, en realidad retiro lo dicho.
00:04:22Tenemos aquí arriba a la derecha la capacidad de ver las tres.
00:04:25Así que esto es lo que obtuvimos con esta habilidad.
00:04:29Entonces, este Ledger 1 realmente se ve bastante bien. Ya sabes,
00:04:31nos da la página web completa. Tenemos las variantes de terminal,
00:04:35el mismo tipo de trato, así como la versión en papel.
00:04:40Y luego puedo ver las tres a la vez. Y honestamente, desde el principio, bastante bien.
00:04:44Esto es mucho mejor que si estuviéramos usando Claude Code solo.
00:04:49Incluso con la habilidad de diseño de interfaz, dije: "Grandioso, ya sabes,
00:04:52tres variantes, bastante sólido". Y ahora veamos Claude Design. Cabe destacar,
00:04:55Design nos dio los ajustes desde el principio. No lo veremos ahora mismo,
00:04:59pero aquí está su versión de terminal, ya sabes,
00:05:03recorre todo el asunto editorial de nuevo,
00:05:07bastante similar a la editorial de aquí.
00:05:11Muy, muy similar espacialmente.
00:05:15Esto es muy horrible. Esto definitivamente emite, eh, ya sabes, tu,
00:05:19tus típicas vibras de IA. Creo que tiene mucho que ver con el gradiente.
00:05:24Y luego puedo comparar las tres. Ahora,
00:05:28lo que quiero que hagas ahora mismo no es pensar: "Oh,
00:05:32una necesariamente se ve mejor que la otra en el vacío", sino realmente ver qué tan
00:05:34cerca está esta habilidad que estamos viendo aquí versus Design. Muy,
00:05:37muy similar, lo cual es un gran pulgar hacia arriba para la habilidad de Huashu.
00:05:42Ahora, lo que me gusta hacer después de ver estas variantes macro es concentrarme en una
00:05:46en particular que me guste y luego empezar a hacer ajustes para eso.
00:05:51Ahora, para mantenerlo algo similar para que podamos tener una mejor comparación y contraste,
00:05:54voy a elegir la editorial en Design,
00:05:59que se conoce como Ledger 1 aquí en la habilidad.
00:06:03Y veremos qué tan bien hacen los ajustes. Ahora, para Claude Design,
00:06:06los ajustes ya están aquí. Entonces para la editorial,
00:06:09podemos intercambiar entre claro y oscuro. Puedo cambiar el acento.
00:06:11Me da casi cualquier color que se me ocurra, lo cual es genial.
00:06:15Puedo cambiar el titular real,
00:06:18pero luego tiene dividido entre espacial y global.
00:06:21Así que lo que voy a hacer es decirle que expanda los ajustes y que los tenga
00:06:25solo para la editorial. Y mientras eso sucede,
00:06:29salté a Claude Code y dije:
00:06:31vayamos con la variante Ledger y démosle una cantidad agresiva de ajustes.
00:06:33Así podemos comparar en ese frente.
00:06:36Así que Claude Design ha seguido adelante y ha añadido un montón de ajustes para nosotros. Y cabe notar,
00:06:38en este punto, solo por lo que has visto en este video,
00:06:42ya me he comido alrededor del 15% de mi uso de Claude Design. Bueno,
00:06:44en el lado de la habilidad,
00:06:49solo hemos usado el 13% de la ventana de contexto de una sola sesión.
00:06:49Así que 130 mil tokens, o sea, ni siquiera el 1% de mi uso semanal,
00:06:54concedido, estoy en el plan 20X, pero la diferencia es asombrosa. Aunque debemos notar,
00:06:59que esto todavía está trabajando en los ajustes para esa única cosa.
00:07:03Así que es un poco más lento y los ajustes de Claude Design están funcionando como se esperaba.
00:07:05Los ajustes, francamente,
00:07:10son una de mis partes favoritas de Claude Design en general.
00:07:12Creo que el poder de Claude Design no es necesariamente como: "Oh,
00:07:16los diseños son increíbles". Y sí creo que están un paso por encima.
00:07:20No te equivoques,
00:07:22sino el hecho de que puedo tan rápidamente simplemente revisar un montón de cosas diferentes
00:07:24y ver cómo se ven y simplemente iterar, iterar, iterar muy rápidamente.
00:07:28Y una cosa que queremos notar aquí es que, debido a la naturaleza de cómo funciona Claude Design,
00:07:31la capacidad de hacer clic en cosas específicas como esta y jugar con la
00:07:36tipografía o dejar comentarios específicos.
00:07:36Eso no es realmente algo que podamos hacer dentro de la habilidad de diseño.
00:07:40Ciertamente no puedo dibujar en la habilidad de diseño y decir: "Oye, echa un vistazo a esto.
00:07:43Vamos, ya sabes, juega con esto, mueve esto un poco a la izquierda,
00:07:47mueve esto un poco a la derecha". Ese tipo de cosas.
00:07:51Necesitas una interfaz gráfica para eso,
00:07:54que es donde Claude Design obviamente se adelantará.
00:07:57Así que comparemos eso con los ajustes que obtenemos con Huashu Design.
00:07:58Entonces, cabe notar,
00:08:01que los ajustes combinan con el mismo tipo de estilo que la página en sí.
00:08:05Puedo cambiar los ajustes preestablecidos.
00:08:07Puedo cambiar un poco la familia de visualización, un modo oscuro diferente.
00:08:10Puedo cambiar los acentos y parece que puedo cambiar varias cosas como
00:08:13densidad de diseño. ¿Tenemos la franja de confianza?
00:08:18¿La franja de confianza desaparece? Sí. Ese tipo de cosas. Así que definitivamente comparable.
00:08:22¿Hay tantos ajustes aquí como los había en Claude Design? No,
00:08:26pero simplemente estoy a un mensaje de obtener más.
00:08:30Y creo que la gran conclusión aquí es Claude Code con esta habilidad de diseño.
00:08:32Definitivamente compite con lo que puedes obtener dentro de Claude Design de forma nativa y
00:08:34el uso total de tokens en este punto es 170 mil, básicamente no usé nada de
00:08:38mi uso semanal y quemé el 15% de Claude Design. Así que para este ejemplo,
00:08:42que es usarlo sin filtros, sin sistema de diseño, sin activos,
00:08:47ver qué puedes conseguir. Creo que la habilidad hizo un gran trabajo.
00:08:51Así que pasemos a la siguiente demostración y veamos qué tan bien puede hacerlo.
00:08:56Si realmente le damos algo sobre lo cual construir, algún tipo de sistema de diseño,
00:08:59algún tipo de ejemplos de diseño y ponemos la habilidad a prueba,
00:09:02porque ya sé que Claude Design puede hacer esto bastante bien.
00:09:06Cuando miramos a Claude Design y sus sistemas de diseño,
00:09:10hace un trabajo bastante bueno siendo capaz de tomar lo que le demos.
00:09:13Y eso puede ser como una base de código o algo así y extraer un montón de
00:09:16información, todo, desde espaciado hasta componentes, medidores, botones, héroe,
00:09:19toda esta cosa. Así que cuando cargo este sistema de diseño en Claude Design,
00:09:23sé que podrá mantener eso en diferentes tipos de
00:09:27entregables. Por ejemplo,
00:09:31este diseño de sistema operativo agéntico es algo que convertí en un sistema de diseño.
00:09:34Y aunque lo vemos como un panel aquí dentro de Claude Design,
00:09:36es muy fácil replicar ese tema de diseño.
00:09:39Así que ves esto dentro de una presentación, por ejemplo,
00:09:42parece que todo vino del mismo lugar y eso es porque el sistema de diseño
00:09:45de Claude Design es bastante poderoso. La desventaja es que crear este tipo de
00:09:47sistema de diseño consume como el 30% de tu uso semanal.
00:09:50Así que lo que le dije a Claude Design fue que recreara esta página de destino de Lighthouse
00:09:55usando ese panel de sistema operativo agéntico.
00:10:00Luego le dije a Claude Code casi lo mismo diciendo:
00:10:00quiero usar la estética/sistema de diseño que coincide con ese panel.
00:10:04Y luego le dije dónde puede encontrar toda esa información dentro de un directorio separado
00:10:07o referencia. Esto es prácticamente lo que está usando como
00:10:11inspiración como su estética.
00:10:14Así que, obviamente, el sprite de aquí se está volviendo loco,
00:10:18pero el resto tiene bastante sentido. Mmm,
00:10:22se fue y recreó un panel aquí también,
00:10:25que es muy similar a este. Creo que se ve bastante dulce.
00:10:28Eh, en cuanto a las fuentes, colores,
00:10:33todo eso muy en línea con lo que debería estar haciendo.
00:10:37La única queja real que tengo es el pequeño personaje de aquí.
00:10:41Simplemente no sé qué está pasando,
00:10:44pero ese es probablemente un arreglo relativamente simple.
00:10:47Ahora veamos cómo lo hizo la habilidad de Huashu. Como referencia,
00:10:52la habilidad tomó 11 minutos y alrededor de 70,000 tokens, Claude Design
00:10:54tomó alrededor de tres minutos, pero consumió el 10% de su uso semanal.
00:10:56Y esto es lo que obtuvimos. Apagaré mi cámara para que podamos ver mejor.
00:10:59Entonces obtuvimos un pequeño Claude,
00:11:04un pequeño icono de logo por aquí. Cabe destacar,
00:11:08que este logo es un poco diferente al sprite de aquí arriba,
00:11:10pero hey, encaja. Los colores y las fuentes parecen tener sentido a primera vista.
00:11:15Y tenemos nuestro pequeño sprite arriba aquí también al lado de Lighthouse.
00:11:18Uh, esto se ve bastante bien. Es como un pequeño ticker.
00:11:22Todas estas cosas se ven bastante familiares desde el panel en términos de diseño general.
00:11:26Esto se siente un poco mal por aquí.
00:11:30Esto se ve genial. Es como una pequeña teletipo.
00:11:35Todo esto parece bastante familiar, viniendo del panel
00:11:40en términos de diseño general. Esto se siente un poco extraño por aquí.
00:11:43Desearía que esta sección de la terminal simplemente estuviera centrada con lo
00:11:47que tenemos aquí a la izquierda, pero es un arreglo fácil. Y en general,
00:11:51bastante bien. Diría que me gustaron un poco más los diseños de Claude,
00:11:56especialmente el hecho de que creó su propio panel y lo incluyó.
00:12:00Pero bueno, hizo el trabajo de diseño, ¿verdad? Cumplió con los criterios.
00:12:04Tiene la misma fuente, los mismos colores.
00:12:06Definitivamente se siente que viene de la misma familia de diseño. Así que para esta prueba,
00:12:11creo que otra gran victoria para esta habilidad, pulgar arriba. Sí.
00:12:14¿Tomó un poco más de tiempo? Seguro.
00:12:15Pero esencialmente estaba creando el sistema de diseño por su cuenta.
00:12:18No tenía uno precargado. ¿Es tan bueno como el diseño? Hmm. Quizás no,
00:12:22pero es bastante cercano e infinitamente más barato. Así que muy, muy,
00:12:27muy impresionado. Ahora para nuestra última prueba, veremos presentaciones de diapositivas.
00:12:29Ya hice que Claude design lo hiciera.
00:12:31Y estás viendo su primer intento ahora mismo.
00:12:33Está usando el mismo sistema de diseño y habla sobre nuestro producto SaaS falso.
00:12:37Así que, en términos de ser capaz de apegarse al diseño,
00:12:41obviamente hizo un trabajo bastante bueno y todo esto se ve bastante
00:12:46bien. La única queja, el pequeño icono de arriba está un poco estirado.
00:12:50Pero de nuevo, eso no es algo difícil de hacer.
00:12:52Realmente lo que me preocupa aquí es ¿se ve genial? Eso es un poco genial.
00:12:56No coincide con el sistema de diseño cuando se trata de Claude design. Sí,
00:13:00pudo hacer esto en solo un par de minutos, en términos de uso 6%.
00:13:04Ahora veamos cómo le va a Claude code usando la habilidad.
00:13:07Y esto es lo que obtuvimos. Así que, desde el principio, muy parecido al sitio web.
00:13:11Simplemente fue capaz de crear, consiguió el mismo icono
00:13:15yendo hacia arriba.
00:13:16Y tenemos nuestro pequeño logo de Claude code aquí a la derecha.
00:13:20Así que esa es la portada. Número dos,
00:13:23parece que algo del texto se está superponiendo aquí, pero no es un gran problema.
00:13:27La página tres se ve bien. Diapositiva cuatro. Esto está un poco cortado,
00:13:32pero eso podría ser totalmente una decisión de diseño.
00:13:34Tenemos algo de texto desplazándose, se ve bien. Y en la última diapositiva,
00:13:38tenemos un poco de superposición aquí de nuevo,
00:13:40pero estos son pequeños problemas que podríamos arreglar fácilmente con un solo mensaje.
00:13:44Así que en general, cuando comparamos estos dos diseños frente a lo que obtuvimos con la habilidad,
00:13:49muy similar de nuevo,
00:13:50son realmente tres cosas seguidas que hemos probado donde la habilidad es capaz de
00:13:54competir con lo que obtenemos en diseño.
00:13:56Y creo que esa es la gran conclusión de este video.
00:13:58Ahora tenemos una opción para obtener resultados de Claude design sin estar sujetos
00:14:03a estos límites de uso salvajes, lo cual es increíble para el usuario promedio.
00:14:07Ahora, en el vacío, ¿todavía creo que Claude design es mejor? Sí, por supuesto.
00:14:12La habilidad solo está imitando todo lo que hace Claude design.
00:14:15Y Claude design tiene la ventaja de ciertas cosas como dibujar, editar, comentar,
00:14:19poder conseguir que todos en un equipo usen esta cosa.
00:14:21Así que por la naturaleza de su interfaz gráfica,
00:14:24puede hacer cosas que la habilidad nunca podrá hacer. Pero para mucha gente,
00:14:29lo que acabas de ver aquí es más que suficiente. Y es un gran salto adelante desde,
00:14:34ya sabes, usar la habilidad de diseño de front-end, por ejemplo. Y recuerda,
00:14:37la habilidad puede hacer más que solo páginas web y presentaciones.
00:14:40Puede hacer cosas como diseño de movimiento, infografías, todo tipo de cosas.
00:14:43Así que definitivamente revisa esto. Realmente no tienes nada que perder.
00:14:46Así que ahí es donde los dejaré por hoy. Espero que con este video,
00:14:50pudiera agregar una herramienta más a su caja de herramientas en constante expansión. Como siempre,
00:14:54háganme saber qué pensaron.
00:14:55Asegúrense de revisar Chase AI Plus si quieren tener en sus manos la
00:14:58clase magistral de Claude y los veré por ahí.