OTRO repositorio de código abierto acaba de clonar el diseño de Claude
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Señor, un segundo clon de Claude Design acaba de llegar a GitHub. Así es, tenemos otro clon
00:00:06de Claude Design, excepto que esta vez viene con una interfaz gráfica real. A principios de esta semana
00:00:13publiqué un video sobre Huwashu Design, que fue el primer clon de Claude Design en el mercado.
00:00:20Hizo un gran trabajo; lo mostramos compitiendo directamente con el formato estándar de Claude Design,
00:00:24pero sin tener problemas de uso. Sin embargo, uno de los problemas de Huwashu Design era
00:00:30que solo funcionaba en la terminal; no tenía una interfaz gráfica como la que ven aquí
00:00:36con esta nueva herramienta de diseño abierta que prácticamente imita a Claude Design. Miren estas
00:00:43dos herramientas: aquí tenemos Open Design, de la que vamos a hablar hoy,
00:00:48y aquí tenemos Claude Design. Son extremadamente similares. Lo genial de Open Design
00:00:54es que está construido sobre Huwashu Design, y como vieron en el último video, Huwashu Design es
00:00:59realmente bueno. Obtuvimos contenido y diseños front-end geniales de ese repo, y ahora
00:01:06estamos tomando eso y poniéndole una capa gráfica agradable para que sea mucho más fácil de
00:01:11interactuar para la mayoría de los usuarios, dándonos mucho de ese pulido que vimos originalmente en
00:01:16Claude Design. Mejor aún, Open Design es algo que podemos usar con cualquier herramienta de código;
00:01:22no tiene por qué ser solo Claude Code. Podemos usar Gemini, podemos usar CodeX y, de nuevo, sin los
00:01:28problemas de uso que vemos en el propio Claude Design. Hoy vamos a probar Open Design;
00:01:34les mostraré cómo funciona, cómo instalarlo y qué debería importarles de aquí,
00:01:39porque creo que hay un poco de relleno, y haremos comparaciones entre este y Claude
00:01:43Design. Alerta de spoiler: es bastante bueno. Creo que es sólido y me emociona que empiecen a
00:01:49surgir estos derivados de Claude Design, porque me encanta la herramienta, pero el límite de
00:01:53uso es horrible. Cuanto más salgan este tipo de herramientas, más rápido creo que Anthropic
00:02:00se pondrá las pilas para arreglar este desastre. Open Design es la alternativa de código abierto a
00:02:05Claude Design. Podemos conectarlo a Claude Code o CodeX, o simplemente traer nuestra propia clave API
00:02:12si queremos usar otro entorno. Detectará automáticamente qué agentes de programación
00:02:16tienes en tu computadora y ya tiene integradas 31 habilidades y 72 sistemas de diseño de alto nivel.
00:02:24Cuando dije que estaba construido sobre Huwashu Design no bromeaba; ellos mismos lo mencionan.
00:02:28Es una mezcla de Huwashu Design, la habilidad de PowerPoint de Guzheng, Open Code Design y
00:02:34Multica. Si juntas todo eso, diría que esto es Huwashu Design con una capa bonita encima.
00:02:40El resto del repositorio explica a fondo qué sucede bajo el capó, con ejemplos y demos.
00:02:45Solo deben saber esto: es Claude Design de código abierto, o lo más cerca que podrán estar.
00:02:49Antes de pasar a la instalación, unas palabras del patrocinador de hoy:
00:02:53yo mismo. Acabo de lanzar mi Masterclass de Claude Code, y es la mejor forma de pasar de cero a
00:02:58desarrollador de IA, especialmente si no tienes formación técnica. La actualizo cada semana
00:03:04y nos enfocamos en casos de uso del mundo real y en cómo usar esta herramienta para marcar la diferencia
00:03:09en tu negocio o proyecto. Puedes encontrarla en Chase AI Plus; hay un enlace en el comentario fijado
00:03:14y espero verte allí. Hay dos formas de instalar esto: puedes ir al repositorio,
00:03:18abrir la terminal y pegar todo esto allí. La segunda opción es ir a este enlace,
00:03:23copiarlo (dejaré el link en la descripción), pegarlo en Claude Code o CodeX y decir:
00:03:28"Oye, instala esto por mí en un directorio nuevo", y lo pondrá en marcha. Una vez instalado
00:03:32y ejecutándose, debería darte un enlace al servidor de desarrollo local. Si no lo hace,
00:03:36dile a Claude Code: "Oye, inicia un servidor de desarrollo para Open Design"
00:03:42y deberías ver una página como esta. Probablemente aparecerá un aviso preguntando si
00:03:46quieres usar el CLI local, la API de Anthropic o qué quieres hacer con el sistema de IA.
00:03:51Vas a querer usar el CLI local; eso significa que usa Claude Code, CodeX u Open
00:03:56Code, específicamente Claude Code y CodeX. Así no pagas tarifas de API; todo se
00:04:01descuenta de tu cuenta de Anthropic. En modelo, puedes dejar el predeterminado (configuración CLI) y
00:04:06luego tenemos la opción de añadir proveedores de medios porque, como verán aquí, no solo puedo hacer
00:04:13prototipos, presentaciones y plantillas; también puedo generar imágenes y videos. Puedo hacerlo
00:04:18desde esta interfaz, pero para generar video e imágenes necesito añadir una clave API a un modelo
00:04:24que lo haga. Puedo añadir Minimax, OpenAI, ElevenLabs y más. Eso es útil y es algo
00:04:30que no encontrarás en Claude Design. Arriba tenemos diseños, ejemplos, sistemas de diseño y plantillas
00:04:36de imagen y video. ¿Qué son estas plantillas en los sistemas de diseño? Bueno,
00:04:40es similar a awesomedesigns.md, si lo han visto antes. Básicamente, han tomado un sitio web
00:04:46como Airbnb, por ejemplo, y han desglosado lo que sucede en ese sitio en términos de
00:04:52paleta, tipografía, componentes, tema visual y atmósfera. La idea es que si quisiera crear
00:04:58un sitio web con un estilo similar al de Airbnb, puedo usar este prompt e incluirlo para
00:05:06obtener algo parecido. Creo que los resultados variarán; la sección de sistemas de diseño
00:05:13se ve bien, pero no sé qué tan efectiva sea en la realidad. Lo de las plantillas de imagen es
00:05:18similar; solo nos muestra imágenes de ejemplo y prompts JSON que podrías usar para obtener algo similar.
00:05:23Creo que esto es relleno, igual que las plantillas de video. Se ve bien, pero no le
00:05:29sacarás mucho provecho. Tenemos ejemplos aquí que también son interesantes, pero entiendan
00:05:35que esto es solo lo que obtuvieron al usar un prompt de una sola línea, ¿vale? No es que
00:05:42haya un prompt muy sofisticado detrás de esto; el prompt está literalmente aquí mismo.
00:05:47Si pulso "usar este prompt", lo incluirá, y es una línea: "diseñar Mutuals, un sitio de citas
00:05:53para usuarios de X, panel de resumen diario con estadísticas, coincidencias y un ticker comunitario".
00:06:00Así que, bueno, no se dejen impresionar demasiado por algunos de los ejemplos que hay aquí.
00:06:07Es un prompt de una sola línea; no está ocurriendo nada del otro mundo. Centrémonos
00:06:12en lo que realmente importa: crear los prototipos, las presentaciones y el tipo de entregables
00:06:16estándar que verías en el propio Claude Design. Funciona prácticamente igual:
00:06:22solo nombras la demo, eliges un sistema de diseño (puedes elegir uno o varios) y,
00:06:28de nuevo, tenemos la lista de todos los que ya están integrados. Decidimos si queremos
00:06:32un wireframe o alta fidelidad. También podemos importar un archivo ZIP de Claude
00:06:37Design. Digamos que creaste un sistema de diseño en Claude Design: puedo convertirlo en un
00:06:44archivo ZIP e incluirlo aquí, y luego simplemente pulsamos crear. Quiero mostrar este ejemplo
00:06:51primero: le pedí a Open Design que creara lo mismo que mostramos en el video de Huwashu Design,
00:06:57que era una página de aterrizaje para un producto SaaS ficticio llamado Lighthouse, pensado para
00:07:03equipos pequeños y fundadores solitarios. Quería tres ejemplos para comparar, y aquí tengo
00:07:11el clásico apilado, algo más editorial y luego algo un poco más llamativo e impactante.
00:07:17Al compararlo directamente con lo que obtuvimos en Claude Design, se ven muchas
00:07:21similitudes: tipos de letra parecidos, colores similares, especialmente en el fondo, sobre todo
00:07:26porque elegimos una inclinación editorial. También verán aquí a la izquierda,
00:07:32en Open Design, que pasó por el mismo tipo de cuestionario inicial que esperarías en el propio
00:07:37Claude Design: me hace preguntas, me da botones para seleccionar, etc. Es prácticamente
00:07:43el mismo producto exacto. Cabe destacar una de las diferencias que noté en Open Design
00:07:49frente a Claude Design: Open Design fue un poco más lento. Esto tardó unos 10 minutos,
00:07:56mientras que Claude Design tardó la mitad. Otro detalle: aunque vemos opciones como editar y dibujar,
00:08:01en realidad aún no están disponibles en Open Design, aunque están en el mapa de desarrollo.
00:08:06Si quieres que aparezcan los ajustes, tendrás que pedírselo directamente a Open Design:
00:08:13"Oye, ¿puedes crear un panel de ajustes donde pueda modificar cosas por mi cuenta
00:08:18rápidamente simplemente activándolas y desactivándolas?" Es muy similar a lo que hacemos con Huwashu.
00:08:24Open Design es un poco más lento y le faltan algunas de estas comodidades, pero por lo demás,
00:08:30es muy cercano a Claude Design. Ahora hablemos de si quieres usar tu propio sistema de diseño,
00:08:35porque es una de esas cosas con las que tenemos que lidiar. Si quisiera crear una presentación usando
00:08:40mi sistema de diseño "Agentic Dashboard OS" (y como referencia, esto es de lo que hablo,
00:08:46este es el estilo visual que busco), en el propio Claude Design ya tengo un sistema de diseño.
00:08:51Si quiero recrear eso mismo en Open Design, ¿cómo lo hago? De nuevo, no tiene por qué ser
00:08:56mi panel; supongamos que tienes un sitio web, tus propios activos, tipografía o lo que sea que
00:09:01quieras recrear aquí. Bueno, no hay nada directo; no puedo ir a sistemas de diseño
00:09:08y crearlo allí, no hay ningún botón para eso. En su lugar, lo que vas a querer hacer es
00:09:14importar un archivo ZIP de Claude Design. Si ya creaste ese sistema de diseño en Claude
00:09:20Design, lo que puedes hacer es ir a ese sistema de diseño (donde estoy ahora mismo),
00:09:25ir a "compartir" y luego a "descargar proyecto como .zip". Después, puedo ir a
00:09:32Open Design, seleccionar ese ZIP del sistema de diseño y subirlo. Pueden ver aquí
00:09:39todos los archivos de diseño que acaban de ser cargados. Si estás intentando hacer algo
00:09:45similar a esto y no lo has convertido en un sistema de diseño en Claude Design, te sugiero
00:09:51que lo hagas; será la forma más sencilla. O puedes intentar recrear la configuración del sistema
00:09:55tú mismo en CodeX o Claude Code. Es un poco engorroso, una de las desventajas de Open
00:10:00Design, y aquí es donde creo que Huwashu Design lo hace un poco más fácil. Cuando estamos
00:10:04en la terminal haciendo esto, en lugar de en una interfaz gráfica, simplemente puedo decir en la
00:10:08terminal de Claude Code: "Oye, echa un vistazo a ese directorio, mira todo lo que hay allí.
00:10:14Vale, ahora recrea esta presentación con ese estilo". Es una de las desventajas de verse obligado
00:10:20a usar una interfaz. En el prompt puse: "Crea una presentación hablando sobre mi
00:10:25producto SaaS ficticio Lighthouse, es de analíticas para equipos pequeños, hazme las preguntas necesarias".
00:10:29Haremos un poco de zoom para que se vea mejor, pero aquí están las preguntas que me hace:
00:10:34¿Para quién es la presentación? Digamos que para un lanzamiento de producto. ¿Quién asistirá?
00:10:44Gente de producto. ¿Cuántas diapositivas? Pocas. Fidelidad: alta. ¿Notas del orador? No.
00:10:51Tonos visuales: brutalista. Usa el sistema de diseño Agentic OS. Luego dejaremos que decida los
00:11:00puntos de la historia y enviaremos la respuesta. Al igual que en Claude Code, te dará
00:11:04una lista de tareas y empezará a trabajar en ellas poco a poco. Esto es lo que terminó
00:11:08dándonos para la primera diapositiva, que se ve bastante bien. Creo que encaja perfectamente
00:11:13con el sistema de diseño que le dimos. Sin embargo, como notarán, no puedo cambiar
00:11:20entre ellas, o bien hizo todas iguales. Le dije a Open Design que solo puedo ver la primera
00:11:25diapositiva y que no cambia entre ellas, así que veremos si puede arreglarlo. Aquí está lo que
00:11:29Open Design nos entregó finalmente para la presentación. También la exporté a PowerPoint para
00:11:34que vean cómo es el proceso de exportación, porque a menudo las cosas se ven bien en Claude Design y
00:11:39Open Design, pero al pasarlas a PowerPoint puede haber detalles descuadrados. La primera
00:11:43diapositiva se ve bien, la segunda está bien... aquí vemos que esto se podría arreglar un poco
00:11:52con los números. En la diapositiva tres, esto está un poco mal: tenemos que cambiar cómo está
00:11:58separado esto y el espaciado. La diapositiva cuatro se ve bien, la cinco también.
00:12:04La seis se ve bien, aunque probablemente deberíamos subir esto un poco. En la siete hay
00:12:13algunos problemas de formato de nuevo para mantener el texto dentro de los cuadros. Pero considero
00:12:18que es una solución al 90%. Te tomaría cinco minutos arreglar eso y coincide con el sistema
00:12:24de diseño que buscábamos. Pero creo que pueden ver que, al crear esta presentación, está un poco
00:12:29descuidada en comparación con un proyecto más pulido como Claude Design, y es algo
00:12:33esperable. Open Design salió literalmente esta semana, así que espero que sigan iterando y
00:12:37puliéndolo. Pero en general, para ser algo que acaba de salir y ser prácticamente la
00:12:42primera versión, creo que Open Design es una herramienta muy sólida. Si eres alguien que quiere
00:12:48usar Claude Design y busca una interfaz gráfica para hacerlo todo porque el límite de uso
00:12:54te está matando, es ideal. Si no necesitas una interfaz, pero te gusta la estructura de Claude
00:13:00Design y cómo funciona, creo que Huwashu Design sigue siendo probablemente un poco mejor: es más rápido
00:13:05y, al estar en la terminal, creo que es un poco más flexible. Pero si eres de los que dicen:
00:13:10"Necesito esta interfaz", creo que es una alternativa sólida a Claude Design. Me encanta
00:13:15Claude Design, no me malentiendan, es solo que su límite de uso es absurdo. Pero como dije antes,
00:13:21espero que mañana salgan 10 millones de estas herramientas y que eso le meta presión
00:13:26a Anthropic para que arregle el problema del uso, porque es ridículo. Aquí los dejo.
00:13:31Es una herramienta genial, compruébenlo ustedes mismos. Es fácil de configurar
00:13:34y muy flexible respecto a con qué agentes de programación funciona. Cuéntenme qué
00:13:40les pareció en los comentarios, no olviden echar un vistazo a Chase AI Plus si quieren
00:13:43acceder a la Masterclass. Nos vemos pronto.