Open Design: Por qué 40k desarrolladores abandonaron Claude Design
BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술
Transcript
00:00:00Esto es OpenDesign, una alternativa de código abierto a Claude Design que te permite usar cualquier agente
00:00:05o modelo que ya tengas instalado para generar prototipos web completos, aplicaciones móviles e incluso presentaciones
00:00:11en HTML. Con 72 sistemas de diseño de nivel profesional integrados, cada proyecto se queda en tu máquina,
00:00:17así que nada se envía a la nube. Pero ya sabemos que Claude Opus 4.7 es realmente bueno en diseño
00:00:23front-end, así que no tiene sentido permitir que el usuario elija cualquier modelo que quiera, ya que la mayoría
00:00:27podrían ser muy malos diseñando. Suscríbete y averigüémoslo.
00:00:33Claude Design de Anthropic se lanzó a principios del mes pasado y fue un éxito instantáneo. Dio a la gente
00:00:38la capacidad de hacer diseños realmente atractivos usando un modelo impresionante, les dio una
00:00:43alternativa a Lovable v0 y herramientas similares. Pero es una herramienta propietaria solo en la nube, limitada a un
00:00:49solo modelo, y te costará 20 dólares al mes usarla, lo que básicamente significa que no es para todos.
00:00:54Así que, 11 días después, Tom y el equipo de Nexa lanzaron una alternativa de código abierto que fue muy popular.
00:01:00Me recuerda un poco a OpenCode que viene de Claude Code, y ahora OpenDesign viene de Claude
00:01:05Design. ¿Qué es lo próximo que va a hacer Anthropic a lo que alguien le pondrá “open” delante?
00:01:09Pero, ¿cómo puede esta herramienta de código abierto crear diseños tan buenos como los de Claude Design? Bueno,
00:01:14es porque dos cosas están trabajando juntas. Lo primero son los sistemas de diseño. OpenDesign contiene muchos
00:01:18de ellos con especificaciones completas de marca, tipografía, espaciado y tokens de color inspirados en marcas como Linear,
00:01:24Stripe y Spotify. Lo segundo son las habilidades. Muchas, muchas habilidades para cada tipo de salida. Así, una habilidad
00:01:30de panel de control sabe cómo organizar gráficos, y una habilidad de presentación sabe cómo estructurar diapositivas. Incluso hay una lista de verificación
00:01:35anti-IA integrada en cada mensaje, y antes de generar nada, te pregunta por tu audiencia,
00:01:41el tono y el contenido de la marca. Si has visto mi video sobre Impeccable, esto te resultará muy familiar,
00:01:45pero es diferente, y veremos las diferencias más adelante en el video. Pero por ahora,
00:01:49vamos a hacer una demostración sencilla. Para empezar, puedes descargar OpenDesign para macOS o
00:01:54Windows, clonar el repositorio e instalarlo usando Docker, o ejecutarlo desde la fuente, que es lo que he decidido
00:01:59hacer. Con el proyecto en marcha, puedo visitar este puerto en mi navegador, lo que me lleva a esta interfaz,
00:02:04que parece bastante abrumadora para alguien que no está acostumbrado a Claude Design, pero veámosla.
00:02:08Si hago clic aquí abajo, puedes ver que ha detectado los arneses de agentes que ya tengo instalados,
00:02:13así que Claude Code, Codex y OpenCode. Y si hago clic en Claude Code y me desplazo hacia abajo,
00:02:17podemos elegir el modelo. Por defecto, elegirá el que esté seleccionado en la CLI, pero puedo elegir
00:02:21uno aquí. También puedo hacer lo mismo con Codex, pero Codex me permite cambiar el esfuerzo de razonamiento,
00:02:26lo cual es un buen detalle. Pero voy a ir con OpenCode. Voy a bajar y cambiar el
00:02:31modelo a GLM 5.1. Ahora, aquí también podría elegir la memoria, es decir, las instrucciones que se añadirán
00:02:36a cada mensaje, los proveedores de medios, y por defecto, ha detectado mi clave de OpenAI, y va a usar
00:02:41GPT Image 2 para generar imágenes. Pero también podría conectar mi clave de API de ElevenLabs para hacer cosas como
00:02:46texto a voz o diferentes efectos de sonido para animaciones que pudieras tener en tu sitio web. Luego,
00:02:50aquí, puedo ver todas las habilidades disponibles. Puedo ver todos los sistemas de diseño,
00:02:54que repasaremos un poco más adelante. E incluso puedo elegir una mascota, que es algo que hace Codex.
00:02:58Básicamente, tenemos muchas opciones aquí, pero voy a cerrar esto y empezar a diseñar. Así que voy a
00:03:03darle un nombre a mi proyecto y luego elegir un sistema de diseño. Ahora, si no tienes idea de qué son estos
00:03:08sistemas de diseño, puedes hacer clic en la pestaña de sistemas de diseño para verlos todos, y hay muchos.
00:03:13Pero los revisé antes de grabar el video, y creo que me gusta el de Miro, que se ve
00:03:17así y da detalles de los tokens de diseño, así como información en el archivo MD de diseño.
00:03:22Ten en cuenta que estoy en la pestaña de prototipos, pero también hay artefactos en vivo para cosas que quieras actualizar
00:03:27según datos cambiantes, una presentación para generar diapositivas basadas en HTML, o para construir a partir de una plantilla.
00:03:33Así que podría hacer clic en la pestaña de plantillas aquí y elegir la que quiera. Ahora, nos quedaremos
00:03:38con el prototipo y haremos clic en crear. Desde aquí, nos llevan a otra página donde podemos darle
00:03:42un mensaje. Voy a probar algo un poco único aquí. Ahora mismo tengo mi aplicación
00:03:47de búsqueda de canales de YouTube en ejecución, y quería crear una versión mucho más atractiva. Así que lo que voy
00:03:52a hacer es darle esta URL y ver si GLM es capaz de buscar a través de las pestañas y las
00:03:57entradas y usar eso para su diseño. Así que aquí le he dado un mensaje para que me haga un sitio web
00:04:02sencillo y bien diseñado para un producto que pueda usar para buscar canales de YouTube. También le he dado el enlace
00:04:07del sitio web para que lo visite usando un navegador agente o la herramienta que considere adecuada. Y de esa forma puede
00:04:12ver las entradas y navegar por todas las páginas. Veamos qué hace. Ahora me ha hecho algunas
00:04:15preguntas sobre el tono visual, el contexto de la marca y algunas otras cosas, que voy a responder.
00:04:20Y luego continuaremos con el proceso de diseño y, mira esto. Fue capaz de ejecutar un comando curl
00:04:24para abrir el sitio usando Chrome. Y ahora está usando el navegador agente para conectarse al sitio. No
00:04:29abrí nada de esto ni fui a la URL, y está recorriendo el sitio en el navegador. Podemos ver algunos
00:04:34comandos más del navegador agente para entender cómo funciona. Ok, en este punto, todavía sigue.
00:04:38Aún no ha terminado. Todavía tiene algunas cosas que hacer, pero me gusta la dirección hacia la que van
00:04:43las cosas. Me gusta la página de búsqueda que ha hecho con los filtros avanzados aquí abajo, y puedo alternar
00:04:48entre títulos de video y nombre de canal para la búsqueda. Tenemos los resultados de la búsqueda, que parecen
00:04:52muy impresionantes y está usando datos del sitio web real. No estoy seguro de lo que hizo,
00:04:57si los rastreó y los guardó en algún lugar, pero estos son datos reales aparte de las miniaturas faltantes. También
00:05:01tenemos la página de favoritos. Así que si marco a una persona aquí, aquí es a donde irán y podré generar
00:05:06un correo electrónico para contactarlos o eliminarlos. Y también hay una página oculta aquí. Por ejemplo,
00:05:11si presionara X, entonces una persona terminaría en esta página. Y parece que después de unos 20 minutos. Sí.
00:05:17GLM 5.1 no es el modelo más rápido. Todo ha terminado. Y aquí está lo que me ha dicho.
00:05:23Me ha dado los cinco archivos que hizo. Y creo que exportó todo a una ubicación
00:05:28temporal. Así que lo que puedo hacer ahora es darle otro mensaje. Si quisiera añadir un modo oscuro,
00:05:33podría hacerlo, pero también podría hacer clic en “finalizar paquete de diseño”, que sintetizará
00:05:37todo en un único archivo MD de diseño. Entonces la transcripción, el sistema de diseño y cualquier artefacto
00:05:42que se haya generado, básicamente estas cinco páginas. También puedo hacer clic en “compartir” para exportar en diferentes formatos.
00:05:48E incluso puedo exportar un HTML independiente y dárselo a Claude Code para implementarlo en mi proyecto actual
00:05:53e incluso desplegarlo en Vercel o Cloudflare Pages, lo cual es un muy buen detalle.
00:05:57Eso es una visión general rápida de OpenDesign. ¿Vale la pena usarlo? Bueno, si ya tienes un agente
00:06:02de codificación instalado y pagas por una suscripción a Anthropic, entonces es obvio
00:06:07probarlo. La combinación de sistemas de diseño y habilidades significa que realmente puede producir algo
00:06:12bastante decente independientemente del arnés o modelo. ¿Pero cómo se compara con algo como Impeccable?
00:06:16Bueno, personalmente, prefiero la forma en que Impeccable hace su planificación. Te pregunta todo de antemano
00:06:22y diseña diferentes maquetas usando un modelo de imagen, que puedes elegir e iterar a partir de ahí.
00:06:27Así que básicamente puedes no tener idea de cómo quieres que se vea el diseño al principio,
00:06:32pero terminar con algo bastante decente. Mientras que con OpenDesign, tienes que
00:06:37saber un poco sobre diseño antes de empezar. Es decir, te pregunta qué sistema de diseño quieres antes
00:06:42de empezar y sé que el modelo puede generar uno, pero el hecho de que te pregunte significa que está orientado
00:06:48a alguien que sabe un poco más sobre diseño. Pero tengo que admitir que OpenDesign tiene una gran interfaz,
00:06:53dándote la opción de ver vistas adaptables, exportar a donde quieras, añadir habilidades, herramientas MCP,
00:06:58e incluso mascotas, lo cual es agradable para alguien que está acostumbrado a usar la interfaz de Codex o la aplicación de escritorio de Claude.
00:07:04E hizo un gran trabajo diseñando una aplicación usando GLM 5.1, que no es el mejor modelo de diseño
00:07:10que existe. Así que si quisiera diseñar algo relativamente rápido y tuviera una idea
00:07:15de la dirección que quería tomar, definitivamente probaría OpenDesign. Pero si no
00:07:19te importa gastar un poco de dinero, Claude Design es bastante bueno. Es decir,
00:07:22mira lo que fue capaz de hacer con el mismo mensaje exacto.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video