Herramientas de IA

Tutorial de Open Design: instalación, conexión con Codex y primer prototipo editable

Instala Open Design mediante la aplicación de escritorio, Docker o el código fuente; conéctalo con Codex o Claude Code; valida el primer prototipo HTML editable; y resuelve problemas de PATH, puertos, permisos y recuperación.

Open Design es un escritorio de diseño AI de prioridad local. No simplemente devuelve un mapa de impacto inmodificable, sino que permite que el Codex, Claude Code, Cursor y otros generen archivos reales como HTML, CSS, componentes, presentaciones en el directorio del proyecto, que luego está previsto, gestionado y exportado por Open Design.

Esta guía sigue un flujo de validación completo: instalar Open Design, confirmar que detecta el agente de programación, generar una página de destino, revisar los archivos creados y localizar los registros y las opciones de recuperación cuando algo falla.

Seleccione la ruta de instalación primero

Ruta ¿Para quién? Principales limitaciones
Paquete de instalación de escritorio Windows, usuario común MacOS Los paquetes de instalación de Windows pueden activar alarmas SmartScreen
Docker. Estoy tratando de arreglar el puerto de servicio. No puede inicializar el componente de correo de Evolution.
Source Run Desarrolladores, colaboradores, personas que necesitan plugins depuradores Node.js 24 y pnpm 10.33.x

Utilice la última versión del paquete de escritorio en GitHub Releases como una prioridad cuando desea experimentarlo. No descargue versiones históricas específicas como el viejo tutorial; Open Design se actualiza muy rápidamente y debe examinar primero los requisitos del sistema y los problemas conocidos en las instrucciones de distribución.

Instalar la aplicación de Windows y realizar tres comprobaciones

Después de instalar e iniciar la aplicación, comprueba los agentes de programación antes de generar un proyecto:

1
2
3

Get-Command codex -ErrorAction SilentlyContinue
Get-Command claude -ErrorAction SilentlyContinue
Get-Command cursor-agent -ErrorAction SilentlyContinue

Al menos un comando debe devolver la ruta del ejecutable. Si PowerShell encuentra codex pero Open Design lo muestra como no instalado, la aplicación de escritorio probablemente heredó un PATH incompleto al iniciarse.

El orden de procesamiento es el siguiente:

  1. Deja el proceso en Open Design, incluyendo la bandeja del sistema.
  2. Confirma que el directorio de instalación del agente está incluido en el PATH del usuario.
  3. Reentrada Windows, o iniciar Open Design desde la misma ventana PowerShell.
  4. Ejecutar Rescan en Ajustes

No copie el ejecutable al directorio del sistema para permitir que se identifique, lo que confundiría las actualizaciones posteriores y los fallos de competencia.

Iniciar un entorno reproducible con Docker

La ruta de Docker es apropiada para confirmar si Web UI y daemon local funcionan correctamente:

1
2
3
4

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
openssl rand -hex 32

Rellene la cadena generada al azar deploy/.env:

1
2
3

OPEN_DESIGN_PORT=7456
OPEN_DESIGN_MEM_LIMIT=384m
OD_API_TOKEN=sustituir_por_la_cadena_aleatoria_generada_arriba

Entonces empieza:

1
2
3

docker compose up -d
docker compose ps
docker compose logs --tail 100

El estándar de aceptación no es “container display” y está abierto. http://localhost:7456, confirme que la página se puede cargar, que se puede abrir la lista de elementos y que no hay repetidas migraciones de bases de datos, permisos o errores de token en el registro.

Descontinuación del servicio pero retención de datos:

1

docker compose down

docker compose down -v Los datos del volumen se eliminarán y sólo deben utilizarse para determinar que no se dispone de los artículos existentes.

Correr desde el código fuente

La ruta de origen requiere Node.js 24. Compruebe la versión primero:

1
2
3

node --version
corepack enable
corepack pnpm --version

El proyecto está actualmente bloqueado a las pnpm 10.33.x. Otros organizadores

1
2
3
4
5

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install
pnpm tools-dev run web

tools-dev muestra la dirección real y el puerto de desarrollo puede asignarse dinámicamente en lugar de ser siempre 3000. Si falla la instalación de dependencias, comprueba la versión principal de Node y la versión de pnpm elegida por Corepack; no borres el lockfile solo para forzar la resolución.

Conectar Codex o Claude Code

