Cómo funciona Open Design — la arquitectura autoalojable de «trae tu propia clave»

Esta guía es para quienes quieren entender qué están ejecutando realmente: cómo funciona Open Design por dentro, por qué puede autoalojarse y ser BYOK en cada capa, y por qué sus skills y sistemas de diseño no son más que archivos que puedes bifurcar. Sigue el recorrido centrado en la arquitectura que ofrece AI Stack Engineer en su vídeo completo, reescrito y actualizado a la versión actual. Mira el vídeo de arriba para verlo en vivo, o sigue leyendo para la versión escrita.

El centro de plugins: explora el registro, importa plugins y prepáralos para tu equipo.

¿Qué es Open Design?

Open Design es un reemplazo totalmente de código abierto para una herramienta de diseño en la nube: local-first, desplegable en la web y BYOK en cada capa. «BYOK» significa trae tu propia clave (bring your own key). En lugar de incluir su propio modelo o agente, Open Design escanea tu máquina en busca de cualquier CLI de programación que ya tengas —Claude Code, Codex, Cursor, Gemini, OpenCode y más— y lo usa como motor. Si no hay ninguno en tu ruta, existe un respaldo con la API de Anthropic. La licencia es Apache-2.0, así que puedes bifurcarlo, desplegarlo internamente y modificarlo con libertad.

El punto al que AI Stack Engineer vuelve una y otra vez: una herramienta de diseño en la nube solo corre sobre el modelo de un único proveedor, en su nube, detrás de un plan de pago y sin ninguna opción de autoalojamiento. Open Design invierte los tres: tu máquina, tu agente, tu clave.

Cómo está construido (la parte que vale la pena entender)

La arquitectura es deliberadamente sencilla:

• Frontend: una app de Vite + React + TypeScript.
• Backend: un daemon de Node + Express con SQLite para proyectos, conversaciones, mensajes y pestañas.
• El daemon es el único proceso privilegiado. Lanza el CLI que hayas elegido, con el directorio de trabajo fijado en una carpeta por proyecto bajo un directorio oculto .od.

Ese último punto es lo que hace que Open Design sea más que una caja de chat: el agente obtiene herramientas reales de lectura / escritura / bash / web-fetch contra un sistema de archivos real. Cuando genera un artefacto, está escribiendo archivos de verdad en el disco que puedes abrir, editar, versionar y exportar, en lugar de devolver un bloque en una ventana de chat.

Las skills y los sistemas de diseño no son más que archivos

Dos bloques de construcción hacen la mayor parte del trabajo, y ambos son archivos sencillos que te pertenecen:

• Las skills cubren superficies reales —prototipo web, landing SaaS, dashboard, página de precios, docs, blog, app móvil, presentaciones (incluida una skill de PPT estilo revista)— además de plantillas de entregables como specs de PM, actualizaciones semanales, actas de reunión, runbooks, informes financieros, facturas, tableros Kanban y OKR. Cada una es un archivo que puedes leer, editar o ampliar.
• Los sistemas de diseño se guardan como archivos DESIGN.md en markdown plano. Cada uno define color, tipografía, espaciado, maquetación, componentes, movimiento, tono, reglas de marca y antipatrones, extraídos de marcas reales.

El espacio de trabajo de Open Design: describe lo que quieres crear, elige un modo y tu agente hace el resto.

Como ambos son archivos, todo tu flujo de diseño se vuelve versionable y bifurcable: un equipo puede mantener su propia skill interna y su DESIGN.md de marca en git, y hacer que cualquier agente genere a partir de ellos.

Instalar y autoalojar

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install   # esto descarga muchas dependencias — dale un minuto
pnpm tools-dev run web

Abre la URL local que imprime (un puerto dinámico: no lo fijes a mano). ¿Prefieres cero configuración? La app de escritorio en open-design.ai/download se salta Node y pnpm. En la primera carga escanea tu PATH y lista los agentes que encontró; elige uno (AI Stack Engineer prueba la vía no-Claude con OpenCode), o usa la opción BYOK de Anthropic.

Dos detalles inteligentes en la pila de prompts que conviene conocer: un formulario de descubrimiento (pregunta por superficie, audiencia, tono, marca y escala antes de escribir; 30 segundos de botones de opción ahorran 30 minutos de redirección) y un selector de dirección (cinco direcciones visuales seleccionadas con paletas deterministas, para que el modelo no improvise el ambiente).

Modo de presentación: elige una categoría de presentación y haz un fork de un ejemplo como punto de partida.

Cuando termines, exporta a HTML, PDF o ZIP, o despliega. Como es desplegable en la web y local-first, nada tiene que tocar la nube de un tercero.

El veredicto honesto

AI Stack Engineer es ecuánime: una herramienta en la nube pulida y afinada para un modelo de primer nivel sigue ganando en acabado listo para usar y en amplitud de exportación. Open Design gana en lo que importa a mucha gente: es gratis y Apache-2.0, traes tu propio agente y tu clave, y la flexibilidad de modelo es un superpoder silencioso: si un proveedor sube precios, o quieres comparar cómo dos modelos resuelven una maquetación, cambias el agente en el desplegable y vuelves a ejecutar. Unas notas honestas: está en una fase temprana de research preview; Claude Code obtiene el streaming más rico (stream-JSON estructurado), mientras que otros CLI van en búfer por líneas; la calidad de la salida depende mucho del modelo al que apuntes; y algunas funciones, como las ediciones quirúrgicas en modo comentario, siguen en la hoja de ruta.

Consejos

• Entiende la carpeta de proyecto .od: tus artefactos son archivos reales ahí; haz copias de seguridad / commitéalos.
• Mantén las skills y DESIGN.md en git para un flujo versionado y compartible en equipo.
• Usa un CLI local para que la generación se apoye en una suscripción que ya pagas.
• Elige el motor con criterio: un modelo débil, aun con un gran sistema de diseño, sigue produciendo resultados débiles.
• Autoaloja / despliega cuando necesites privacidad o control: nada tiene por qué salir de tu máquina.

Preguntas frecuentes

¿Qué significa «BYOK en cada capa»? Traes tu propio CLI de agente y tu propia clave de modelo. Open Design aporta la superficie de diseño, las skills y los sistemas de diseño; el modelo y su coste se quedan de tu lado.

¿Dónde vive realmente mi trabajo? En tu máquina, en una carpeta por proyecto bajo .od, gestionada por el daemon local (SQLite + archivos reales). Es autoalojable y desplegable en la web.

¿Puedo personalizar las skills y los sistemas de diseño? Sí: son archivos sencillos (las skills como carpetas, los sistemas de diseño como DESIGN.md). Edítalos, añade los tuyos y mantenlos bajo control de versiones.

¿Es gratis? La app es de código abierto bajo Apache-2.0 y gratuita para ejecutarla en local. Solo pagas por el uso de modelo del agente y la clave que conectes.

---

Esta guía escrita se basa en el recorrido completo de AI Stack Engineer. Mira el vídeo completo de arriba y suscríbete a AI Stack Engineer para más análisis prácticos de stacks de IA.