Open Design en 20 minutos: instalación completa y demo
Una guía de iniciación completa: instala Open Design, conecta tu agente de programación, recorre el espacio de trabajo y crea tu primer prototipo de alta fidelidad. Basada en el vídeo de primeras impresiones de CodingMenace.
Esta guía te acompaña en tus primeros 20 minutos con Open Design, desde una instalación limpia hasta tu primer prototipo generado. Sigue el camino que tomó CodingMenace (Dennis) en su vídeo de primeras impresiones, reescrito y actualizado para coincidir con la versión actual, de modo que puedas seguirlo paso a paso. Mira el vídeo de arriba para ver el recorrido en directo, o sigue leyendo para la versión escrita.
Open Design se posiciona como la alternativa open source a Claude Design: orientada al escritorio, nativa de agentes y con licencia Apache-2.0.
¿Qué es Open Design?
Open Design es una plataforma de diseño open source y local-first, una alternativa nativa de agentes a Claude Design y Figma. En lugar de atarte a un único proveedor de modelos, funciona sobre el agente de programación que ya usas: Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode y una decena más. Es «trae tu propio agente», no solo trae tu propia clave.
Algunas cosas por las que merece la pena echarle un vistazo:
- Open source, Apache-2.0: clónalo, alójalo tú mismo, lee cada línea.
- Se ejecuta en local: tus proyectos viven en tus propias carpetas, en tu máquina, no en la nube de otra persona.
- Agentes intercambiables: se admiten más de 21 agentes de programación; tú eliges qué CLI impulsa la generación.
- Mucho más que prototipos: prototipos, artefactos en vivo, presentaciones, maquetas tipo revista, generación de imágenes e incluso vídeo, todo desde un mismo espacio de trabajo.
- Una amplia biblioteca de sistemas de diseño y skills integrados, para que no empieces desde un lienzo en blanco.
Si has usado Claude Design, su aspecto y comportamiento te resultarán familiares al instante: Open Design conserva deliberadamente la misma estética serena y luego añade capacidades por encima.
Antes de empezar
Tienes tres formas de instalar Open Design. Elige la que mejor te encaje:
| Vía | Ideal para | Requisitos |
|---|---|---|
| Aplicación de escritorio | La mayoría: cero configuración | Ninguno. Solo descárgala y ábrela. |
| Ejecutar desde el código fuente | Desarrolladores que quieren leer o modificar el código | Node ~24, pnpm 10.33.x |
| Instalar dentro de tu agente | Quienes viven en la terminal | Una CLI de agente de programación ya instalada |
El vídeo usa la vía de ejecutar desde el código fuente, pero hoy la aplicación de escritorio es la opción recomendada: no necesita Node, ni pnpm, ni clonar nada.
Paso 1: instala Open Design
Opción A: aplicación de escritorio (recomendada, cero configuración)
Ve a open-design.ai y haz clic en Download desktop. Hay compilaciones disponibles para macOS (Apple Silicon e Intel), Windows (x64) y Linux (AppImage). Tras instalarla, la app detecta automáticamente todas las CLI de agentes de programación que ya tienes en tu PATH y carga por ti las skills y los sistemas de diseño integrados.
Opción B: ejecutar desde el código fuente
Si prefieres ejecutarlo desde el repositorio —como hace Dennis en el vídeo—, solo necesitas tres 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. Necesitas Node ~24 y pnpm 10.33.x; Corepack seleccionará por ti la versión de pnpm fijada.
Opción C: instalar dentro de tu agente de programación
Para usar Open Design sin abrir nunca la interfaz gráfica —invocándolo como una skill o un servidor MCP dentro de tu agente—, ejecuta:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …Después, dentro del agente, simplemente pídele: Use open-design to generate a landing page with the Linear design system.
Paso 2: primer arranque, conecta tu agente de programación
La primera vez que abres Open Design, este escanea tu máquina y te muestra todas las CLI locales que encontró: Claude Code, OpenCode, Copilot CLI y otras. Este es el paso de «trae tu propio agente».
- Elige un agente y un modelo por defecto. Deja que la CLI instalada impulse la generación, o fuerza un modelo concreto (por ejemplo, Claude Opus) para este proyecto.
- Añade proveedores de medios (opcional). ¿Quieres generar imágenes, vídeo o audio? Añade tus propias claves de API para proveedores como OpenAI (gpt-image), MiniMax, ElevenLabs, fal, Suno y más. Aquí es donde entra el trae tu propia clave.
- Conecta servicios MCP (opcional). Integra conectores como Composio si quieres que el agente extraiga datos de otras fuentes.
- Activa o desactiva skills y sistemas de diseño. Habilita solo las capacidades que necesitas para el tipo de trabajo que vas a hacer: prototipos, presentaciones, apps móviles, notas de reunión, etc.
Puedes cambiar cualquiera de estas opciones más adelante, así que mantenlo sencillo en la primera pasada.
Paso 3: explora el espacio de trabajo
Open Design mantiene tu trabajo acotado por proyecto: cuando lo ejecutas sobre una carpeta, los diseños que creas viven dentro de ese directorio del proyecto. Cambia de carpeta y cambias de proyecto.
Dentro de un proyecto puedes crear prototipos, artefactos en vivo, presentaciones y animaciones. Para los prototipos eliges entre dos niveles de fidelidad:
- Wireframe: la estructura pura: cajas y formas para esbozar el layout rápidamente.
- Alta fidelidad: un prototipo completo y con estilo de la página que estás construyendo.
Una diferencia clave frente a Claude Design: no estás obligado a definir primero un sistema de diseño. Open Design viene con valores por defecto sensatos y una galería de puntos de partida, de modo que puedes empezar desde un sistema de diseño existente, o desde ninguno.
La biblioteca de sistemas de diseño: puntos de partida de marcas reales (Agentic, Airbnb, Airtable y más) que puedes encajar en cualquier proyecto.
El marketplace va mucho más allá de los sistemas de marca. La biblioteca de plantillas abarca prototipos, presentaciones y generación tanto de imagen como de vídeo: filtra por tipo y bifurca cualquiera como punto de partida.
Plantillas: puntos de partida de prototipo, presentación, imagen y vídeo: filtra por tipo y bifurca para empezar.
Puedes explorar la biblioteca completa de plugins en la web, en open-design.ai/plugins, antes de instalar nada.
Paso 4: crea tu primer prototipo
Ahora llega lo divertido. En el vídeo, Dennis importa un proyecto existente de Claude Design y le pide a Open Design que le construya una página nueva. Este es el mismo flujo:
- Crea un prototipo nuevo. Ponle un nombre (Dennis llama al suyo «Expensely») y elige Alta fidelidad.
- Importa tu sistema de diseño. Open Design puede importar un ZIP de Claude Design existente, así que tus tokens y componentes se trasladan. Los archivos de diseño importados aparecen en el espacio de trabajo junto a una vista previa en vivo.
- Escribe el encargo. Dennis le pide «create a new page projecting expenses for 12 months using the previous 3 months.» Obtienes el familiar layout dividido: la conversación a la izquierda, la vista previa y los archivos de diseño a la derecha.
- Responde las preguntas de aclaración. El agente plantea unas cuantas preguntas inteligentes de seguimiento —¿los mismos colores?, ¿qué fidelidad?, ¿una media simple de 3 meses?— y luego planifica una lista de tareas, lee el sistema de diseño y construye el artefacto (
projections-v2.html). - Itera sobre el diseño. ¿No te convence el primer intento? Pide una dirección distinta. Dennis solicita «a different look and feel», elige una dirección editorial y obtiene un nuevo
projections-v3: un diseño genuinamente diferente construido a partir de los mismos datos y el mismo sistema de diseño.
El resultado es un prototipo real e interactivo: navega por los gráficos y las páginas, y luego expórtalo o entrégalo, todo construido a partir del sistema de diseño que importaste.
Consejos para sacarle más partido
- Empieza con alta fidelidad cuando quieras ver el resultado real; usa wireframe para esbozar la estructura rápidamente.
- Tus diseños se quedan con la carpeta del proyecto: organiza tu trabajo ejecutando Open Design sobre el directorio adecuado.
- Trae tus propias claves de medios solo para los proveedores que realmente uses; no necesitas todos.
- No necesitas un sistema de diseño para empezar. Arranca desde uno integrado, importa un ZIP de Claude Design o deja que Open Design infiera los valores por defecto.
Preguntas frecuentes
¿Open Design es gratis?
Sí: es open source bajo la licencia Apache-2.0. Puedes ejecutarlo en local de forma gratuita; solo pagas por el uso de modelo/API del agente y los proveedores de medios que conectes.
¿Qué agentes de programación admite?
Más de 21 agentes, incluidos Claude Code, Codex, Cursor, Gemini, GitHub Copilot y OpenCode. Open Design detecta las CLI que ya tienes instaladas en tu máquina.
¿Tengo que crear un sistema de diseño antes de poder diseñar?
No. A diferencia de Claude Design, Open Design te da valores por defecto funcionales y una galería de puntos de partida. Puedes traer tu propio sistema de diseño cuando quieras uno.
¿En qué se diferencia de Claude Design?
La misma sensación familiar, pero open source, local-first y con agentes intercambiables, además de capacidades extra como presentaciones, maquetas tipo revista, generación de imágenes y vídeo.
Esta guía escrita está basada en el recorrido de primeras impresiones de CodingMenace. Mira el vídeo completo arriba y suscríbete a CodingMenace para más vídeos prácticos sobre herramientas de IA.