Open Design escaneará esta máquina. Después de seleccionar el CLI local, las tareas de generación se realizan en el directorio de proyecto gestionado, por lo que hay que confirmar tres cosas:

  • El agente está conectado y puede completar la solicitud mínima una vez en el terminal normal.
  • Agente ha leído y escribe permiso a los directorios de proyectos Open Design.
  • La política de sandbox o aprobación utilizada permite la creación de productos como HTML, CSS e imágenes.

Usted puede ejecutar cheques de sólo lectura primero en la terminal:

1
2

codex --version
claude --version

Que el comando de versión funcione no demuestra que la autenticación sea válida. Utiliza un directorio temporal para la primera prueba, pide al agente que lo lea y lo describa, y no uses un proyecto real de un cliente.

Generar el primer prototipo aceptable

Al crear un nuevo proyecto, utilice un breve breve límite:

1
2
3
4
5

Crea una página de destino de una sola página para supervisar el estado de un SaaS.
El público son equipos de desarrollo pequeños.
Incluye navegación superior, estado actual, incidentes recientes y una sección de precios.
Usa un tema oscuro y no utilices imágenes remotas.
Entrega HTML/CSS editable sin desplazamiento horizontal a una anchura móvil de 390px.

La primera generación sigue la siguiente orden de aceptación:

  1. Avance si puede cargarlo, en lugar de parar en el iframe en blanco.
  2. ¿Hay un archivo HTML real, CSS o componente en el archivo del proyecto?
  3. Cambia el texto del título a la vista previa para ser actualizado simultáneamente.
  4. Si los recursos están disponibles o no en la herramienta del desarrollador del navegador 404 o JavaScript anormal.
  5. Corta la vista a 390px, confirmando que no hay ningún desplazamiento horizontal y máscara de botón.
  6. Cerrar y reabrir el tema para confirmar que el archivo aún está en su lugar, en lugar de en una sesión.

Este grupo es más importante que lucir bien. Se distingue entre productos que realmente pueden seguir siendo desarrollados y previsualizaciones únicas.

Consultar plugins y elementos con CLI

Está instalado. od Después de CLI, compruebe el estado con una salida estructurada:

1
2
3
4

od plugin list --json
od plugin search "landing page"
od plugin info od-default
od project list --json

Ejemplo de aplicación de plugins predeterminados:

1

od plugin apply od-default --input brief="a one-page status dashboard"

Instalar acceso MCP para agente externo:

1

od mcp install codex

Reinicie el agente correspondiente después de la instalación y compruebe la lista de herramientas MCP. No asuma que el cliente ha recargado la configuración porque el comando ha devuelto con éxito.

¿Cómo juzgas un fallo común?

El agente indica que Open Design no está instalado

Ejecuta primero Get-Command codex y compara el resultado con el PATH heredado por el proceso de Open Design. Una aplicación de escritorio iniciada con la sesión puede no reconocer nuevas variables de entorno hasta reiniciarse.

La página se abre, pero la generación no termina

Comprueba si el registro de daemon y el agente están esperando para iniciar sesión, autorización del directorio o aprobación del comando. Si el agente también no funciona solo, debería arreglar al agente en lugar de recargar Open Design.

Docker página de inicio requiere Bearer Token

Confirma que el token de acceso está escrito en .env, vuelve a crear el contenedor y verifica que el proxy inverso no haya eliminado la cabecera Authorization.

1
2
3

docker compose config
docker compose up -d --force-recreate
docker compose logs --tail 200

Presentación docker compose config . No enviar la salida completa al tema público.

El resultado generado está vacío

Abre la herramienta del desarrollador para comprobar Console y Network. Si existe un archivo HTML pero una vista previa está en blanco, compruebe el archivo de entrada, ruta relativa de recurso, CSP y error de ejecución de script primero; si el archivo no se genera en absoluto, compruebe la llamada herramienta Agent.

Respaldo, actualización y recuperación

Directores de proyectos de respaldo y volúmenes de Docker antes de actualizar. La instalación de fuentes debe conservar las modificaciones locales:

1
2
3

git status --short
git pull --ff-only
corepack pnpm install

Si no se puede iniciar la actualización, se registra la versión actual de presentación o publicación, la versión Node/pnpm y el error completo, y la decisión se toma sobre la base de la nota de distribución. No utilice la eliminación de todo el espacio de trabajo como primer paso.

Alcance y limitaciones

Open Design resulta más útil para desarrolladores que quieren recibir archivos de diseño editables de un agente. No sustituye por completo a Figma ni resuelve automáticamente la coherencia de marca, la accesibilidad o la validación con usuarios reales. local-first tampoco significa totalmente sin conexión: los agentes y las API en la nube pueden enviar prompts y contenido del proyecto a sus proveedores.

Referencias: