¡Reemplacé Claude Design con esta alternativa de código abierto!

Esta guía te muestra cómo ejecutar Open Design completamente en tu propia máquina — sin cuenta en la nube, sin facturación por diseño, sin que nada salga de tu portátil. La idea es combinar Open Design con un ejecutor de modelos locales (algo como Ollama) y los agentes de codificación de línea de comandos que ya tienes instalados, de modo que la generación ocurra en local y tu trabajo se mantenga privado. Sigue el camino que toma AI Automation Station en su recorrido de configuración local, reescrito y actualizado para coincidir con la versión actual. Mira el vídeo de arriba para verlo en directo, o sigue leyendo para la versión escrita.

El espacio de trabajo de Open Design ejecutándose en local — tus proyectos, tu agente, tu máquina.

¿Qué es Open Design?

Open Design es una plataforma de diseño de código abierto y local-first — una alternativa agent-native a Claude Design y Figma. Lo que hace posible una configuración totalmente local es su arquitectura central: en lugar de estar cableado a un único proveedor de modelos, Open Design se ejecuta sobre el agente de codificación que ya usas. Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode y más se conectan todos. Es "trae tu propio agente" en lugar de solo "trae tu propia clave".

Eso importa para este tutorial porque si el agente que eliges se ejecuta en local — un agente de línea de comandos abierto que impulsa un modelo local a través de un ejecutor como Ollama — entonces todo el bucle permanece en tu máquina. Sin créditos quemados, sin prompts enviados a una API remota.

Algunas cosas que conviene saber:

• 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, no en la nube de otra persona.
• Agentes conectables — se admiten 21+ agentes de codificación; tú eliges qué CLI impulsa la generación.
• Más que prototipos — prototipos, artefactos en vivo, presentaciones, maquetas de revista, generación de imágenes e incluso vídeo, todo desde un único espacio de trabajo.
• Puntos de partida reales integrados — sistemas de diseño modelados en marcas reconocidas (Airbnb, Airtable y otras), además de plantillas y preajustes de imagen, para que nunca te quedes mirando un lienzo en blanco.

Si has usado Claude Design, la sensación te resultará familiar. Open Design conserva esa misma estética serena y se ejecuta en el navegador igual que Claude Design — pero luego abre el motor que hay debajo para que puedas conectar el agente que prefieras.

Antes de empezar

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

Vía	Ideal para	Requisitos
Aplicación de escritorio	La mayoría de la gente — cero configuración	Ninguno. Solo descarga y abre.
Ejecutar desde el código fuente	Desarrolladores que quieran leer o modificar el código	Node ~24, pnpm 10.33.x
Instalar en tu agente	Quienes viven en la terminal	Una CLI de agente de codificación existente

El vídeo toma la vía de ejecutar desde el código fuente, pero la aplicación de escritorio es la vía recomendada hoy en día — no necesita Node, ni pnpm, ni clonar nada.

Para una configuración totalmente local, también querrás tener instalado, antes de empezar, un agente de línea de comandos capaz de ejecutarse en local — por ejemplo OpenCode, que viene con modelos gratuitos integrados y puede apuntar a un ejecutor local como Ollama. Open Design lo detectará automáticamente en cuanto esté en tu PATH.

Paso 1 — Instalar 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 builds disponibles para macOS (Apple Silicon e Intel), Windows (x64) y Linux (AppImage). Tras la instalación, la aplicación detecta automáticamente cada CLI de agente de codificación que ya esté en tu PATH y carga por ti los skills y los sistemas de diseño integrados.

Opción B — Ejecutar desde el código fuente

Para ejecutarlo directamente desde el repositorio — como hace el vídeo — solo necesitas unos pocos comandos:

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

Luego abre la URL local que imprime en tu terminal. Necesitas Node ~24 y pnpm 10.33.x; Corepack elegirá por ti la versión fijada de pnpm. El puerto se asigna dinámicamente, así que usa la dirección que muestre el comando en lugar de adivinar una.

Opción C — Instalar en tu agente de codificación

Para gobernar Open Design desde la terminal — invocándolo como skill o servidor MCP dentro de tu agente, sin GUI — ejecuta:

od mcp install <agent>
# od ships with Open Design; <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Luego pide, dentro del agente: Use open-design to generate a dense analytics dashboard with the Airbnb design system.

Primera ejecución: conecta tu agente local

La primera vez que abres Open Design, escanea tu máquina y muestra cada agente de línea de comandos que encuentra — Claude Code, OpenCode, Codex, Gemini y otros. Este es el momento que hace real un flujo de trabajo solo-local: tú eliges qué agente genera tus diseños.

• Elige un agente local para no gastar créditos. Claude Code es excelente, pero consume tus créditos de Claude. Elegir en su lugar una opción gratuita y local como OpenCode significa que la generación se ejecuta en tu máquina sin coste. OpenCode agrupa varios modelos gratuitos (MiniMax entre ellos) y puede situarse delante de un ejecutor local como Ollama, de modo que el modelo nunca sale de tu ordenador.
• Añade claves de API de proveedores solo si quieres. Hay un lugar para pegar claves de Anthropic, OpenAI, Azure y Google Gemini por si alguna vez quieres recurrir a un modelo alojado. Para una ejecución totalmente local, puedes omitir esto por completo.
• Añade proveedores de medios (opcional). Si quieres generar imágenes, vídeo o audio, añade tus propias claves para esos proveedores. Esta es la parte de "trae tu propia clave" — y es opcional.
• Activa skills y sistemas de diseño. Habilita solo las capacidades que necesitas para el trabajo que tienes delante.

