¡ADIÓS, Claude Design! Este es el MEJOR generador de UI con IA de código abierto

Esta guía es para usuarios de Windows que quieren ejecutar Open Design en su propia máquina, sin cuenta en la nube ni créditos mensuales que gastar. Sigue el camino que toma AI Automation en su tutorial de instalación en Windows, reescrito y actualizado a la versión actual para que puedas seguirlo comando a comando. Mira el vídeo de arriba para ver la ejecución en directo, o continúa leyendo para la versión escrita.

Open Design ejecutándose en local en Windows: un espacio de trabajo de diseño de código abierto y nativo de agentes que controlas por completo.

¿Qué es Open Design?

Open Design es una plataforma de diseño de código abierto y local-first: una alternativa nativa de agentes a Claude Design y Figma. En lugar de atarte a un único proveedor de modelos, se ejecuta sobre el agente de programación que ya usas: Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode y una docena más. Es «trae tu propio agente» en lugar de solo traer tu propia clave.

Algunas cosas que hacen que merezca la pena echarle un vistazo:

• Código abierto, Apache-2.0: clónalo, autoalójalo, 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.
• Conectable a agentes: admite más de 21 agentes de programación; tú eliges qué CLI impulsa la generación, y la calidad del resultado depende del modelo que elijas.
• Más que prototipos: prototipos, artefactos en vivo, presentaciones, maquetaciones tipo revista, generación de imágenes e incluso vídeo, todo desde un mismo espacio de trabajo.
• Una biblioteca integrada de sistemas de diseño y plantillas, para que no empieces desde un lienzo en blanco.

Si has usado Claude Design, la sensación te resultará familiar al instante: Open Design conserva la misma estética serena y, encima, añade capacidades (y la elección de tu modelo).

Antes de empezar

Tienes tres formas de instalar Open Design en Windows. Elige la que mejor te encaje:

Ruta	Ideal para	Requisitos
App de escritorio (Windows x64)	La mayoría de usuarios de Windows: cero configuración	Ninguno. Descarga y abre.
Ejecutar desde el código fuente (WSL)	Desarrolladores que quieren leer o modificar el código	WSL2 + Ubuntu, Node ~24, pnpm 10.33.x
Instalar en tu agente	Personas que viven en la terminal	Una CLI de agente de programación existente

El vídeo usa la ruta desde el código fuente con WSL, que es ideal si quieres vivir dentro del repositorio. Pero para la mayoría de la gente la versión de escritorio nativa de Windows es la ruta recomendada: hay un instalador de Windows (x64) que no necesita WSL, ni Node, ni clonar nada. Esta guía cubre ambas; el tutorial de WSL de más abajo es para cuando quieras específicamente la ruta desde el código fuente.

Paso 1: configurar WSL

Si solo quieres la app de escritorio, salta al Paso 2, Opción A. Si quieres la ruta desde el código fuente, primero necesitas un entorno Linux dentro de Windows. Eso es exactamente lo que ofrece WSL (Subsistema de Windows para Linux): una shell de Ubuntu real ejecutándose junto a Windows, sin arranque dual ni una máquina virtual de la que estar pendiente.

1. Instala WSL y Ubuntu. Abre PowerShell y ejecuta wsl --install: esto activa WSL2 e instala Ubuntu de forma predeterminada. Reinicia si Windows lo pide, luego abre Ubuntu desde el menú de Inicio y define tu nombre de usuario y contraseña de Linux la primera vez que se abra. (¿Ya tienes Ubuntu de otra herramienta? Reutilízalo, no hace falta repetir esto.)

2. Actualiza los paquetes base. Dentro de la shell de Ubuntu, refresca el índice de paquetes e instala lo esencial:

sudo apt update && sudo apt install -y curl git

Consejo de resolución de problemas del vídeo: si un paso posterior lanza un error extraño, reinicia tu instancia de Linux de forma limpia: desde PowerShell ejecuta wsl --shutdown y luego vuelve a abrir Ubuntu. Empezar de cero resuelve la mayoría de los tropiezos de la primera ejecución.

3. Instala Node 24. La versión desde el código fuente apunta a Node ~24. Una instalación limpia de Ubuntu aún no tiene nvm, así que instálalo primero y luego úsalo para obtener Node 24:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc            # carga nvm en la shell actual
nvm install 24
nvm use 24
node --version              # debería imprimir v24.x

