Otro repositorio de código abierto acaba de clonar Claude Design
Una primera mirada estructurada a Open Design: instálalo, ejecuta una demo, recorre los sistemas de diseño y las plantillas integradas, y llega a un veredicto sincero sobre si vale tu tiempo. Basado en el recorrido práctico de Chase AI.
Esta guía es una primera mirada estructurada a Open Design: instálalo, ejecuta una demo rápida, recorre los sistemas de diseño y las plantillas integradas, y termina con una lectura honesta de dónde brilla y dónde todavía está en bruto. Sigue el camino que tomó Chase AI en su recorrido práctico, reescrito y actualizado a la versión actual para que puedas seguirlo paso a paso. Mira el video de arriba para ver la ejecución en vivo, o sigue leyendo para la versión escrita.
El espacio de trabajo de Open Design: un lienzo tranquilo y familiar con prototipos, presentaciones, imágenes y video, todo en un mismo lugar.
¿Qué es Open Design?
Open Design es una plataforma de diseño de código abierto y local-first que funciona sobre el agente de programación que ya usas. En lugar de atarte a un único proveedor de modelos, detecta las CLI que ya tienes en tu máquina —Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode y un par de docenas más— y deja que ese agente impulse la generación. Chase lo llama «trae tu propio agente», y ese es justo el punto: no pagas tarifas de API por separado encima de una suscripción que ya tienes, porque la generación corre a través de tu propia CLI.
Algunas cosas que lo hacen digno de echarle un vistazo:
- Código abierto, Apache-2.0: clónalo, alójalo tú mismo, lee cada línea.
- Funciona localmente: tus proyectos viven en carpetas de tu propia máquina, no en la nube de otra persona.
- Agente intercambiable: se admiten más de 21 agentes de programación; tú eliges qué CLI lleva el trabajo, o traes tu propia clave de API para otro harness.
- Más que prototipos: prototipos, presentaciones, maquetas de revista, generación de imágenes e incluso video, todo desde un mismo espacio de trabajo.
- Una amplia biblioteca de sistemas de diseño y skills integrada, para que no empieces desde un lienzo en blanco.
Si has usado Claude Design, la interfaz te resultará familiar de inmediato: Open Design mantiene la misma estética serena y luego añade capacidades adicionales (presentaciones, imagen y video) encima. El planteamiento honesto: es su propio espacio de trabajo abierto, local y agent-native, no solo un reskin de una herramienta cualquiera.
Antes de empezar
Tienes tres formas de instalar Open Design. Elige la que mejor te encaje:
| Vía | Mejor para | Requisitos |
|---|---|---|
| App de escritorio | La mayoría de la gente: cero configuración | Ninguno. Solo descarga y abre. |
| Ejecutar desde el código fuente | Desarrolladores que quieren leer o modificar el código | Node ~24, pnpm 10.33.x |
| Instalar en tu agente | Gente que vive en la terminal | Una CLI de agente de programación existente |
Chase muestra la vía de la terminal en su video, pero hoy la app de escritorio es la opción recomendada: sin Node, sin pnpm, sin clonar, y detecta tus agentes automáticamente por ti.
Paso 1: Instala Open Design
Opción A: App de escritorio (recomendada, cero configuración)
Ve a open-design.ai/download y consigue la compilación para tu sistema operativo. Tras instalarla, la app detecta automáticamente cada CLI de agente de programación que ya esté en tu PATH y carga por ti las skills y los sistemas de diseño integrados. Es la forma más rápida de llegar a un espacio de trabajo funcional.
Opción B: Ejecutar desde el código fuente
Si prefieres ejecutarlo desde el repositorio —como hace Chase en el video—, solo necesitas un puñado de comandos:
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run webLuego abre la URL local que imprime en tu terminal. Resuelve un puerto dinámico, así que no lo fijes a mano: solo haz clic en la dirección que muestre. Necesitas Node ~24 y pnpm 10.33.x; Corepack seleccionará por ti la versión fijada de pnpm. (Si no arranca un servidor de desarrollo, puedes decirle a tu agente «levanta el servidor de desarrollo de Open Design» y dejar que se encargue del comando.)
Opción C: Instalar en tu agente de programación
Para usar Open Design sin abrir nunca la GUI —invocándolo como una skill dentro de tu agente— ejecuta:
od mcp install <agent>
# od ships with Open Design; <agent> = claude | codex | cursor | copilot | gemini | opencode | …Después, dentro del agente, basta con pedir: Use open-design to generate a landing page with the Airbnb design system.
Paso 2: Primera ejecución: conecta tu agente de programación
La primera vez que abres Open Design, analiza tu máquina y te muestra cada CLI local que encontró. Un aviso te pregunta cómo quieres impulsar la IA. Este es el paso de «trae tu propio agente».
- Elige una CLI local. Apuntar Open Design a Claude Code, Codex u OpenCode significa que la generación se nutre de la suscripción que ya pagas, en lugar de cobrarte tarifas de API por separado. (También puedes conectar tu propia clave de API si prefieres otro harness.)
- Deja el modelo en el predeterminado a menos que tengas un motivo para no hacerlo: sigue la propia configuración de tu CLI.
- Añade proveedores de medios (opcional). ¿Quieres generar imágenes, video o audio? Añade tus propias claves de API para proveedores como OpenAI, MiniMax, ElevenLabs y más. Esto es lo que desbloquea el lado de imagen y video del espacio de trabajo, algo que un clon puro de Claude Design no te ofrece.
- Activa o desactiva skills y sistemas de diseño. Habilita solo las capacidades que necesitas para el trabajo que tienes delante.
Puedes cambiar cualquiera de estas opciones más tarde, así que mantenlo sencillo en la primera pasada.
Paso 3: Explora el espacio de trabajo
En la parte superior encontrarás Diseños, Ejemplos, Sistemas de diseño y las bibliotecas de plantillas de imagen y video. Los dos que más importan en una primera mirada son los sistemas de diseño y los ejemplos.
La biblioteca de sistemas de diseño: cada entrada descompone una marca real en paleta, tipografía, componentes y atmósfera visual que puedes reutilizar como punto de partida.
La biblioteca de sistemas de diseño es lo más destacado. Cada entrada toma una marca del mundo real —Airbnb, por ejemplo— y la descompone en paleta, tipografía, componentes y atmósfera visual general. Si quieres una página que se sienta como esa marca, encajas el sistema y la generación arranca desde esas reglas en vez de desde un lienzo en blanco.
Una nota sincera del recorrido de Chase: los ejemplos se producen con prompts de una sola línea, con el prompt exacto mostrado justo en la tarjeta. Lucen impresionantes, pero no hay ninguna fórmula secreta detrás: lo que ves es lo que escribiste. Tómalos como inspiración, no como una promesa de magia con un clic. Las galerías de plantillas de imagen y video son parecidas: útiles como referencia, pero con menos valor en el día a día que los flujos de prototipos y presentaciones. Centra tu atención en los entregables que de verdad vas a publicar.
La biblioteca de plantillas: puntos de partida de prototipos, presentaciones, imagen y video que puedes filtrar por tipo y bifurcar para empezar.
Puedes explorar toda la biblioteca de plugins en la web en open-design.ai/plugins antes de instalar nada.
Paso 4: Construye algo
El flujo de trabajo de verdad —y donde Open Design se gana su sueldo— es crear prototipos y presentaciones. Funciona prácticamente como esperarías:
- Nombra el proyecto y elige uno o más sistemas de diseño de la lista integrada.
- Elige la fidelidad: wireframe para esbozar la estructura rápido, o alta fidelidad para la versión completa con estilo.
- Opcionalmente, importa un ZIP de Claude Design. ¿Construiste tu propio sistema de diseño en Claude Design? Abre el proyecto allí, elige Share → Download project as .zip y luego sube ese ZIP a Open Design. Todos los archivos de diseño aparecen en el espacio de trabajo, listos para reutilizar. (Ahora mismo, esta importación de ZIP es la forma más limpia de traer tu propia marca: todavía no hay un botón de «crear un sistema de diseño desde cero».)
- Escribe el brief y pulsa crear. Open Design ejecuta el mismo tipo de preguntas y respuestas aclaratorias que verías en Claude Design —para quién es, cuántas diapositivas, qué fidelidad, qué tono visual— y luego arma una lista de tareas y la va resolviendo. En el video, Chase pide una landing page para un SaaS ficticio llamado Lighthouse con tres direcciones comparables (apilada clásica, editorial y llamativa), y luego genera una presentación brutalista y la exporta a PowerPoint.
El resultado es un artefacto real e interactivo construido a partir del sistema de diseño que elegiste. La lectura honesta de Chase: los resultados llegan a algo así como una «solución al 90 %»: una presentación acorde a la marca y utilizable, con unos cuantos ajustes de espaciado y formato que quedan para ti. Para algo que todavía es temprano, es un punto de partida sólido.
Consejos
- Usa una CLI local, no la API, para que la generación se nutra de una suscripción que ya tienes en lugar de facturarse por llamada.
- Parte de un sistema de diseño integrado para saltarte el lienzo en blanco; importa un ZIP de Claude Design cuando necesites tu propia marca.
- Añade solo las claves de medios que de verdad vayas a usar: no necesitas todos los proveedores para empezar.
- Espera un borrador al 90 % y luego púlelo. Exporta pronto (incluido a PowerPoint) para detectar las pequeñas desviaciones de formato antes de entregar.
- Apóyate primero en prototipos y presentaciones. Son las superficies más pulidas; las galerías de ejemplos y plantillas funcionan mejor como inspiración que como entregables terminados.
Preguntas frecuentes
¿Open Design es gratis? Sí: es de código abierto bajo la licencia Apache-2.0. Lo ejecutas localmente de forma gratuita; solo pagas por el uso de modelo y medios del agente y los proveedores de API que conectes. Apuntarlo a una CLI local significa que la generación se monta sobre la suscripción que ya tienes.
¿Qué agentes de programación admite? Más de 21 agentes, incluidos Claude Code, Codex, Cursor, Gemini, GitHub Copilot y OpenCode. Open Design detecta automáticamente las CLI ya instaladas en tu máquina, así que normalmente no tienes que configurar nada.
¿Puedo usar mi propio sistema de diseño? Sí. La vía más fluida hoy es construir el sistema en Claude Design, descargar el proyecto como un ZIP e importar ese ZIP en Open Design: tus tokens y componentes pasan directamente. Todavía no hay un botón dedicado de «crear un sistema de diseño» en la GUI, así que la importación de ZIP es la opción recomendada.
¿En qué se diferencia de Claude Design? La misma sensación familiar, pero de código abierto, local-first e intercambiable entre más de 21 CLI, además de capacidades adicionales como presentaciones, maquetas de revista, generación de imágenes y video que una herramienta de un solo proveedor no ofrece. Es una versión temprana, así que cuenta con algunas asperezas, pero los cimientos son sólidos.
Esta guía escrita se basa en el recorrido práctico de Chase AI. Mira el video completo arriba y suscríbete a Chase AI para más análisis prácticos de herramientas de IA.