Claude Design llegó a su fin… La MEJOR alternativa gratuita a Claude Design (ilimitada y de código abierto)
Configura Open Design y contrólalo con Gemini CLI para que la generación de diseño con IA de alta fidelidad funcione en el nivel gratuito de Gemini: un espacio de trabajo de código abierto y local-first que puedes usar sin pagar por el agente.
Esta guía te muestra cómo ejecutar Open Design con Gemini CLI como el agente que impulsa la generación, de modo que los prototipos, las páginas de aterrizaje y la UI salgan de un único espacio de trabajo mientras te apoyas en el generoso nivel gratuito de Gemini. Sigue el camino que recorre Sandeep Singh en su recorrido práctico, reescrito y actualizado para coincidir con la versión actual. Mira el video de arriba para la versión en vivo, o sigue leyendo.
La cuestión del costo es el punto clave. Open Design en sí es gratuito y de código abierto; lo único que “pagas” es el agente y el modelo que traes contigo. Trae Gemini CLI, autentícate con tu cuenta de Google y esa factura baja prácticamente a cero.
El espacio de trabajo de Open Design: de código abierto, local-first e impulsado por el agente de programación que conectes.
¿Qué es Open Design?
Open Design es una plataforma de diseño de código abierto y local-first que se ejecuta sobre el agente de programación que ya usas en lugar de atarte a un único proveedor de modelos. Es del tipo «trae tu propio agente»: Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode y más de otros 21 pueden impulsar la generación cada uno. Tú eliges el agente; Open Design se encarga de la superficie de diseño.
Algunas cosas que lo hacen digno de una mirada:
- Código abierto, Apache-2.0: clónalo, aloja tu propia instancia, lee cada línea.
- Se ejecuta 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, incluido Gemini CLI; tú eliges cuál impulsa la generación.
- Más que prototipos: prototipos, artefactos en vivo, presentaciones de diapositivas, maquetaciones tipo revista, generación de imágenes e incluso video, todo desde un único espacio de trabajo.
- Puntos de partida integrados: sistemas de diseño con marca y plantillas vienen de fábrica, así nunca te quedas mirando un lienzo en blanco.
Se sostiene por méritos propios: un espacio de trabajo de diseño local e independiente del modelo. Que se combine limpiamente con un agente gratuito como Gemini CLI es el extra que lo hace genuinamente gratis de usar.
Antes de empezar
Tienes tres formas de instalar Open Design. Elige la que te convenga:
| Ruta | 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 quieren leer o modificar el código | Node ~24, pnpm 10.33.x |
| Instalar en tu agente | Quienes viven en la terminal | Un CLI de agente de programación existente |
La aplicación de escritorio es la ruta recomendada hoy: sin Node, sin pnpm, sin clonar. Sandeep descarga el instalador de su plataforma (un .dmg en macOS, un setup.exe en Windows) directamente desde la última versión.
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 compilaciones disponibles para macOS (Apple Silicon e Intel), Windows (x64) y Linux (AppImage). Tras instalar, la aplicación 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. En el primer arranque llegas a la pantalla de conexión, donde eliges un CLI local o pegas tu propia API key.
Opción B: Ejecutar desde el código fuente
Si prefieres ejecutarlo desde el repositorio, 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 web
Luego abre la URL local que imprime: el puerto se asigna dinámicamente, así que usa la dirección que aparezca en tu terminal en lugar de una fija. Necesitas Node ~24 y pnpm 10.33.x; Corepack seleccionará por ti la versión fijada de pnpm.
Opción C: Instalar en 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:
od mcp install <agent>
# <agent> = gemini | claude | codex | cursor | copilot | opencode | …
Luego, dentro del agente, basta con pedir: Use open-design to generate a landing page with a modern minimal design system.
Conecta Gemini CLI como tu agente
Este es el paso que hace gratuito el flujo de trabajo. Open Design no incluye un modelo propio: impulsa cualquier CLI al que lo apuntes, así que traes Gemini CLI y dejas que su nivel gratuito haga el trabajo.
¿Por qué Gemini CLI? Dos razones, como dice Sandeep: los modelos de Gemini se defienden frente al resto, y el nivel gratuito es generoso. Inicia sesión con una cuenta de Google y obtienes una gran cuota diaria de solicitudes sin costo; la API key de Gemini tiene una cuota gratuita más pequeña. Para un trabajo de diseño sostenido, el inicio de sesión con cuenta de Google es el indicado.
- Instala Gemini CLI. Sigue el comando de instalación de la página de inicio de Gemini CLI (Homebrew en macOS y Linux, o el instalador documentado en otros casos). Cualquier terminal funciona.
- Ejecuta
geminiy autentícate. Lánzalo, confía en la carpeta de trabajo cuando se te solicite y luego elige Sign in with Google. Tu navegador se abre para un inicio de sesión de Google de dos clics e informa del éxito. Reinicia Gemini CLI; deberías ver el modelo activo y un0%de cuota usada. - Apunta Open Design hacia él. Reinicia Open Design y abre Settings. Gemini CLI ahora aparece como un agente disponible: selecciónalo, Test the connection y deberías recibir un
OKde vuelta. Guarda y estás listo para diseñar.
También puedes pegar aquí tu propia API key en lugar de usar un CLI local, y añadir keys separadas para modelos de imagen, video y audio si más adelante quieres generación multimedia. Sin embargo, para un trabajo de diseño gratuito y con sensación de ilimitado, el inicio de sesión con Gemini CLI es todo lo que necesitas. Todo en Settings se puede cambiar después, así que mantén sencilla la primera pasada.
Explora el espacio de trabajo
Open Design mantiene tu trabajo delimitado por proyecto: cada proyecto vive en su propia carpeta, y cambiar de carpeta cambia de proyecto. Dentro de un proyecto puedes crear prototipos, artefactos en vivo, presentaciones de diapositivas, imágenes e incluso video y audio, no solo UI.
La biblioteca de sistemas de diseño: puntos de partida con marca que puedes previsualizar e insertar en cualquier proyecto.
La biblioteca de sistemas de diseño integrada te da puntos de partida con marca para previsualizar y reutilizar, así no te quedas bloqueado definiendo tokens antes de poder empezar. También puedes traer tu propio sistema de diseño, importar un proyecto existente de Claude Design o empezar desde cero y dejar que Open Design infiera valores predeterminados sensatos.
Plantillas: puntos de partida de prototipo, diapositiva, imagen y video; filtra por tipo y haz un fork para empezar.
La biblioteca de plantillas va más allá de los sistemas de marca, hasta prototipos, diapositivas y generación tanto de imagen como de video. Filtra por tipo y haz un fork de cualquiera como punto de partida. Puedes explorar la biblioteca completa de plugins en la web en open-design.ai/plugins antes de instalar nada.
Construye algo
Con Gemini CLI conectado, el flujo de construcción es el mismo que Sandeep ejecuta en el video:
- Crea un proyecto. Ponle nombre, elige un sistema de diseño que se ajuste al aspecto que quieres y selecciona High fidelity para ver el resultado real en lugar de un wireframe.
- Escribe el brief. En lugar de uno de los prompts sugeridos, describe lo que quieres: Sandeep pide una página de aterrizaje. También puedes adjuntar una captura de una maquetación que te guste y pedirle a Open Design que siga ese tema.
- Responde las preguntas de aclaración. El agente hace preguntas de seguimiento inteligentes: página de aterrizaje única o aterrizaje más precios, superficie responsive, para quién es, un tono visual (Sandeep elige una estética moderna y minimalista al estilo Linear/Vercel) y cualquier color o fuente de marca. Puedes dejar campos en blanco o dejar que elija una dirección por ti.
- Elige una dirección visual y genera. Escoge una de las direcciones propuestas, envía y unos segundos después aparece la página de aterrizaje con estilo y con las secciones que pediste.
- Itera mediante prompts. ¿Quieres cambiar un logo, añadir un icono que falta o ampliar la FAQ? Solo describe el cambio y envía. Si una edición descuadra algo, un prompt de seguimiento lo vuelve a su sitio.
Cuando estés conforme, abre los archivos de diseño, inspecciona el código fuente, edita capas manualmente si quieres y luego exporta: PDF, PPTX, un paquete comprimido o un despliegue a Vercel.
La parte gratuita es real: Sandeep construye dos prototipos con varias iteraciones y, cuando revisa después su uso de Gemini, ha gastado solo alrededor del 2 % de su cuota diaria. Con una gran cuota diaria que se renueva cada día, puedes diseñar casi de forma continua sin estar pendiente de un contador.
Consejos
- Inicia sesión en Gemini CLI con tu cuenta de Google en lugar de con una API key: la cuota gratuita diaria es mucho mayor, y eso es lo que hace que este flujo sea prácticamente gratuito.
- Empieza con alta fidelidad cuando quieras juzgar el diseño real; baja a wireframe solo para bosquejar la estructura rápidamente.
- Comprueba tu uso con
statsen Gemini CLI para ver lo poco que cuesta en realidad el trabajo de diseño frente a tu cuota diaria. - Tus diseños se quedan con la carpeta del proyecto: organiza el trabajo ejecutando Open Design contra el directorio correcto.
- No necesitas un sistema de diseño para empezar. Comienza con uno integrado, importa un proyecto de Claude Design o deja que Open Design infiera valores predeterminados.
Preguntas frecuentes
¿Es realmente gratis? En la práctica, sí. Open Design es de código abierto bajo Apache-2.0, así que el software no cuesta nada. El único costo es el agente y el modelo que traes contigo, y con Gemini CLI autenticado mediante una cuenta de Google, recurres a una gran cuota gratuita diaria. En el video, dos prototipos más iteraciones usaron aproximadamente el 2 % de la cuota del día, que se renueva a diario.
¿Qué agentes de programación admite? Más de 21 agentes, incluidos Gemini, Claude Code, Codex, Cursor, GitHub Copilot y OpenCode. Open Design detecta los CLI ya instalados en tu máquina y te deja elegir uno como predeterminado.
¿Tengo que usar Gemini CLI? No. Gemini CLI es la vía hacia una configuración gratuita y de alta cuota, pero puedes conectar cualquier agente compatible, o pegar tu propia API key para un agente o para modelos de imagen, video y audio.
¿Necesito un sistema de diseño antes de poder empezar? No. Open Design incluye sistemas de diseño con marca y plantillas como puntos de partida, y puedes importar un sistema de diseño existente o dejar que infiera valores predeterminados sensatos.
Esta guía escrita se basa en el recorrido práctico de Sandeep Singh. Mira el video completo arriba y suscríbete a Sandeep Singh para más tutoriales prácticos sobre herramientas de IA.