Con Ubuntu configurado y Node 24 activo, ya estás listo para instalar Open Design.

Paso 2: instalar Open Design

Opción A: app de escritorio de Windows (recomendada, cero configuración)

Ve a open-design.ai y haz clic en Download desktop. Hay una versión nativa para Windows (x64) (junto con las de macOS y Linux). Ejecuta el instalador, abre la app y detectará automáticamente todas las CLI de agentes de programación que ya estén en tu PATH, luego cargará por ti las skills y los sistemas de diseño integrados. Sin WSL, sin terminal: esta es la ruta más sencilla en Windows.

Opción B: ejecutar desde el código fuente (dentro de WSL)

Esta es la ruta que demuestra AI Automation. Trabajando dentro de tu shell de Ubuntu con Node 24 activo, clona el repositorio e inicia el runtime web:

git clone https://github.com/nexu-io/open-design.git ~/open-design
cd ~/open-design
corepack enable && pnpm install
pnpm tools-dev run web

corepack enable permite que Corepack seleccione la versión de pnpm fijada en el repositorio (10.33.x), por lo que no instalas pnpm tú mismo. pnpm install descarga las dependencias y compila las piezas nativas; esto puede tardar un par de minutos en la primera ejecución, lo cual es esperable, no un fallo. pnpm tools-dev run web arranca después el daemon local y el servidor web.

Cuando termina, el comando imprime una URL local: cópiala y pégala en tu navegador de Windows. WSL reenvía el puerto a Windows automáticamente, así que la app simplemente se abre.

Importante: el puerto se asigna de forma dinámica al arrancar: lee la dirección real que imprime el comando. No des por hecho un puerto fijo; la dirección puede variar en tu máquina y entre ejecuciones.

Opción C: instalar en tu agente de programación (WSL)

¿Prefieres saltarte la interfaz gráfica y llamar a Open Design como servidor MCP dentro de tu agente? En WSL hay un paso extra primero. Linux ya incluye /usr/bin/od (la herramienta de volcado octal), que tapa el propio od de Open Design, así que od mcp install … fallaría de otro modo con «file not found» para mcp/install. Añade un pequeño wrapper que apunte od a tu clon y colócalo primero en el PATH:

mkdir -p ~/.local/bin
cat > ~/.local/bin/od <<'EOF'
#!/usr/bin/env bash
repo="$HOME/open-design"     # el clon ~/open-design de la Opción B
cd "$repo" || exit 127
exec corepack pnpm exec od "$@"
EOF
chmod +x ~/.local/bin/od
export PATH="$HOME/.local/bin:$PATH"
hash -r
type -a od                   # ahora debería ganar el od de Open Design

Luego conéctalo a tu agente:

od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Luego, dentro del agente, simplemente pide: Use open-design to generate a landing page with the Airbnb design system.

Primera ejecución: conecta tu agente de programación

La primera vez que se carga el espacio de trabajo, Open Design escanea tu entorno y muestra todas las CLI que encontró. Como WSL es una máquina Linux real, detecta los agentes instalados dentro de Ubuntu, de modo que una CLI de Gemini u otro agente que viva en WSL se detecta allí. Haz clic en rescan si algo aún no aparece.

• Elige un agente y un modelo por defecto. Deja que la CLI instalada impulse la generación, o apúntala a un proveedor y modelo concretos. Como recalca el vídeo, un modelo más potente significa resultados notablemente mejores, así que recurre a uno capaz cuando el resultado importe.
• Añade proveedores multimedia (opcional). Para generar imágenes, vídeo o audio, pega tus propias claves de API: trae tu propia clave, solo para los proveedores que realmente uses.
• Conecta servicios MCP (opcional). Conecta conectores si quieres que el agente extraiga datos de otras fuentes.
• Configura tus preferencias. Idioma, apariencia, notificaciones, incluso una mascota de escritorio. Puedes cambiar todo esto más adelante, así que mantén la primera pasada simple.

Explora el espacio de trabajo

Open Design mantiene tu trabajo delimitado por proyecto: cuando lo ejecutas sobre una carpeta, los diseños que creas viven dentro del directorio de ese proyecto. Tu primera lista de proyectos estará vacía: eso es normal.

Dentro de un proyecto puedes crear prototipos, presentaciones, imágenes, vídeos y más. Dos puntos de partida hacen desaparecer el lienzo en blanco:

