Open Design: Motor de diseño de código abierto impulsado por IA para desarrolladores

Introducción

Si alguna vez has probado Claude Design de Anthropic, sabes la emoción de ver a un LLM convertir un breve simple en un mock‑up de UI pulido. ¿El problema? Claude Design es cerrado, solo en la nube y está ligado a los propios modelos y habilidades de Anthropic. Open Design (el proyecto en GitHub en github.com/nexu-io/open-design) resuelve ese dilema al ofrecer un motor de diseño local‑first, de código abierto, BYOK (trae‑tu‑propia‑clave) que funciona en tu portátil, puede desplegarse en Vercel e integrarse con cualquiera de los 16 CLI de agentes de codificación que ya tienes.

Este artículo recorre los conceptos centrales, la arquitectura y los pasos prácticos para comenzar a crear prototipos de nivel de marca, presentaciones y medios con Open Design.

¿Qué hace a Open Design diferente?

En resumen, Open Design te brinda el mismo modelo mental centrado en el artefacto sin bloqueo de proveedor.

Visión general de la arquitectura central

Browser (Next.js 16) ⇄ /api/* (Express daemon) ⇄ Local CLI agents

1. Frontend – Una SPA de React/Next.js que aloja el compositor de chat, selector de habilidades, selector de sistemas de diseño y vista previa en iframe aislado.
2. Daemon – Un servidor Express (od) en Node‑24 que:
3. Escanea tu $PATH en busca de CLI de agentes de codificación compatibles y los registra.
4. Almacena proyectos, conversaciones y plantillas en una base de datos SQLite local (.od/app.sqlite).
5. Normaliza respuestas en streaming de cualquier proveedor de LLM mediante un proxy BYOK (/api/proxy/{anthropic,openai,…}).
6. Sirve galerías de plantillas de prompts, catálogos de sistemas de diseño y linting de artefactos.
7. Entorno del agente – El daemon lanza el CLI seleccionado dentro de la carpeta del proyecto (.od/projects/<id>). El agente obtiene lectura/escritura real, capacidades de Bash y de fetch web, haciéndolo sentir como un compañero de equipo trabajando en un sistema de archivos real.

La separación de responsabilidades permite ejecutar la UI web en cualquier máquina, mientras que las llamadas intensivas a LLM se realizan localmente o mediante tus propias claves API.

Primeros pasos – Tres rutas rápidas

1️⃣ Aplicación de escritorio preconstruida (cero configuración)

1. Visita open‑design.ai y descarga el instalador más reciente para macOS o Windows.
2. Ejecuta la aplicación – incluye el daemon, la UI web y, opcionalmente, el shell Electron.
3. El primer lanzamiento crea una carpeta oculta .od, detecta los agentes instalados y carga la habilidad predeterminada (web‑prototype).

2️⃣ Docker Compose (sin Node necesario)

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d   # inicia daemon + web en el puerto 7456

3️⃣ Ejecutar desde el código fuente (control total para desarrolladores)

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install
pnpm tools-dev run web   # inicia daemon + web, muestra la URL

El flujo de diseño – Del brief al artefacto

1. Elige una habilidad – Selecciona un prototipo (p. ej., mobile‑app) o una presentación (guizang‑ppt). Cada habilidad incluye un SKILL.md que define modo, plataforma y recursos requeridos.
2. Selecciona un sistema de diseño – Elige entre las 72 entradas del catálogo. El sistema provee un DESIGN.md de 9 secciones (colores, tipografía, espaciado, etc.).
3. Introduce un brief – El primer turno es un formulario de preguntas que fija superficie, audiencia, tono, contexto de marca y escala. Esto elimina el 80 % de los costosos bucles de rediseño.
4. Escoge una dirección visual – Si no tienes marca, un segundo formulario ofrece cinco direcciones curadas (Editorial Monocle, Modern Minimal, Tech Utility, Brutalist, Soft Warm). Un clic inyecta una paleta y una pila tipográfica determinísticas.
5. Progreso de tareas en vivo – El agente transmite una tarjeta de tareas (in_progress → completed) para que puedas intervenir en medio del proceso.
6. Vista previa aislada – El <artifact> generado se muestra dentro de un iframe srcdoc limpio. Puedes editar archivos directamente en el espacio de trabajo y volver a ejecutar la habilidad.
7. Exportar – Haz clic en Save para guardar el artefacto como HTML, PDF, PPTX, ZIP o Markdown. Las plantillas que te gusten pueden guardarse en la tabla templates de SQLite para reutilizarlas.

Stack de prompts – La salsa secreta

El stack de prompts de Open Design no es solo un mensaje system + user. Se compone de capas:

• Directivas de descubrimiento – el formulario de preguntas, extracción de especificaciones de marca y crítica de 5 dimensiones.
• Carta de identidad – reglas anti‑AI‑slop, voz de diseñador junior y restricciones específicas de la marca.
• DESIGN.md activo – valores de tokens para el sistema elegido.
• SKILL.md activo – instrucciones específicas del modo y referencias a listas de verificación.
• Metadatos del proyecto – fidelidad, notas del presentador, banderas de animación.
• Pre‑vuelo de archivos auxiliares – lee recursos, valida listas de verificación e inyecta valores predeterminados.

Como cada capa es un archivo, puedes editar directamente el stack de prompts (apps/daemon/src/prompts/*.ts) para personalizar el tono, añadir nuevas filosofías de diseño o integrar un LLM propietario.

Generación de medios – Imágenes, video, audio

Open Design incluye una galería de plantillas‑prompt: * 93 prompts de imagen (gpt‑image‑2) – carteles, avatares, infografías. * 39 prompts de video Seedance 2.0 – videos cinemáticos de 15 s texto‑a‑video. * 11 plantillas HyperFrames – gráficos de movimiento HTML → MP4.

Selecciona una plantilla, el daemon reenvía la solicitud al modelo correspondiente y el .png o .mp4 resultante se coloca en la carpeta del proyecto, listo para ser referenciado por la siguiente habilidad.

Extender la plataforma

Añadir una nueva habilidad

1. Crea una carpeta bajo skills/ siguiendo la convención existente de SKILL.md.
2. Añade los recursos que necesites (template.html, references/…).
3. Reinicia el daemon – la nueva habilidad aparecerá en el selector.

Añadir un sistema de diseño

Coloca un DESIGN.md en design-systems/<brand>/. El esquema de 9 secciones (colores, tipografía, espaciado, componentes, movimiento, voz, marca, anti‑patrones) es validado por apps/daemon/src/skills.ts.

Añadir un nuevo agente CLI

Edita apps/daemon/src/agents.ts y agrega una nueva entrada con el nombre binario, formato de streaming y mapa de argumentos. El daemon lo detectará automáticamente en el próximo inicio.

Casos de uso del mundo real

Comparación con competidores

• OpenCoDesign – Primer clon abierto de Claude‑Design, pero limitado a un paquete Electron de escritorio y menos habilidades.
• OpenCoCodesign – Comparte el bucle de streaming‑artefacto pero incluye su propio agente empaquetado. Open Design delega a los agentes que ya confías, manteniendo el runtime ligero.
• Claude Design – Potente pero cerrado, solo en la nube y caro. Open Design iguala el conjunto de funciones mientras permanece gratuito, auto‑alojado y extensible.

Comunidad y contribución

Open Design prospera gracias a las contribuciones de la comunidad: * Good‑first‑issues están etiquetados para recién llegados. * Añadir una habilidad o un sistema de diseño es un PR de una sola carpeta. * El CONTRIBUTING.md brinda guías de estilo, políticas de revisión de código e instrucciones de traducción (el repositorio incluye documentación en 12 idiomas). * Más de 170 colaboradores ya han ayudado a moldear el proyecto, y el número de estrellas (¡más de 35 k!) muestra un gran interés.

Reflexiones finales

Open Design demuestra que un motor de IA de diseño local‑first y de código abierto puede competir con ofertas comerciales. Al aprovechar los CLI de agentes de codificación existentes, un rico catálogo de sistemas de diseño y un stack de prompts disciplinado, entrega artefactos rápidos, reproducibles y coherentes con la marca sin enviar nunca tus activos propietarios a la nube.

Ya seas un fundador solitario creando un pitch deck, un equipo de producto prototipando UI, o un desarrollador curioso sobre flujos de trabajo impulsados por LLM, Open Design te brinda las herramientas para diseñar, iterar y exportar totalmente bajo tu propio control.

¿Listo para probarlo? Descarga la aplicación de escritorio, levanta un contenedor Docker o clona el repositorio y comienza a construir hoy.