Carlos Damota
Volver a Documentación
Ecosistema IA2026-10-197 min de lectura

OpenDesign: Instalación, Ciclo de Vida Local e Integración MCP con Agentes

Guía técnica para desplegar OpenDesign en local (source/desktop/Docker), evitar la colisión con el comando de sistema /usr/bin/od y conectar su servidor MCP con Pi y otros agentes.

OpenDesignDesign AgentsMCPPi AgentUI/UXLocal-First
Índice de Contenidos (11)▼

OpenDesign: Entorno de Diseño Agéntico Local-First

OpenDesign es un espacio de trabajo colaborativo de código abierto (licencia Apache-2.0) diseñado para que agentes de desarrollo generen prototipos interactivos, paneles de control (dashboards), presentaciones de diapositivas y gráficos en movimiento siguiendo sistemas de diseño estrictos (DESIGN.md, tokens CSS y assets).

A diferencia de las herramientas cerradas en la nube, OpenDesign es local-first: se conecta directamente a los agentes de código instalados en tu máquina (como Pi, Claude Code, Cursor o Codex) y emite un servidor MCP (Model Context Protocol) para que tus agentes puedan consultar sistemas de diseño y artefactos en tiempo real.

1. Métodos de Instalación y Despliegue#

Opción A: Ejecución desde Código Fuente (Recomendado en Linux)#

En entornos Linux o cuando se requiere acceso completo a los templates y plugins internos:

bash
# 1. Clonar el repositorio oficial git clone https://github.com/nexu-io/open-design.git cd open-design # 2. Requisitos de runtime: Node ~24 y pnpm 10.33.x corepack enable pnpm install # 3. Lanzar el entorno de desarrollo y la interfaz web (Studio) pnpm tools-dev run web

La consola imprimirá la URL local asignada (por defecto en http://localhost:7456 o un puerto dinámico disponible).

Opción B: Aplicación de Escritorio (macOS y Windows)#

Para usuarios de macOS (Apple Silicon e Intel) o Windows (x64), existen binarios oficiales con auto-detección de agentes CLI en tu $PATH:

  • Descarga directa desde open-design.ai o desde los Releases de GitHub.
  • Incluye más de 100 skills funcionales, plantillas y 151 paquetes de sistemas de diseño precargados (Stripe, Linear, GitHub, Apple, etc.).

Opción C: Despliegue con Docker#

Para ejecutarlo como servicio contenerizado persistente:

bash
git clone https://github.com/nexu-io/open-design.git cd open-design/deploy cp .env.example .env # Generar token de seguridad para la API echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env # Iniciar contenedor en segundo plano docker compose up -d # Acceder en: http://127.0.0.1:7456

2. Advertencia Crítica en Linux y macOS: La Colisión con /usr/bin/od#

[!WARNING] En la inmensa mayoría de distribuciones Linux y en macOS, el comando od en la terminal NO ejecuta OpenDesign: ejecuta /usr/bin/od (la utilidad estándar de GNU coreutils para volcados octales octal dump).
Invocar od a secas en tu consola producirá un error o dejará el proceso colgado esperando entrada por stdin.

La Solución: El Wrapper de Ciclo de Vida (od.sh)#

Para evitar este conflicto y asegurar que el demonio y el servidor web se gestionan de forma idempotente, se utiliza un script wrapper (incluido en la skill open-design):

bash
# Comprobar estado y ver la URL del Studio activo ./scripts/od.sh status # Arrancar el daemon y el servidor web si están inactivos ./scripts/od.sh start # Ver la URL del Studio actual directamente ./scripts/od.sh url # Reiniciar servicios (cuando sea necesario recargar código) ./scripts/od.sh restart # Detener los servicios ./scripts/od.sh stop # Inspeccionar logs en vivo ./scripts/od.sh logs

3. Conexión de OpenDesign con Pi y otros Agentes vía MCP#

OpenDesign implementa un servidor MCP por stdio. Esto permite que agentes ejecutándose en cualquier otro repositorio lean tokens de diseño, componentes JSX y pantallas generadas directamente:

Registro automático del MCP#

OpenDesign cuenta con instaladores automáticos para más de 16 entornos de desarrollo:

bash
# Registrar OpenDesign en tu agente preferido: od mcp install pi # Para Pi coding agent od mcp install claude # Para Claude Code od mcp install cursor # Para Cursor CLI od mcp install codex # Para OpenAI Codex

Registro manual en Pi (~/.pi/agent/mcp.json)#

Si configuras el archivo de MCPs manualmente en tu entorno de Pi:

json
{ "mcpServers": { "open-design": { "command": "node", "args": ["/ruta/a/open-design/apps/daemon/bin/mcp-server.mjs"], "env": { "OD_DATA_DIR": "/home/usuario/.open-design" } } } }

Una vez conectado, Pi expone las herramientas bajo el namespace mcp__open_design__*, permitiendo:

  • Consultar la lista de proyectos y pantallas generadas (projects_list, project_get).
  • Extraer tokens de color y tipografía de un sistema de diseño para aplicarlos a código React/Tailwind.
  • Generar vistas previas en iframe aislado.

4. El Flujo de Trabajo: Del Brief al Código de Producción#

El ciclo de vida habitual combina la creatividad en OpenDesign con la ingeniería en tu editor:

text
1. Briefing ────────► 2. Elección de Marca ──► 3. Artefacto HTML/CSS ──► 4. Handoff a Código (Prompt en (Se enlaza un (OpenDesign genera el (Tu agente en Next.js OpenDesign) DESIGN.md activo) prototipo interactivo) importa los componentes)
  1. Briefing: Defines el requerimiento en el compositor ("Landing page B2B con Bento Grid para monitorización de modelos").
  2. Sistema de Diseño: Seleccionas uno de los sistemas existentes (por ejemplo, el estilo minimalista de Linear o Vercel) o suministras capturas para extraer la guía de estilo a un DESIGN.md.
  3. Generación del Artefacto: El agente escribe HTML, CSS moderno y animaciones en un iframe aislado.
  4. Handoff a Ingeniería: Al ser HTML/Tailwind real, se toma el artefacto generado y se integra de forma limpia en tu proyecto Next.js / React sin rehacer el trabajo desde cero.

Enlaces Oficiales y Documentación#

Explorar más guías y recursos