Todo esto se puede cambiar más adelante, así que mantén la primera pasada sencilla: elige tu agente local y sigue adelante.

Explora el espacio de trabajo

Open Design mantiene tu trabajo acotado por proyecto — los diseños que creas viven dentro de la carpeta de proyecto en la que trabajas. Cambia de carpeta y cambias de proyecto.

Inicia un nuevo prototipo (el vídeo nombra uno "Tube Analytics") e inmediatamente tienes una elección: empezar desde un sistema de diseño o trabajar en formato libre. No estás obligado a definir primero un sistema de diseño. Puedes elegir uno de los sistemas integrados — el sistema de Claude/Anthropic, Airbnb, Airtable y más — o importar un ZIP de Claude Design para que todos tus tokens y componentes existentes vengan contigo.

La biblioteca de sistemas de diseño: puntos de partida reales de marcas que puedes previsualizar, de los que puedes tomar el DESIGN.md y encajar en cualquier proyecto.

Aquí hay más que sistemas de marca. Open Design incluye una galería de diseños de ejemplo que puedes previsualizar antes de usarlos — haz clic en uno y se abre una vista previa en vivo junto con el prompt que lo produjo. Pulsa Use prompt para empezar desde ahí. Junto a esos hay plantillas de imagen que puedes forkear como punto de partida.

Diseños de ejemplo y plantillas de imagen — previsualiza cualquiera, luego forkéalo o reutiliza su prompt.

Construye algo — en local

Ahora la parte que demuestra que el bucle local funciona. En el vídeo, el creador abre un panel de analítica SaaS y le pide a Open Design que lo amplíe.

1. Inicia el prototipo. Elige un sistema de diseño (o formato libre) y, opcionalmente, importa tu ZIP de Claude Design para que el agente tenga el contexto completo de tu diseño existente.
2. Adjunta una referencia. Arrastra o pega imágenes como referencia visual, o escribe @ para adjuntar un archivo del proyecto — por ejemplo un archivo "SaaS Analytics dashboard".
3. Escribe el brief. Dale un prompt concreto: "Build out the remaining tabs in the dashboard using your design system." Obtienes la familiar disposición dividida — la conversación a la izquierda, la vista previa en vivo y los archivos de diseño a la derecha.
4. Míralo ejecutarse en tu agente. Open Design llama a la CLI que elegiste — OpenCode, en el vídeo — y construye las nuevas pantallas. Como se ejecuta en local mediante los modelos gratuitos de OpenCode, esto cuesta cero créditos: no se factura nada a Claude, Gemini ni Codex. Aparecen nuevas pestañas (tendencias, generadores de scripts de contenido, transcripciones, comentarios), con un estilo que coincide con el sistema existente.
5. Exporta o despliega. Cuando el diseño esté listo, pídele que lo descargue como ZIP para pasarlo a tu base de código, o que lo despliegue directamente en Vercel desde dentro de Open Design — algo que Claude Design no ofrece. Para incorporar los cambios de vuelta a tu app, suelta el ZIP en un agente de codificación como Claude Code y di "implement these design changes using the ZIP file."

El resultado es un diseño real e interactivo — construido de principio a fin en tu propia máquina, con tu propio agente, gratis.

Consejos

• Elige un agente local gratuito para una generación sin coste. OpenCode con sus modelos gratuitos integrados (o un modelo local vía Ollama) mantiene cada ejecución en cero créditos.
• Guarda las claves alojadas para cuando las necesites. Pega claves de Anthropic/OpenAI/Gemini solo si quieres recurrir a un modelo premium; un agente local no necesita ninguna.
• No necesitas un sistema de diseño para empezar. Comienza desde uno integrado, importa un ZIP de Claude Design o simplemente ve en formato libre.
• Tus diseños se quedan con la carpeta del proyecto — organiza el trabajo ejecutando Open Design contra el directorio correcto.
• La exportación es una entrega, no un bloqueo. Descarga como ZIP, despliega en Vercel o alimenta los archivos a un agente de codificación para fusionarlos con tu código existente.

Preguntas frecuentes

¿Puedo realmente ejecutar Open Design sin ningún coste de nube? Sí. El propio Open Design es de código abierto (Apache-2.0) y gratuito de ejecutar. Si lo apuntas a un agente local gratuito como OpenCode — opcionalmente respaldado por un ejecutor local como Ollama — la generación ocurre en tu máquina sin coste de créditos. Solo pagas si eliges conectar un modelo alojado de pago o un proveedor de medios.

¿Cómo mantengo todo local y privado? Elige un agente de línea de comandos local durante la primera ejecución en lugar de uno en la nube. Como Open Design se ejecuta sobre el agente que elijas, un agente local y un modelo local significan que tus prompts y diseños nunca salen de tu ordenador.

¿Qué agentes de codificación admite? 21+ agentes, incluidos Claude Code, Codex, Cursor, Gemini, GitHub Copilot y OpenCode. Open Design detecta las CLI ya instaladas en tu máquina y te deja elegir cuál impulsa la generación.

¿En qué se diferencia de Claude Design? La misma sensación familiar basada en el navegador, pero de código abierto, local-first y con agentes conectables. Traes tu propio agente (local o alojado), no estás obligado a definir un sistema de diseño de antemano, y puedes hacer cosas extra que Claude Design no puede — como desplegar directamente en Vercel y generar diapositivas, imágenes y vídeo desde el mismo espacio de trabajo.

---

Esta guía escrita se basa en el recorrido de configuración local de AI Automation Station. Mira el vídeo completo de arriba y suscríbete a AI Automation Station para más tutoriales prácticos sobre herramientas de IA.