Open Design: convierte el agente que ya tienes en un motor de diseño
Una guía práctica sobre la parte de Open Design que la mayoría de los tutoriales se salta: elegir y cambiar el modelo que hay detrás. Tu agente de codificación es el motor; el modelo al que lo apuntas es la perilla de calidad. Instálalo, conecta Gemini CLI o Claude y aprende a ajustar el modelo a la tarea. Basado en el recorrido práctico de Codedigipt.
Esta guía se centra en la parte de Open Design que la mayoría de los recorridos pasa por alto: el motor. Open Design en sí es la superficie de diseño; la generación real la hace el agente de codificación y el modelo a los que lo apuntes, y esa elección es la mayor palanca sobre la calidad del resultado. Sigue la configuración que Codedigipt utiliza en su recorrido práctico, reescrita y actualizada a la versión actual. Mira el video de arriba para ver la ejecución en vivo, o sigue leyendo la versión escrita.
El espacio de trabajo de Open Design: describe lo que quieres crear, elige un modo y tu agente hace el resto.
¿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 codificación que ya usas. No trae su propio modelo: escanea tu máquina en busca de los CLI que ya tienes (Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode y un par de docenas más) y usa ese agente como motor de diseño. Así, el trabajo corre sobre la suscripción o los créditos gratuitos que ya tienes, no sobre una segunda factura de diseño.
- Código abierto, Apache-2.0: clónalo, autoaloja, lee cada línea.
- Se ejecuta en local: tus proyectos son carpetas en tu propia máquina.
- Trae tu propio motor: cualquier CLI compatible o tu propia clave de API.
- Una nutrida biblioteca de sistemas de diseño y habilidades integrada, para no empezar desde un lienzo en blanco.
- Más que prototipos: prototipos, presentaciones, generación de imágenes y video.
La idea clave: el modelo es la perilla de calidad
Este es el modelo mental al que llega Codedigipt, y es lo más útil de interiorizar: la calidad del resultado de Open Design sigue al modelo que elijas. Open Design aporta la estructura —habilidades, sistemas de diseño, el flujo de descubrimiento—, pero el verdadero criterio de diseño proviene del motor. Ejecútalo en un modelo rápido y barato y obtienes un borrador rápido y barato; ejecútalo en un modelo de primer nivel y obtienes un resultado mucho más pulido a partir del mismo prompt y sistema de diseño.
Eso es una virtud, no una limitación. Significa que puedes equilibrar costo frente a calidad por proyecto y cambiar de motor cuando quieras.
Paso 1: Instalar Open Design
Tres vías de entrada:
| 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 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 codificación existente |
La vía más rápida es la aplicación de escritorio desde open-design.ai/download: detecta automáticamente los CLI de agentes que tienes instalados. Para ejecutar desde el código fuente (la vía de Codedigipt):
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run webAbre la URL local que imprime: resuelve un puerto dinámico, así que no fijes ninguno en el código. Un tropiezo que Codedigipt señala por experiencia: necesitas Node 24. En Node 22 no le arrancaba; instala primero Node 24 LTS. Corepack selecciona la versión fijada de pnpm.
Paso 2: Elige tu motor
Este es el paso que importa. Abre los ajustes (configurar el modo de ejecución) y elige, entre los CLI que Open Design detectó en tu máquina, el agente que impulsará la generación. Todo lo que no esté instalado aparece deshabilitado.
- Gemini CLI: la elección de Codedigipt para la fase de diseño: buen instinto de diseño y los créditos del nivel gratuito rinden mucho. La generación se apoya en esos créditos.
- Claude Code: apúntalo a un modelo apto para diseño (Sonnet u Opus) para obtener el resultado de mayor fidelidad.
- OpenCode: viene con modelos predeterminados competentes (p. ej., MiniMax, GLM) si prefieres no configurar nada.
- API de Anthropic (BYOK): ¿sin CLI? Coloca una clave de API y elige el modelo directamente. Esto te permite usar resultados de calidad Claude sin una suscripción aparte a Claude Design: tú pones la clave, Open Design pone la superficie de diseño.
Paso 3: Genera y luego juzga según el motor
Crea un proyecto, ponle nombre, elige alta fidelidad y escribe tu encargo (Codedigipt construye una página de aterrizaje para una API de tipo «auth-as-a-service»). Antes de escribir nada, Open Design devuelve un breve formulario de descubrimiento —formato de salida, superficie principal, audiencia, tono visual, dirección de marca— para que el agente fije la dirección correcta en lugar de adivinar. Respóndelo, elige una dirección visual y construye.
Un prototipo real generado, renderizado en la vista previa: una landing page de agencia oscura y cinematográfica.
El resultado en un modelo rápido (Codedigipt usa una vista previa de Gemini flash) es una primera pasada limpia y utilizable en segundos. La advertencia honesta que repite: obtienes un resultado al nivel del modelo que elegiste. ¿Quieres un acabado de calibre Opus? Cambia el motor a Claude con Opus y vuelve a ejecutar el mismo encargo: misma habilidad, mismo sistema de diseño, resultado más nítido.
La biblioteca de plugins: instala skills directamente desde el registro, incluidos skills de diseño anti-slop.
Cuando estés conforme, el menú Compartir exporta a PDF, PPTX, HTML independiente o un ZIP, o lo despliega directamente en Vercel. Puedes explorar la biblioteca completa de plugins en open-design.ai/plugins.
Consejos
- Ajusta el modelo a la tarea. Modelo barato/rápido para borradores rápidos e iteración; modelo de primer nivel para la pasada final que verá el cliente.
- Usa un CLI local para que la generación se apoye en una suscripción o créditos gratuitos que ya tengas.
- BYOK para calidad Claude sin un plan de Claude Design: coloca una clave de Anthropic en los ajustes y selecciona el modelo.
- No culpes a la herramienta por un modelo débil. Un buen sistema de diseño no puede rescatar a un motor débil; si el resultado se ve pobre, mejora el modelo antes de reescribir el prompt.
- Responde el formulario de descubrimiento por completo: así es como el motor fija la dirección al primer intento.
Preguntas frecuentes
¿De verdad el modelo que elijo cambia tanto el resultado? Sí: es la mayor palanca. Open Design aporta las habilidades y los sistemas de diseño, pero el criterio de diseño proviene del motor. El mismo encargo en Opus frente a un modelo de vista previa rápido produce un acabado notablemente distinto.
¿Puedo obtener calidad de nivel Claude sin pagar por Claude Design? Sí. Apunta Open Design a Claude Code, o coloca una clave de API de Anthropic en los ajustes (BYOK) y selecciona el modelo. Obtienes el resultado sin una suscripción aparte a Claude Design.
¿Puedo cambiar de modelo a mitad de un proyecto? Sí: cambia el agente/modelo en los ajustes y vuelve a ejecutar. La misma habilidad y el mismo sistema de diseño, con un motor distinto detrás.
¿Es gratis? La aplicación es de código abierto bajo Apache-2.0 y gratuita para ejecutar en local. Solo pagas por el modelo/los créditos del agente que conectes.
Esta guía escrita se basa en el recorrido práctico de Codedigipt. Mira el video completo arriba y suscríbete a Codedigipt para más configuraciones prácticas de herramientas de IA.