¿Con qué agente de código deberías ejecutar Open Design?
Una guía de configuración centrada en la única decisión que más importa: qué agente de código impulsa Open Design. Es compatible con más de 13 agentes (Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen, Copilot, Devin, Hermes, Kimi, Pi, Kiro y más); aquí te mostramos cómo elegir uno, instalar desde el código fuente y crear tu primer diseño. Basada en el recorrido de Tony Xhepa.
La primera decisión real de Open Design no es qué construir, sino qué agente de código lo impulsa. Esta guía se centra en esa elección: la (larga) lista de agentes compatibles, cómo elegir uno y cómo configurarlo y construir. Sigue el recorrido que Tony Xhepa ofrece en su vídeo, reescrito y actualizado a la versión actual. Mira el vídeo de arriba o sigue leyendo para la versión escrita.
El espacio de trabajo de Open Design: describe lo que quieres construir, elige un modo y tu agente hace el resto.
Por qué el agente es la elección importante
Open Design no incluye su propio modelo: es una superficie de código abierto, con enfoque local, que se ejecuta sobre cualquier agente de código que ya tengas. Así que el agente que elijas es tu motor de diseño: determina la calidad, el coste y la velocidad. Lo bonito es la amplitud. La lista de agentes compatibles de Tony es larga: Claude Code, Codex, Devin for Terminal, Cursor, Gemini, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, y más. Sea lo que sea que ya uses, es probable que Open Design lo admita, y si no tienes ninguno instalado, puedes usar en su lugar una clave API de Anthropic o de OpenAI.
Cómo elegir uno
Una forma rápida de elegir:
- ¿Ya pagas por una CLI de código? Úsala: Open Design se apoya en esa suscripción, así que no hay una segunda factura.
- ¿Quieres el mejor resultado de diseño? Apúntalo a un modelo de primer nivel (p. ej., Claude Code sobre un modelo capaz) para la construcción inicial.
- ¿Lo quieres barato o gratis? El nivel gratuito de Gemini CLI o los modelos incluidos de OpenCode funcionan bien; también puedes aportar tu propia clave.
- ¿Te importa la privacidad/lo local? Cualquier CLI local mantiene la generación sobre credenciales que nunca salen de tu máquina.
No quedas atado: cambia el agente activo más adelante con un clic.
Paso 1: Instalar desde el código fuente
Open Design es una app de Next.js; el inicio rápido son 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 webLuego abre la URL local que imprime (un puerto dinámico: no lo fijes en el código). Un detalle que menciona Tony: requiere Node 24; en Node 22 verás una advertencia de «unsupported engine», así que instala primero Node 24. ¿Prefieres no usar la terminal? Hay una app de escritorio en open-design.ai/download.
Paso 2: Configurar el modo de ejecución (elige tu agente)
En el primer arranque estableces el modo de ejecución: CLI local, Anthropic API u OpenAI API. Elige CLI local y Open Design mostrará qué agentes detectó en tu máquina: Tony tiene instalados Codex, Gemini, OpenCode y Pi (Claude Code aparece como no instalado en esa máquina). Elige uno (él opta por OpenCode), opcionalmente el modelo, y Get started.
El hub de plugins: explora el registro, importa plugins y prepáralos para tu equipo.
Paso 3: Crea tu primer diseño
Crea un Prototype, ponle nombre, elige la fidelidad (alta) y parte de un brief sugerido (Tony elige un panel de analítica SaaS). Open Design ejecuta las preguntas de descubrimiento (contexto de marca, fuente de datos de los gráficos, dirección visual), tú respondes, eliges una dirección y lo construye. El artefacto terminado tiene una vista previa, una vista del código fuente, comentarios y un menú Share: exportar como PDF, descargar, HTML autónomo, guardar como plantilla y más.
La biblioteca de plugins: instala skills directamente desde el registro, incluidas skills de diseño anti-slop.
Consejos
- Elige el agente por el que ya pagas: sin una segunda suscripción, y él fija tu calidad/coste.
- Instala primero Node 24 para evitar la advertencia de motor no compatible.
- Usa el modo
local CLIpara que Open Design detecte automáticamente tus agentes instalados. - Cambia de agente cuando quieras: la elección no es permanente; cámbiala con un clic.
- ¿Sin CLI? Usa una clave API (Anthropic u OpenAI) en su lugar.
Preguntas frecuentes
¿Qué agentes admite Open Design? Muchos: Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen, GitHub Copilot CLI, Devin, Hermes, Kimi, Pi, Kiro y más. Detecta automáticamente los instalados en tu máquina.
¿Cómo elijo uno? Usa la CLI por la que ya pagas; elige un modelo potente para la construcción inicial y uno más barato para iterar; o usa un nivel gratuito / tu propia clave API.
¿Por qué la advertencia de Node 24? Open Design requiere Node 24; en Node 22 verás una advertencia de «unsupported engine». Instala Node 24 para eliminarla.
¿Es gratis y de código abierto? Sí: Apache-2.0, con enfoque local. Ejecútalo gratis; solo pagas por el uso del modelo del agente o la clave que conectes.
Esta guía escrita se basa en el recorrido de Tony Xhepa. Mira el vídeo completo de arriba y suscríbete a Tony Xhepa para más herramientas de desarrollo de código abierto.