La biblioteca de sistemas de diseño: elige el aspecto de una marca real (Airbnb, Airtable y muchas más) y Open Design lleva sus tokens, colores y tipografía a tu diseño.

• Los sistemas de diseño capturan el aspecto de una marca como un DESIGN.md de tokens: colores primarios y secundarios, tipografía, espaciado. Previsualiza uno y podrás construir directamente sobre él en lugar de definir una paleta desde cero.
• Las plantillas cubren prototipos, presentaciones y generación tanto de imagen como de vídeo. Filtra por tipo y bifurca cualquiera para arrancar con ventaja.

Plantillas: puntos de partida para prototipo, presentación, imagen y vídeo; filtra por tipo y bifurca para empezar.

Puedes explorar la biblioteca completa en la web en open-design.ai/plugins antes de instalar nada.

Crea algo

Este es el flujo que ejecuta AI Automation, reescrito para la versión actual:

1. Elige un sistema de diseño. Escoge uno que te guste —digamos Airbnb— y ábrelo para inspeccionar su DESIGN.md y sus tokens.
2. Impórtalo como punto de partida. Usa Share → Download as ZIP y luego, en tu proyecto, elige Import flat design ZIP. El diseño aparece en el espacio de trabajo, listo para construir sobre él.
3. Indica el cambio que quieres. Escribe un encargo en lenguaje natural —«¿Puedes poner el fondo oscuro?»— y envíalo. El agente lee el sistema de diseño, planifica su trabajo y produce una nueva versión del artefacto.
4. Itera con libertad. Cambia tipografías, añade o quita un logotipo, sube tus propios recursos y haz que se coloquen en los lugares adecuados. Cada prompt produce una propuesta nueva para conservar o descartar.
5. Exporta cuando estés satisfecho. Pulsa Share y descarga el resultado como un ZIP.

El resultado es un diseño real y editable impulsado por el modelo que conectaste, así que un agente capaz se traduce directamente en lo que recibes.

Consejos para sacarle más partido

• Elige un modelo potente. La calidad del resultado depende del agente que conectes: un modelo gratuito sirve para aprender el flujo, pero uno capaz merece la pena para el trabajo real.
• Lee la URL impresa cada vez. La dirección local es dinámica; copia lo que imprime tools-dev en lugar de reutilizar un enlace antiguo.
• Instala tus agentes donde Open Design vaya a buscarlos. ¿Ejecutas desde el código fuente en WSL? Instala tus CLI dentro de Ubuntu para que el espacio de trabajo las detecte; la app de escritorio lee tu PATH de Windows.
• No necesitas un sistema de diseño para empezar. Arranca desde uno integrado, importa un ZIP o deja que Open Design infiera valores por defecto. Tus diseños se quedan con la carpeta del proyecto, así que organiza el trabajo ejecutándolo sobre el directorio adecuado.

Preguntas frecuentes

¿Open Design es gratis? Sí: es de código abierto bajo la licencia Apache-2.0. Puedes ejecutarlo en local de forma gratuita; solo pagas por el uso del modelo/API de los agentes y proveedores multimedia que conectes.

¿Debería usar WSL o la app de escritorio de Windows? Para la mayoría de la gente, la versión de escritorio nativa de Windows (x64) es más simple: sin WSL, sin Node, sin clonar nada. Usa la ruta desde el código fuente con WSL cuando quieras específicamente leer o modificar el código. Ten en cuenta que WSL2 es una ruta soportada de forma primaria, mientras que la versión nativa de Windows es de mejor esfuerzo; si te encuentras con fricciones en una, prueba la otra.

¿Qué agentes de programación admite? Más de 21 agentes, entre ellos Claude Code, Codex, Cursor, Gemini, GitHub Copilot y OpenCode. Open Design detecta las CLI que ya tienes instaladas en tu máquina: dentro de WSL para la ruta desde el código fuente, o en tu PATH de Windows para la app de escritorio.

¿En qué se diferencia de Claude Design? La misma sensación familiar, pero de código abierto, local-first y conectable a agentes, así que no quedas atado a un único modelo ni quemas una bolsa fija de créditos. Además va más allá de los prototipos con presentaciones, maquetaciones tipo revista, generación de imágenes y vídeo.

---

Esta guía escrita se basa en el tutorial de instalación en Windows de AI Automation. Mira el vídeo completo arriba y suscríbete a AI Automation para más vídeos prácticos sobre herramientas de IA.